add default keyords

add to docs

.gitattributes

@@ -1,5 +1,10 @@
-frontend/build/** linguist-generated
+classic/frontend/build/** linguist-generated
 
 **/poetry.lock linguist-generated
 
 docs/_javascript/** linguist-vendored
+
+# Exclude VCR cassettes from stats
+classic/forge/tests/vcr_cassettes/**/**.y*ml linguist-generated
+
+* text=auto

.github/CODEOWNERS

@@ -1,5 +1,7 @@
-.github/workflows/  @Significant-Gravitas/devops
-autogpt/   @Significant-Gravitas/maintainers
-forge/     @Significant-Gravitas/forge-maintainers
-benchmark/          @Significant-Gravitas/benchmark-maintainers
-frontend/           @Significant-Gravitas/frontend-maintainers
+* @Significant-Gravitas/maintainers
+.github/workflows/ @Significant-Gravitas/devops
+classic/forge/ @Significant-Gravitas/forge-maintainers
+classic/benchmark/ @Significant-Gravitas/benchmark-maintainers
+classic/frontend/ @Significant-Gravitas/frontend-maintainers
+autogpt_platform/infra @Significant-Gravitas/devops
+.github/CODEOWNERS @Significant-Gravitas/admins

.github/ISSUE_TEMPLATE/1.bug.yml

@@ -88,14 +88,16 @@ body:
 
   - type: dropdown
     attributes:
-      label: Do you use OpenAI GPT-3 or GPT-4?
+      label: What LLM Provider do you use?
       description: >
         If you are using AutoGPT with `SMART_LLM=gpt-3.5-turbo`, your problems may be caused by
         the [limitations](https://github.com/Significant-Gravitas/AutoGPT/issues?q=is%3Aissue+label%3A%22AI+model+limitation%22) of GPT-3.5.
       options:
-        - GPT-3.5
-        - GPT-4
-        - GPT-4(32k)
+        - Azure
+        - Groq
+        - Anthropic
+        - Llamafile
+        - Other (detail in issue)
     validations:
       required: true
 
@@ -126,6 +128,13 @@ body:
             label: Specify the area
             description: Please specify the area you think is best related to the issue.
 
+  - type: input
+    attributes:
+      label: What commit or version are you using?
+      description: It is helpful for us to reproduce to know what version of the software you were using when this happened. Please run `git log -n 1 --pretty=format:"%H"` to output the full commit hash.
+    validations:
+      required: true
+
   - type: textarea
     attributes:
       label: Describe your issue.

.github/PULL_REQUEST_TEMPLATE.md

@@ -6,26 +6,18 @@
 
 <!-- Concisely describe all of the changes made in this pull request: -->
 
-### PR Quality Scorecard ✨
+
+### Testing 🔍
+> [!NOTE] 
+Only for the new autogpt platform, currently in autogpt_platform/
 
 <!--
-Check out our contribution guide:
-https://github.com/Significant-Gravitas/AutoGPT/wiki/Contributing
-
-1. Avoid duplicate work, issues, PRs etc.
-2. Also consider contributing something other than code; see the [contribution guide]
-   for options.
-3. Clearly explain your changes.
-4. Avoid making unnecessary changes, especially if they're purely based on personal
-   preferences. Doing so is the maintainers' job. ;-)
+Please make sure your changes have been tested and are in good working condition. 
+Here is a list of our critical paths, if you need some inspiration on what and how to test:
 -->
 
-- [x] Have you used the PR description template? &ensp; `+2 pts`
-- [ ] Is your pull request atomic, focusing on a single change? &ensp; `+5 pts`
-- [ ] Have you linked the GitHub issue(s) that this PR addresses? &ensp; `+5 pts`
-- [ ] Have you documented your changes clearly and comprehensively? &ensp; `+5 pts`
-- [ ] Have you changed or added a feature? &ensp; `-4 pts`
-  - [ ] Have you added/updated corresponding documentation? &ensp; `+4 pts`
-  - [ ] Have you added/updated corresponding integration tests? &ensp; `+5 pts`
-- [ ] Have you changed the behavior of AutoGPT? &ensp; `-5 pts`
-  - [ ] Have you also run `agbenchmark` to verify that these changes do not regress performance? &ensp; `+10 pts`
+- Create from scratch and execute an agent with at least 3 blocks
+- Import an agent from file upload, and confirm it executes correctly
+- Upload agent to marketplace
+- Import an agent from marketplace and confirm it executes correctly
+- Edit an agent from monitor, and confirm it executes correctly

.github/labeler.yml

@@ -1,19 +1,27 @@
 AutoGPT Agent:
 - changed-files:
-  - any-glob-to-any-file: autogpt/**
+  - any-glob-to-any-file: classic/original_autogpt/**
 
 Forge:
 - changed-files:
-  - any-glob-to-any-file: forge/**
+  - any-glob-to-any-file: classic/forge/**
 
 Benchmark:
 - changed-files:
-  - any-glob-to-any-file: benchmark/**
+  - any-glob-to-any-file: classic/benchmark/**
 
 Frontend:
 - changed-files:
-  - any-glob-to-any-file: frontend/**
+  - any-glob-to-any-file: classic/frontend/**
 
 documentation:
 - changed-files:
   - any-glob-to-any-file: docs/**
+
+Builder:
+- changed-files:
+  - any-glob-to-any-file: autogpt_platform/autogpt_builder/**
+
+Server:
+- changed-files:
+  - any-glob-to-any-file: autogpt_platform/autogpt_server/**

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

@@ -1,268 +0,0 @@
-name: AutoGPT Server CI
-
-on:
-  push:
-    branches: [master, development, ci-test*]
-    paths:
-      - ".github/workflows/autogpt-server-ci.yml"
-      - "rnd/autogpt_server/**"
-      - "!autogpt/tests/vcr_cassettes"
-  pull_request:
-    branches: [master, development, release-*]
-    paths:
-      - ".github/workflows/autogpt-server-ci.yml"
-      - "rnd/autogpt_server/**"
-      - "!autogpt/tests/vcr_cassettes"
-
-concurrency:
-  group: ${{ format('autogpt-server-ci-{0}', github.head_ref && format('{0}-{1}', github.event_name, github.event.pull_request.number) || github.sha) }}
-  cancel-in-progress: ${{ startsWith(github.event_name, 'pull_request') }}
-
-defaults:
-  run:
-    shell: bash
-    working-directory: rnd/autogpt_server
-
-jobs:
-  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' }}
-
-    steps:
-      # 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 ${{ matrix.python-version }}
-        uses: actions/setup-python@v5
-        with:
-          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: ${{ runner.os == 'macOS' && '~/Library/Caches/pypoetry' || '~/.cache/pypoetry' }}
-          key: poetry-${{ runner.os }}-${{ hashFiles('rnd/autogpt_server/poetry.lock') }}
-
-      - 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
-
-      - name: Generate Prisma Client
-        run: poetry run prisma generate
-
-      - name: Run Database Migrations
-        run: poetry run prisma migrate dev --name updates
-
-      - name: Run pytest with coverage
-        run: |
-          poetry run pytest -vv \
-            test
-        env:
-          CI: true
-          PLAIN_OUTPUT: True
-
-      # - name: Upload coverage reports to Codecov
-      #   uses: codecov/codecov-action@v4
-      #   with:
-      #     token: ${{ secrets.CODECOV_TOKEN }}
-      #     flags: autogpt-server,${{ runner.os }}
-
-  build:
-    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' }}
-
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-          submodules: true
-
-      - name: Set up Python ${{ matrix.python-version }}
-        uses: actions/setup-python@v5
-        with:
-          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: ${{ runner.os == 'macOS' && '~/Library/Caches/pypoetry' || '~/.cache/pypoetry' }}
-          key: poetry-${{ runner.os }}-${{ hashFiles('rnd/autogpt_server/poetry.lock') }}
-
-      - 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
-
-      - name: Generate Prisma Client
-        run: poetry run prisma generate
-
-      - name: Run Database Migrations
-        run: poetry run prisma migrate dev --name updates
-
-      - name: install rpm
-        if: matrix.platform-os == 'ubuntu'
-        run: sudo apt-get install -y alien fakeroot rpm
-
-      - name: Build distribution
-        run: |
-          case "${{ matrix.platform-os }}" in
-            "macos" | "macos-arm64")
-              ${MAC_COMMAND}
-              ;;
-            "windows")
-              ${WINDOWS_COMMAND}
-              ;;
-            *)
-              ${LINUX_COMMAND}
-              ;;
-          esac
-        env:
-          MAC_COMMAND: "poetry run poe dist_dmg"
-          WINDOWS_COMMAND: "poetry run poe dist_msi"
-          LINUX_COMMAND: "poetry run poe dist_appimage"
-
-      # break this into seperate steps each with their own name that matches the file
-      - name: Upload App artifact
-        uses: actions/upload-artifact@v4
-        with:
-          name: autogptserver-app-${{ matrix.platform-os }}
-          path: /Users/runner/work/AutoGPT/AutoGPT/rnd/autogpt_server/build/*.app
-
-      - name: Upload dmg artifact
-        uses: actions/upload-artifact@v4
-        with:
-          name: autogptserver-dmg-${{ matrix.platform-os }}
-          path: /Users/runner/work/AutoGPT/AutoGPT/rnd/autogpt_server/build/AutoGPTServer.dmg
-
-      - name: Upload msi artifact
-        uses: actions/upload-artifact@v4
-        with:
-          name: autogptserver-msi-${{ matrix.platform-os }}
-          path: D:\a\AutoGPT\AutoGPT\rnd\autogpt_server\dist\*.msi
-
-      - name: Upload deb artifact
-        uses: actions/upload-artifact@v4
-        with:
-          name: autogptserver-deb-${{ matrix.platform-os }}
-          path: /Users/runner/work/AutoGPT/AutoGPT/rnd/autogpt_server/build/*.deb
-
-      - name: Upload rpm artifact
-        uses: actions/upload-artifact@v4
-        with:
-          name: autogptserver-rpm-${{ matrix.platform-os }}
-          path: /Users/runner/work/AutoGPT/AutoGPT/rnd/autogpt_server/build/*.rpm
-
-      - name: Upload tar.gz artifact
-        uses: actions/upload-artifact@v4
-        with:
-          name: autogptserver-tar.gz-${{ matrix.platform-os }}
-          path: /Users/runner/work/AutoGPT/AutoGPT/rnd/autogpt_server/build/*.tar.gz
-
-      - name: Upload zip artifact
-        uses: actions/upload-artifact@v4
-        with:
-          name: autogptserver-zip-${{ matrix.platform-os }}
-          path: /Users/runner/work/AutoGPT/AutoGPT/rnd/autogpt_server/build/*.zip
-
-      - name: Upload pkg artifact
-        uses: actions/upload-artifact@v4
-        with:
-          name: autogptserver-pkg-${{ matrix.platform-os }}
-          path: /Users/runner/work/AutoGPT/AutoGPT/rnd/autogpt_server/build/*.pkg
-
-      - name: Upload AppImage artifact
-        uses: actions/upload-artifact@v4
-        with:
-          name: autogptserver-AppImage-${{ matrix.platform-os }}
-          path: /Users/runner/work/AutoGPT/AutoGPT/rnd/autogpt_server/build/*.AppImage

.github/workflows/autogpts-benchmark.yml

@@ -1,97 +0,0 @@
-name: AutoGPTs Nightly Benchmark
-
-on:
-  workflow_dispatch:
-  schedule:
-    - cron: '0 2 * * *'
-
-jobs:
-  benchmark:
-    permissions:
-      contents: write
-    runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        agent-name: [ autogpt ]
-      fail-fast: false
-    timeout-minutes: 120
-    env:
-      min-python-version: '3.10'
-      REPORTS_BRANCH: data/benchmark-reports
-      REPORTS_FOLDER: ${{ format('benchmark/reports/{0}', matrix.agent-name) }}
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-          submodules: true
-
-      - name: Set up Python ${{ env.min-python-version }}
-        uses: actions/setup-python@v5
-        with:
-          python-version: ${{ env.min-python-version }}
-
-      - name: Install Poetry
-        run: curl -sSL https://install.python-poetry.org | python -
-
-      - name: Prepare reports folder
-        run: mkdir -p ${{ env.REPORTS_FOLDER }}
-
-      - run: poetry -C benchmark install
-
-      - name: Benchmark ${{ matrix.agent-name }}
-        run: |
-          ./run agent start ${{ matrix.agent-name }}
-          cd ${{ matrix.agent-name }}
-
-          set +e  # Do not quit on non-zero exit codes
-          poetry run agbenchmark run -N 3 \
-            --test=ReadFile \
-            --test=BasicRetrieval --test=RevenueRetrieval2 \
-            --test=CombineCsv --test=LabelCsv --test=AnswerQuestionCombineCsv \
-            --test=UrlShortener --test=TicTacToe --test=Battleship \
-            --test=WebArenaTask_0 --test=WebArenaTask_21 --test=WebArenaTask_124 \
-            --test=WebArenaTask_134 --test=WebArenaTask_163
-
-            # Convert exit code 1 (some challenges failed) to exit code 0
-            if [ $? -eq 0 ] || [ $? -eq 1 ]; then
-              exit 0
-            else
-              exit $?
-            fi
-        env:
-          AGENT_NAME: ${{ matrix.agent-name }}
-          OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
-          REQUESTS_CA_BUNDLE: /etc/ssl/certs/ca-certificates.crt
-          REPORTS_FOLDER: ${{ format('../../{0}', env.REPORTS_FOLDER) }}  # account for changed workdir
-
-          TELEMETRY_ENVIRONMENT: autogpt-benchmark-ci
-          TELEMETRY_OPT_IN: ${{ github.ref_name == 'master' }}
-
-      - name: Push reports to data branch
-        run: |
-          # BODGE: Remove success_rate.json and regression_tests.json to avoid conflicts on checkout
-          rm ${{ env.REPORTS_FOLDER }}/*.json
-
-          # Find folder with newest (untracked) report in it
-          report_subfolder=$(find ${{ env.REPORTS_FOLDER }} -type f -name 'report.json' \
-            | xargs -I {} dirname {} \
-            | xargs -I {} git ls-files --others --exclude-standard {} \
-            | xargs -I {} dirname {} \
-            | sort -u)
-          json_report_file="$report_subfolder/report.json"
-
-          # Convert JSON report to Markdown
-          markdown_report_file="$report_subfolder/report.md"
-          poetry -C benchmark run benchmark/reports/format.py "$json_report_file" > "$markdown_report_file"
-          cat "$markdown_report_file" >> $GITHUB_STEP_SUMMARY
-
-          git config --global user.name 'GitHub Actions'
-          git config --global user.email 'github-actions@agpt.co'
-          git fetch origin ${{ env.REPORTS_BRANCH }}:${{ env.REPORTS_BRANCH }} \
-            && git checkout ${{ env.REPORTS_BRANCH }} \
-            || git checkout --orphan ${{ env.REPORTS_BRANCH }}
-          git reset --hard
-          git add ${{ env.REPORTS_FOLDER }}
-          git commit -m "Benchmark report for ${{ matrix.agent-name }} @ $(date +'%Y-%m-%d')" \
-            && git push origin ${{ env.REPORTS_BRANCH }}

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

@@ -1,25 +1,25 @@
-name: Forge CI
+name: Classic - AutoGPT CI
 
 on:
   push:
     branches: [ master, development, ci-test* ]
     paths:
-      - '.github/workflows/forge-ci.yml'
-      - 'forge/**'
+      - '.github/workflows/classic-autogpt-ci.yml'
+      - 'classic/original_autogpt/**'
   pull_request:
     branches: [ master, development, release-* ]
     paths:
-      - '.github/workflows/forge-ci.yml'
-      - 'forge/**'
+      - '.github/workflows/classic-autogpt-ci.yml'
+      - 'classic/original_autogpt/**'
 
 concurrency:
-  group: ${{ format('forge-ci-{0}', github.head_ref && format('{0}-{1}', github.event_name, github.event.pull_request.number) || github.sha) }}
+  group: ${{ format('classic-autogpt-ci-{0}', github.head_ref && format('{0}-{1}', github.event_name, github.event.pull_request.number) || github.sha) }}
   cancel-in-progress: ${{ startsWith(github.event_name, 'pull_request') }}
 
 defaults:
   run:
     shell: bash
-    working-directory: forge
+    working-directory: classic/original_autogpt
 
 jobs:
   test:
@@ -66,18 +66,27 @@ jobs:
           fetch-depth: 0
           submodules: true
 
+      - name: Configure git user Auto-GPT-Bot
+        run: |
+          git config --global user.name "Auto-GPT-Bot"
+          git config --global user.email "github-bot@agpt.co"
+
       - name: Set up Python ${{ matrix.python-version }}
         uses: actions/setup-python@v5
         with:
           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: ${{ runner.os == 'macOS' && '~/Library/Caches/pypoetry' || '~/.cache/pypoetry' }}
-          key: poetry-${{ runner.os }}-${{ hashFiles('forge/poetry.lock') }}
+          key: poetry-${{ runner.os }}-${{ hashFiles('classic/original_autogpt/poetry.lock') }}
 
       - name: Install Poetry (Unix)
         if: runner.os != 'Windows'
@@ -104,9 +113,9 @@ jobs:
       - name: Run pytest with coverage
         run: |
           poetry run pytest -vv \
-            --cov=forge --cov-branch --cov-report term-missing --cov-report xml \
-            --durations=10 \
-            forge
+            --cov=autogpt --cov-branch --cov-report term-missing --cov-report xml \
+            --numprocesses=logical --durations=10 \
+            tests/unit tests/integration
         env:
           CI: true
           PLAIN_OUTPUT: True
@@ -119,11 +128,11 @@ jobs:
         uses: codecov/codecov-action@v4
         with:
           token: ${{ secrets.CODECOV_TOKEN }}
-          flags: forge,${{ runner.os }}
+          flags: autogpt-agent,${{ runner.os }}
 
       - name: Upload logs to artifact
         if: always()
         uses: actions/upload-artifact@v4
         with:
           name: test-logs
-          path: forge/logs/
+          path: classic/original_autogpt/logs/

.github/workflows/classic-autogpt-docker-cache-clean.yml

@@ -1,4 +1,4 @@
-name: Purge Auto-GPT Docker CI cache
+name: Classic - Purge Auto-GPT Docker CI cache
 
 on:
   schedule:
@@ -25,7 +25,8 @@ jobs:
       name: Build image
       uses: docker/build-push-action@v5
       with:
-        file: Dockerfile.autogpt
+        context: classic/
+        file: classic/Dockerfile.autogpt
         build-args: BUILD_TYPE=${{ matrix.build-type }}
         load: true    # save to docker images
         # use GHA cache as read-only

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

@@ -1,26 +1,26 @@
-name: AutoGPT Docker CI
+name: Classic - AutoGPT Docker CI
 
 on:
   push:
     branches: [ master, development ]
     paths:
-      - '.github/workflows/autogpt-docker-ci.yml'
-      - 'autogpt/**'
-      - '!autogpt/tests/vcr_cassettes'
+      - '.github/workflows/classic-autogpt-docker-ci.yml'
+      - 'classic/original_autogpt/**'
+      - 'classic/forge/**'
   pull_request:
     branches: [ master, development, release-* ]
     paths:
-      - '.github/workflows/autogpt-docker-ci.yml'
-      - 'autogpt/**'
-      - '!autogpt/tests/vcr_cassettes'
+      - '.github/workflows/classic-autogpt-docker-ci.yml'
+      - 'classic/original_autogpt/**'
+      - 'classic/forge/**'
 
 concurrency:
-  group: ${{ format('autogpt-docker-ci-{0}', github.head_ref && format('pr-{0}', github.event.pull_request.number) || github.sha) }}
+  group: ${{ format('classic-autogpt-docker-ci-{0}', github.head_ref && format('pr-{0}', github.event.pull_request.number) || github.sha) }}
   cancel-in-progress: ${{ github.event_name == 'pull_request' }}
 
 defaults:
   run:
-    working-directory: autogpt
+    working-directory: classic/original_autogpt
 
 env:
   IMAGE_NAME: auto-gpt
@@ -49,7 +49,8 @@ jobs:
       name: Build image
       uses: docker/build-push-action@v5
       with:
-        file: Dockerfile.autogpt
+        context: classic/
+        file: classic/Dockerfile.autogpt
         build-args: BUILD_TYPE=${{ matrix.build-type }}
         tags: ${{ env.IMAGE_NAME }}
         labels: GIT_REVISION=${{ github.sha }}
@@ -118,7 +119,8 @@ jobs:
         name: Build image
         uses: docker/build-push-action@v5
         with:
-          file: Dockerfile.autogpt
+          context: classic/
+          file: classic/Dockerfile.autogpt
           build-args: BUILD_TYPE=dev  # include pytest
           tags: >
             ${{ env.IMAGE_NAME }},

.github/workflows/classic-autogpt-docker-release.yml

@@ -1,4 +1,4 @@
-name: AutoGPT Docker Release
+name: Classic - AutoGPT Docker Release
 
 on:
   release:
@@ -44,6 +44,7 @@ jobs:
       name: Build image
       uses: docker/build-push-action@v5
       with:
+        context: classic/
         file: Dockerfile.autogpt
         build-args: BUILD_TYPE=release
         load: true    # save to docker images

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

@@ -1,4 +1,4 @@
-name: Agent smoke tests
+name: Classic - Agent smoke tests
 
 on:
   workflow_dispatch:
@@ -7,32 +7,37 @@ on:
   push:
     branches: [ master, development, ci-test* ]
     paths:
-      - '.github/workflows/autogpts-ci.yml'
-      - 'autogpt/**'
-      - 'forge/**'
-      - 'benchmark/**'
-      - 'run'
-      - 'cli.py'
-      - 'setup.py'
+      - '.github/workflows/classic-autogpts-ci.yml'
+      - 'classic/original_autogpt/**'
+      - 'classic/forge/**'
+      - 'classic/benchmark/**'
+      - 'classic/run'
+      - 'classic/cli.py'
+      - 'classic/setup.py'
       - '!**/*.md'
   pull_request:
     branches: [ master, development, release-* ]
     paths:
-      - '.github/workflows/autogpts-ci.yml'
-      - 'autogpt/**'
-      - 'forge/**'
-      - 'benchmark/**'
-      - 'run'
-      - 'cli.py'
-      - 'setup.py'
+      - '.github/workflows/classic-autogpts-ci.yml'
+      - 'classic/original_autogpt/**'
+      - 'classic/forge/**'
+      - 'classic/benchmark/**'
+      - 'classic/run'
+      - 'classic/cli.py'
+      - 'classic/setup.py'
       - '!**/*.md'
 
+defaults:
+  run:
+    shell: bash
+    working-directory: classic
+
 jobs:
   serve-agent-protocol:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        agent-name: [ autogpt ]
+        agent-name: [ original_autogpt ]
       fail-fast: false
     timeout-minutes: 20
     env:
@@ -50,7 +55,7 @@ jobs:
           python-version: ${{ env.min-python-version }}
 
       - name: Install Poetry
-        working-directory: ./${{ matrix.agent-name }}/
+        working-directory: ./classic/${{ matrix.agent-name }}/
         run: |
           curl -sSL https://install.python-poetry.org | python -
 

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

@@ -1,18 +1,18 @@
-name: AGBenchmark CI
+name: Classic - AGBenchmark CI
 
 on:
   push:
     branches: [ master, development, ci-test* ]
     paths:
-      - 'benchmark/**'
-      - .github/workflows/benchmark-ci.yml
-      - '!benchmark/reports/**'
+      - 'classic/benchmark/**'
+      - '!classic/benchmark/reports/**'
+      - .github/workflows/classic-benchmark-ci.yml
   pull_request:
     branches: [ master, development, release-* ]
     paths:
-      - 'benchmark/**'
-      - '!benchmark/reports/**'
-      - .github/workflows/benchmark-ci.yml
+      - 'classic/benchmark/**'
+      - '!classic/benchmark/reports/**'
+      - .github/workflows/classic-benchmark-ci.yml
 
 concurrency:
   group: ${{ format('benchmark-ci-{0}', github.head_ref && format('{0}-{1}', github.event_name, github.event.pull_request.number) || github.sha) }}
@@ -39,7 +39,7 @@ jobs:
     defaults:
       run:
         shell: bash
-        working-directory: benchmark
+        working-directory: classic/benchmark
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
@@ -58,7 +58,7 @@ jobs:
         uses: actions/cache@v4
         with:
           path: ${{ runner.os == 'macOS' && '~/Library/Caches/pypoetry' || '~/.cache/pypoetry' }}
-          key: poetry-${{ runner.os }}-${{ hashFiles('benchmark/poetry.lock') }}
+          key: poetry-${{ runner.os }}-${{ hashFiles('classic/benchmark/poetry.lock') }}
 
       - name: Install Poetry (Unix)
         if: runner.os != 'Windows'
@@ -122,7 +122,7 @@ jobs:
           curl -sSL https://install.python-poetry.org | python -
 
       - name: Run regression tests
-        working-directory: .
+        working-directory: classic
         run: |
           ./run agent start ${{ matrix.agent-name }}
           cd ${{ matrix.agent-name }}
@@ -155,7 +155,7 @@ jobs:
 
           poetry run agbenchmark --mock
 
-          CHANGED=$(git diff --name-only | grep -E '(agbenchmark/challenges)|(../frontend/assets)') || echo "No diffs"
+          CHANGED=$(git diff --name-only | grep -E '(agclassic/benchmark/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"

.github/workflows/classic-benchmark_publish_package.yml

@@ -1,4 +1,4 @@
-name: Publish to PyPI
+name: Classic - Publish to PyPI
 
 on:
   workflow_dispatch:
@@ -21,21 +21,21 @@ jobs:
         python-version: 3.8
 
     - name: Install Poetry
-      working-directory: ./benchmark/
+      working-directory: ./classic/benchmark/
       run: |
         curl -sSL https://install.python-poetry.org | python3 -
         echo "$HOME/.poetry/bin" >> $GITHUB_PATH
 
     - name: Build project for distribution
-      working-directory: ./benchmark/
+      working-directory: ./classic/benchmark/
       run: poetry build
 
     - name: Install dependencies
-      working-directory: ./benchmark/
+      working-directory: ./classic/benchmark/
       run: poetry install
 
     - name: Check Version
-      working-directory: ./benchmark/
+      working-directory: ./classic/benchmark/
       id: check-version
       run: |
         echo version=$(poetry version --short) >> $GITHUB_OUTPUT
@@ -43,7 +43,7 @@ jobs:
     - name: Create Release
       uses: ncipollo/release-action@v1
       with:
-        artifacts: "benchmark/dist/*"
+        artifacts: "classic/benchmark/dist/*"
         token: ${{ secrets.GITHUB_TOKEN }}
         draft: false
         generateReleaseNotes: false
@@ -51,5 +51,5 @@ jobs:
         commit: master
 
     - name: Build and publish
-      working-directory: ./benchmark/
+      working-directory: ./classic/benchmark/
       run: poetry publish -u __token__ -p ${{ secrets.PYPI_API_TOKEN }}

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

@@ -1,27 +1,27 @@
-name: AutoGPT CI
+name: Classic - Forge CI
 
 on:
   push:
     branches: [ master, development, ci-test* ]
     paths:
-      - '.github/workflows/autogpt-ci.yml'
-      - 'autogpt/**'
-      - '!autogpt/tests/vcr_cassettes'
+      - '.github/workflows/classic-forge-ci.yml'
+      - 'classic/forge/**'
+      - '!classic/forge/tests/vcr_cassettes'
   pull_request:
     branches: [ master, development, release-* ]
     paths:
-      - '.github/workflows/autogpt-ci.yml'
-      - 'autogpt/**'
-      - '!autogpt/tests/vcr_cassettes'
+      - '.github/workflows/classic-forge-ci.yml'
+      - 'classic/forge/**'
+      - '!classic/forge/tests/vcr_cassettes'
 
 concurrency:
-  group: ${{ format('autogpt-ci-{0}', github.head_ref && format('{0}-{1}', github.event_name, github.event.pull_request.number) || github.sha) }}
+  group: ${{ format('forge-ci-{0}', github.head_ref && format('{0}-{1}', github.event_name, github.event.pull_request.number) || github.sha) }}
   cancel-in-progress: ${{ startsWith(github.event_name, 'pull_request') }}
 
 defaults:
   run:
     shell: bash
-    working-directory: autogpt
+    working-directory: classic/forge
 
 jobs:
   test:
@@ -68,11 +68,6 @@ jobs:
           fetch-depth: 0
           submodules: true
 
-      - name: Configure git user Auto-GPT-Bot
-        run: |
-          git config --global user.name "Auto-GPT-Bot"
-          git config --global user.email "github-bot@agpt.co"
-
       - name: Checkout cassettes
         if: ${{ startsWith(github.event_name, 'pull_request') }}
         env:
@@ -109,17 +104,13 @@ jobs:
         with:
           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: ${{ runner.os == 'macOS' && '~/Library/Caches/pypoetry' || '~/.cache/pypoetry' }}
-          key: poetry-${{ runner.os }}-${{ hashFiles('autogpt/poetry.lock') }}
+          key: poetry-${{ runner.os }}-${{ hashFiles('classic/forge/poetry.lock') }}
 
       - name: Install Poetry (Unix)
         if: runner.os != 'Windows'
@@ -146,9 +137,9 @@ jobs:
       - name: Run pytest with coverage
         run: |
           poetry run pytest -vv \
-            --cov=autogpt --cov-branch --cov-report term-missing --cov-report xml \
-            --numprocesses=logical --durations=10 \
-            tests/unit tests/integration
+            --cov=forge --cov-branch --cov-report term-missing --cov-report xml \
+            --durations=10 \
+            forge
         env:
           CI: true
           PLAIN_OUTPUT: True
@@ -161,7 +152,7 @@ jobs:
         uses: codecov/codecov-action@v4
         with:
           token: ${{ secrets.CODECOV_TOKEN }}
-          flags: autogpt-agent,${{ runner.os }}
+          flags: forge,${{ runner.os }}
 
       - id: setup_git_auth
         name: Set up git token authentication
@@ -242,4 +233,4 @@ jobs:
         uses: actions/upload-artifact@v4
         with:
           name: test-logs
-          path: autogpt/logs/
+          path: classic/forge/logs/

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

@@ -1,4 +1,4 @@
-name: Frontend CI/CD
+name: Classic - Frontend CI/CD
 
 on:
   push:
@@ -7,11 +7,11 @@ on:
       - development
       - 'ci-test*' # This will match any branch that starts with "ci-test"
     paths:
-      - 'frontend/**'
+      - 'classic/frontend/**'
       - '.github/workflows/frontend-ci.yml'
   pull_request:
     paths:
-      - 'frontend/**'
+      - 'classic/frontend/**'
       - '.github/workflows/frontend-ci.yml'
 
 jobs:
@@ -34,7 +34,7 @@ jobs:
 
     - name: Build Flutter to Web
       run: |
-        cd frontend
+        cd classic/frontend
         flutter build web --base-href /app/
 
     # - name: Commit and Push to ${{ env.BUILD_BRANCH }}
@@ -42,7 +42,7 @@ jobs:
     #   run: |
     #     git config --local user.email "action@github.com"
     #     git config --local user.name "GitHub Action"
-    #     git add frontend/build/web
+    #     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 }}
@@ -51,7 +51,7 @@ jobs:
       if: github.event_name == 'push'
       uses: peter-evans/create-pull-request@v6
       with:
-        add-paths: frontend/build/web
+        add-paths: classic/frontend/build/web
         base: ${{ github.ref_name }}
         branch: ${{ env.BUILD_BRANCH }}
         delete-branch: true

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

@@ -1,24 +1,24 @@
-name: Python checks
+name: Classic - Python checks
 
 on:
   push:
     branches: [ master, development, ci-test* ]
     paths:
       - '.github/workflows/lint-ci.yml'
-      - 'autogpt/**'
-      - 'forge/**'
-      - 'benchmark/**'
+      - 'classic/original_autogpt/**'
+      - 'classic/forge/**'
+      - 'classic/benchmark/**'
       - '**.py'
-      - '!autogpt/tests/vcr_cassettes'
+      - '!classic/forge/tests/vcr_cassettes'
   pull_request:
     branches: [ master, development, release-* ]
     paths:
       - '.github/workflows/lint-ci.yml'
-      - 'autogpt/**'
-      - 'forge/**'
-      - 'benchmark/**'
+      - 'classic/original_autogpt/**'
+      - 'classic/forge/**'
+      - 'classic/benchmark/**'
       - '**.py'
-      - '!autogpt/tests/vcr_cassettes'
+      - '!classic/forge/tests/vcr_cassettes'
 
 concurrency:
   group: ${{ format('lint-ci-{0}', github.head_ref && format('{0}-{1}', github.event_name, github.event.pull_request.number) || github.sha) }}
@@ -40,18 +40,18 @@ jobs:
         uses: dorny/paths-filter@v3
         with:
           filters: |
-            autogpt:
-              - autogpt/autogpt/**
-              - autogpt/tests/**
-              - autogpt/poetry.lock
+            original_autogpt:
+              - classic/original_autogpt/autogpt/**
+              - classic/original_autogpt/tests/**
+              - classic/original_autogpt/poetry.lock
             forge:
-              - forge/forge/**
-              - forge/tests/**
-              - forge/poetry.lock
+              - classic/forge/forge/**
+              - classic/forge/tests/**
+              - classic/forge/poetry.lock
             benchmark:
-              - benchmark/agbenchmark/**
-              - benchmark/tests/**
-              - benchmark/poetry.lock
+              - classic/benchmark/agbenchmark/**
+              - classic/benchmark/tests/**
+              - classic/benchmark/poetry.lock
     outputs:
       changed-parts: ${{ steps.changes-in.outputs.changes }}
 
@@ -89,23 +89,23 @@ jobs:
       # Install dependencies
 
       - name: Install Python dependencies
-        run: poetry -C ${{ matrix.sub-package }} install
+        run: poetry -C classic/${{ matrix.sub-package }} install
 
       # Lint
 
       - name: Lint (isort)
         run: poetry run isort --check .
-        working-directory: ${{ matrix.sub-package }}
+        working-directory: classic/${{ matrix.sub-package }}
 
       - name: Lint (Black)
         if: success() || failure()
         run: poetry run black --check .
-        working-directory: ${{ matrix.sub-package }}
+        working-directory: classic/${{ matrix.sub-package }}
 
       - name: Lint (Flake8)
         if: success() || failure()
         run: poetry run flake8 .
-        working-directory: ${{ matrix.sub-package }}
+        working-directory: classic/${{ matrix.sub-package }}
 
   types:
     needs: get-changed-parts
@@ -141,11 +141,11 @@ jobs:
       # Install dependencies
 
       - name: Install Python dependencies
-        run: poetry -C ${{ matrix.sub-package }} install
+        run: poetry -C classic/${{ matrix.sub-package }} install
 
       # Typecheck
 
       - name: Typecheck
         if: success() || failure()
         run: poetry run pyright
-        working-directory: ${{ matrix.sub-package }}
+        working-directory: classic/${{ matrix.sub-package }}

.github/workflows/hackathon.yml

@@ -1,133 +0,0 @@
-name: Hackathon
-
-on:
-  workflow_dispatch:
-    inputs:
-      agents:
-        description: "Agents to run (comma-separated)"
-        required: false
-        default: "autogpt" # Default agents if none are specified
-
-jobs:
-  matrix-setup:
-    runs-on: ubuntu-latest
-    # Service containers to run with `matrix-setup`
-    services:
-      # Label used to access the service container
-      postgres:
-        # Docker Hub image
-        image: postgres
-        # Provide the password for postgres
-        env:
-          POSTGRES_PASSWORD: postgres
-        # Set health checks to wait until postgres has started
-        options: >-
-          --health-cmd pg_isready
-          --health-interval 10s
-          --health-timeout 5s
-          --health-retries 5
-        ports:
-          # Maps tcp port 5432 on service container to the host
-          - 5432:5432
-    outputs:
-      matrix: ${{ steps.set-matrix.outputs.matrix }}
-      env-name: ${{ steps.set-matrix.outputs.env-name }}
-    steps:
-      - id: set-matrix
-        run: |
-          if [ "${{ github.event_name }}" == "schedule" ]; then
-            echo "::set-output name=env-name::production"
-            echo "::set-output name=matrix::[ 'irrelevant']"
-          elif [ "${{ github.event_name }}" == "workflow_dispatch" ]; then
-            IFS=',' read -ra matrix_array <<< "${{ github.event.inputs.agents }}"
-            matrix_string="[ \"$(echo "${matrix_array[@]}" | sed 's/ /", "/g')\" ]"
-            echo "::set-output name=env-name::production"
-            echo "::set-output name=matrix::$matrix_string"
-          else
-            echo "::set-output name=env-name::testing"
-            echo "::set-output name=matrix::[ 'irrelevant' ]"
-          fi
-
-  tests:
-    environment:
-      name: "${{ needs.matrix-setup.outputs.env-name }}"
-    needs: matrix-setup
-    env:
-      min-python-version: "3.10"
-    name: "${{ matrix.agent-name }}"
-    runs-on: ubuntu-latest
-    services:
-      # Label used to access the service container
-      postgres:
-        # Docker Hub image
-        image: postgres
-        # Provide the password for postgres
-        env:
-          POSTGRES_PASSWORD: postgres
-        # Set health checks to wait until postgres has started
-        options: >-
-          --health-cmd pg_isready
-          --health-interval 10s
-          --health-timeout 5s
-          --health-retries 5
-        ports:
-          # Maps tcp port 5432 on service container to the host
-          - 5432:5432
-    timeout-minutes: 50
-    strategy:
-      fail-fast: false
-      matrix:
-        agent-name: ${{fromJson(needs.matrix-setup.outputs.matrix)}}
-    steps:
-      - name: Print Environment Name
-        run: |
-          echo "Matrix Setup Environment Name: ${{ needs.matrix-setup.outputs.env-name }}"
-
-      - name: Check Docker Container
-        id: check
-        run: docker ps
-
-      - name: Checkout repository
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-          submodules: true
-
-      - name: Set up Python ${{ env.min-python-version }}
-        uses: actions/setup-python@v5
-        with:
-          python-version: ${{ env.min-python-version }}
-
-      - id: get_date
-        name: Get date
-        run: echo "date=$(date +'%Y-%m-%d')" >> $GITHUB_OUTPUT
-
-      - name: Install Poetry
-        run: |
-          curl -sSL https://install.python-poetry.org | python -
-
-      - name: Install Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: v18.15
-
-      - name: Run benchmark
-        run: |
-          link=$(jq -r '.["github_repo_url"]' arena/$AGENT_NAME.json)
-          branch=$(jq -r '.["branch_to_benchmark"]' arena/$AGENT_NAME.json)
-          git clone "$link" -b "$branch" "$AGENT_NAME"
-          cd $AGENT_NAME
-          cp ./$AGENT_NAME/.env.example ./$AGENT_NAME/.env || echo "file not found"
-          ./run agent start $AGENT_NAME
-          cd ../benchmark
-          poetry install
-          poetry run agbenchmark --no-dep
-        env:
-          OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
-          SERP_API_KEY: ${{ secrets.SERP_API_KEY }}
-          SERPAPI_API_KEY: ${{ secrets.SERP_API_KEY }}
-          WEAVIATE_API_KEY: ${{ secrets.WEAVIATE_API_KEY }}
-          WEAVIATE_URL: ${{ secrets.WEAVIATE_URL }}
-          GOOGLE_API_KEY: ${{ secrets.GOOGLE_API_KEY }}
-          GOOGLE_CUSTOM_SEARCH_ENGINE_ID: ${{ secrets.GOOGLE_CUSTOM_SEARCH_ENGINE_ID }}
-          AGENT_NAME: ${{ matrix.agent-name }}

.github/workflows/platform-autogpt-builder-ci.yml

@@ -0,0 +1,41 @@
+name: Platform - AutoGPT Builder CI
+
+on:
+  push:
+    branches: [ master ]
+    paths:
+      - '.github/workflows/autogpt-builder-ci.yml'
+      - 'autogpt_platform/autogpt_builder/**'
+  pull_request:
+    paths:
+      - '.github/workflows/autogpt-builder-ci.yml'
+      - 'autogpt_platform/autogpt_builder/**'
+
+defaults:
+  run:
+    shell: bash
+    working-directory: autogpt_platform/autogpt_builder
+
+jobs:
+
+  lint:
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v4
+    - name: Set up Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: '21'
+
+    - name: Install dependencies
+      run: |
+        npm install
+
+    - name: Check formatting with Prettier
+      run: |
+        npx prettier --check .
+
+    - name: Run lint
+      run: |
+        npm run lint

.github/workflows/platform-autogpt-infra-ci.yml

@@ -0,0 +1,56 @@
+name: Platform - AutoGPT Builder Infra
+
+on:
+  push:
+    branches: [ master ]
+    paths:
+      - '.github/workflows/autogpt-infra-ci.yml'
+      - 'autogpt_platform/infra/**'
+  pull_request:
+    paths:
+      - '.github/workflows/autogpt-infra-ci.yml'
+      - 'autogpt_platform/infra/**'
+
+defaults:
+  run:
+    shell: bash
+    working-directory: autogpt_platform/infra
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+
+      - name: TFLint
+        uses: pauloconnor/tflint-action@v0.0.2
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+            tflint_path: terraform/
+            tflint_recurse: true
+            tflint_changed_only: false
+
+      - name: Set up Helm
+        uses: azure/setup-helm@v4.2.0
+        with:
+          version: v3.14.4
+
+      - name: Set up chart-testing
+        uses: helm/chart-testing-action@v2.6.0
+
+      - name: Run chart-testing (list-changed)
+        id: list-changed
+        run: |
+          changed=$(ct list-changed --target-branch ${{ github.event.repository.default_branch }})
+          if [[ -n "$changed" ]]; then
+            echo "changed=true" >> "$GITHUB_OUTPUT"
+          fi
+
+      - name: Run chart-testing (lint)
+        if: steps.list-changed.outputs.changed == 'true'
+        run: ct lint --target-branch ${{ github.event.repository.default_branch }}

.github/workflows/platform-autogpt-server-ci.yml

@@ -0,0 +1,155 @@
+name: Platform - AutoGPT Server CI
+
+on:
+  push:
+    branches: [master, development, ci-test*]
+    paths:
+      - ".github/workflows/autogpt-server-ci.yml"
+      - "autogpt_platform/autogpt_server/**"
+  pull_request:
+    branches: [master, development, release-*]
+    paths:
+      - ".github/workflows/autogpt-server-ci.yml"
+      - "autogpt_platform/autogpt_server/**"
+
+concurrency:
+  group: ${{ format('autogpt-server-ci-{0}', github.head_ref && format('{0}-{1}', github.event_name, github.event.pull_request.number) || github.sha) }}
+  cancel-in-progress: ${{ startsWith(github.event_name, 'pull_request') }}
+
+defaults:
+  run:
+    shell: bash
+    working-directory: autogpt_platform/autogpt_server
+
+jobs:
+  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' }}
+
+    steps:
+      - name: Setup PostgreSQL
+        uses: ikalnytskyi/action-setup-postgres@v6
+        with:
+          username: ${{ secrets.DB_USER || 'postgres' }}
+          password: ${{ secrets.DB_PASS || 'postgres' }}
+          database: postgres
+          port: 5432
+        id: postgres
+
+      # 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 ${{ matrix.python-version }}
+        uses: actions/setup-python@v5
+        with:
+          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: ${{ runner.os == 'macOS' && '~/Library/Caches/pypoetry' || '~/.cache/pypoetry' }}
+          key: poetry-${{ runner.os }}-${{ hashFiles('autogpt_platform/autogpt_server/poetry.lock') }}
+
+      - 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
+
+      - name: Generate Prisma Client
+        run: poetry run prisma generate
+
+      - name: Run Database Migrations
+        run: poetry run prisma migrate dev --name updates
+        env:
+          CONNECTION_STR: ${{ steps.postgres.outputs.connection-uri }}
+
+      - id: lint
+        name: Run Linter
+        run: poetry run lint
+
+      - name: Run pytest with coverage
+        run: |
+          if [[ "${{ runner.debug }}" == "1" ]]; then
+            poetry run pytest -vv -o log_cli=true -o log_cli_level=DEBUG test
+          else
+            poetry run pytest -vv test
+          fi
+        if: success() || (failure() && steps.lint.outcome == 'failure')
+        env:
+          LOG_LEVEL: ${{ runner.debug && 'DEBUG' || 'INFO' }}
+    env:
+      CI: true
+      PLAIN_OUTPUT: True
+      OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
+      DB_USER: ${{ secrets.DB_USER || 'postgres' }}
+      DB_PASS: ${{ secrets.DB_PASS || 'postgres' }}
+      DB_NAME: postgres
+      DB_PORT: 5432
+      RUN_ENV: local
+      PORT: 8080
+      DATABASE_URL: postgresql://${{ secrets.DB_USER || 'postgres' }}:${{ secrets.DB_PASS || 'postgres' }}@localhost:5432/${{ secrets.DB_NAME || 'postgres'}}
+
+      # - name: Upload coverage reports to Codecov
+      #   uses: codecov/codecov-action@v4
+      #   with:
+      #     token: ${{ secrets.CODECOV_TOKEN }}
+      #     flags: autogpt-server,${{ runner.os }}

.github/workflows/repo-close-stale-issues.yml

@@ -1,4 +1,4 @@
-name: 'Close stale issues'
+name: Repo - Close stale issues
 on:
   schedule:
     - cron: '30 1 * * *'

.github/workflows/repo-pr-label.yml

@@ -1,12 +1,12 @@
-name: "Pull Request auto-label"
+name: Repo - Pull Request auto-label
 
 on:
   # So that PRs touching the same files as the push are updated
   push:
     branches: [ master, development, release-* ]
     paths-ignore:
-      - 'autogpt/tests/vcr_cassettes'
-      - 'benchmark/reports/**'
+      - 'classic/forge/tests/vcr_cassettes'
+      - 'classic/benchmark/reports/**'
   # So that the `dirtyLabel` is removed if conflicts are resolve
   # We recommend `pull_request_target` so that github secrets are available.
   # In `pull_request` we wouldn't be able to change labels of fork PRs

.github/workflows/repo-stats.yml

@@ -1,4 +1,4 @@
-name: github-repo-stats
+name: Repo - Github Stats
 
 on:
   schedule:

.github/workflows/repo-workflow-checker.yml

@@ -0,0 +1,31 @@
+name: Repo - PR Status Checker
+on:
+  pull_request:
+    types: [opened, synchronize, reopened]
+
+jobs:
+  status-check:
+    name: Check PR Status
+    runs-on: ubuntu-latest
+    steps:
+      # - name: Wait some time for all actions to start
+      #   run: sleep 30
+      - uses: actions/checkout@v4
+        # with:
+          # fetch-depth: 0
+      - name: Set up Python
+        uses: actions/setup-python@v5
+        with:
+          python-version: "3.10"
+      - name: Install dependencies
+        run: |
+          python -m pip install --upgrade pip
+          pip install requests
+      - name: Check PR Status
+        run: |
+          echo "Current directory before running Python script:"
+          pwd
+          echo "Attempting to run Python script:"
+          python .github/workflows/scripts/check_actions_status.py
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/scripts/check_actions_status.py

@@ -0,0 +1,109 @@
+import json
+import os
+import requests
+import sys
+import time
+from typing import Dict, List, Tuple
+
+
+def get_environment_variables() -> Tuple[str, str, str, str, str]:
+    """Retrieve and return necessary environment variables."""
+    try:
+        with open(os.environ["GITHUB_EVENT_PATH"]) as f:
+            event = json.load(f)
+
+        sha = event["pull_request"]["head"]["sha"]
+
+        return (
+            os.environ["GITHUB_API_URL"],
+            os.environ["GITHUB_REPOSITORY"],
+            sha,
+            os.environ["GITHUB_TOKEN"],
+            os.environ["GITHUB_RUN_ID"],
+        )
+    except KeyError as e:
+        print(f"Error: Missing required environment variable or event data: {e}")
+        sys.exit(1)
+
+
+def make_api_request(url: str, headers: Dict[str, str]) -> Dict:
+    """Make an API request and return the JSON response."""
+    try:
+        print("Making API request to:", url)
+        response = requests.get(url, headers=headers, timeout=10)
+        response.raise_for_status()
+        return response.json()
+    except requests.RequestException as e:
+        print(f"Error: API request failed. {e}")
+        sys.exit(1)
+
+
+def process_check_runs(check_runs: List[Dict]) -> Tuple[bool, bool]:
+    """Process check runs and return their status."""
+    runs_in_progress = False
+    all_others_passed = True
+
+    for run in check_runs:
+        if str(run["name"]) != "Check PR Status":
+            status = run["status"]
+            conclusion = run["conclusion"]
+
+            if status == "completed":
+                if conclusion not in ["success", "skipped", "neutral"]:
+                    all_others_passed = False
+                    print(
+                        f"Check run {run['name']} (ID: {run['id']}) has conclusion: {conclusion}"
+                    )
+            else:
+                runs_in_progress = True
+                print(f"Check run {run['name']} (ID: {run['id']}) is still {status}.")
+                all_others_passed = False
+        else:
+            print(
+                f"Skipping check run {run['name']} (ID: {run['id']}) as it is the current run."
+            )
+
+    return runs_in_progress, all_others_passed
+
+
+def main():
+    api_url, repo, sha, github_token, current_run_id = get_environment_variables()
+
+    endpoint = f"{api_url}/repos/{repo}/commits/{sha}/check-runs"
+    headers = {
+        "Accept": "application/vnd.github.v3+json",
+    }
+    if github_token:
+        headers["Authorization"] = f"token {github_token}"
+
+    print(f"Current run ID: {current_run_id}")
+
+    while True:
+        data = make_api_request(endpoint, headers)
+
+        check_runs = data["check_runs"]
+
+        print("Processing check runs...")
+
+        print(check_runs)
+
+        runs_in_progress, all_others_passed = process_check_runs(check_runs)
+
+        if not runs_in_progress:
+            break
+
+        print(
+            "Some check runs are still in progress. Waiting 3 minutes before checking again..."
+        )
+        time.sleep(180)
+
+    if all_others_passed:
+        print("All other completed check runs have passed. This check passes.")
+        sys.exit(0)
+    else:
+        print("Some check runs have failed or have not completed. This check fails.")
+        sys.exit(1)
+
+
+if __name__ == "__main__":
+    main()

.gitignore

@@ -1,7 +1,7 @@
 ## Original ignores
 .github_access_token
-autogpt/keys.py
-autogpt/*.json
+classic/original_autogpt/keys.py
+classic/original_autogpt/*.json
 auto_gpt_workspace/*
 *.mpeg
 .env
@@ -32,7 +32,6 @@ dist/
 downloads/
 eggs/
 .eggs/
-lib/
 lib64/
 parts/
 sdist/
@@ -158,11 +157,11 @@ openai/
 CURRENT_BULLETIN.md
 
 # AgBenchmark
-agbenchmark/reports/
+agclassic/benchmark/reports/
 
 # Nodejs
 package-lock.json
-package.json
+
 
 # Allow for locally private items
 # private
@@ -170,3 +169,5 @@ pri*
 # ignore
 ig*
 .github_access_token
+LICENSE.rtf
+autogpt_platform/autogpt_server/settings.py

.gitmodules

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

.pre-commit-config.yaml

@@ -16,22 +16,22 @@ repos:
     hooks:
       - id: isort-autogpt
         name: Lint (isort) - AutoGPT
-        entry: poetry -C autogpt run isort
-        files: ^autogpt/
+        entry: poetry -C classic/original_autogpt run isort
+        files: ^classic/original_autogpt/
         types: [file, python]
         language: system
 
       - id: isort-forge
         name: Lint (isort) - Forge
-        entry: poetry -C forge run isort
-        files: ^forge/
+        entry: poetry -C classic/forge run isort
+        files: ^classic/forge/
         types: [file, python]
         language: system
 
       - id: isort-benchmark
         name: Lint (isort) - Benchmark
-        entry: poetry -C benchmark run isort
-        files: ^benchmark/
+        entry: poetry -C classic/benchmark run isort
+        files: ^classic/benchmark/
         types: [file, python]
         language: system
 
@@ -52,20 +52,20 @@ repos:
       - id: flake8
         name: Lint (Flake8) - AutoGPT
         alias: flake8-autogpt
-        files: ^autogpt/(autogpt|scripts|tests)/
-        args: [--config=autogpt/.flake8]
+        files: ^classic/original_autogpt/(autogpt|scripts|tests)/
+        args: [--config=classic/original_autogpt/.flake8]
 
       - id: flake8
         name: Lint (Flake8) - Forge
         alias: flake8-forge
-        files: ^forge/(forge|tests)/
-        args: [--config=forge/.flake8]
+        files: ^classic/forge/(forge|tests)/
+        args: [--config=classic/forge/.flake8]
 
       - id: flake8
         name: Lint (Flake8) - Benchmark
         alias: flake8-benchmark
-        files: ^benchmark/(agbenchmark|tests)/((?!reports).)*[/.]
-        args: [--config=benchmark/.flake8]
+        files: ^classic/benchmark/(agbenchmark|tests)/((?!reports).)*[/.]
+        args: [--config=classic/benchmark/.flake8]
 
   - repo: local
     # To have watertight type checking, we check *all* the files in an affected
@@ -74,10 +74,10 @@ repos:
       - id: pyright
         name: Typecheck - AutoGPT
         alias: pyright-autogpt
-        entry: poetry -C autogpt run pyright
+        entry: poetry -C classic/original_autogpt run pyright
         args: [-p, autogpt, autogpt]
         # include forge source (since it's a path dependency) but exclude *_test.py files:
-        files: ^(autogpt/((autogpt|scripts|tests)/|poetry\.lock$)|forge/(forge/.*(?<!_test)\.py|poetry\.lock)$)
+        files: ^(classic/original_autogpt/((autogpt|scripts|tests)/|poetry\.lock$)|classic/forge/(classic/forge/.*(?<!_test)\.py|poetry\.lock)$)
         types: [file]
         language: system
         pass_filenames: false
@@ -85,9 +85,9 @@ repos:
       - id: pyright
         name: Typecheck - Forge
         alias: pyright-forge
-        entry: poetry -C forge run pyright
+        entry: poetry -C classic/forge run pyright
         args: [-p, forge, forge]
-        files: ^forge/(forge/|poetry\.lock$)
+        files: ^classic/forge/(classic/forge/|poetry\.lock$)
         types: [file]
         language: system
         pass_filenames: false
@@ -95,9 +95,9 @@ repos:
       - id: pyright
         name: Typecheck - Benchmark
         alias: pyright-benchmark
-        entry: poetry -C benchmark run pyright
+        entry: poetry -C classic/benchmark run pyright
         args: [-p, benchmark, benchmark]
-        files: ^benchmark/(agbenchmark|tests)/
+        files: ^classic/benchmark/(agclassic/benchmark/|tests/|poetry\.lock$)
         types: [file]
         language: system
         pass_filenames: false
@@ -106,22 +106,22 @@ repos:
     hooks:
       - id: pytest-autogpt
         name: Run tests - AutoGPT (excl. slow tests)
-        entry: bash -c 'cd autogpt && poetry run pytest --cov=autogpt -m "not slow" tests/unit tests/integration'
+        entry: bash -c 'cd classic/original_autogpt && poetry run pytest --cov=autogpt -m "not slow" tests/unit tests/integration'
         # include forge source (since it's a path dependency) but exclude *_test.py files:
-        files: ^(autogpt/((autogpt|tests)/|poetry\.lock$)|forge/(forge/.*(?<!_test)\.py|poetry\.lock)$)
+        files: ^(classic/original_autogpt/((autogpt|tests)/|poetry\.lock$)|classic/forge/(classic/forge/.*(?<!_test)\.py|poetry\.lock)$)
         language: system
         pass_filenames: false
 
       - id: pytest-forge
         name: Run tests - Forge (excl. slow tests)
-        entry: bash -c 'cd forge && poetry run pytest --cov=forge -m "not slow"'
-        files: ^forge/(forge/|tests/|poetry\.lock$)
+        entry: bash -c 'cd classic/forge && poetry run pytest --cov=forge -m "not slow"'
+        files: ^classic/forge/(classic/forge/|tests/|poetry\.lock$)
         language: system
         pass_filenames: false
 
       - id: pytest-benchmark
         name: Run tests - Benchmark
-        entry: bash -c 'cd benchmark && poetry run pytest --cov=benchmark'
-        files: ^benchmark/(agbenchmark/|tests/|poetry\.lock$)
+        entry: bash -c 'cd classic/benchmark && poetry run pytest --cov=benchmark'
+        files: ^classic/benchmark/(agclassic/benchmark/|tests/|poetry\.lock$)
         language: system
         pass_filenames: false

.vscode/all-projects.code-workspace

@@ -0,0 +1,61 @@
+{
+  "folders": [
+    {
+      "name": "autogpt_server",
+      "path": "../autogpt_platform/autogpt_server"
+    },
+    {
+      "name": "autogpt_builder",
+      "path": "../autogpt_platform/autogpt_builder"
+    },
+    {
+      "name": "market",
+      "path": "../autogpt_platform/market"
+    },
+    {
+      "name": "lib",
+      "path": "../autogpt_platform/autogpt_libs"
+    },
+    {
+      "name": "infra",
+      "path": "../autogpt_platform/infra"
+    },
+    {
+      "name": "docs",
+      "path": "../docs"
+    },
+    {
+      "name": "[root]",
+      "path": ".."
+    },
+    {
+      "name": "classic - autogpt",
+      "path": "../classic/original_autogpt"
+    },
+    {
+      "name": "classic - benchmark",
+      "path": "../classic/benchmark"
+    },
+    {
+      "name": "classic - forge",
+      "path": "../classic/forge"
+    },
+    {
+      "name": "classic - frontend",
+      "path": "../classic/frontend"
+    },
+  ],
+  "settings": {
+    "python.analysis.typeCheckingMode": "basic"
+  },
+  "extensions": {
+    "recommendations": [
+      "charliermarsh.ruff",
+      "dart-code.flutter",
+      "ms-python.black-formatter",
+      "ms-python.vscode-pylance",
+      "prisma.prisma",
+      "qwtel.sqlite-viewer"
+    ]
+  }
+}

README.md

@@ -1,17 +1,43 @@
-# AutoGPT: build & use AI agents
+# AutoGPT: Build & Use AI Agents
 
 [![Discord Follow](https://dcbadge.vercel.app/api/server/autogpt?style=flat)](https://discord.gg/autogpt)  
 [![Twitter Follow](https://img.shields.io/twitter/follow/Auto_GPT?style=social)](https://twitter.com/Auto_GPT)  
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
-**AutoGPT** is a generalist LLM based AI agent that can autonomously accomplish minor tasks. 
+**AutoGPT** is a powerful tool that lets you create and run intelligent agents. These agents can perform various tasks automatically, making your life easier.
 
-**Examples**:
+## How to Get Started
 
-- Look up and summarize this research paper
-- Write a marketing for food supplements
-- Write a blog post detailing the news in AI
+https://github.com/user-attachments/assets/8508f4dc-b362-4cab-900f-644964a96cdf
 
+### 🧱 AutoGPT Builder 
+
+The AutoGPT Builder is the frontend. It allows you to design agents using an easy flowchart style. You build your agent by connecting blocks, where each block performs a single action. It's simple and intuitive!
+
+[Read this guide](https://docs.agpt.co/server/new_blocks/) to learn how to build your own custom blocks.
+
+### 💽 AutoGPT Server
+
+The AutoGPT Server is the backend. This is where your agents run. Once deployed, agents can be triggered by external sources and can operate continuously.
+
+### 🐙 Example Agents
+
+Here are two examples of what you can do with AutoGPT:
+
+1. **Reddit Marketing Agent**
+   - This agent reads comments on Reddit.
+   - It looks for people asking about your product.
+   - It then automatically responds to them.
+
+2. **YouTube Content Repurposing Agent**
+   - This agent subscribes to your YouTube channel.
+   - When you post a new video, it transcribes it.
+   - It uses AI to write a search engine optimized blog post.
+   - Then, it publishes this blog post to your Medium account.
+
+These examples show just a glimpse of what you can achieve with AutoGPT!
+
+---
 Our mission is to provide the tools, so that you can focus on what matters:
 
 - 🏗️ **Building** - Lay the foundation for something amazing.
@@ -23,16 +49,18 @@ Be part of the revolution! **AutoGPT** is here to stay, at the forefront of AI i
 **📖 [Documentation](https://docs.agpt.co)**
  | 
 **🚀 [Contributing](CONTRIBUTING.md)**
- | 
-**🛠️ [Build your own Agent - Quickstart](QUICKSTART.md)**
 
-## 🧱 Building blocks
 
+---
+## 🤖 AutoGPT Classic
+> Below is information about the classic version of AutoGPT.
+
+**🛠️ [Build your own Agent - Quickstart](FORGE-QUICKSTART.md)**
 ### 🏗️ Forge
 
-**Forge your own agent!** – Forge is a ready-to-go template for your agent application. All the boilerplate code is already handled, letting you channel all your creativity into the things that set *your* agent apart. All tutorials are located [here](https://medium.com/@aiedge/autogpt-forge-e3de53cc58ec). Components from the [`forge.sdk`](/forge/forge/sdk) can also be used individually to speed up development and reduce boilerplate in your agent project.
+**Forge your own agent!** – Forge is a ready-to-go template for your agent application. All the boilerplate code is already handled, letting you channel all your creativity into the things that set *your* agent apart. All tutorials are located [here](https://medium.com/@aiedge/autogpt-forge-e3de53cc58ec). Components from the [`forge.sdk`](/forge/sdk) can also be used individually to speed up development and reduce boilerplate in your agent project.
 
-🚀 [**Getting Started with Forge**](https://github.com/Significant-Gravitas/AutoGPT/blob/master/forge/tutorials/001_getting_started.md) –
+🚀 [**Getting Started with Forge**](https://github.com/Significant-Gravitas/AutoGPT/blob/master/classic/forge/tutorials/001_getting_started.md) –
 This guide will walk you through the process of creating your own agent and using the benchmark and user interface.
 
 📘 [Learn More](https://github.com/Significant-Gravitas/AutoGPT/tree/master/forge) about Forge
@@ -43,7 +71,7 @@ This guide will walk you through the process of creating your own agent and usin
 
 <!-- TODO: insert visual demonstrating the benchmark -->
 
-📦 [`agbenchmark`](https://pypi.org/project/agbenchmark/) on Pypi
+📦 [`agbenchmark`](https://pypi.org/project/agclassic/benchmark/) on Pypi
 &ensp;|&ensp;
 📘 [Learn More](https://github.com/Significant-Gravitas/AutoGPT/blob/master/benchmark) about the Benchmark
 

autogpt/.gitattributes

@@ -1,5 +0,0 @@
-# Exclude VCR cassettes from stats
-tests/vcr_cassettes/**/**.y*ml linguist-generated
-
-# Mark documentation as such
-docs/**.md linguist-documentation

autogpt/setup.py

@@ -1,60 +0,0 @@
-from pkgutil import iter_modules
-from shutil import which
-
-from cx_Freeze import Executable, setup
-
-packages = [
-    m.name
-    for m in iter_modules()
-    if m.ispkg
-    and m.module_finder
-    and ("poetry" in m.module_finder.path)  # type: ignore
-]
-
-icon = (
-    "../../assets/gpt_dark_RGB.icns"
-    if which("sips")
-    else "../../assets/gpt_dark_RGB.ico"
-)
-
-
-setup(
-    executables=[
-        Executable(
-            "autogpt/__main__.py", target_name="autogpt", base="console", icon=icon
-        ),
-    ],
-    options={
-        "build_exe": {
-            "packages": packages,
-            "includes": [
-                "autogpt",
-                "spacy",
-                "spacy.lang",
-                "spacy.vocab",
-                "spacy.lang.lex_attrs",
-                "uvicorn.loops.auto",
-                "srsly.msgpack.util",
-                "blis",
-                "uvicorn.protocols.http.auto",
-                "uvicorn.protocols.websockets.auto",
-                "uvicorn.lifespan.on",
-            ],
-            "excludes": ["readability.compat.two"],
-        },
-        "bdist_mac": {
-            "bundle_name": "AutoGPT",
-            "iconfile": "../assets/gpt_dark_RGB.icns",
-            "include_resources": [""],
-        },
-        "bdist_dmg": {
-            "applications_shortcut": True,
-            "volume_label": "AutoGPT",
-        },
-        "bdist_msi": {
-            "target_name": "AutoGPT",
-            "add_to_path": True,
-            "install_icon": "../assets/gpt_dark_RGB.ico",
-        },
-    },
-)

autogpt_platform/README.md

@@ -0,0 +1,133 @@
+# AutoGPT Platform
+
+Welcome to the AutoGPT Platform - a powerful system for creating and running AI agents to solve business problems. This platform enables you to harness the power of artificial intelligence to automate tasks, analyze data, and generate insights for your organization.
+
+## Getting Started
+
+### Prerequisites
+
+- Docker
+- Docker Compose V2 (comes with Docker Desktop, or can be installed separately)
+
+### Running the System
+
+To run the AutoGPT Platform, follow these steps:
+
+1. Clone this repository to your local machine.
+2. Navigate to autogpt_platform/supabase
+3. Run the following command:
+   ```
+      git submodule update --init --recursive
+   ```
+4. Navigate back to rnd (cd ..)
+5. Run the following command:
+   ```
+      cp supabase/docker/.env.example .env
+   ```
+6. Run the following command:
+
+   ```
+   docker compose -f docker-compose.combined.yml up -d
+
+   ```
+
+   This command will start all the necessary backend services defined in the `docker-compose.combined.yml` file in detached mode.
+7. Navigate to autogpt_platform/autogpt_builder.
+8. Run the following command: 
+   ```
+      cp .env.example .env.local
+   ```
+9. Run the following command: 
+   ```
+      yarn dev
+   ```
+
+### Docker Compose Commands
+
+Here are some useful Docker Compose commands for managing your AutoGPT Platform:
+
+- `docker compose -f docker-compose.combined.yml up -d`: Start the services in detached mode.
+- `docker compose -f docker-compose.combined.yml stop`: Stop the running services without removing them.
+- `docker compose rm`: Remove stopped service containers.
+- `docker compose build`: Build or rebuild services.
+- `docker compose down`: Stop and remove containers, networks, and volumes.
+- `docker compose watch`: Watch for changes in your services and automatically update them.
+
+
+### Sample Scenarios
+
+Here are some common scenarios where you might use multiple Docker Compose commands:
+
+1. Updating and restarting a specific service:
+   ```
+   docker compose build api_srv
+   docker compose up -d --no-deps api_srv
+   ```
+   This rebuilds the `api_srv` service and restarts it without affecting other services.
+
+2. Viewing logs for troubleshooting:
+   ```
+   docker compose logs -f api_srv ws_srv
+   ```
+   This shows and follows the logs for both `api_srv` and `ws_srv` services.
+
+3. Scaling a service for increased load:
+   ```
+   docker compose up -d --scale executor=3
+   ```
+   This scales the `executor` service to 3 instances to handle increased load.
+
+4. Stopping the entire system for maintenance:
+   ```
+   docker compose stop
+   docker compose rm -f
+   docker compose pull
+   docker compose up -d
+   ```
+   This stops all services, removes containers, pulls the latest images, and restarts the system.
+
+5. Developing with live updates:
+   ```
+   docker compose watch
+   ```
+   This watches for changes in your code and automatically updates the relevant services.
+
+6. Checking the status of services:
+   ```
+   docker compose ps
+   ```
+   This shows the current status of all services defined in your docker-compose.yml file.
+
+These scenarios demonstrate how to use Docker Compose commands in combination to manage your AutoGPT Platform effectively.
+
+
+### Persisting Data
+
+To persist data for PostgreSQL and Redis, you can modify the `docker-compose.yml` file to add volumes. Here's how:
+
+1. Open the `docker-compose.yml` file in a text editor.
+2. Add volume configurations for PostgreSQL and Redis services:
+
+   ```yaml
+   services:
+     postgres:
+       # ... other configurations ...
+       volumes:
+         - postgres_data:/var/lib/postgresql/data
+
+     redis:
+       # ... other configurations ...
+       volumes:
+         - redis_data:/data
+
+   volumes:
+     postgres_data:
+     redis_data:
+   ```
+
+3. Save the file and run `docker compose up -d` to apply the changes.
+
+This configuration will create named volumes for PostgreSQL and Redis, ensuring that your data persists across container restarts.
+
+
+

autogpt_platform/autogpt_builder/.env.example

@@ -0,0 +1,15 @@
+NEXT_PUBLIC_AUTH_CALLBACK_URL=http://localhost:8006/auth/callback
+NEXT_PUBLIC_AGPT_SERVER_URL=http://localhost:8006/api
+NEXT_PUBLIC_AGPT_WS_SERVER_URL=ws://localhost:8001/ws
+NEXT_PUBLIC_AGPT_MARKETPLACE_URL=http://localhost:8015/api/v1/market
+
+## Supabase credentials
+
+NEXT_PUBLIC_SUPABASE_URL=http://localhost:8000
+NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyAgCiAgICAicm9sZSI6ICJhbm9uIiwKICAgICJpc3MiOiAic3VwYWJhc2UtZGVtbyIsCiAgICAiaWF0IjogMTY0MTc2OTIwMCwKICAgICJleHAiOiAxNzk5NTM1NjAwCn0.dc_X5iR_VP_qT0zsiyj_I_OZ2T9FtRU2BBNWN8Bu4GE
+
+## OAuth Callback URL
+## This should be {domain}/auth/callback
+## Only used if you're using Supabase and OAuth
+AUTH_CALLBACK_URL=http://localhost:3000/auth/callback
+GA_MEASUREMENT_ID=G-FH2XK2W4GN

autogpt_platform/autogpt_builder/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

autogpt_platform/autogpt_builder/.gitignore

@@ -0,0 +1,39 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# Sentry Config File
+.env.sentry-build-plugin

autogpt_platform/autogpt_builder/.prettierignore

@@ -0,0 +1,4 @@
+node_modules
+.next
+build
+public

autogpt_platform/autogpt_builder/.prettierrc

@@ -0,0 +1,3 @@
+{
+  "plugins": ["prettier-plugin-tailwindcss"]
+}

autogpt_platform/autogpt_builder/Dockerfile

@@ -0,0 +1,32 @@
+# Base stage for both dev and prod
+FROM node:21-alpine AS base
+WORKDIR /app
+COPY autogpt_platform/autogpt_builder/package.json autogpt_platform/autogpt_builder/yarn.lock ./
+RUN yarn install --frozen-lockfile
+
+# Dev stage
+FROM base AS dev
+ENV NODE_ENV=development
+COPY autogpt_platform/autogpt_builder/ .
+EXPOSE 3000
+CMD ["yarn", "run", "dev"]
+
+# Build stage for prod
+FROM base AS build
+COPY autogpt_platform/autogpt_builder/ .
+RUN npm run build
+
+# Prod stage
+FROM node:21-alpine AS prod
+ENV NODE_ENV=production
+WORKDIR /app
+
+COPY --from=build /app/package.json /app/yarn.lock ./
+RUN yarn install --frozen-lockfile
+
+COPY --from=build /app/.next ./.next
+COPY --from=build /app/public ./public
+COPY --from=build /app/next.config.mjs ./next.config.mjs
+
+EXPOSE 3000
+CMD ["npm", "start"]

autogpt_platform/autogpt_builder/README.md

@@ -0,0 +1,41 @@
+This is the frontend for AutoGPT's next generation
+
+## Getting Started
+
+Run the following installation once.
+
+```bash
+npm install
+# or
+yarn install
+# or
+pnpm install
+# or
+bun install
+```
+
+Next, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+For subsequent runs, you do not have to `npm install` again. Simply do `npm run dev`.
+
+If the project is updated via git, you will need to `npm install` after each update.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Deploy
+
+TODO

autogpt_platform/autogpt_builder/components.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": false,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}

autogpt_platform/autogpt_builder/next.config.mjs

@@ -0,0 +1,84 @@
+import { withSentryConfig } from "@sentry/nextjs";
+import dotenv from "dotenv";
+
+// Load environment variables
+dotenv.config();
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  env: {
+    NEXT_PUBLIC_AGPT_SERVER_URL: process.env.NEXT_PUBLIC_AGPT_SERVER_URL,
+    NEXT_PUBLIC_AGPT_MARKETPLACE_URL:
+      process.env.NEXT_PUBLIC_AGPT_MARKETPLACE_URL,
+  },
+  images: {
+    domains: ["images.unsplash.com"],
+  },
+  async redirects() {
+    return [
+      {
+        source: "/monitor", // FIXME: Remove after 2024-09-01
+        destination: "/",
+        permanent: false,
+      },
+    ];
+  },
+  // TODO: Re-enable TypeScript checks once current issues are resolved
+  typescript: {
+    ignoreBuildErrors: true,
+  },
+};
+
+export default withSentryConfig(nextConfig, {
+  // For all available options, see:
+  // https://github.com/getsentry/sentry-webpack-plugin#options
+
+  org: "significant-gravitas",
+  project: "builder",
+
+  // Only print logs for uploading source maps in CI
+  silent: !process.env.CI,
+
+  // For all available options, see:
+  // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
+
+  // Upload a larger set of source maps for prettier stack traces (increases build time)
+  widenClientFileUpload: true,
+
+  // Automatically annotate React components to show their full name in breadcrumbs and session replay
+  reactComponentAnnotation: {
+    enabled: true,
+  },
+
+  // Route browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers.
+  // This can increase your server load as well as your hosting bill.
+  // Note: Check that the configured route will not match with your Next.js middleware, otherwise reporting of client-
+  // side errors will fail.
+  tunnelRoute: "/monitoring",
+
+  // Hides source maps from generated client bundles
+  hideSourceMaps: true,
+
+  // Automatically tree-shake Sentry logger statements to reduce bundle size
+  disableLogger: true,
+
+  // Enables automatic instrumentation of Vercel Cron Monitors. (Does not yet work with App Router route handlers.)
+  // See the following for more information:
+  // https://docs.sentry.io/product/crons/
+  // https://vercel.com/docs/cron-jobs
+  automaticVercelMonitors: true,
+
+  async headers() {
+    return [
+      {
+        source: "/:path*",
+        headers: [
+          {
+            key: "Document-Policy",
+            value: "js-profiling",
+          },
+        ],
+      },
+    ];
+  },
+});

autogpt_platform/autogpt_builder/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "autogpt_builder",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "format": "prettier --write ."
+  },
+  "dependencies": {
+    "@hookform/resolvers": "^3.9.0",
+    "@next/third-parties": "^14.2.5",
+    "@radix-ui/react-avatar": "^1.1.0",
+    "@radix-ui/react-checkbox": "^1.1.1",
+    "@radix-ui/react-collapsible": "^1.1.0",
+    "@radix-ui/react-dialog": "^1.1.1",
+    "@radix-ui/react-dropdown-menu": "^2.1.1",
+    "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-popover": "^1.1.1",
+    "@radix-ui/react-scroll-area": "^1.1.0",
+    "@radix-ui/react-select": "^2.1.1",
+    "@radix-ui/react-separator": "^1.1.0",
+    "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-switch": "^1.1.0",
+    "@radix-ui/react-toast": "^1.2.1",
+    "@radix-ui/react-tooltip": "^1.1.2",
+    "@sentry/nextjs": "^8",
+    "@supabase/ssr": "^0.4.0",
+    "@supabase/supabase-js": "^2.45.0",
+    "@tanstack/react-table": "^8.20.5",
+    "@xyflow/react": "^12.1.0",
+    "ajv": "^8.17.1",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
+    "cmdk": "1.0.0",
+    "date-fns": "^3.6.0",
+    "dotenv": "^16.4.5",
+    "lucide-react": "^0.407.0",
+    "moment": "^2.30.1",
+    "next": "14.2.4",
+    "next-themes": "^0.3.0",
+    "react": "^18",
+    "react-day-picker": "^8.10.1",
+    "react-dom": "^18",
+    "react-hook-form": "^7.52.1",
+    "react-icons": "^5.2.1",
+    "react-markdown": "^9.0.1",
+    "react-modal": "^3.16.1",
+    "react-shepherd": "^6.1.1",
+    "recharts": "^2.12.7",
+    "tailwind-merge": "^2.3.0",
+    "tailwindcss-animate": "^1.0.7",
+    "uuid": "^10.0.0",
+    "zod": "^3.23.8"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "@types/react-modal": "^3.16.3",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.4",
+    "postcss": "^8",
+    "prettier": "^3.3.3",
+    "prettier-plugin-tailwindcss": "^0.6.6",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5"
+  }
+}

autogpt_platform/autogpt_builder/postcss.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;

autogpt_platform/autogpt_builder/sentry.client.config.ts

@@ -0,0 +1,57 @@
+// This file configures the initialization of Sentry on the client.
+// The config you add here will be used whenever a users loads a page in their browser.
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+
+import * as Sentry from "@sentry/nextjs";
+
+Sentry.init({
+  dsn: "https://fe4e4aa4a283391808a5da396da20159@o4505260022104064.ingest.us.sentry.io/4507946746380288",
+
+  // Add optional integrations for additional features
+  integrations: [
+    Sentry.replayIntegration(),
+    Sentry.httpClientIntegration(),
+    Sentry.replayCanvasIntegration(),
+    Sentry.reportingObserverIntegration(),
+    Sentry.browserProfilingIntegration(),
+    // Sentry.feedbackIntegration({
+    //   // Additional SDK configuration goes in here, for example:
+    //   colorScheme: "system",
+    // }),
+  ],
+
+  // Define how likely traces are sampled. Adjust this value in production, or use tracesSampler for greater control.
+  tracesSampleRate: 1,
+
+  // Set `tracePropagationTargets` to control for which URLs trace propagation should be enabled
+  tracePropagationTargets: [
+    "localhost",
+    /^https:\/\/dev\-builder\.agpt\.co\/api/,
+  ],
+
+  beforeSend(event, hint) {
+    // Check if it is an exception, and if so, show the report dialog
+    if (event.exception && event.event_id) {
+      Sentry.showReportDialog({ eventId: event.event_id });
+    }
+    return event;
+  },
+
+  // Define how likely Replay events are sampled.
+  // This sets the sample rate to be 10%. You may want this to be 100% while
+  // in development and sample at a lower rate in production
+  replaysSessionSampleRate: 0.1,
+
+  // Define how likely Replay events are sampled when an error occurs.
+  replaysOnErrorSampleRate: 1.0,
+
+  // Setting this option to true will print useful information to the console while you're setting up Sentry.
+  debug: false,
+
+  // Set profilesSampleRate to 1.0 to profile every transaction.
+  // Since profilesSampleRate is relative to tracesSampleRate,
+  // the final profiling rate can be computed as tracesSampleRate * profilesSampleRate
+  // For example, a tracesSampleRate of 0.5 and profilesSampleRate of 0.5 would
+  // result in 25% of transactions being profiled (0.5*0.5=0.25)
+  profilesSampleRate: 1.0,
+});

autogpt_platform/autogpt_builder/sentry.edge.config.ts

@@ -0,0 +1,16 @@
+// This file configures the initialization of Sentry for edge features (middleware, edge routes, and so on).
+// The config you add here will be used whenever one of the edge features is loaded.
+// Note that this config is unrelated to the Vercel Edge Runtime and is also required when running locally.
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+
+import * as Sentry from "@sentry/nextjs";
+
+Sentry.init({
+  dsn: "https://fe4e4aa4a283391808a5da396da20159@o4505260022104064.ingest.us.sentry.io/4507946746380288",
+
+  // Define how likely traces are sampled. Adjust this value in production, or use tracesSampler for greater control.
+  tracesSampleRate: 1,
+
+  // Setting this option to true will print useful information to the console while you're setting up Sentry.
+  debug: false,
+});

autogpt_platform/autogpt_builder/sentry.server.config.ts

@@ -0,0 +1,23 @@
+// This file configures the initialization of Sentry on the server.
+// The config you add here will be used whenever the server handles a request.
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+
+import * as Sentry from "@sentry/nextjs";
+// import { NodeProfilingIntegration } from "@sentry/profiling-node";
+
+Sentry.init({
+  dsn: "https://fe4e4aa4a283391808a5da396da20159@o4505260022104064.ingest.us.sentry.io/4507946746380288",
+
+  // Define how likely traces are sampled. Adjust this value in production, or use tracesSampler for greater control.
+  tracesSampleRate: 1,
+
+  // Setting this option to true will print useful information to the console while you're setting up Sentry.
+  debug: false,
+
+  // Integrations
+  integrations: [
+    Sentry.anrIntegration(),
+    // NodeProfilingIntegration,
+    // Sentry.fsIntegration(),
+  ],
+});

autogpt_platform/autogpt_builder/src/app/admin/dashboard/page.tsx

@@ -0,0 +1,18 @@
+import { withRoleAccess } from "@/lib/withRoleAccess";
+import React from "react";
+
+function AdminDashboard() {
+  return (
+    <div>
+      <h1>Admin Dashboard</h1>
+      {/* Add your admin-only content here */}
+    </div>
+  );
+}
+
+export default async function AdminDashboardPage() {
+  "use server";
+  const withAdminAccess = await withRoleAccess(["admin"]);
+  const ProtectedAdminDashboard = await withAdminAccess(AdminDashboard);
+  return <ProtectedAdminDashboard />;
+}

autogpt_platform/autogpt_builder/src/app/admin/layout.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { BinaryIcon, XIcon } from "lucide-react";
+import { usePathname } from "next/navigation"; // Add this import
+
+const tabs = [
+  { name: "Dashboard", href: "/admin/dashboard" },
+  { name: "Marketplace", href: "/admin/marketplace" },
+  { name: "Users", href: "/admin/users" },
+  { name: "Settings", href: "/admin/settings" },
+];
+
+export default function AdminLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const pathname = usePathname(); // Get the current pathname
+  const [activeTab, setActiveTab] = useState(() => {
+    // Set active tab based on the current route
+    return tabs.find((tab) => tab.href === pathname)?.name || tabs[0].name;
+  });
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+
+  return (
+    <div className="min-h-screen bg-gray-100">
+      <nav className="bg-white shadow-sm">
+        <div className="max-w-10xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex h-16 items-center justify-between">
+            <div className="flex items-center">
+              <div className="flex-shrink-0">
+                <h1 className="text-xl font-bold">Admin Panel</h1>
+              </div>
+              <div className="hidden sm:ml-6 sm:flex sm:space-x-8">
+                {tabs.map((tab) => (
+                  <Link
+                    key={tab.name}
+                    href={tab.href}
+                    className={`${
+                      activeTab === tab.name
+                        ? "border-indigo-500 text-indigo-600"
+                        : "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700"
+                    } inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium`}
+                    onClick={() => setActiveTab(tab.name)}
+                  >
+                    {tab.name}
+                  </Link>
+                ))}
+              </div>
+            </div>
+            <div className="sm:hidden">
+              <button
+                type="button"
+                className="inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500"
+                onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+              >
+                <span className="sr-only">Open main menu</span>
+                {mobileMenuOpen ? (
+                  <XIcon className="block h-6 w-6" aria-hidden="true" />
+                ) : (
+                  <BinaryIcon className="block h-6 w-6" aria-hidden="true" />
+                )}
+              </button>
+            </div>
+          </div>
+        </div>
+
+        {mobileMenuOpen && (
+          <div className="sm:hidden">
+            <div className="space-y-1 pb-3 pt-2">
+              {tabs.map((tab) => (
+                <Link
+                  key={tab.name}
+                  href={tab.href}
+                  className={`${
+                    activeTab === tab.name
+                      ? "border-indigo-500 bg-indigo-50 text-indigo-700"
+                      : "border-transparent text-gray-600 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-800"
+                  } block border-l-4 py-2 pl-3 pr-4 text-base font-medium`}
+                  onClick={() => {
+                    setActiveTab(tab.name);
+                    setMobileMenuOpen(false);
+                  }}
+                >
+                  {tab.name}
+                </Link>
+              ))}
+            </div>
+          </div>
+        )}
+      </nav>
+
+      <main className="py-10">
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">{children}</div>
+      </main>
+    </div>
+  );
+}

autogpt_platform/autogpt_builder/src/app/admin/marketplace/page.tsx

@@ -0,0 +1,25 @@
+import { withRoleAccess } from "@/lib/withRoleAccess";
+
+import React from "react";
+import { getReviewableAgents } from "@/components/admin/marketplace/actions";
+import AdminMarketplaceAgentList from "@/components/admin/marketplace/AdminMarketplaceAgentList";
+import AdminFeaturedAgentsControl from "@/components/admin/marketplace/AdminFeaturedAgentsControl";
+import { Separator } from "@/components/ui/separator";
+async function AdminMarketplace() {
+  const reviewableAgents = await getReviewableAgents();
+
+  return (
+    <>
+      <AdminMarketplaceAgentList agents={reviewableAgents.agents} />
+      <Separator className="my-4" />
+      <AdminFeaturedAgentsControl className="mt-4" />
+    </>
+  );
+}
+
+export default async function AdminDashboardPage() {
+  "use server";
+  const withAdminAccess = await withRoleAccess(["admin"]);
+  const ProtectedAdminMarketplace = await withAdminAccess(AdminMarketplace);
+  return <ProtectedAdminMarketplace />;
+}

autogpt_platform/autogpt_builder/src/app/admin/settings/page.tsx

@@ -0,0 +1,18 @@
+import { withRoleAccess } from "@/lib/withRoleAccess";
+import React from "react";
+
+function AdminSettings() {
+  return (
+    <div>
+      <h1>Admin Settings</h1>
+      {/* Add your admin-only settings content here */}
+    </div>
+  );
+}
+
+export default async function AdminSettingsPage() {
+  "use server";
+  const withAdminAccess = await withRoleAccess(["admin"]);
+  const ProtectedAdminSettings = await withAdminAccess(AdminSettings);
+  return <ProtectedAdminSettings />;
+}

autogpt_platform/autogpt_builder/src/app/admin/users/page.tsx

@@ -0,0 +1,18 @@
+import { withRoleAccess } from "@/lib/withRoleAccess";
+import React from "react";
+
+function AdminUsers() {
+  return (
+    <div>
+      <h1>Users Dashboard</h1>
+      {/* Add your admin-only content here */}
+    </div>
+  );
+}
+
+export default async function AdminUsersPage() {
+  "use server";
+  const withAdminAccess = await withRoleAccess(["admin"]);
+  const ProtectedAdminUsers = await withAdminAccess(AdminUsers);
+  return <ProtectedAdminUsers />;
+}

autogpt_platform/autogpt_builder/src/app/auth/auth-code-error/page.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+export default function AuthErrorPage() {
+  const [errorType, setErrorType] = useState<string | null>(null);
+  const [errorCode, setErrorCode] = useState<string | null>(null);
+  const [errorDescription, setErrorDescription] = useState<string | null>(null);
+
+  useEffect(() => {
+    // This code only runs on the client side
+    if (typeof window !== "undefined") {
+      const hash = window.location.hash.substring(1); // Remove the leading '#'
+      const params = new URLSearchParams(hash);
+
+      setErrorType(params.get("error"));
+      setErrorCode(params.get("error_code"));
+      setErrorDescription(
+        params.get("error_description")?.replace(/\+/g, " ") ?? null,
+      ); // Replace '+' with space
+    }
+  }, []);
+
+  if (!errorType && !errorCode && !errorDescription) {
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <div>
+      <h1>Authentication Error</h1>
+      {errorType && <p>Error Type: {errorType}</p>}
+      {errorCode && <p>Error Code: {errorCode}</p>}
+      {errorDescription && <p>Error Description: {errorDescription}</p>}
+    </div>
+  );
+}

autogpt_platform/autogpt_builder/src/app/auth/callback/route.ts

@@ -0,0 +1,36 @@
+import { NextResponse } from "next/server";
+import { createServerClient } from "@/lib/supabase/server";
+
+// Handle the callback to complete the user session login
+export async function GET(request: Request) {
+  const { searchParams, origin } = new URL(request.url);
+  const code = searchParams.get("code");
+  // if "next" is in param, use it as the redirect URL
+  const next = searchParams.get("next") ?? "/profile";
+
+  if (code) {
+    const supabase = createServerClient();
+
+    if (!supabase) {
+      return NextResponse.redirect(`${origin}/error`);
+    }
+
+    const { data, error } = await supabase.auth.exchangeCodeForSession(code);
+    // data.session?.refresh_token is available if you need to store it for later use
+    if (!error) {
+      const forwardedHost = request.headers.get("x-forwarded-host"); // original origin before load balancer
+      const isLocalEnv = process.env.NODE_ENV === "development";
+      if (isLocalEnv) {
+        // we can be sure that there is no load balancer in between, so no need to watch for X-Forwarded-Host
+        return NextResponse.redirect(`${origin}${next}`);
+      } else if (forwardedHost) {
+        return NextResponse.redirect(`https://${forwardedHost}${next}`);
+      } else {
+        return NextResponse.redirect(`${origin}${next}`);
+      }
+    }
+  }
+
+  // return the user to an error page with instructions
+  return NextResponse.redirect(`${origin}/auth/auth-code-error`);
+}

autogpt_platform/autogpt_builder/src/app/auth/confirm/route.ts

@@ -0,0 +1,33 @@
+import { type EmailOtpType } from "@supabase/supabase-js";
+import { type NextRequest } from "next/server";
+
+import { redirect } from "next/navigation";
+import { createServerClient } from "@/lib/supabase/server";
+
+// Email confirmation route
+export async function GET(request: NextRequest) {
+  const { searchParams } = new URL(request.url);
+  const token_hash = searchParams.get("token_hash");
+  const type = searchParams.get("type") as EmailOtpType | null;
+  const next = searchParams.get("next") ?? "/";
+
+  if (token_hash && type) {
+    const supabase = createServerClient();
+
+    if (!supabase) {
+      redirect("/error");
+    }
+
+    const { error } = await supabase.auth.verifyOtp({
+      type,
+      token_hash,
+    });
+    if (!error) {
+      // redirect user to specified redirect URL or root of app
+      redirect(next);
+    }
+  }
+
+  // redirect the user to an error page with some instructions
+  redirect("/error");
+}

autogpt_platform/autogpt_builder/src/app/build/page.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import { useSearchParams } from "next/navigation";
+import FlowEditor from '@/components/Flow';
+
+export default function Home() {
+  const query = useSearchParams();
+
+  return (
+      <FlowEditor
+        className="flow-container w-full min-h-[86vh] border border-gray-300 dark:border-gray-700 rounded-lg"
+        flowID={query.get("flowID") ?? query.get("templateID") ?? undefined}
+        template={!!query.get("templateID")}
+      />
+  );
+}

autogpt_platform/autogpt_builder/src/app/error.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import { useEffect } from "react";
+import { IconCircleAlert } from "@/components/ui/icons";
+import { Button } from "@/components/ui/button";
+import Link from "next/link";
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    console.error(error);
+  }, [error]);
+
+  return (
+    <div className="fixed inset-0 flex items-center justify-center bg-background">
+      <div className="w-full max-w-md px-4 text-center sm:px-6">
+        <div className="mx-auto flex size-12 items-center justify-center rounded-full bg-muted">
+          <IconCircleAlert className="size-10" />
+        </div>
+        <h1 className="mt-8 text-2xl font-bold tracking-tight text-foreground">
+          Oops, something went wrong!
+        </h1>
+        <p className="mt-4 text-muted-foreground">
+          We&apos;re sorry, but an unexpected error has occurred. Please try
+          again later or contact support if the issue persists.
+        </p>
+        <div className="mt-6 flex flex-row justify-center gap-4">
+          <Button onClick={reset} variant="outline">
+            Retry
+          </Button>
+          <Button>
+            <Link href="/">Go to Homepage</Link>
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

autogpt_platform/autogpt_builder/src/app/global-error.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import * as Sentry from "@sentry/nextjs";
+import NextError from "next/error";
+import { useEffect } from "react";
+
+export default function GlobalError({
+  error,
+}: {
+  error: Error & { digest?: string };
+}) {
+  useEffect(() => {
+    Sentry.captureException(error);
+  }, [error]);
+
+  return (
+    <html>
+      <body>
+        {/* `NextError` is the default Next.js error page component. Its type
+        definition requires a `statusCode` prop. However, since the App Router
+        does not expose status codes for errors, we simply pass 0 to render a
+        generic error message. */}
+        <NextError statusCode={0} />
+      </body>
+    </html>
+  );
+}

autogpt_platform/autogpt_builder/src/app/globals.css

@@ -0,0 +1,75 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+}
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 240 5.9% 10%;
+    --radius: 0.5rem;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+  }
+
+  .dark {
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

autogpt_platform/autogpt_builder/src/app/layout.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import { Providers } from "@/app/providers";
+import { NavBar } from "@/components/NavBar";
+import { cn } from "@/lib/utils";
+
+import "./globals.css";
+import TallyPopupSimple from "@/components/TallyPopup";
+import { GoogleAnalytics } from "@next/third-parties/google";
+import { Toaster } from "@/components/ui/toaster";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+  title: "NextGen AutoGPT",
+  description: "Your one stop shop to creating AI Agents",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className={cn("antialiased transition-colors", inter.className)}>
+        <Providers
+          attribute="class"
+          defaultTheme="light"
+          // Feel free to remove this line if you want to use the system theme by default
+          // enableSystem
+          disableTransitionOnChange
+        >
+          <div className="flex min-h-screen flex-col">
+            <NavBar />
+            <main className="flex-1 overflow-hidden p-4">{children}</main>
+            <TallyPopupSimple />
+          </div>
+          <Toaster />
+        </Providers>
+      </body>
+
+      <GoogleAnalytics
+        gaId={process.env.GA_MEASUREMENT_ID || "G-FH2XK2W4GN"} // This is the measurement Id for the Google Analytics dev project
+      />
+    </html>
+  );
+}

autogpt_platform/autogpt_builder/src/app/loading.tsx

@@ -0,0 +1,21 @@
+import AgentFlowListSkeleton from "@/components/monitor/skeletons/AgentFlowListSkeleton";
+import React from "react";
+import FlowRunsListSkeleton from "@/components/monitor/skeletons/FlowRunsListSkeleton";
+import FlowRunsStatusSkeleton from "@/components/monitor/skeletons/FlowRunsStatusSkeleton";
+
+export default function MonitorLoadingSkeleton() {
+  return (
+    <div className="space-y-4 p-4">
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
+        {/* Agents Section */}
+        <AgentFlowListSkeleton />
+
+        {/* Runs Section */}
+        <FlowRunsListSkeleton />
+
+        {/* Stats Section */}
+        <FlowRunsStatusSkeleton />
+      </div>
+    </div>
+  );
+}

autogpt_platform/autogpt_builder/src/app/login/actions.ts

@@ -0,0 +1,64 @@
+"use server";
+import { revalidatePath } from "next/cache";
+import { redirect } from "next/navigation";
+import { createServerClient } from "@/lib/supabase/server";
+import { z } from "zod";
+import * as Sentry from "@sentry/nextjs";
+
+const loginFormSchema = z.object({
+  email: z.string().email().min(2).max(64),
+  password: z.string().min(6).max(64),
+});
+
+export async function login(values: z.infer<typeof loginFormSchema>) {
+  return await Sentry.withServerActionInstrumentation("login", {}, async () => {
+    const supabase = createServerClient();
+
+    if (!supabase) {
+      redirect("/error");
+    }
+
+    // We are sure that the values are of the correct type because zod validates the form
+    const { data, error } = await supabase.auth.signInWithPassword(values);
+
+    if (error) {
+      return error.message;
+    }
+
+    if (data.session) {
+      await supabase.auth.setSession(data.session);
+    }
+
+    revalidatePath("/", "layout");
+    redirect("/profile");
+  });
+}
+
+export async function signup(values: z.infer<typeof loginFormSchema>) {
+  "use server";
+  return await Sentry.withServerActionInstrumentation(
+    "signup",
+    {},
+    async () => {
+      const supabase = createServerClient();
+
+      if (!supabase) {
+        redirect("/error");
+      }
+
+      // We are sure that the values are of the correct type because zod validates the form
+      const { data, error } = await supabase.auth.signUp(values);
+
+      if (error) {
+        return error.message;
+      }
+
+      if (data.session) {
+        await supabase.auth.setSession(data.session);
+      }
+
+      revalidatePath("/", "layout");
+      redirect("/profile");
+    },
+  );
+}

autogpt_platform/autogpt_builder/src/app/login/page.tsx

@@ -0,0 +1,234 @@
+"use client";
+import useUser from "@/hooks/useUser";
+import { login, signup } from "./actions";
+import { Button } from "@/components/ui/button";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { useForm } from "react-hook-form";
+import { Input } from "@/components/ui/input";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { PasswordInput } from "@/components/PasswordInput";
+import { FaGoogle, FaGithub, FaDiscord, FaSpinner } from "react-icons/fa";
+import { useState } from "react";
+import { useSupabase } from "@/components/SupabaseProvider";
+import { useRouter } from "next/navigation";
+import Link from "next/link";
+import { Checkbox } from "@/components/ui/checkbox";
+
+const loginFormSchema = z.object({
+  email: z.string().email().min(2).max(64),
+  password: z.string().min(6).max(64),
+  agreeToTerms: z.boolean().refine((value) => value === true, {
+    message: "You must agree to the Terms of Service and Privacy Policy",
+  }),
+});
+
+export default function LoginPage() {
+  const { supabase, isLoading: isSupabaseLoading } = useSupabase();
+  const { user, isLoading: isUserLoading } = useUser();
+  const [feedback, setFeedback] = useState<string | null>(null);
+  const router = useRouter();
+  const [isLoading, setIsLoading] = useState(false);
+
+  const form = useForm<z.infer<typeof loginFormSchema>>({
+    resolver: zodResolver(loginFormSchema),
+    defaultValues: {
+      email: "",
+      password: "",
+      agreeToTerms: false,
+    },
+  });
+
+  if (user) {
+    console.log("User exists, redirecting to profile");
+    router.push("/profile");
+  }
+
+  if (isUserLoading || isSupabaseLoading || user) {
+    return (
+      <div className="flex h-[80vh] items-center justify-center">
+        <FaSpinner className="mr-2 h-16 w-16 animate-spin" />
+      </div>
+    );
+  }
+
+  if (!supabase) {
+    return (
+      <div>
+        User accounts are disabled because Supabase client is unavailable
+      </div>
+    );
+  }
+
+  async function handleSignInWithProvider(
+    provider: "google" | "github" | "discord",
+  ) {
+    const { data, error } = await supabase!.auth.signInWithOAuth({
+      provider: provider,
+      options: {
+        redirectTo:
+          process.env.AUTH_CALLBACK_URL ??
+          `http://localhost:3000/auth/callback`,
+      },
+    });
+
+    if (!error) {
+      setFeedback(null);
+      return;
+    }
+    setFeedback(error.message);
+  }
+
+  const onLogin = async (data: z.infer<typeof loginFormSchema>) => {
+    setIsLoading(true);
+    const error = await login(data);
+    setIsLoading(false);
+    if (error) {
+      setFeedback(error);
+      return;
+    }
+    setFeedback(null);
+  };
+
+  const onSignup = async (data: z.infer<typeof loginFormSchema>) => {
+    if (await form.trigger()) {
+      setIsLoading(true);
+      const error = await signup(data);
+      setIsLoading(false);
+      if (error) {
+        setFeedback(error);
+        return;
+      }
+      setFeedback(null);
+    }
+  };
+
+  return (
+    <div className="flex h-[80vh] items-center justify-center">
+      <div className="w-full max-w-md space-y-6 rounded-lg p-8 shadow-md">
+        <div className="mb-6 space-y-2">
+          <Button
+            className="w-full"
+            onClick={() => handleSignInWithProvider("google")}
+            variant="outline"
+            type="button"
+            disabled={isLoading}
+          >
+            <FaGoogle className="mr-2 h-4 w-4" />
+            Sign in with Google
+          </Button>
+          <Button
+            className="w-full"
+            onClick={() => handleSignInWithProvider("github")}
+            variant="outline"
+            type="button"
+            disabled={isLoading}
+          >
+            <FaGithub className="mr-2 h-4 w-4" />
+            Sign in with GitHub
+          </Button>
+          <Button
+            className="w-full"
+            onClick={() => handleSignInWithProvider("discord")}
+            variant="outline"
+            type="button"
+            disabled={isLoading}
+          >
+            <FaDiscord className="mr-2 h-4 w-4" />
+            Sign in with Discord
+          </Button>
+        </div>
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onLogin)}>
+            <FormField
+              control={form.control}
+              name="email"
+              render={({ field }) => (
+                <FormItem className="mb-4">
+                  <FormLabel>Email</FormLabel>
+                  <FormControl>
+                    <Input placeholder="user@email.com" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="password"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Password</FormLabel>
+                  <FormControl>
+                    <PasswordInput placeholder="password" {...field} />
+                  </FormControl>
+                  <FormDescription>
+                    Password needs to be at least 6 characters long
+                  </FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="agreeToTerms"
+              render={({ field }) => (
+                <FormItem className="mt-4 flex flex-row items-start space-x-3 space-y-0">
+                  <FormControl>
+                    <Checkbox
+                      checked={field.value}
+                      onCheckedChange={field.onChange}
+                    />
+                  </FormControl>
+                  <div className="space-y-1 leading-none">
+                    <FormLabel>
+                      I agree to the{" "}
+                      <Link href="/terms-of-service" className="underline">
+                        Terms of Service
+                      </Link>{" "}
+                      and{" "}
+                      <Link
+                        href="https://www.notion.so/auto-gpt/Privacy-Policy-ab11c9c20dbd4de1a15dcffe84d77984"
+                        className="underline"
+                      >
+                        Privacy Policy
+                      </Link>
+                    </FormLabel>
+                    <FormMessage />
+                  </div>
+                </FormItem>
+              )}
+            />
+            <div className="mb-6 mt-6 flex w-full space-x-4">
+              <Button
+                className="flex w-1/2 justify-center"
+                type="submit"
+                disabled={isLoading}
+              >
+                Log in
+              </Button>
+              <Button
+                className="flex w-1/2 justify-center"
+                variant="outline"
+                type="button"
+                onClick={form.handleSubmit(onSignup)}
+                disabled={isLoading}
+              >
+                Sign up
+              </Button>
+            </div>
+          </form>
+          <p className="text-sm text-red-500">{feedback}</p>
+        </Form>
+      </div>
+    </div>
+  );
+}

autogpt_platform/autogpt_builder/src/app/marketplace/[id]/page.tsx

@@ -0,0 +1,41 @@
+import { Suspense } from "react";
+import { notFound } from "next/navigation";
+import MarketplaceAPI from "@/lib/marketplace-api";
+import { AgentDetailResponse } from "@/lib/marketplace-api";
+import AgentDetailContent from "@/components/marketplace/AgentDetailContent";
+
+async function getAgentDetails(id: string): Promise<AgentDetailResponse> {
+  const apiUrl =
+    process.env.NEXT_PUBLIC_AGPT_MARKETPLACE_URL ||
+    "http://localhost:8015/api/v1/market";
+  const api = new MarketplaceAPI(apiUrl);
+  try {
+    console.log(`Fetching agent details for id: ${id}`);
+    const agent = await api.getAgentDetails(id);
+    console.log(`Agent details fetched:`, agent);
+    return agent;
+  } catch (error) {
+    console.error(`Error fetching agent details:`, error);
+    throw error;
+  }
+}
+
+export default async function AgentDetailPage({
+  params,
+}: {
+  params: { id: string };
+}) {
+  let agent: AgentDetailResponse;
+
+  try {
+    agent = await getAgentDetails(params.id);
+  } catch (error) {
+    return notFound();
+  }
+
+  return (
+    <Suspense fallback={<div>Loading...</div>}>
+      <AgentDetailContent agent={agent} />
+    </Suspense>
+  );
+}

autogpt_platform/autogpt_builder/src/app/marketplace/page.tsx

@@ -0,0 +1,317 @@
+"use client";
+import React, { useEffect, useMemo, useState, useCallback } from "react";
+import { useRouter } from "next/navigation";
+import Image from "next/image";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import MarketplaceAPI, {
+  AgentResponse,
+  AgentListResponse,
+  AgentWithRank,
+} from "@/lib/marketplace-api";
+import {
+  ChevronLeft,
+  ChevronRight,
+  PlusCircle,
+  Search,
+  Star,
+} from "lucide-react";
+
+// Utility Functions
+function debounce<T extends (...args: any[]) => any>(
+  func: T,
+  wait: number,
+): (...args: Parameters<T>) => void {
+  let timeout: NodeJS.Timeout | null = null;
+  return (...args: Parameters<T>) => {
+    if (timeout) clearTimeout(timeout);
+    timeout = setTimeout(() => func(...args), wait);
+  };
+}
+
+// Types
+type Agent = AgentResponse | AgentWithRank;
+
+// Components
+const HeroSection: React.FC = () => {
+  const router = useRouter();
+
+  return (
+    <div className="relative bg-indigo-600 py-6">
+      <div className="absolute inset-0 z-0">
+        <Image
+          src="https://images.unsplash.com/photo-1562408590-e32931084e23?auto=format&fit=crop&w=2070&q=80"
+          alt="Marketplace background"
+          layout="fill"
+          objectFit="cover"
+          quality={75}
+          priority
+          className="opacity-20"
+        />
+        <div
+          className="absolute inset-0 bg-indigo-600 mix-blend-multiply"
+          aria-hidden="true"
+        ></div>
+      </div>
+      <div className="relative mx-auto flex max-w-7xl items-center justify-between px-4 py-4 sm:px-6 lg:px-8">
+        <div>
+          <h1 className="text-2xl font-extrabold tracking-tight text-white sm:text-3xl lg:text-4xl">
+            AutoGPT Marketplace
+          </h1>
+          <p className="mt-2 max-w-3xl text-sm text-indigo-100 sm:text-base">
+            Discover and share proven AI Agents to supercharge your business.
+          </p>
+        </div>
+        <Button
+          onClick={() => router.push("/marketplace/submit")}
+          className="flex items-center bg-white text-indigo-600 hover:bg-indigo-50"
+        >
+          <PlusCircle className="mr-2 h-4 w-4" />
+          Submit Agent
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+const SearchInput: React.FC<{
+  value: string;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}> = ({ value, onChange }) => (
+  <div className="relative mb-8">
+    <Input
+      placeholder="Search agents..."
+      type="text"
+      className="w-full rounded-full border-gray-300 py-2 pl-10 pr-4 focus:border-indigo-500 focus:ring-indigo-500"
+      value={value}
+      onChange={onChange}
+    />
+    <Search
+      className="absolute left-3 top-1/2 -translate-y-1/2 transform text-gray-400"
+      size={20}
+    />
+  </div>
+);
+
+const AgentCard: React.FC<{ agent: Agent; featured?: boolean }> = ({
+  agent,
+  featured = false,
+}) => {
+  const router = useRouter();
+
+  const handleClick = () => {
+    router.push(`/marketplace/${agent.id}`);
+  };
+
+  return (
+    <div
+      className={`flex cursor-pointer flex-col justify-between rounded-lg border p-6 transition-colors duration-200 hover:bg-gray-50 ${featured ? "border-indigo-500 shadow-md" : "border-gray-200"}`}
+      onClick={handleClick}
+    >
+      <div>
+        <div className="mb-2 flex items-center justify-between">
+          <h3 className="truncate text-lg font-semibold text-gray-900">
+            {agent.name}
+          </h3>
+          {featured && <Star className="text-indigo-500" size={20} />}
+        </div>
+        <p className="mb-4 line-clamp-2 text-sm text-gray-500">
+          {agent.description}
+        </p>
+        <div className="mb-2 text-xs text-gray-400">
+          Categories: {agent.categories.join(", ")}
+        </div>
+      </div>
+      <div className="flex items-end justify-between">
+        <div className="text-xs text-gray-400">
+          Updated {new Date(agent.updatedAt).toLocaleDateString()}
+        </div>
+        <div className="text-xs text-gray-400">Downloads {agent.downloads}</div>
+        {"rank" in agent && (
+          <div className="text-xs text-indigo-600">
+            Rank: {agent.rank.toFixed(2)}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+const AgentGrid: React.FC<{
+  agents: Agent[];
+  title: string;
+  featured?: boolean;
+}> = ({ agents, title, featured = false }) => (
+  <div className="mb-12">
+    <h2 className="mb-4 text-2xl font-bold text-gray-900">{title}</h2>
+    <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
+      {agents.map((agent) => (
+        <AgentCard agent={agent} key={agent.id} featured={featured} />
+      ))}
+    </div>
+  </div>
+);
+
+const Pagination: React.FC<{
+  page: number;
+  totalPages: number;
+  onPrevPage: () => void;
+  onNextPage: () => void;
+}> = ({ page, totalPages, onPrevPage, onNextPage }) => (
+  <div className="mt-8 flex items-center justify-between">
+    <Button
+      onClick={onPrevPage}
+      disabled={page === 1}
+      className="flex items-center space-x-2 rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50"
+    >
+      <ChevronLeft size={16} />
+      <span>Previous</span>
+    </Button>
+    <span className="text-sm text-gray-700">
+      Page {page} of {totalPages}
+    </span>
+    <Button
+      onClick={onNextPage}
+      disabled={page === totalPages}
+      className="flex items-center space-x-2 rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50"
+    >
+      <span>Next</span>
+      <ChevronRight size={16} />
+    </Button>
+  </div>
+);
+
+// Main Component
+const Marketplace: React.FC = () => {
+  const apiUrl =
+    process.env.NEXT_PUBLIC_AGPT_MARKETPLACE_URL ||
+    "http://localhost:8015/api/v1/market";
+  const api = useMemo(() => new MarketplaceAPI(apiUrl), [apiUrl]);
+
+  const [searchValue, setSearchValue] = useState("");
+  const [searchResults, setSearchResults] = useState<Agent[]>([]);
+  const [featuredAgents, setFeaturedAgents] = useState<Agent[]>([]);
+  const [topAgents, setTopAgents] = useState<Agent[]>([]);
+  const [page, setPage] = useState(1);
+  const [totalPages, setTotalPages] = useState(1);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const fetchTopAgents = useCallback(
+    async (currentPage: number) => {
+      setIsLoading(true);
+      try {
+        const response = await api.getTopDownloadedAgents(currentPage, 9);
+        setTopAgents(response.agents);
+        setTotalPages(response.total_pages);
+      } catch (error) {
+        console.error("Error fetching top agents:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [api],
+  );
+
+  const fetchFeaturedAgents = useCallback(async () => {
+    try {
+      const featured = await api.getFeaturedAgents();
+      setFeaturedAgents(featured.agents);
+    } catch (error) {
+      console.error("Error fetching featured agents:", error);
+    }
+  }, [api]);
+
+  const searchAgents = useCallback(
+    async (searchTerm: string) => {
+      setIsLoading(true);
+      try {
+        const response = await api.searchAgents(searchTerm, 1, 30);
+        const filteredAgents = response.filter((agent) => agent.rank > 0);
+        setSearchResults(filteredAgents);
+      } catch (error) {
+        console.error("Error searching agents:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [api],
+  );
+
+  const debouncedSearch = useMemo(
+    () => debounce(searchAgents, 300),
+    [searchAgents],
+  );
+
+  useEffect(() => {
+    if (searchValue) {
+      debouncedSearch(searchValue);
+    } else {
+      fetchTopAgents(page);
+    }
+  }, [searchValue, page, debouncedSearch, fetchTopAgents]);
+
+  useEffect(() => {
+    fetchFeaturedAgents();
+  }, [fetchFeaturedAgents]);
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchValue(e.target.value);
+    setPage(1);
+  };
+
+  const handleNextPage = () => {
+    if (page < totalPages) {
+      setPage(page + 1);
+    }
+  };
+
+  const handlePrevPage = () => {
+    if (page > 1) {
+      setPage(page - 1);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <HeroSection />
+      <div className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
+        <SearchInput value={searchValue} onChange={handleInputChange} />
+        {isLoading ? (
+          <div className="py-12 text-center">
+            <div className="inline-block h-8 w-8 animate-spin rounded-full border-b-2 border-gray-900"></div>
+            <p className="mt-2 text-gray-600">Loading agents...</p>
+          </div>
+        ) : searchValue ? (
+          searchResults.length > 0 ? (
+            <AgentGrid agents={searchResults} title="Search Results" />
+          ) : (
+            <div className="py-12 text-center">
+              <p className="text-gray-600">
+                No agents found matching your search criteria.
+              </p>
+            </div>
+          )
+        ) : (
+          <>
+            {featuredAgents.length > 0 && (
+              <AgentGrid
+                agents={featuredAgents}
+                title="Featured Agents"
+                featured={true}
+              />
+            )}
+            <AgentGrid agents={topAgents} title="Top Downloaded Agents" />
+            <Pagination
+              page={page}
+              totalPages={totalPages}
+              onPrevPage={handlePrevPage}
+              onNextPage={handleNextPage}
+            />
+          </>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Marketplace;

autogpt_platform/autogpt_builder/src/app/marketplace/submit/page.tsx

@@ -0,0 +1,449 @@
+"use client";
+
+import React, { useState, useEffect, useMemo } from "react";
+import { useRouter } from "next/navigation";
+import { useForm, Controller } from "react-hook-form";
+import MarketplaceAPI from "@/lib/marketplace-api";
+import AutoGPTServerAPI from "@/lib/autogpt-server-api";
+import { Card } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  MultiSelector,
+  MultiSelectorContent,
+  MultiSelectorInput,
+  MultiSelectorItem,
+  MultiSelectorList,
+  MultiSelectorTrigger,
+} from "@/components/ui/multiselect";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+type FormData = {
+  name: string;
+  description: string;
+  author: string;
+  keywords: string[];
+  categories: string[];
+  agreeToTerms: boolean;
+  selectedAgentId: string;
+};
+
+const keywords = [
+  "Automation",
+  "AI Workflows",
+  "Integration",
+  "Task Automation",
+  "Data Processing",
+  "Workflow Management",
+  "Real-time Analytics",
+  "Custom Triggers",
+  "Event-driven",
+  "API Integration",
+  "Data Transformation",
+  "Multi-step Workflows",
+  "Collaboration Tools",
+  "Business Process Automation",
+  "No-code Solutions",
+  "AI-Powered",
+  "Smart Notifications",
+  "Data Syncing",
+  "User Engagement",
+  "Reporting Automation",
+  "Lead Generation",
+  "Customer Support Automation",
+  "E-commerce Automation",
+  "Social Media Management",
+  "Email Marketing Automation",
+  "Document Management",
+  "Data Enrichment",
+  "Performance Tracking",
+  "Predictive Analytics",
+  "Resource Allocation",
+  "Chatbot",
+  "Virtual Assistant",
+  "Workflow Automation",
+  "Social Media Manager",
+  "Email Optimizer",
+  "Content Generator",
+  "Data Analyzer",
+  "Task Scheduler",
+  "Customer Service Bot",
+  "Personalization Engine",
+];
+
+const SubmitPage: React.FC = () => {
+  const router = useRouter();
+  const {
+    control,
+    handleSubmit,
+    watch,
+    setValue,
+    formState: { errors },
+  } = useForm<FormData>({
+    defaultValues: {
+      selectedAgentId: "", // Initialize with an empty string
+      name: "",
+      description: "",
+      author: "",
+      keywords: [],
+      categories: [],
+      agreeToTerms: false,
+    },
+  });
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [submitError, setSubmitError] = useState<string | null>(null);
+  const [userAgents, setUserAgents] = useState<
+    Array<{ id: string; name: string; version: number }>
+  >([]);
+  const [selectedAgentGraph, setSelectedAgentGraph] = useState<any>(null);
+
+  const selectedAgentId = watch("selectedAgentId");
+
+  useEffect(() => {
+    const fetchUserAgents = async () => {
+      const api = new AutoGPTServerAPI();
+      const agents = await api.listGraphs();
+      console.log(agents);
+      setUserAgents(
+        agents.map((agent) => ({
+          id: agent.id,
+          name: agent.name || `Agent (${agent.id})`,
+          version: agent.version,
+        })),
+      );
+    };
+
+    fetchUserAgents();
+  }, []);
+
+  useEffect(() => {
+    const fetchAgentGraph = async () => {
+      if (selectedAgentId) {
+        const api = new AutoGPTServerAPI();
+        const graph = await api.getGraph(selectedAgentId);
+        setSelectedAgentGraph(graph);
+        setValue("name", graph.name);
+        setValue("description", graph.description);
+      }
+    };
+
+    fetchAgentGraph();
+  }, [selectedAgentId, setValue]);
+
+  const onSubmit = async (data: FormData) => {
+    setIsSubmitting(true);
+    setSubmitError(null);
+
+    if (!data.agreeToTerms) {
+      throw new Error("You must agree to the terms of service");
+    }
+
+    try {
+      if (!selectedAgentGraph) {
+        throw new Error("Please select an agent");
+      }
+
+      const api = new MarketplaceAPI();
+      await api.submitAgent(
+        {
+          ...selectedAgentGraph,
+          name: data.name,
+          description: data.description,
+        },
+        data.author,
+        data.keywords,
+        data.categories,
+      );
+
+      router.push("/marketplace?submission=success");
+    } catch (error) {
+      console.error("Submission error:", error);
+      setSubmitError(
+        error instanceof Error ? error.message : "An unknown error occurred",
+      );
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <h1 className="mb-6 text-3xl font-bold">Submit Your Agent</h1>
+      <Card className="p-6">
+        <form onSubmit={handleSubmit(onSubmit)}>
+          <div className="space-y-4">
+            <Controller
+              name="selectedAgentId"
+              control={control}
+              rules={{ required: "Please select an agent" }}
+              render={({ field }) => (
+                <div>
+                  <label
+                    htmlFor={field.name}
+                    className="block text-sm font-medium text-gray-700"
+                  >
+                    Select Agent
+                  </label>
+                  <Select
+                    onValueChange={field.onChange}
+                    value={field.value || ""}
+                  >
+                    <SelectTrigger className="w-full">
+                      <SelectValue placeholder="Select an agent" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {userAgents.map((agent) => (
+                        <SelectItem key={agent.id} value={agent.id}>
+                          {agent.name} (v{agent.version})
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                  {errors.selectedAgentId && (
+                    <p className="mt-1 text-sm text-red-600">
+                      {errors.selectedAgentId.message}
+                    </p>
+                  )}
+                </div>
+              )}
+            />
+
+            {/* {selectedAgentGraph && (
+              <div className="mt-4" style={{ height: "600px" }}>
+                <ReactFlow
+                  nodes={nodes}
+                  edges={edges}
+                  fitView
+                  attributionPosition="bottom-left"
+                  nodesConnectable={false}
+                  nodesDraggable={false}
+                  zoomOnScroll={false}
+                  panOnScroll={false}
+                  elementsSelectable={false}
+                >
+                  <Controls showInteractive={false} />
+                  <Background />
+                </ReactFlow>
+              </div>
+            )} */}
+
+            <Controller
+              name="name"
+              control={control}
+              rules={{ required: "Name is required" }}
+              render={({ field }) => (
+                <div>
+                  <label
+                    htmlFor={field.name}
+                    className="block text-sm font-medium text-gray-700"
+                  >
+                    Agent Name
+                  </label>
+                  <Input
+                    id={field.name}
+                    placeholder="Enter your agent's name"
+                    {...field}
+                  />
+                  {errors.name && (
+                    <p className="mt-1 text-sm text-red-600">
+                      {errors.name.message}
+                    </p>
+                  )}
+                </div>
+              )}
+            />
+
+            <Controller
+              name="description"
+              control={control}
+              rules={{ required: "Description is required" }}
+              render={({ field }) => (
+                <div>
+                  <label
+                    htmlFor={field.name}
+                    className="block text-sm font-medium text-gray-700"
+                  >
+                    Description
+                  </label>
+                  <Textarea
+                    id={field.name}
+                    placeholder="Describe your agent"
+                    {...field}
+                  />
+                  {errors.description && (
+                    <p className="mt-1 text-sm text-red-600">
+                      {errors.description.message}
+                    </p>
+                  )}
+                </div>
+              )}
+            />
+
+            <Controller
+              name="author"
+              control={control}
+              rules={{ required: "Author is required" }}
+              render={({ field }) => (
+                <div>
+                  <label
+                    htmlFor={field.name}
+                    className="block text-sm font-medium text-gray-700"
+                  >
+                    Author
+                  </label>
+                  <Input
+                    id={field.name}
+                    placeholder="Your name or username"
+                    {...field}
+                  />
+                  {errors.author && (
+                    <p className="mt-1 text-sm text-red-600">
+                      {errors.author.message}
+                    </p>
+                  )}
+                </div>
+              )}
+            />
+
+            <Controller
+              name="keywords"
+              control={control}
+              rules={{ required: "At least one keyword is required" }}
+              render={({ field }) => (
+                <div>
+                  <label
+                    htmlFor={field.name}
+                    className="block text-sm font-medium text-gray-700"
+                  >
+                    Keywords
+                  </label>
+                  <MultiSelector
+                    values={field.value || []}
+                    onValuesChange={field.onChange}
+                  >
+                    <MultiSelectorTrigger>
+                      <MultiSelectorInput placeholder="Add keywords" />
+                    </MultiSelectorTrigger>
+                    <MultiSelectorContent>
+                      <MultiSelectorList>
+                        {keywords.map((keyword) => (
+                          <MultiSelectorItem key={keyword} value={keyword}>
+                            {keyword}
+                          </MultiSelectorItem>
+                        ))}
+                      </MultiSelectorList>
+                    </MultiSelectorContent>
+                  </MultiSelector>
+                  {errors.keywords && (
+                    <p className="mt-1 text-sm text-red-600">
+                      {errors.keywords.message}
+                    </p>
+                  )}
+                </div>
+              )}
+            />
+
+            <Controller
+              name="categories"
+              control={control}
+              rules={{ required: "At least one category is required" }}
+              render={({ field }) => (
+                <div>
+                  <label
+                    htmlFor={field.name}
+                    className="block text-sm font-medium text-gray-700"
+                  >
+                    Categories
+                  </label>
+                  <MultiSelector
+                    values={field.value || []}
+                    onValuesChange={field.onChange}
+                  >
+                    <MultiSelectorTrigger>
+                      <MultiSelectorInput placeholder="Select categories" />
+                    </MultiSelectorTrigger>
+                    <MultiSelectorContent>
+                      <MultiSelectorList>
+                        <MultiSelectorItem value="productivity">
+                          Productivity
+                        </MultiSelectorItem>
+                        <MultiSelectorItem value="entertainment">
+                          Entertainment
+                        </MultiSelectorItem>
+                        <MultiSelectorItem value="education">
+                          Education
+                        </MultiSelectorItem>
+                        <MultiSelectorItem value="business">
+                          Business
+                        </MultiSelectorItem>
+                        <MultiSelectorItem value="other">
+                          Other
+                        </MultiSelectorItem>
+                      </MultiSelectorList>
+                    </MultiSelectorContent>
+                  </MultiSelector>
+                  {errors.categories && (
+                    <p className="mt-1 text-sm text-red-600">
+                      {errors.categories.message}
+                    </p>
+                  )}
+                </div>
+              )}
+            />
+
+            <Controller
+              name="agreeToTerms"
+              control={control}
+              rules={{ required: "You must agree to the terms of service" }}
+              render={({ field }) => (
+                <div className="flex items-center space-x-2">
+                  <Checkbox
+                    id="agreeToTerms"
+                    checked={field.value}
+                    onCheckedChange={field.onChange}
+                  />
+                  <label
+                    htmlFor="agreeToTerms"
+                    className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                  >
+                    I agree to the{" "}
+                    <a href="/terms" className="text-blue-500 hover:underline">
+                      terms of service
+                    </a>
+                  </label>
+                </div>
+              )}
+            />
+            {errors.agreeToTerms && (
+              <p className="mt-1 text-sm text-red-600">
+                {errors.agreeToTerms.message}
+              </p>
+            )}
+
+            {submitError && (
+              <Alert variant="destructive">
+                <AlertTitle>Submission Failed</AlertTitle>
+                <AlertDescription>{submitError}</AlertDescription>
+              </Alert>
+            )}
+
+            <Button type="submit" className="w-full" disabled={isSubmitting}>
+              {isSubmitting ? "Submitting..." : "Submit Agent"}
+            </Button>
+          </div>
+        </form>
+      </Card>
+    </div>
+  );
+};
+
+export default SubmitPage;

autogpt_platform/autogpt_builder/src/app/page.tsx

@@ -0,0 +1,178 @@
+"use client";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+
+import AutoGPTServerAPI, {
+  GraphMeta,
+  NodeExecutionResult,
+} from "@/lib/autogpt-server-api";
+
+import { Card } from "@/components/ui/card";
+import { FlowRun } from "@/lib/types";
+import {
+  AgentFlowList,
+  FlowInfo,
+  FlowRunInfo,
+  FlowRunsList,
+  FlowRunsStats,
+} from "@/components/monitor";
+
+const Monitor = () => {
+  const [flows, setFlows] = useState<GraphMeta[]>([]);
+  const [flowRuns, setFlowRuns] = useState<FlowRun[]>([]);
+  const [selectedFlow, setSelectedFlow] = useState<GraphMeta | null>(null);
+  const [selectedRun, setSelectedRun] = useState<FlowRun | null>(null);
+
+  const api = useMemo(() => new AutoGPTServerAPI(), []);
+
+  const refreshFlowRuns = useCallback(
+    (flowID: string) => {
+      // Fetch flow run IDs
+      api.listGraphRunIDs(flowID).then((runIDs) =>
+        runIDs.map((runID) => {
+          let run;
+          if (
+            (run = flowRuns.find((fr) => fr.id == runID)) &&
+            !["waiting", "running"].includes(run.status)
+          ) {
+            return;
+          }
+
+          // Fetch flow run
+          api.getGraphExecutionInfo(flowID, runID).then((execInfo) =>
+            setFlowRuns((flowRuns) => {
+              if (execInfo.length == 0) return flowRuns;
+
+              const flowRunIndex = flowRuns.findIndex((fr) => fr.id == runID);
+              const flowRun = flowRunFromNodeExecutionResults(execInfo);
+              if (flowRunIndex > -1) {
+                flowRuns.splice(flowRunIndex, 1, flowRun);
+              } else {
+                flowRuns.push(flowRun);
+              }
+              return [...flowRuns];
+            }),
+          );
+        }),
+      );
+    },
+    [api, flowRuns],
+  );
+
+  const fetchFlowsAndRuns = useCallback(() => {
+    api.listGraphs().then((flows) => {
+      setFlows(flows);
+      flows.map((flow) => refreshFlowRuns(flow.id));
+    });
+  }, [api, refreshFlowRuns]);
+
+  useEffect(() => fetchFlowsAndRuns(), [fetchFlowsAndRuns]);
+  useEffect(() => {
+    const intervalId = setInterval(
+      () => flows.map((f) => refreshFlowRuns(f.id)),
+      5000,
+    );
+    return () => clearInterval(intervalId);
+  }, [flows, refreshFlowRuns]);
+
+  const column1 = "md:col-span-2 xl:col-span-3 xxl:col-span-2";
+  const column2 = "md:col-span-3 lg:col-span-2 xl:col-span-3 space-y-4";
+  const column3 = "col-span-full xl:col-span-4 xxl:col-span-5";
+
+  return (
+    <div className="grid grid-cols-1 gap-4 md:grid-cols-5 lg:grid-cols-4 xl:grid-cols-10">
+      <AgentFlowList
+        className={column1}
+        flows={flows}
+        flowRuns={flowRuns}
+        selectedFlow={selectedFlow}
+        onSelectFlow={(f) => {
+          setSelectedRun(null);
+          setSelectedFlow(f.id == selectedFlow?.id ? null : f);
+        }}
+      />
+      <FlowRunsList
+        className={column2}
+        flows={flows}
+        runs={[
+          ...(selectedFlow
+            ? flowRuns.filter((v) => v.graphID == selectedFlow.id)
+            : flowRuns),
+        ].sort((a, b) => Number(a.startTime) - Number(b.startTime))}
+        selectedRun={selectedRun}
+        onSelectRun={(r) => setSelectedRun(r.id == selectedRun?.id ? null : r)}
+      />
+      {(selectedRun && (
+        <FlowRunInfo
+          flow={selectedFlow || flows.find((f) => f.id == selectedRun.graphID)!}
+          flowRun={selectedRun}
+          className={column3}
+        />
+      )) ||
+        (selectedFlow && (
+          <FlowInfo
+            flow={selectedFlow}
+            flowRuns={flowRuns.filter((r) => r.graphID == selectedFlow.id)}
+            className={column3}
+          />
+        )) || (
+          <Card className={`p-6 ${column3}`}>
+            <FlowRunsStats flows={flows} flowRuns={flowRuns} />
+          </Card>
+        )}
+    </div>
+  );
+};
+
+function flowRunFromNodeExecutionResults(
+  nodeExecutionResults: NodeExecutionResult[],
+): FlowRun {
+  // Determine overall status
+  let status: "running" | "waiting" | "success" | "failed" = "success";
+  for (const execution of nodeExecutionResults) {
+    if (execution.status === "FAILED") {
+      status = "failed";
+      break;
+    } else if (["QUEUED", "RUNNING"].includes(execution.status)) {
+      status = "running";
+      break;
+    } else if (execution.status === "INCOMPLETE") {
+      status = "waiting";
+    }
+  }
+
+  // Determine aggregate startTime, endTime, and totalRunTime
+  const now = Date.now();
+  const startTime = Math.min(
+    ...nodeExecutionResults.map((ner) => ner.add_time.getTime()),
+    now,
+  );
+  const endTime = ["success", "failed"].includes(status)
+    ? Math.max(
+        ...nodeExecutionResults.map((ner) => ner.end_time?.getTime() || 0),
+        startTime,
+      )
+    : now;
+  const duration = (endTime - startTime) / 1000; // Convert to seconds
+  const totalRunTime =
+    nodeExecutionResults.reduce(
+      (cum, node) =>
+        cum +
+        ((node.end_time?.getTime() ?? now) -
+          (node.start_time?.getTime() ?? now)),
+      0,
+    ) / 1000;
+
+  return {
+    id: nodeExecutionResults[0].graph_exec_id,
+    graphID: nodeExecutionResults[0].graph_id,
+    graphVersion: nodeExecutionResults[0].graph_version,
+    status,
+    startTime,
+    endTime,
+    duration,
+    totalRunTime,
+    nodeExecutionResults: nodeExecutionResults,
+  };
+}
+
+export default Monitor;

autogpt_platform/autogpt_builder/src/app/profile/page.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import { useSupabase } from "@/components/SupabaseProvider";
+import { Button } from "@/components/ui/button";
+import useUser from "@/hooks/useUser";
+import { useRouter } from "next/navigation";
+import { FaSpinner } from "react-icons/fa";
+
+export default function PrivatePage() {
+  const { user, isLoading, error } = useUser();
+  const { supabase } = useSupabase();
+  const router = useRouter();
+
+  if (isLoading) {
+    return (
+      <div className="flex h-[80vh] items-center justify-center">
+        <FaSpinner className="mr-2 h-16 w-16 animate-spin" />
+      </div>
+    );
+  }
+
+  if (error || !user || !supabase) {
+    router.push("/login");
+    return null;
+  }
+
+  return (
+    <div>
+      <p>Hello {user.email}</p>
+      <Button onClick={() => supabase.auth.signOut()}>Log out</Button>
+    </div>
+  );
+}

autogpt_platform/autogpt_builder/src/app/providers.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import * as React from "react";
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+import { ThemeProviderProps } from "next-themes/dist/types";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import SupabaseProvider from "@/components/SupabaseProvider";
+
+export function Providers({ children, ...props }: ThemeProviderProps) {
+  return (
+    <NextThemesProvider {...props}>
+      <SupabaseProvider>
+        <TooltipProvider>{children}</TooltipProvider>
+      </SupabaseProvider>
+    </NextThemesProvider>
+  );
+}

autogpt_platform/autogpt_builder/src/app/unauthorized/page.tsx

@@ -0,0 +1,9 @@
+// app/unauthorized/page.tsx
+export default function Unauthorized() {
+  return (
+    <div>
+      <h1>Unauthorized Access</h1>
+      <p>You do not have permission to view this page.</p>
+    </div>
+  );
+}

autogpt_platform/autogpt_builder/src/components/ConnectionLine.tsx

@@ -0,0 +1,34 @@
+import {
+  BaseEdge,
+  ConnectionLineComponentProps,
+  getBezierPath,
+  Position,
+} from "@xyflow/react";
+
+const ConnectionLine: React.FC<ConnectionLineComponentProps> = ({
+  fromPosition,
+  fromHandle,
+  fromX,
+  fromY,
+  toPosition,
+  toX,
+  toY,
+}) => {
+  const sourceX =
+    fromPosition === Position.Right
+      ? fromX + (fromHandle?.width! / 2 - 5)
+      : fromX - (fromHandle?.width! / 2 - 5);
+
+  const [path] = getBezierPath({
+    sourceX: sourceX,
+    sourceY: fromY,
+    sourcePosition: fromPosition,
+    targetX: toX,
+    targetY: toY,
+    targetPosition: toPosition,
+  });
+
+  return <BaseEdge path={path} style={{ strokeWidth: 2, stroke: "#555" }} />;
+};
+
+export default ConnectionLine;

autogpt_platform/autogpt_builder/src/components/CreditButton.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { IconRefresh } from "@/components/ui/icons";
+import AutoGPTServerAPI from "@/lib/autogpt-server-api";
+
+export default function CreditButton() {
+  const [credit, setCredit] = useState<number | null>(null);
+  const api = new AutoGPTServerAPI();
+
+  const fetchCredit = async () => {
+    const response = await api.getUserCredit();
+    setCredit(response.credits);
+  };
+  useEffect(() => {
+    fetchCredit();
+  }, [api]);
+
+  return (
+    credit !== null && (
+      <Button
+        onClick={fetchCredit}
+        variant="outline"
+        className="flex items-center space-x-2 text-muted-foreground"
+      >
+        <span>Credits: {credit}</span>
+        <IconRefresh />
+      </Button>
+    )
+  );
+}

autogpt_platform/autogpt_builder/src/components/CustomEdge.tsx

@@ -0,0 +1,235 @@
+import React, { useCallback, useContext, useEffect, useState } from "react";
+import {
+  BaseEdge,
+  EdgeLabelRenderer,
+  EdgeProps,
+  useReactFlow,
+  XYPosition,
+  Edge,
+  Node,
+} from "@xyflow/react";
+import "./customedge.css";
+import { X } from "lucide-react";
+import { useBezierPath } from "@/hooks/useBezierPath";
+import { FlowContext } from "./Flow";
+
+export type CustomEdgeData = {
+  edgeColor: string;
+  sourcePos?: XYPosition;
+  isStatic?: boolean;
+  beadUp?: number;
+  beadDown?: number;
+  beadData?: any[];
+};
+
+type Bead = {
+  t: number;
+  targetT: number;
+  startTime: number;
+};
+
+export type CustomEdge = Edge<CustomEdgeData, "custom">;
+
+export function CustomEdge({
+  id,
+  data,
+  selected,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  markerEnd,
+}: EdgeProps<CustomEdge>) {
+  const [isHovered, setIsHovered] = useState(false);
+  const [beads, setBeads] = useState<{
+    beads: Bead[];
+    created: number;
+    destroyed: number;
+  }>({ beads: [], created: 0, destroyed: 0 });
+  const { svgPath, length, getPointForT, getTForDistance } = useBezierPath(
+    sourceX - 5,
+    sourceY,
+    targetX + 3,
+    targetY,
+  );
+  const { deleteElements } = useReactFlow<Node, CustomEdge>();
+  const { visualizeBeads } = useContext(FlowContext) ?? {
+    visualizeBeads: "no",
+  };
+
+  const onEdgeRemoveClick = () => {
+    deleteElements({ edges: [{ id }] });
+  };
+
+  const animationDuration = 500; // Duration in milliseconds for bead to travel the curve
+  const beadDiameter = 12;
+  const deltaTime = 16;
+
+  const setTargetPositions = useCallback(
+    (beads: Bead[]) => {
+      const distanceBetween = Math.min(
+        (length - beadDiameter) / (beads.length + 1),
+        beadDiameter,
+      );
+
+      return beads.map((bead, index) => {
+        const distanceFromEnd = beadDiameter * 1.35;
+        const targetPosition = distanceBetween * index + distanceFromEnd;
+        const t = getTForDistance(-targetPosition);
+
+        return {
+          ...bead,
+          t: visualizeBeads === "animate" ? bead.t : t,
+          targetT: t,
+        } as Bead;
+      });
+    },
+    [getTForDistance, length, visualizeBeads],
+  );
+
+  useEffect(() => {
+    if (data?.beadUp === 0 && data?.beadDown === 0) {
+      setBeads({ beads: [], created: 0, destroyed: 0 });
+      return;
+    }
+
+    const beadUp = data?.beadUp!;
+
+    // Add beads
+    setBeads(({ beads, created, destroyed }) => {
+      const newBeads = [];
+      for (let i = 0; i < beadUp - created; i++) {
+        newBeads.push({ t: 0, targetT: 0, startTime: Date.now() });
+      }
+
+      const b = setTargetPositions([...beads, ...newBeads]);
+      return { beads: b, created: beadUp, destroyed };
+    });
+
+    // Remove beads if not animating
+    if (visualizeBeads !== "animate") {
+      setBeads(({ beads, created, destroyed }) => {
+        let destroyedCount = 0;
+
+        const newBeads = beads
+          .map((bead) => ({ ...bead }))
+          .filter((bead, index) => {
+            const beadDown = data?.beadDown!;
+
+            // Remove always one less bead in case of static edge, so it stays at the connection point
+            const removeCount = beadDown - destroyed - (data?.isStatic ? 1 : 0);
+            if (bead.t >= bead.targetT && index < removeCount) {
+              destroyedCount++;
+              return false;
+            }
+            return true;
+          });
+
+        return {
+          beads: setTargetPositions(newBeads),
+          created,
+          destroyed: destroyed + destroyedCount,
+        };
+      });
+      return;
+    }
+
+    // Animate and remove beads
+    const interval = setInterval(() => {
+      setBeads(({ beads, created, destroyed }) => {
+        let destroyedCount = 0;
+
+        const newBeads = beads
+          .map((bead) => {
+            const progressIncrement = deltaTime / animationDuration;
+            const t = Math.min(
+              bead.t + bead.targetT * progressIncrement,
+              bead.targetT,
+            );
+
+            return {
+              ...bead,
+              t,
+            };
+          })
+          .filter((bead, index) => {
+            const beadDown = data?.beadDown!;
+
+            // Remove always one less bead in case of static edge, so it stays at the connection point
+            const removeCount = beadDown - destroyed - (data?.isStatic ? 1 : 0);
+            if (bead.t >= bead.targetT && index < removeCount) {
+              destroyedCount++;
+              return false;
+            }
+            return true;
+          });
+
+        return {
+          beads: setTargetPositions(newBeads),
+          created,
+          destroyed: destroyed + destroyedCount,
+        };
+      });
+    }, deltaTime);
+
+    return () => clearInterval(interval);
+  }, [data, setTargetPositions, visualizeBeads]);
+
+  const middle = getPointForT(0.5);
+
+  return (
+    <>
+      <BaseEdge
+        path={svgPath}
+        markerEnd={markerEnd}
+        style={{
+          strokeWidth: (isHovered ? 3 : 2) + (data?.isStatic ? 0.5 : 0),
+          stroke:
+            (data?.edgeColor ?? "#555555") +
+            (selected || isHovered ? "" : "80"),
+          strokeDasharray: data?.isStatic ? "5 3" : "0",
+        }}
+      />
+      <path
+        d={svgPath}
+        fill="none"
+        strokeOpacity={0}
+        strokeWidth={20}
+        className="react-flow__edge-interaction"
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+      />
+      <EdgeLabelRenderer>
+        <div
+          style={{
+            position: "absolute",
+            transform: `translate(-50%, -50%) translate(${middle.x}px,${middle.y}px)`,
+            pointerEvents: "all",
+          }}
+          className="edge-label-renderer"
+        >
+          <button
+            onMouseEnter={() => setIsHovered(true)}
+            onMouseLeave={() => setIsHovered(false)}
+            className={`edge-label-button ${isHovered ? "visible" : ""}`}
+            onClick={onEdgeRemoveClick}
+          >
+            <X className="size-4" />
+          </button>
+        </div>
+      </EdgeLabelRenderer>
+      {beads.beads.map((bead, index) => {
+        const pos = getPointForT(bead.t);
+        return (
+          <circle
+            key={index}
+            cx={pos.x}
+            cy={pos.y}
+            r={beadDiameter / 2} // Bead radius
+            fill={data?.edgeColor ?? "#555555"}
+          />
+        );
+      })}
+    </>
+  );
+}

autogpt_platform/autogpt_builder/src/components/CustomNode.tsx

@@ -0,0 +1,660 @@
+import React, {
+  useState,
+  useEffect,
+  useCallback,
+  useRef,
+  useContext,
+} from "react";
+import { NodeProps, useReactFlow, Node, Edge } from "@xyflow/react";
+import "@xyflow/react/dist/style.css";
+import "./customnode.css";
+import InputModalComponent from "./InputModalComponent";
+import OutputModalComponent from "./OutputModalComponent";
+import {
+  BlockIORootSchema,
+  BlockIOStringSubSchema,
+  Category,
+  NodeExecutionResult,
+  BlockUIType,
+  BlockCost,
+} from "@/lib/autogpt-server-api/types";
+import { beautifyString, cn, setNestedProperty } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Switch } from "@/components/ui/switch";
+import { Copy, Trash2 } from "lucide-react";
+import { history } from "./history";
+import NodeHandle from "./NodeHandle";
+import {
+  NodeGenericInputField,
+  NodeTextBoxInput,
+} from "./node-input-components";
+import SchemaTooltip from "./SchemaTooltip";
+import { getPrimaryCategoryColor } from "@/lib/utils";
+import { FlowContext } from "./Flow";
+import { Badge } from "./ui/badge";
+import DataTable from "./DataTable";
+
+type ParsedKey = { key: string; index?: number };
+
+export type ConnectionData = Array<{
+  edge_id: string;
+  source: string;
+  sourceHandle: string;
+  target: string;
+  targetHandle: string;
+}>;
+
+export type CustomNodeData = {
+  blockType: string;
+  blockCosts: BlockCost[];
+  title: string;
+  description: string;
+  categories: Category[];
+  inputSchema: BlockIORootSchema;
+  outputSchema: BlockIORootSchema;
+  hardcodedValues: { [key: string]: any };
+  connections: ConnectionData;
+  isOutputOpen: boolean;
+  status?: NodeExecutionResult["status"];
+  /** executionResults contains outputs across multiple executions
+   * with the last element being the most recent output */
+  executionResults?: {
+    execId: string;
+    data: NodeExecutionResult["output_data"];
+  }[];
+  block_id: string;
+  backend_id?: string;
+  errors?: { [key: string]: string };
+  isOutputStatic?: boolean;
+  uiType: BlockUIType;
+};
+
+export type CustomNode = Node<CustomNodeData, "custom">;
+
+export function CustomNode({ data, id, width, height }: NodeProps<CustomNode>) {
+  const [isOutputOpen, setIsOutputOpen] = useState(data.isOutputOpen || false);
+  const [isAdvancedOpen, setIsAdvancedOpen] = useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [activeKey, setActiveKey] = useState<string | null>(null);
+  const [inputModalValue, setInputModalValue] = useState<string>("");
+  const [isOutputModalOpen, setIsOutputModalOpen] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
+  const { updateNodeData, deleteElements, addNodes, getNode } = useReactFlow<
+    CustomNode,
+    Edge
+  >();
+  const isInitialSetup = useRef(true);
+  const flowContext = useContext(FlowContext);
+
+  if (!flowContext) {
+    throw new Error("FlowContext consumer must be inside FlowEditor component");
+  }
+
+  const { setIsAnyModalOpen, getNextNodeId } = flowContext;
+
+  useEffect(() => {
+    if (data.executionResults || data.status) {
+      setIsOutputOpen(true);
+    }
+  }, [data.executionResults, data.status]);
+
+  useEffect(() => {
+    setIsOutputOpen(data.isOutputOpen);
+  }, [data.isOutputOpen]);
+
+  useEffect(() => {
+    setIsAnyModalOpen?.(isModalOpen || isOutputModalOpen);
+  }, [isModalOpen, isOutputModalOpen, data, setIsAnyModalOpen]);
+
+  useEffect(() => {
+    isInitialSetup.current = false;
+  }, []);
+
+  const setHardcodedValues = (values: any) => {
+    updateNodeData(id, { hardcodedValues: values });
+  };
+
+  const setErrors = (errors: { [key: string]: string }) => {
+    updateNodeData(id, { errors });
+  };
+
+  const toggleOutput = (checked: boolean) => {
+    setIsOutputOpen(checked);
+  };
+
+  const toggleAdvancedSettings = (checked: boolean) => {
+    setIsAdvancedOpen(checked);
+  };
+
+  const generateOutputHandles = (
+    schema: BlockIORootSchema,
+    nodeType: BlockUIType,
+  ) => {
+    if (
+      !schema?.properties ||
+      nodeType === BlockUIType.OUTPUT ||
+      nodeType === BlockUIType.NOTE
+    )
+      return null;
+    const keys = Object.keys(schema.properties);
+    return keys.map((key) => (
+      <div key={key}>
+        <NodeHandle
+          keyName={key}
+          isConnected={isHandleConnected(key)}
+          schema={schema.properties[key]}
+          side="right"
+        />
+      </div>
+    ));
+  };
+
+  const generateInputHandles = (
+    schema: BlockIORootSchema,
+    nodeType: BlockUIType,
+  ) => {
+    if (!schema?.properties) return null;
+    let keys = Object.entries(schema.properties);
+    switch (nodeType) {
+      case BlockUIType.INPUT:
+        // For INPUT blocks, dont include connection handles
+        return keys.map(([propKey, propSchema]) => {
+          const isRequired = data.inputSchema.required?.includes(propKey);
+          const isConnected = isHandleConnected(propKey);
+          const isAdvanced = propSchema.advanced;
+          return (
+            (isRequired || isAdvancedOpen || !isAdvanced) && (
+              <div key={propKey}>
+                <span className="text-m green -mb-1 text-gray-900">
+                  {propSchema.title || beautifyString(propKey)}
+                </span>
+                <div key={propKey} onMouseOver={() => {}}>
+                  {!isConnected && (
+                    <NodeGenericInputField
+                      className="mb-2 mt-1"
+                      propKey={propKey}
+                      propSchema={propSchema}
+                      currentValue={getValue(propKey)}
+                      connections={data.connections}
+                      handleInputChange={handleInputChange}
+                      handleInputClick={handleInputClick}
+                      errors={data.errors ?? {}}
+                      displayName={propSchema.title || beautifyString(propKey)}
+                    />
+                  )}
+                </div>
+              </div>
+            )
+          );
+        });
+
+      case BlockUIType.NOTE:
+        // For NOTE blocks, don't render any input handles
+        const [noteKey, noteSchema] = keys[0];
+        return (
+          <div key={noteKey}>
+            <NodeTextBoxInput
+              className=""
+              selfKey={noteKey}
+              schema={noteSchema as BlockIOStringSubSchema}
+              value={getValue(noteKey)}
+              handleInputChange={handleInputChange}
+              handleInputClick={handleInputClick}
+              error={data.errors?.[noteKey] ?? ""}
+              displayName={noteSchema.title || beautifyString(noteKey)}
+            />
+          </div>
+        );
+
+      case BlockUIType.OUTPUT:
+        // For OUTPUT blocks, only show the 'value' property
+        return keys.map(([propKey, propSchema]) => {
+          const isRequired = data.inputSchema.required?.includes(propKey);
+          const isConnected = isHandleConnected(propKey);
+          const isAdvanced = propSchema.advanced;
+          return (
+            (isRequired || isAdvancedOpen || !isAdvanced) && (
+              <div key={propKey} onMouseOver={() => {}}>
+                {propKey !== "value" ? (
+                  <span className="text-m green -mb-1 text-gray-900">
+                    {propSchema.title || beautifyString(propKey)}
+                  </span>
+                ) : (
+                  <NodeHandle
+                    keyName={propKey}
+                    isConnected={isConnected}
+                    isRequired={isRequired}
+                    schema={propSchema}
+                    side="left"
+                  />
+                )}
+                {!isConnected && (
+                  <NodeGenericInputField
+                    className="mb-2 mt-1"
+                    propKey={propKey}
+                    propSchema={propSchema}
+                    currentValue={getValue(propKey)}
+                    connections={data.connections}
+                    handleInputChange={handleInputChange}
+                    handleInputClick={handleInputClick}
+                    errors={data.errors ?? {}}
+                    displayName={propSchema.title || beautifyString(propKey)}
+                  />
+                )}
+              </div>
+            )
+          );
+        });
+
+      default:
+        return keys.map(([propKey, propSchema]) => {
+          const isRequired = data.inputSchema.required?.includes(propKey);
+          const isConnected = isHandleConnected(propKey);
+          const isAdvanced = propSchema.advanced;
+          return (
+            (isRequired || isAdvancedOpen || isConnected || !isAdvanced) && (
+              <div key={propKey} onMouseOver={() => {}}>
+                <NodeHandle
+                  keyName={propKey}
+                  isConnected={isConnected}
+                  isRequired={isRequired}
+                  schema={propSchema}
+                  side="left"
+                />
+                {!isConnected && (
+                  <NodeGenericInputField
+                    className="mb-2 mt-1"
+                    propKey={propKey}
+                    propSchema={propSchema}
+                    currentValue={getValue(propKey)}
+                    connections={data.connections}
+                    handleInputChange={handleInputChange}
+                    handleInputClick={handleInputClick}
+                    errors={data.errors ?? {}}
+                    displayName={propSchema.title || beautifyString(propKey)}
+                  />
+                )}
+              </div>
+            )
+          );
+        });
+    }
+  };
+  const handleInputChange = (path: string, value: any) => {
+    const keys = parseKeys(path);
+    const newValues = JSON.parse(JSON.stringify(data.hardcodedValues));
+    let current = newValues;
+
+    for (let i = 0; i < keys.length - 1; i++) {
+      const { key: currentKey, index } = keys[i];
+      if (index !== undefined) {
+        if (!current[currentKey]) current[currentKey] = [];
+        if (!current[currentKey][index]) current[currentKey][index] = {};
+        current = current[currentKey][index];
+      } else {
+        if (!current[currentKey]) current[currentKey] = {};
+        current = current[currentKey];
+      }
+    }
+
+    const lastKey = keys[keys.length - 1];
+    if (lastKey.index !== undefined) {
+      if (!current[lastKey.key]) current[lastKey.key] = [];
+      current[lastKey.key][lastKey.index] = value;
+    } else {
+      current[lastKey.key] = value;
+    }
+
+    // console.log(`Updating hardcoded values for node ${id}:`, newValues);
+
+    if (!isInitialSetup.current) {
+      history.push({
+        type: "UPDATE_INPUT",
+        payload: { nodeId: id, oldValues: data.hardcodedValues, newValues },
+        undo: () => setHardcodedValues(data.hardcodedValues),
+        redo: () => setHardcodedValues(newValues),
+      });
+    }
+
+    setHardcodedValues(newValues);
+    const errors = data.errors || {};
+    // Remove error with the same key
+    setNestedProperty(errors, path, null);
+    setErrors({ ...errors });
+  };
+
+  // Helper function to parse keys with array indices
+  //TODO move to utils
+  const parseKeys = (key: string): ParsedKey[] => {
+    const splits = key.split(/_@_|_#_|_\$_|\./);
+    const keys: ParsedKey[] = [];
+    let currentKey: string | null = null;
+
+    splits.forEach((split) => {
+      const isInteger = /^\d+$/.test(split);
+      if (!isInteger) {
+        if (currentKey !== null) {
+          keys.push({ key: currentKey });
+        }
+        currentKey = split;
+      } else {
+        if (currentKey !== null) {
+          keys.push({ key: currentKey, index: parseInt(split, 10) });
+          currentKey = null;
+        } else {
+          throw new Error("Invalid key format: array index without a key");
+        }
+      }
+    });
+
+    if (currentKey !== null) {
+      keys.push({ key: currentKey });
+    }
+
+    return keys;
+  };
+
+  const getValue = (key: string) => {
+    const keys = parseKeys(key);
+    return keys.reduce((acc, k) => {
+      if (acc === undefined) return undefined;
+      if (k.index !== undefined) {
+        return Array.isArray(acc[k.key]) ? acc[k.key][k.index] : undefined;
+      }
+      return acc[k.key];
+    }, data.hardcodedValues as any);
+  };
+
+  const isHandleConnected = (key: string) => {
+    return (
+      data.connections &&
+      data.connections.some((conn: any) => {
+        if (typeof conn === "string") {
+          const [source, target] = conn.split(" -> ");
+          return (
+            (target.includes(key) && target.includes(data.title)) ||
+            (source.includes(key) && source.includes(data.title))
+          );
+        }
+        return (
+          (conn.target === id && conn.targetHandle === key) ||
+          (conn.source === id && conn.sourceHandle === key)
+        );
+      })
+    );
+  };
+
+  const handleInputClick = (key: string) => {
+    console.log(`Opening modal for key: ${key}`);
+    setActiveKey(key);
+    const value = getValue(key);
+    setInputModalValue(
+      typeof value === "object" ? JSON.stringify(value, null, 2) : value,
+    );
+    setIsModalOpen(true);
+  };
+
+  const handleModalSave = (value: string) => {
+    if (activeKey) {
+      try {
+        const parsedValue = JSON.parse(value);
+        handleInputChange(activeKey, parsedValue);
+      } catch (error) {
+        handleInputChange(activeKey, value);
+      }
+    }
+    setIsModalOpen(false);
+    setActiveKey(null);
+  };
+
+  const handleOutputClick = () => {
+    setIsOutputModalOpen(true);
+  };
+
+  const handleHovered = () => {
+    setIsHovered(true);
+  };
+
+  const handleMouseLeave = () => {
+    setIsHovered(false);
+  };
+
+  const deleteNode = useCallback(() => {
+    console.log("Deleting node:", id);
+
+    // Remove the node
+    deleteElements({ nodes: [{ id }] });
+  }, [id, deleteElements]);
+
+  const copyNode = useCallback(() => {
+    const newId = getNextNodeId();
+    const currentNode = getNode(id);
+
+    if (!currentNode) {
+      console.error("Cannot copy node: current node not found");
+      return;
+    }
+
+    const verticalOffset = height ?? 100;
+
+    const newNode: CustomNode = {
+      id: newId,
+      type: currentNode.type,
+      position: {
+        x: currentNode.position.x,
+        y: currentNode.position.y - verticalOffset - 20,
+      },
+      data: {
+        ...data,
+        title: `${data.title} (Copy)`,
+        block_id: data.block_id,
+        connections: [],
+        isOutputOpen: false,
+      },
+    };
+
+    addNodes(newNode);
+
+    history.push({
+      type: "ADD_NODE",
+      payload: { node: newNode },
+      undo: () => deleteElements({ nodes: [{ id: newId }] }),
+      redo: () => addNodes(newNode),
+    });
+  }, [id, data, height, addNodes, deleteElements, getNode, getNextNodeId]);
+
+  const hasConfigErrors =
+    data.errors &&
+    Object.entries(data.errors).some(([_, value]) => value !== null);
+  const outputData = data.executionResults?.at(-1)?.data;
+  const hasOutputError =
+    typeof outputData === "object" &&
+    outputData !== null &&
+    "error" in outputData;
+
+  useEffect(() => {
+    if (hasConfigErrors) {
+      const filteredErrors = Object.fromEntries(
+        Object.entries(data.errors || {}).filter(
+          ([_, value]) => value !== null,
+        ),
+      );
+      console.error(
+        "Block configuration errors for",
+        data.title,
+        ":",
+        filteredErrors,
+      );
+    }
+    if (hasOutputError) {
+      console.error(
+        "Block output contains error for",
+        data.title,
+        ":",
+        outputData.error,
+      );
+    }
+  }, [hasConfigErrors, hasOutputError, data.errors, outputData, data.title]);
+
+  const blockClasses = [
+    "custom-node",
+    "dark-theme",
+    "rounded-xl",
+    "border",
+    "bg-white/[.9]",
+    "shadow-md",
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  const errorClass =
+    hasConfigErrors || hasOutputError ? "border-red-500 border-2" : "";
+
+  const statusClass =
+    hasConfigErrors || hasOutputError
+      ? "failed"
+      : (data.status?.toLowerCase() ?? "");
+
+  const hasAdvancedFields =
+    data.inputSchema &&
+    Object.entries(data.inputSchema.properties).some(([key, value]) => {
+      return (
+        value.advanced === true && !data.inputSchema.required?.includes(key)
+      );
+    });
+
+  const inputValues = data.hardcodedValues;
+  const blockCost =
+    data.blockCosts &&
+    data.blockCosts.find((cost) =>
+      Object.entries(cost.cost_filter).every(
+        // Undefined, null, or empty values are considered equal
+        ([key, value]) =>
+          value === inputValues[key] || (!value && !inputValues[key]),
+      ),
+    );
+  console.debug(`Block cost ${inputValues}|${data.blockCosts}=${blockCost}`);
+
+  return (
+    <div
+      className={`${data.uiType === BlockUIType.NOTE ? "w-[300px]" : "w-[500px]"} ${blockClasses} ${errorClass} ${statusClass} ${data.uiType === BlockUIType.NOTE ? "bg-yellow-100" : "bg-white"}`}
+      onMouseEnter={handleHovered}
+      onMouseLeave={handleMouseLeave}
+      data-id={`custom-node-${id}`}
+    >
+      <div
+        className={`mb-2 p-3 ${data.uiType === BlockUIType.NOTE ? "bg-yellow-100" : getPrimaryCategoryColor(data.categories)} rounded-t-xl`}
+      >
+        <div className="flex items-center justify-between">
+          <div className="font-roboto p-3 text-lg font-semibold">
+            {beautifyString(
+              data.blockType?.replace(/Block$/, "") || data.title,
+            )}
+          </div>
+          <SchemaTooltip description={data.description} />
+        </div>
+        <div className="flex gap-[5px]">
+          {isHovered && (
+            <>
+              <Button
+                variant="outline"
+                size="icon"
+                onClick={copyNode}
+                title="Copy node"
+              >
+                <Copy size={18} />
+              </Button>
+              <Button
+                variant="outline"
+                size="icon"
+                onClick={deleteNode}
+                title="Delete node"
+              >
+                <Trash2 size={18} />
+              </Button>
+            </>
+          )}
+        </div>
+      </div>
+      {blockCost && (
+        <div className="p-3 text-right font-semibold">
+          Cost: {blockCost.cost_amount} / {blockCost.cost_type}
+        </div>
+      )}
+      {data.uiType !== BlockUIType.NOTE ? (
+        <div className="flex items-start justify-between p-3">
+          <div>
+            {data.inputSchema &&
+              generateInputHandles(data.inputSchema, data.uiType)}
+          </div>
+          <div className="flex-none">
+            {data.outputSchema &&
+              generateOutputHandles(data.outputSchema, data.uiType)}
+          </div>
+        </div>
+      ) : (
+        <div>
+          {data.inputSchema &&
+            generateInputHandles(data.inputSchema, data.uiType)}
+        </div>
+      )}
+      {isOutputOpen && data.uiType !== BlockUIType.NOTE && (
+        <div
+          data-id="latest-output"
+          className="nodrag m-3 break-words rounded-md border-[1.5px] p-2"
+        >
+          {(data.executionResults?.length ?? 0) > 0 ? (
+            <>
+              <DataTable
+                title="Latest Output"
+                truncateLongData
+                data={data.executionResults!.at(-1)?.data || {}}
+              />
+              <div className="flex justify-end">
+                <Button variant="ghost" onClick={handleOutputClick}>
+                  View More
+                </Button>
+              </div>
+            </>
+          ) : (
+            <span>No outputs yet</span>
+          )}
+        </div>
+      )}
+      {data.uiType !== BlockUIType.NOTE && (
+        <div className="mt-2.5 flex items-center pb-4 pl-4">
+          <Switch checked={isOutputOpen} onCheckedChange={toggleOutput} />
+          <span className="m-1 mr-4">Output</span>
+          {hasAdvancedFields && (
+            <>
+              <Switch onCheckedChange={toggleAdvancedSettings} />
+              <span className="m-1">Advanced</span>
+            </>
+          )}
+          {data.status && (
+            <Badge
+              variant="outline"
+              data-id={`badge-${id}-${data.status}`}
+              className={cn(data.status.toLowerCase(), "ml-auto mr-5")}
+            >
+              {data.status}
+            </Badge>
+          )}
+        </div>
+      )}
+      <InputModalComponent
+        title={activeKey ? `Enter ${beautifyString(activeKey)}` : undefined}
+        isOpen={isModalOpen}
+        onClose={() => setIsModalOpen(false)}
+        onSave={handleModalSave}
+        defaultValue={inputModalValue}
+        key={activeKey}
+      />
+      <OutputModalComponent
+        isOpen={isOutputModalOpen}
+        onClose={() => setIsOutputModalOpen(false)}
+        executionResults={data.executionResults?.toReversed() || []}
+      />
+    </div>
+  );
+}

autogpt_platform/autogpt_builder/src/components/DataTable.tsx

@@ -0,0 +1,92 @@
+import { beautifyString } from "@/lib/utils";
+import { Button } from "./ui/button";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "./ui/table";
+import { Clipboard } from "lucide-react";
+import { useToast } from "./ui/use-toast";
+
+type DataTableProps = {
+  title?: string;
+  truncateLongData?: boolean;
+  data: { [key: string]: Array<any> };
+};
+
+export default function DataTable({
+  title,
+  truncateLongData,
+  data,
+}: DataTableProps) {
+  const { toast } = useToast();
+  const maxChars = 100;
+
+  const copyData = (pin: string, data: string) => {
+    navigator.clipboard.writeText(data).then(() => {
+      toast({
+        title: `"${pin}" data copied to clipboard!`,
+        duration: 2000,
+      });
+    });
+  };
+
+  return (
+    <>
+      {title && <strong className="mt-2 flex justify-center">{title}</strong>}
+      <Table className="cursor-default select-text">
+        <TableHeader>
+          <TableRow>
+            <TableHead>Pin</TableHead>
+            <TableHead>Data</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {Object.entries(data).map(([key, value]) => (
+            <TableRow className="group" key={key}>
+              <TableCell className="cursor-text">
+                {beautifyString(key)}
+              </TableCell>
+              <TableCell className="cursor-text">
+                <div className="flex min-h-9 items-center">
+                  <Button
+                    className="absolute right-1 top-auto m-1 hidden p-2 group-hover:block"
+                    variant="outline"
+                    size="icon"
+                    onClick={() =>
+                      copyData(
+                        beautifyString(key),
+                        value
+                          .map((i) =>
+                            typeof i === "object"
+                              ? JSON.stringify(i)
+                              : String(i),
+                          )
+                          .join(", "),
+                      )
+                    }
+                    title="Copy Data"
+                  >
+                    <Clipboard size={18} />
+                  </Button>
+                  {value
+                    .map((i) => {
+                      const text =
+                        typeof i === "object" ? JSON.stringify(i) : String(i);
+                      return truncateLongData && text.length > maxChars
+                        ? text.slice(0, maxChars) + "..."
+                        : text;
+                    })
+                    .join(", ")}
+                </div>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </>
+  );
+}

autogpt_platform/autogpt_builder/src/components/Flow.tsx

@@ -0,0 +1,636 @@
+"use client";
+import React, {
+  useState,
+  useCallback,
+  useEffect,
+  useRef,
+  MouseEvent,
+  createContext,
+} from "react";
+import {
+  ReactFlow,
+  ReactFlowProvider,
+  Controls,
+  Background,
+  Node,
+  OnConnect,
+  Connection,
+  MarkerType,
+  NodeChange,
+  EdgeChange,
+  useReactFlow,
+  applyEdgeChanges,
+  applyNodeChanges,
+  useViewport,
+} from "@xyflow/react";
+import "@xyflow/react/dist/style.css";
+import { CustomNode } from "./CustomNode";
+import "./flow.css";
+import { Link } from "@/lib/autogpt-server-api";
+import { getTypeColor, filterBlocksByType } from "@/lib/utils";
+import { history } from "./history";
+import { CustomEdge } from "./CustomEdge";
+import ConnectionLine from "./ConnectionLine";
+import { Control, ControlPanel } from "@/components/edit/control/ControlPanel";
+import { SaveControl } from "@/components/edit/control/SaveControl";
+import { BlocksControl } from "@/components/edit/control/BlocksControl";
+import {
+  IconPlay,
+  IconUndo2,
+  IconRedo2,
+  IconSquare,
+  IconOutput,
+} from "@/components/ui/icons";
+import { startTutorial } from "./tutorial";
+import useAgentGraph from "@/hooks/useAgentGraph";
+import { v4 as uuidv4 } from "uuid";
+import { useRouter, usePathname, useSearchParams } from "next/navigation";
+import { LogOut } from "lucide-react";
+import RunnerUIWrapper, {
+  RunnerUIWrapperRef,
+} from "@/components/RunnerUIWrapper";
+
+// This is for the history, this is the minimum distance a block must move before it is logged
+// It helps to prevent spamming the history with small movements especially when pressing on a input in a block
+const MINIMUM_MOVE_BEFORE_LOG = 50;
+
+type FlowContextType = {
+  visualizeBeads: "no" | "static" | "animate";
+  setIsAnyModalOpen: (isOpen: boolean) => void;
+  getNextNodeId: () => string;
+};
+
+export const FlowContext = createContext<FlowContextType | null>(null);
+
+const FlowEditor: React.FC<{
+  flowID?: string;
+  template?: boolean;
+  className?: string;
+}> = ({ flowID, template, className }) => {
+  const { addNodes, addEdges, getNode, deleteElements, updateNode } =
+    useReactFlow<CustomNode, CustomEdge>();
+  const [nodeId, setNodeId] = useState<number>(1);
+  const [copiedNodes, setCopiedNodes] = useState<CustomNode[]>([]);
+  const [copiedEdges, setCopiedEdges] = useState<CustomEdge[]>([]);
+  const [isAnyModalOpen, setIsAnyModalOpen] = useState(false);
+  const [visualizeBeads, setVisualizeBeads] = useState<
+    "no" | "static" | "animate"
+  >("animate");
+  const {
+    agentName,
+    setAgentName,
+    agentDescription,
+    setAgentDescription,
+    savedAgent,
+    availableNodes,
+    getOutputType,
+    requestSave,
+    requestSaveAndRun,
+    requestStopRun,
+    isRunning,
+    nodes,
+    setNodes,
+    edges,
+    setEdges,
+  } = useAgentGraph(flowID, template, visualizeBeads !== "no");
+
+  const router = useRouter();
+  const pathname = usePathname();
+  const initialPositionRef = useRef<{
+    [key: string]: { x: number; y: number };
+  }>({});
+  const isDragging = useRef(false);
+
+  // State to control if tutorial has started
+  const [tutorialStarted, setTutorialStarted] = useState(false);
+  // State to control if blocks menu should be pinned open
+  const [pinBlocksPopover, setPinBlocksPopover] = useState(false);
+
+  const runnerUIRef = useRef<RunnerUIWrapperRef>(null);
+
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+
+    // If resetting tutorial
+    if (params.get("resetTutorial") === "true") {
+      localStorage.removeItem("shepherd-tour"); // Clear tutorial flag
+      router.push(pathname);
+    } else {
+      // Otherwise, start tutorial if conditions are met
+      const shouldStartTutorial = !localStorage.getItem("shepherd-tour");
+      if (
+        shouldStartTutorial &&
+        availableNodes.length > 0 &&
+        !tutorialStarted
+      ) {
+        startTutorial(setPinBlocksPopover);
+        setTutorialStarted(true);
+        localStorage.setItem("shepherd-tour", "yes");
+      }
+    }
+  }, [availableNodes, tutorialStarted, router, pathname]);
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      const isMac = navigator.platform.toUpperCase().indexOf("MAC") >= 0;
+      const isUndo =
+        (isMac ? event.metaKey : event.ctrlKey) && event.key === "z";
+      const isRedo =
+        (isMac ? event.metaKey : event.ctrlKey) &&
+        (event.key === "y" || (event.shiftKey && event.key === "Z"));
+
+      if (isUndo) {
+        event.preventDefault();
+        handleUndo();
+      }
+
+      if (isRedo) {
+        event.preventDefault();
+        handleRedo();
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, []);
+
+  const onNodeDragStart = (_: MouseEvent, node: Node) => {
+    initialPositionRef.current[node.id] = { ...node.position };
+    isDragging.current = true;
+  };
+
+  const onNodeDragEnd = (_: MouseEvent, node: Node | null) => {
+    if (!node) return;
+
+    isDragging.current = false;
+    const oldPosition = initialPositionRef.current[node.id];
+    const newPosition = node.position;
+
+    // Calculate the movement distance
+    if (!oldPosition || !newPosition) return;
+
+    const distanceMoved = Math.sqrt(
+      Math.pow(newPosition.x - oldPosition.x, 2) +
+        Math.pow(newPosition.y - oldPosition.y, 2),
+    );
+
+    if (distanceMoved > MINIMUM_MOVE_BEFORE_LOG) {
+      // Minimum movement threshold
+      history.push({
+        type: "UPDATE_NODE_POSITION",
+        payload: { nodeId: node.id, oldPosition, newPosition },
+        undo: () => updateNode(node.id, { position: oldPosition }),
+        redo: () => updateNode(node.id, { position: newPosition }),
+      });
+    }
+    delete initialPositionRef.current[node.id];
+  };
+
+  // Function to clear status, output, and close the output info dropdown of all nodes
+  // and reset data beads on edges
+  const clearNodesStatusAndOutput = useCallback(() => {
+    setNodes((nds) => {
+      const newNodes = nds.map((node) => ({
+        ...node,
+        data: {
+          ...node.data,
+          status: undefined,
+          isOutputOpen: false,
+        },
+      }));
+
+      return newNodes;
+    });
+  }, [setNodes]);
+
+  const onNodesChange = useCallback(
+    (nodeChanges: NodeChange<CustomNode>[]) => {
+      // Persist the changes
+      setNodes((prev) => applyNodeChanges(nodeChanges, prev));
+
+      // Remove all edges that were connected to deleted nodes
+      nodeChanges
+        .filter((change) => change.type === "remove")
+        .forEach((deletedNode) => {
+          const nodeID = deletedNode.id;
+          const deletedNodeData = nodes.find((node) => node.id === nodeID);
+
+          if (deletedNodeData) {
+            history.push({
+              type: "DELETE_NODE",
+              payload: { node: deletedNodeData },
+              undo: () => addNodes(deletedNodeData),
+              redo: () => deleteElements({ nodes: [{ id: nodeID }] }),
+            });
+          }
+
+          const connectedEdges = edges.filter((edge) =>
+            [edge.source, edge.target].includes(nodeID),
+          );
+          deleteElements({
+            edges: connectedEdges.map((edge) => ({ id: edge.id })),
+          });
+        });
+    },
+    [deleteElements, setNodes, nodes, edges, addNodes],
+  );
+
+  const formatEdgeID = useCallback((conn: Link | Connection): string => {
+    if ("sink_id" in conn) {
+      return `${conn.source_id}_${conn.source_name}_${conn.sink_id}_${conn.sink_name}`;
+    } else {
+      return `${conn.source}_${conn.sourceHandle}_${conn.target}_${conn.targetHandle}`;
+    }
+  }, []);
+
+  const onConnect: OnConnect = useCallback(
+    (connection: Connection) => {
+      // Check if this exact connection already exists
+      const existingConnection = edges.find(
+        (edge) =>
+          edge.source === connection.source &&
+          edge.target === connection.target &&
+          edge.sourceHandle === connection.sourceHandle &&
+          edge.targetHandle === connection.targetHandle,
+      );
+
+      if (existingConnection) {
+        console.warn("This exact connection already exists.");
+        return;
+      }
+
+      const edgeColor = getTypeColor(
+        getOutputType(nodes, connection.source!, connection.sourceHandle!),
+      );
+      const sourceNode = getNode(connection.source!);
+      const newEdge: CustomEdge = {
+        id: formatEdgeID(connection),
+        type: "custom",
+        markerEnd: {
+          type: MarkerType.ArrowClosed,
+          strokeWidth: 2,
+          color: edgeColor,
+        },
+        data: {
+          edgeColor,
+          sourcePos: sourceNode!.position,
+          isStatic: sourceNode!.data.isOutputStatic,
+        },
+        ...connection,
+        source: connection.source!,
+        target: connection.target!,
+      };
+
+      addEdges(newEdge);
+      history.push({
+        type: "ADD_EDGE",
+        payload: { edge: newEdge },
+        undo: () => {
+          deleteElements({ edges: [{ id: newEdge.id }] });
+        },
+        redo: () => {
+          addEdges(newEdge);
+        },
+      });
+      clearNodesStatusAndOutput(); // Clear status and output on connection change
+    },
+    [
+      getNode,
+      addEdges,
+      deleteElements,
+      clearNodesStatusAndOutput,
+      nodes,
+      edges,
+      formatEdgeID,
+      getOutputType,
+    ],
+  );
+
+  const onEdgesChange = useCallback(
+    (edgeChanges: EdgeChange<CustomEdge>[]) => {
+      // Persist the changes
+      setEdges((prev) => applyEdgeChanges(edgeChanges, prev));
+
+      // Propagate edge changes to node data
+      const addedEdges = edgeChanges.filter((change) => change.type === "add"),
+        replaceEdges = edgeChanges.filter(
+          (change) => change.type === "replace",
+        ),
+        removedEdges = edgeChanges.filter((change) => change.type === "remove"),
+        selectedEdges = edgeChanges.filter(
+          (change) => change.type === "select",
+        );
+
+      if (addedEdges.length > 0 || removedEdges.length > 0) {
+        setNodes((nds) => {
+          const newNodes = nds.map((node) => ({
+            ...node,
+            data: {
+              ...node.data,
+              connections: [
+                // Remove node connections for deleted edges
+                ...node.data.connections.filter(
+                  (conn) =>
+                    !removedEdges.some(
+                      (removedEdge) => removedEdge.id === conn.edge_id,
+                    ),
+                ),
+                // Add node connections for added edges
+                ...addedEdges.map((addedEdge) => ({
+                  edge_id: addedEdge.item.id,
+                  source: addedEdge.item.source,
+                  target: addedEdge.item.target,
+                  sourceHandle: addedEdge.item.sourceHandle!,
+                  targetHandle: addedEdge.item.targetHandle!,
+                })),
+              ],
+            },
+          }));
+
+          return newNodes;
+        });
+
+        if (removedEdges.length > 0) {
+          clearNodesStatusAndOutput(); // Clear status and output on edge deletion
+        }
+      }
+
+      if (replaceEdges.length > 0) {
+        // Reset node connections for all edges
+        console.warn(
+          "useReactFlow().setRootEdges was used to overwrite all edges. " +
+            "Use addEdges, deleteElements, or reconnectEdge for incremental changes.",
+          replaceEdges,
+        );
+        setNodes((nds) =>
+          nds.map((node) => ({
+            ...node,
+            data: {
+              ...node.data,
+              connections: [
+                ...replaceEdges.map((replaceEdge) => ({
+                  edge_id: replaceEdge.item.id,
+                  source: replaceEdge.item.source,
+                  target: replaceEdge.item.target,
+                  sourceHandle: replaceEdge.item.sourceHandle!,
+                  targetHandle: replaceEdge.item.targetHandle!,
+                })),
+              ],
+            },
+          })),
+        );
+        clearNodesStatusAndOutput();
+      }
+    },
+    [setNodes, clearNodesStatusAndOutput, setEdges],
+  );
+
+  const getNextNodeId = useCallback(() => {
+    return uuidv4();
+  }, []);
+
+  const { x, y, zoom } = useViewport();
+
+  const addNode = useCallback(
+    (blockId: string, nodeType: string) => {
+      const nodeSchema = availableNodes.find((node) => node.id === blockId);
+      if (!nodeSchema) {
+        console.error(`Schema not found for block ID: ${blockId}`);
+        return;
+      }
+
+      // Calculate the center of the viewport considering zoom
+      const viewportCenter = {
+        x: (window.innerWidth / 2 - x) / zoom,
+        y: (window.innerHeight / 2 - y) / zoom,
+      };
+
+      const newNode: CustomNode = {
+        id: nodeId.toString(),
+        type: "custom",
+        position: viewportCenter, // Set the position to the calculated viewport center
+        data: {
+          blockType: nodeType,
+          blockCosts: nodeSchema.costs,
+          title: `${nodeType} ${nodeId}`,
+          description: nodeSchema.description,
+          categories: nodeSchema.categories,
+          inputSchema: nodeSchema.inputSchema,
+          outputSchema: nodeSchema.outputSchema,
+          hardcodedValues: {},
+          connections: [],
+          isOutputOpen: false,
+          block_id: blockId,
+          isOutputStatic: nodeSchema.staticOutput,
+          uiType: nodeSchema.uiType,
+        },
+      };
+
+      addNodes(newNode);
+      setNodeId((prevId) => prevId + 1);
+      clearNodesStatusAndOutput(); // Clear status and output when a new node is added
+
+      history.push({
+        type: "ADD_NODE",
+        payload: { node: newNode.data },
+        undo: () => deleteElements({ nodes: [{ id: newNode.id }] }),
+        redo: () => addNodes(newNode),
+      });
+    },
+    [
+      nodeId,
+      availableNodes,
+      addNodes,
+      deleteElements,
+      clearNodesStatusAndOutput,
+      x,
+      y,
+      zoom,
+    ],
+  );
+
+  const handleUndo = () => {
+    history.undo();
+  };
+
+  const handleRedo = () => {
+    history.redo();
+  };
+
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent) => {
+      // Prevent copy/paste if any modal is open or if the focus is on an input element
+      const activeElement = document.activeElement;
+      const isInputField =
+        activeElement?.tagName === "INPUT" ||
+        activeElement?.tagName === "TEXTAREA" ||
+        activeElement?.getAttribute("contenteditable") === "true";
+
+      if (isAnyModalOpen || isInputField) return;
+
+      if (event.ctrlKey || event.metaKey) {
+        if (event.key === "c" || event.key === "C") {
+          // Copy selected nodes
+          const selectedNodes = nodes.filter((node) => node.selected);
+          const selectedEdges = edges.filter((edge) => edge.selected);
+          setCopiedNodes(selectedNodes);
+          setCopiedEdges(selectedEdges);
+        }
+        if (event.key === "v" || event.key === "V") {
+          // Paste copied nodes
+          if (copiedNodes.length > 0) {
+            const oldToNewNodeIDMap: Record<string, string> = {};
+            const pastedNodes = copiedNodes.map((node, index) => {
+              const newNodeId = (nodeId + index).toString();
+              oldToNewNodeIDMap[node.id] = newNodeId;
+              return {
+                ...node,
+                id: newNodeId,
+                position: {
+                  x: node.position.x + 20, // Offset pasted nodes
+                  y: node.position.y + 20,
+                },
+                data: {
+                  ...node.data,
+                  status: undefined, // Reset status
+                  executionResults: undefined, // Clear output data
+                },
+              };
+            });
+            setNodes((existingNodes) =>
+              // Deselect copied nodes
+              existingNodes.map((node) => ({ ...node, selected: false })),
+            );
+            addNodes(pastedNodes);
+            setNodeId((prevId) => prevId + copiedNodes.length);
+
+            const pastedEdges = copiedEdges.map((edge) => {
+              const newSourceId = oldToNewNodeIDMap[edge.source] ?? edge.source;
+              const newTargetId = oldToNewNodeIDMap[edge.target] ?? edge.target;
+              return {
+                ...edge,
+                id: `${newSourceId}_${edge.sourceHandle}_${newTargetId}_${edge.targetHandle}_${Date.now()}`,
+                source: newSourceId,
+                target: newTargetId,
+              };
+            });
+            addEdges(pastedEdges);
+          }
+        }
+      }
+    },
+    [
+      isAnyModalOpen,
+      nodes,
+      edges,
+      copiedNodes,
+      setNodes,
+      addNodes,
+      copiedEdges,
+      addEdges,
+      nodeId,
+    ],
+  );
+
+  useEffect(() => {
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [handleKeyDown]);
+
+  const onNodesDelete = useCallback(() => {
+    clearNodesStatusAndOutput();
+  }, [clearNodesStatusAndOutput]);
+
+  const editorControls: Control[] = [
+    {
+      label: "Undo",
+      icon: <IconUndo2 />,
+      onClick: handleUndo,
+    },
+    {
+      label: "Redo",
+      icon: <IconRedo2 />,
+      onClick: handleRedo,
+    },
+    {
+      label: !savedAgent
+        ? "Please save the agent to run"
+        : !isRunning
+          ? "Run"
+          : "Stop",
+      icon: !isRunning ? <IconPlay /> : <IconSquare />,
+      onClick: !isRunning
+        ? () => runnerUIRef.current?.runOrOpenInput()
+        : requestStopRun,
+      disabled: !savedAgent,
+    },
+    {
+      label: "Runner Output",
+      icon: <LogOut size={18} strokeWidth={1.8} />,
+      onClick: () => runnerUIRef.current?.openRunnerOutput(),
+    },
+  ];
+
+  return (
+    <FlowContext.Provider
+      value={{ visualizeBeads, setIsAnyModalOpen, getNextNodeId }}
+    >
+      <div className={className}>
+        <ReactFlow
+          nodes={nodes}
+          edges={edges}
+          nodeTypes={{ custom: CustomNode }}
+          edgeTypes={{ custom: CustomEdge }}
+          connectionLineComponent={ConnectionLine}
+          onConnect={onConnect}
+          onNodesChange={onNodesChange}
+          onNodesDelete={onNodesDelete}
+          onEdgesChange={onEdgesChange}
+          onNodeDragStop={onNodeDragEnd}
+          onNodeDragStart={onNodeDragStart}
+          deleteKeyCode={["Backspace", "Delete"]}
+          minZoom={0.2}
+          maxZoom={2}
+        >
+          <Controls />
+          <Background />
+          <ControlPanel className="absolute z-10" controls={editorControls}>
+            <BlocksControl
+              pinBlocksPopover={pinBlocksPopover} // Pass the state to BlocksControl
+              blocks={availableNodes}
+              addBlock={addNode}
+            />
+            <SaveControl
+              agentMeta={savedAgent}
+              onSave={(isTemplate) => requestSave(isTemplate ?? false)}
+              agentDescription={agentDescription}
+              onDescriptionChange={setAgentDescription}
+              agentName={agentName}
+              onNameChange={setAgentName}
+            />
+          </ControlPanel>
+        </ReactFlow>
+      </div>
+      <RunnerUIWrapper
+        ref={runnerUIRef}
+        nodes={nodes}
+        setNodes={setNodes}
+        isRunning={isRunning}
+        requestSaveAndRun={requestSaveAndRun}
+      />
+    </FlowContext.Provider>
+  );
+};
+
+const WrappedFlowEditor: typeof FlowEditor = (props) => (
+  <ReactFlowProvider>
+    <FlowEditor {...props} />
+  </ReactFlowProvider>
+);
+
+export default WrappedFlowEditor;

autogpt_platform/autogpt_builder/src/components/InputModalComponent.tsx

@@ -0,0 +1,107 @@
+import React, { FC, useEffect, useState } from "react";
+import { Button } from "./ui/button";
+import { Textarea } from "./ui/textarea";
+import { Maximize2, Minimize2, Clipboard } from "lucide-react";
+import { createPortal } from "react-dom";
+import { toast } from "./ui/use-toast";
+
+interface ModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSave: (value: string) => void;
+  title?: string;
+  defaultValue: string;
+}
+
+const InputModalComponent: FC<ModalProps> = ({
+  isOpen,
+  onClose,
+  onSave,
+  title,
+  defaultValue,
+}) => {
+  const [tempValue, setTempValue] = useState(defaultValue);
+  const [isMaximized, setIsMaximized] = useState(false);
+
+  useEffect(() => {
+    if (isOpen) {
+      setTempValue(defaultValue);
+      setIsMaximized(false);
+    }
+  }, [isOpen, defaultValue]);
+
+  const handleSave = () => {
+    onSave(tempValue);
+    onClose();
+  };
+
+  const toggleSize = () => {
+    setIsMaximized(!isMaximized);
+  };
+
+  const copyValue = () => {
+    navigator.clipboard.writeText(tempValue).then(() => {
+      toast({
+        title: "Input value copied to clipboard!",
+        duration: 2000,
+      });
+    });
+  };
+
+  if (!isOpen) {
+    return null;
+  }
+
+  const modalContent = (
+    <div
+      id="modal-content"
+      className={`fixed rounded-lg border-[1.5px] bg-white p-5 ${
+        isMaximized ? "inset-[128px] flex flex-col" : `w-[90%] max-w-[800px]`
+      }`}
+    >
+      <h2 className="mb-4 text-center text-lg font-semibold">
+        {title || "Enter input text"}
+      </h2>
+      <div className="nowheel relative flex-grow">
+        <Textarea
+          className="h-full min-h-[200px] w-full resize-none"
+          value={tempValue}
+          onChange={(e) => setTempValue(e.target.value)}
+        />
+        <div className="absolute bottom-2 right-2 flex space-x-2">
+          <Button onClick={copyValue} size="icon" variant="outline">
+            <Clipboard size={18} />
+          </Button>
+          <Button onClick={toggleSize} size="icon" variant="outline">
+            {isMaximized ? <Minimize2 size={18} /> : <Maximize2 size={18} />}
+          </Button>
+        </div>
+      </div>
+      <div className="mt-4 flex justify-end space-x-2">
+        <Button onClick={onClose} variant="outline">
+          Cancel
+        </Button>
+        <Button onClick={handleSave}>Save</Button>
+      </div>
+    </div>
+  );
+
+  return (
+    <>
+      {isMaximized ? (
+        createPortal(
+          <div className="fixed inset-0 flex items-center justify-center bg-white bg-opacity-60">
+            {modalContent}
+          </div>,
+          document.body,
+        )
+      ) : (
+        <div className="nodrag fixed inset-0 flex items-center justify-center bg-white bg-opacity-60">
+          {modalContent}
+        </div>
+      )}
+    </>
+  );
+};
+
+export default InputModalComponent;

autogpt_platform/autogpt_builder/src/components/NavBar.tsx

@@ -0,0 +1,117 @@
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import React from "react";
+import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
+import Image from "next/image";
+import getServerUser from "@/hooks/getServerUser";
+import ProfileDropdown from "./ProfileDropdown";
+import {
+  IconCircleUser,
+  IconMenu,
+  IconPackage2,
+  IconRefresh,
+  IconSquareActivity,
+  IconWorkFlow,
+} from "@/components/ui/icons";
+import AutoGPTServerAPI from "@/lib/autogpt-server-api";
+import CreditButton from "@/components/CreditButton";
+
+export async function NavBar() {
+  const isAvailable = Boolean(
+    process.env.NEXT_PUBLIC_SUPABASE_URL &&
+      process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY,
+  );
+  const { user } = await getServerUser();
+
+  return (
+    <header className="sticky top-0 z-50 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6">
+      <div className="flex flex-1 items-center gap-4">
+        <Sheet>
+          <SheetTrigger asChild>
+            <Button
+              variant="outline"
+              size="icon"
+              className="shrink-0 md:hidden"
+            >
+              <IconMenu />
+              <span className="sr-only">Toggle navigation menu</span>
+            </Button>
+          </SheetTrigger>
+          <SheetContent side="left">
+            <nav className="grid gap-6 text-lg font-medium">
+              <Link
+                href="/"
+                className="flex flex-row gap-2 text-muted-foreground hover:text-foreground"
+              >
+                <IconSquareActivity /> Monitor
+              </Link>
+              <Link
+                href="/build"
+                className="flex flex-row gap-2 text-muted-foreground hover:text-foreground"
+              >
+                <IconWorkFlow /> Build
+              </Link>
+              <Link
+                href="/marketplace"
+                className="flex flex-row gap-2 text-muted-foreground hover:text-foreground"
+              >
+                <IconPackage2 /> Marketplace
+              </Link>
+            </nav>
+          </SheetContent>
+        </Sheet>
+        <nav className="hidden md:flex md:flex-row md:items-center md:gap-5 lg:gap-6">
+          <Link
+            href="/"
+            className="flex flex-row items-center gap-2 text-muted-foreground hover:text-foreground"
+          >
+            <IconSquareActivity /> Monitor
+          </Link>
+          <Link
+            href="/build"
+            className="flex flex-row items-center gap-2 text-muted-foreground hover:text-foreground"
+          >
+            <IconWorkFlow /> Build
+          </Link>
+          <Link
+            href="/marketplace"
+            className="flex flex-row items-center gap-2 text-muted-foreground hover:text-foreground"
+          >
+            <IconPackage2 /> Marketplace
+          </Link>
+        </nav>
+      </div>
+      <div className="relative flex flex-1 justify-center">
+        <a
+          className="pointer-events-auto flex place-items-center gap-2"
+          href="https://news.agpt.co/"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          By{" "}
+          <Image
+            src="/AUTOgpt_Logo_dark.png"
+            alt="AutoGPT Logo"
+            width={100}
+            height={20}
+            priority
+          />
+        </a>
+      </div>
+      <div className="flex flex-1 items-center justify-end gap-4">
+        {isAvailable && user && <CreditButton />}
+
+        {isAvailable && !user && (
+          <Link
+            href="/login"
+            className="flex flex-row items-center gap-2 text-muted-foreground hover:text-foreground"
+          >
+            Log In
+            <IconCircleUser />
+          </Link>
+        )}
+        {isAvailable && user && <ProfileDropdown />}
+      </div>
+    </header>
+  );
+}

autogpt_platform/autogpt_builder/src/components/NodeHandle.tsx

@@ -0,0 +1,85 @@
+import { BlockIOSubSchema } from "@/lib/autogpt-server-api/types";
+import { beautifyString, getTypeBgColor, getTypeTextColor } from "@/lib/utils";
+import { FC } from "react";
+import { Handle, Position } from "@xyflow/react";
+import SchemaTooltip from "./SchemaTooltip";
+
+type HandleProps = {
+  keyName: string;
+  schema: BlockIOSubSchema;
+  isConnected: boolean;
+  isRequired?: boolean;
+  side: "left" | "right";
+};
+
+const NodeHandle: FC<HandleProps> = ({
+  keyName,
+  schema,
+  isConnected,
+  isRequired,
+  side,
+}) => {
+  const typeName: Record<string, string> = {
+    string: "text",
+    number: "number",
+    boolean: "true/false",
+    object: "object",
+    array: "list",
+    null: "null",
+  };
+
+  const typeClass = `text-sm ${getTypeTextColor(schema.type || "any")} ${side === "left" ? "text-left" : "text-right"}`;
+
+  const label = (
+    <div className="flex flex-grow flex-col">
+      <span className="text-m green -mb-1 text-gray-900">
+        {schema.title || beautifyString(keyName)}
+        {isRequired ? "*" : ""}
+      </span>
+      <span className={typeClass}>{typeName[schema.type] || "any"}</span>
+    </div>
+  );
+
+  const dot = (
+    <div
+      className={`m-1 h-4 w-4 border-2 bg-white ${isConnected ? getTypeBgColor(schema.type || "any") : "border-gray-300"} rounded-full transition-colors duration-100 group-hover:bg-gray-300`}
+    />
+  );
+
+  if (side === "left") {
+    return (
+      <div key={keyName} className="handle-container">
+        <Handle
+          type="target"
+          position={Position.Left}
+          id={keyName}
+          className="background-color: white; border: 2px solid black; width: 15px; height: 15px; border-radius: 50%; bottom: -7px; left: 20%; group -ml-[26px]"
+        >
+          <div className="pointer-events-none flex items-center">
+            {dot}
+            {label}
+          </div>
+        </Handle>
+        <SchemaTooltip description={schema.description} />
+      </div>
+    );
+  } else {
+    return (
+      <div key={keyName} className="handle-container justify-end">
+        <Handle
+          type="source"
+          position={Position.Right}
+          id={keyName}
+          className="group -mr-[26px]"
+        >
+          <div className="pointer-events-none flex items-center">
+            {label}
+            {dot}
+          </div>
+        </Handle>
+      </div>
+    );
+  }
+};
+
+export default NodeHandle;

autogpt_platform/autogpt_builder/src/components/OutputModalComponent.tsx

@@ -0,0 +1,45 @@
+import React, { FC } from "react";
+import { Button } from "./ui/button";
+import { NodeExecutionResult } from "@/lib/autogpt-server-api/types";
+import DataTable from "./DataTable";
+import { Separator } from "@/components/ui/separator";
+
+interface OutputModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  executionResults: {
+    execId: string;
+    data: NodeExecutionResult["output_data"];
+  }[];
+}
+
+const OutputModalComponent: FC<OutputModalProps> = ({
+  isOpen,
+  onClose,
+  executionResults,
+}) => {
+  if (!isOpen) {
+    return null;
+  }
+
+  return (
+    <div className="nodrag nowheel fixed inset-0 flex items-center justify-center bg-white bg-opacity-60">
+      <div className="w-[500px] max-w-[90%] rounded-lg border-[1.5px] bg-white p-5">
+        <strong>Output Data History</strong>
+        <div className="my-2 max-h-[384px] flex-grow overflow-y-auto rounded-md border-[1.5px] p-2">
+          {executionResults.map((data, i) => (
+            <>
+              <DataTable key={i} title={data.execId} data={data.data} />
+              <Separator />
+            </>
+          ))}
+        </div>
+        <div className="mt-2.5 flex justify-end gap-2.5">
+          <Button onClick={onClose}>Close</Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default OutputModalComponent;

autogpt_platform/autogpt_builder/src/components/PasswordInput.tsx

@@ -0,0 +1,54 @@
+import { forwardRef, useState } from "react";
+import { EyeIcon, EyeOffIcon } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input, InputProps } from "@/components/ui/input";
+import { cn } from "@/lib/utils";
+
+const PasswordInput = forwardRef<HTMLInputElement, InputProps>(
+  ({ className, ...props }, ref) => {
+    const [showPassword, setShowPassword] = useState(false);
+    const disabled =
+      props.value === "" || props.value === undefined || props.disabled;
+
+    return (
+      <div className="relative">
+        <Input
+          type={showPassword ? "text" : "password"}
+          className={cn("hide-password-toggle pr-10", className)}
+          ref={ref}
+          {...props}
+        />
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
+          onClick={() => setShowPassword((prev) => !prev)}
+          disabled={disabled}
+        >
+          {showPassword && !disabled ? (
+            <EyeIcon className="h-4 w-4" aria-hidden="true" />
+          ) : (
+            <EyeOffIcon className="h-4 w-4" aria-hidden="true" />
+          )}
+          <span className="sr-only">
+            {showPassword ? "Hide password" : "Show password"}
+          </span>
+        </Button>
+
+        {/* hides browsers password toggles */}
+        <style>{`
+     .hide-password-toggle::-ms-reveal,
+     .hide-password-toggle::-ms-clear {
+      visibility: hidden;
+      pointer-events: none;
+      display: none;
+     }
+    `}</style>
+      </div>
+    );
+  },
+);
+PasswordInput.displayName = "PasswordInput";
+
+export { PasswordInput };

autogpt_platform/autogpt_builder/src/components/ProfileDropdown.tsx

@@ -0,0 +1,53 @@
+"use client";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Button } from "./ui/button";
+import { useSupabase } from "./SupabaseProvider";
+import { useRouter } from "next/navigation";
+import useUser from "@/hooks/useUser";
+
+const ProfileDropdown = () => {
+  const { supabase } = useSupabase();
+  const router = useRouter();
+  const { user, role, isLoading } = useUser();
+
+  if (isLoading) {
+    return null;
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" className="h-8 w-8 rounded-full">
+          <Avatar>
+            <AvatarImage
+              src={user?.user_metadata["avatar_url"]}
+              alt="User Avatar"
+            />
+            <AvatarFallback>CN</AvatarFallback>
+          </Avatar>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => router.push("/profile")}>
+          Profile
+        </DropdownMenuItem>
+        {role === "admin" && (
+          <DropdownMenuItem onClick={() => router.push("/admin/dashboard")}>
+            Admin Dashboard
+          </DropdownMenuItem>
+        )}
+        <DropdownMenuItem onClick={() => supabase?.auth.signOut()}>
+          Log out
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
+
+export default ProfileDropdown;

autogpt_platform/autogpt_builder/src/components/RoleBasedAccess.tsx

@@ -0,0 +1,27 @@
+// components/RoleBasedAccess.tsx
+import React from "react";
+import useUser from "@/hooks/useUser";
+
+interface RoleBasedAccessProps {
+  allowedRoles: string[];
+  children: React.ReactNode;
+}
+
+const RoleBasedAccess: React.FC<RoleBasedAccessProps> = ({
+  allowedRoles,
+  children,
+}) => {
+  const { role, isLoading } = useUser();
+
+  if (isLoading) {
+    return <div>Loading...</div>;
+  }
+
+  if (!role || !allowedRoles.includes(role)) {
+    return null;
+  }
+
+  return <>{children}</>;
+};
+
+export default RoleBasedAccess;

autogpt_platform/autogpt_builder/src/components/RunnerUIWrapper.tsx

@@ -0,0 +1,141 @@
+import React, {
+  useState,
+  useCallback,
+  forwardRef,
+  useImperativeHandle,
+} from "react";
+import RunnerInputUI from "./runner-ui/RunnerInputUI";
+import RunnerOutputUI from "./runner-ui/RunnerOutputUI";
+import { Node } from "@xyflow/react";
+import { filterBlocksByType } from "@/lib/utils";
+import { BlockIORootSchema } from "@/lib/autogpt-server-api/types";
+
+interface RunnerUIWrapperProps {
+  nodes: Node[];
+  setNodes: React.Dispatch<React.SetStateAction<Node[]>>;
+  isRunning: boolean;
+  requestSaveAndRun: () => void;
+}
+
+export interface RunnerUIWrapperRef {
+  openRunnerInput: () => void;
+  openRunnerOutput: () => void;
+  runOrOpenInput: () => void;
+}
+
+const RunnerUIWrapper = forwardRef<RunnerUIWrapperRef, RunnerUIWrapperProps>(
+  ({ nodes, setNodes, isRunning, requestSaveAndRun }, ref) => {
+    const [isRunnerInputOpen, setIsRunnerInputOpen] = useState(false);
+    const [isRunnerOutputOpen, setIsRunnerOutputOpen] = useState(false);
+
+    const getBlockInputsAndOutputs = useCallback(() => {
+      const inputBlocks = filterBlocksByType(
+        nodes,
+        (node) => node.data.block_id === "c0a8e994-ebf1-4a9c-a4d8-89d09c86741b",
+      );
+
+      const outputBlocks = filterBlocksByType(
+        nodes,
+        (node) => node.data.block_id === "363ae599-353e-4804-937e-b2ee3cef3da4",
+      );
+
+      const inputs = inputBlocks.map((node) => ({
+        id: node.id,
+        type: "input" as const,
+        inputSchema: node.data.inputSchema as BlockIORootSchema,
+        hardcodedValues: {
+          name: (node.data.hardcodedValues as any).name || "",
+          description: (node.data.hardcodedValues as any).description || "",
+          value: (node.data.hardcodedValues as any).value,
+          placeholder_values:
+            (node.data.hardcodedValues as any).placeholder_values || [],
+          limit_to_placeholder_values:
+            (node.data.hardcodedValues as any).limit_to_placeholder_values ||
+            false,
+        },
+      }));
+
+      const outputs = outputBlocks.map((node) => ({
+        id: node.id,
+        type: "output" as const,
+        outputSchema: node.data.outputSchema as BlockIORootSchema,
+        hardcodedValues: {
+          name: (node.data.hardcodedValues as any).name || "Output",
+          description:
+            (node.data.hardcodedValues as any).description ||
+            "Output from the agent",
+          value: (node.data.hardcodedValues as any).value,
+        },
+        result: (node.data.executionResults as any)?.at(-1)?.data?.output,
+      }));
+
+      return { inputs, outputs };
+    }, [nodes]);
+
+    const handleInputChange = useCallback(
+      (nodeId: string, field: string, value: string) => {
+        setNodes((nds) =>
+          nds.map((node) => {
+            if (node.id === nodeId) {
+              return {
+                ...node,
+                data: {
+                  ...node.data,
+                  hardcodedValues: {
+                    ...(node.data.hardcodedValues as any),
+                    [field]: value,
+                  },
+                },
+              };
+            }
+            return node;
+          }),
+        );
+      },
+      [setNodes],
+    );
+
+    const openRunnerInput = () => setIsRunnerInputOpen(true);
+    const openRunnerOutput = () => setIsRunnerOutputOpen(true);
+
+    const runOrOpenInput = () => {
+      const { inputs } = getBlockInputsAndOutputs();
+      if (inputs.length > 0) {
+        openRunnerInput();
+      } else {
+        requestSaveAndRun();
+      }
+    };
+
+    useImperativeHandle(ref, () => ({
+      openRunnerInput,
+      openRunnerOutput,
+      runOrOpenInput,
+    }));
+
+    return (
+      <>
+        <RunnerInputUI
+          isOpen={isRunnerInputOpen}
+          onClose={() => setIsRunnerInputOpen(false)}
+          blockInputs={getBlockInputsAndOutputs().inputs}
+          onInputChange={handleInputChange}
+          onRun={() => {
+            setIsRunnerInputOpen(false);
+            requestSaveAndRun();
+          }}
+          isRunning={isRunning}
+        />
+        <RunnerOutputUI
+          isOpen={isRunnerOutputOpen}
+          onClose={() => setIsRunnerOutputOpen(false)}
+          blockOutputs={getBlockInputsAndOutputs().outputs}
+        />
+      </>
+    );
+  },
+);
+
+RunnerUIWrapper.displayName = "RunnerUIWrapper";
+
+export default RunnerUIWrapper;

autogpt_platform/autogpt_builder/src/components/SchemaTooltip.tsx

@@ -0,0 +1,39 @@
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { Info } from "lucide-react";
+import ReactMarkdown from "react-markdown";
+
+const SchemaTooltip: React.FC<{ description?: string }> = ({ description }) => {
+  if (!description) return null;
+
+  return (
+    <TooltipProvider delayDuration={400}>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Info className="rounded-full p-1 hover:bg-gray-300" size={24} />
+        </TooltipTrigger>
+        <TooltipContent className="tooltip-content max-w-xs">
+          <ReactMarkdown
+            components={{
+              a: ({ node, ...props }) => (
+                <a
+                  target="_blank"
+                  className="text-blue-400 underline"
+                  {...props}
+                />
+              ),
+            }}
+          >
+            {description}
+          </ReactMarkdown>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+};
+
+export default SchemaTooltip;

autogpt_platform/autogpt_builder/src/components/SupabaseProvider.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { createClient } from "@/lib/supabase/client";
+import { SupabaseClient } from "@supabase/supabase-js";
+import { useRouter } from "next/navigation";
+import { createContext, useContext, useEffect, useState } from "react";
+import AutoGPTServerAPI from "@/lib/autogpt-server-api";
+
+type SupabaseContextType = {
+  supabase: SupabaseClient | null;
+  isLoading: boolean;
+};
+
+const Context = createContext<SupabaseContextType | undefined>(undefined);
+
+export default function SupabaseProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const [supabase, setSupabase] = useState<SupabaseClient | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const router = useRouter();
+
+  useEffect(() => {
+    const initializeSupabase = async () => {
+      setIsLoading(true);
+      const client = createClient();
+      const api = new AutoGPTServerAPI();
+      setSupabase(client);
+      setIsLoading(false);
+
+      if (client) {
+        const {
+          data: { subscription },
+        } = client.auth.onAuthStateChange((event, session) => {
+          if (event === "SIGNED_IN") {
+            api.createUser();
+          }
+          router.refresh();
+        });
+
+        return () => {
+          subscription.unsubscribe();
+        };
+      }
+    };
+
+    initializeSupabase();
+  }, [router]);
+
+  return (
+    <Context.Provider value={{ supabase, isLoading }}>
+      {children}
+    </Context.Provider>
+  );
+}
+
+export const useSupabase = () => {
+  const context = useContext(Context);
+  if (context === undefined) {
+    throw new Error("useSupabase must be used inside SupabaseProvider");
+  }
+  return context;
+};

autogpt_platform/autogpt_builder/src/components/TallyPopup.tsx

@@ -0,0 +1,67 @@
+"use client";
+import React, { useEffect, useState } from "react";
+import { Button } from "./ui/button";
+import { IconMegaphone } from "@/components/ui/icons";
+
+const TallyPopupSimple = () => {
+  const [isFormVisible, setIsFormVisible] = useState(false);
+
+  useEffect(() => {
+    // Load Tally script
+    const script = document.createElement("script");
+    script.src = "https://tally.so/widgets/embed.js";
+    script.async = true;
+    document.head.appendChild(script);
+
+    // Setup event listeners for Tally events
+    const handleTallyMessage = (event: MessageEvent) => {
+      if (typeof event.data === "string") {
+        try {
+          const data = JSON.parse(event.data);
+          if (data.event === "Tally.FormLoaded") {
+            setIsFormVisible(true);
+          } else if (data.event === "Tally.PopupClosed") {
+            setIsFormVisible(false);
+          }
+        } catch (error) {
+          console.error("Error parsing Tally message:", error);
+        }
+      }
+    };
+
+    window.addEventListener("message", handleTallyMessage);
+
+    return () => {
+      document.head.removeChild(script);
+      window.removeEventListener("message", handleTallyMessage);
+    };
+  }, []);
+
+  if (isFormVisible) {
+    return null; // Hide the button when the form is visible
+  }
+
+  const resetTutorial = () => {
+    const url = `${window.location.origin}/build?resetTutorial=true`;
+    window.location.href = url;
+  };
+
+  return (
+    <div className="fixed bottom-6 right-6 z-50 flex items-center gap-4 p-3 transition-all duration-300 ease-in-out">
+      <Button variant="default" onClick={resetTutorial} className="mb-0">
+        Tutorial
+      </Button>
+      <Button
+        variant="default"
+        data-tally-open="3yx2L0"
+        data-tally-emoji-text="👋"
+        data-tally-emoji-animation="wave"
+      >
+        <IconMegaphone size="lg" />
+        <span className="sr-only">Reach Out</span>
+      </Button>
+    </div>
+  );
+};
+
+export default TallyPopupSimple;

autogpt_platform/autogpt_builder/src/components/admin/marketplace/AdminAddFeaturedAgentDialog.tsx

@@ -0,0 +1,149 @@
+"use client";
+
+import {
+  Dialog,
+  DialogContent,
+  DialogClose,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import {
+  MultiSelector,
+  MultiSelectorContent,
+  MultiSelectorInput,
+  MultiSelectorItem,
+  MultiSelectorList,
+  MultiSelectorTrigger,
+} from "@/components/ui/multiselect";
+import { Controller, useForm } from "react-hook-form";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { useState } from "react";
+import { addFeaturedAgent } from "./actions";
+import { Agent } from "@/lib/marketplace-api/types";
+
+type FormData = {
+  agent: string;
+  categories: string[];
+};
+
+export const AdminAddFeaturedAgentDialog = ({
+  categories,
+  agents,
+}: {
+  categories: string[];
+  agents: Agent[];
+}) => {
+  const [selectedAgent, setSelectedAgent] = useState<string>("");
+  const [selectedCategories, setSelectedCategories] = useState<string[]>([]);
+
+  const {
+    control,
+    handleSubmit,
+    watch,
+    setValue,
+    formState: { errors },
+  } = useForm<FormData>({
+    defaultValues: {
+      agent: "",
+      categories: [],
+    },
+  });
+
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline" size="sm">
+          Add Featured Agent
+        </Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Add Featured Agent</DialogTitle>
+        </DialogHeader>
+        <div className="flex flex-col gap-4">
+          <Controller
+            name="agent"
+            control={control}
+            rules={{ required: true }}
+            render={({ field }) => (
+              <div>
+                <label htmlFor={field.name}>Agent</label>
+                <Select
+                  onValueChange={(value) => {
+                    field.onChange(value);
+                    setSelectedAgent(value);
+                  }}
+                  value={field.value || ""}
+                >
+                  <SelectTrigger>
+                    <SelectValue placeholder="Select an agent" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {/* Populate with agents */}
+                    {agents.map((agent) => (
+                      <SelectItem key={agent.id} value={agent.id}>
+                        {agent.name}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            )}
+          />
+          <Controller
+            name="categories"
+            control={control}
+            render={({ field }) => (
+              <MultiSelector
+                values={field.value || []}
+                onValuesChange={(values) => {
+                  field.onChange(values);
+                  setSelectedCategories(values);
+                }}
+              >
+                <MultiSelectorTrigger>
+                  <MultiSelectorInput placeholder="Select categories" />
+                </MultiSelectorTrigger>
+                <MultiSelectorContent>
+                  <MultiSelectorList>
+                    {categories.map((category) => (
+                      <MultiSelectorItem key={category} value={category}>
+                        {category}
+                      </MultiSelectorItem>
+                    ))}
+                  </MultiSelectorList>
+                </MultiSelectorContent>
+              </MultiSelector>
+            )}
+          />
+        </div>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="outline">Cancel</Button>
+          </DialogClose>
+          <DialogClose asChild>
+            <Button
+              type="submit"
+              onClick={async () => {
+                // Handle adding the featured agent
+                await addFeaturedAgent(selectedAgent, selectedCategories);
+                // close the dialog
+              }}
+            >
+              Add
+            </Button>
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};

autogpt_platform/autogpt_builder/src/components/admin/marketplace/AdminFeaturedAgentsControl.tsx

@@ -0,0 +1,74 @@
+import { Button } from "@/components/ui/button";
+import {
+  getFeaturedAgents,
+  removeFeaturedAgent,
+  getCategories,
+  getNotFeaturedAgents,
+} from "./actions";
+
+import FeaturedAgentsTable from "./FeaturedAgentsTable";
+import { AdminAddFeaturedAgentDialog } from "./AdminAddFeaturedAgentDialog";
+import { revalidatePath } from "next/cache";
+import * as Sentry from "@sentry/nextjs";
+
+export default async function AdminFeaturedAgentsControl({
+  className,
+}: {
+  className?: string;
+}) {
+  // add featured agent button
+  //   modal to select agent?
+  //   modal to select categories?
+  // table of featured agents
+  // in table
+  //    remove featured agent button
+  //    edit featured agent categories button
+  // table footer
+  //    Next page button
+  //    Previous page button
+  //    Page number input
+  //    Page size input
+  //    Total pages input
+  //    Go to page button
+
+  const page = 1;
+  const pageSize = 10;
+
+  const agents = await getFeaturedAgents(page, pageSize);
+
+  const categories = await getCategories();
+
+  const notFeaturedAgents = await getNotFeaturedAgents();
+
+  return (
+    <div className={`flex flex-col gap-4 ${className}`}>
+      <div className="mb-4 flex justify-between">
+        <h3 className="text-lg font-semibold">Featured Agent Controls</h3>
+        <AdminAddFeaturedAgentDialog
+          categories={categories.unique_categories}
+          agents={notFeaturedAgents.agents}
+        />
+      </div>
+      <FeaturedAgentsTable
+        agents={agents.agents}
+        globalActions={[
+          {
+            component: <Button>Remove</Button>,
+            action: async (rows) => {
+              "use server";
+              return await Sentry.withServerActionInstrumentation(
+                "removeFeaturedAgent",
+                {},
+                async () => {
+                  const all = rows.map((row) => removeFeaturedAgent(row.id));
+                  await Promise.all(all);
+                  revalidatePath("/marketplace");
+                },
+              );
+            },
+          },
+        ]}
+      />
+    </div>
+  );
+}

autogpt_platform/autogpt_builder/src/components/admin/marketplace/AdminMarketplaceAgentList.tsx

@@ -0,0 +1,36 @@
+import { Agent } from "@/lib/marketplace-api";
+import AdminMarketplaceCard from "./AdminMarketplaceCard";
+import { ClipboardX } from "lucide-react";
+
+export default function AdminMarketplaceAgentList({
+  agents,
+  className,
+}: {
+  agents: Agent[];
+  className?: string;
+}) {
+  if (agents.length === 0) {
+    return (
+      <div className={className}>
+        <h3 className="text-lg font-semibold">Agents to review</h3>
+        <div className="flex flex-col items-center justify-center py-12 text-gray-500">
+          <ClipboardX size={48} />
+          <p className="mt-4 text-lg font-semibold">No agents to review</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={`flex flex-col gap-4 ${className}`}>
+      <div>
+        <h3 className="text-lg font-semibold">Agents to review</h3>
+      </div>
+      <div className="flex flex-col gap-4">
+        {agents.map((agent) => (
+          <AdminMarketplaceCard agent={agent} key={agent.id} />
+        ))}
+      </div>
+    </div>
+  );
+}

autogpt_platform/autogpt_builder/src/components/admin/marketplace/AdminMarketplaceCard.tsx

@@ -0,0 +1,113 @@
+"use client";
+import { Card } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { approveAgent, rejectAgent } from "./actions";
+import { Agent } from "@/lib/marketplace-api";
+import Link from "next/link";
+import { useState } from "react";
+import { Input } from "@/components/ui/input";
+
+function AdminMarketplaceCard({ agent }: { agent: Agent }) {
+  const [isApproved, setIsApproved] = useState(false);
+  const [isRejected, setIsRejected] = useState(false);
+  const [comment, setComment] = useState("");
+
+  const approveAgentWithId = approveAgent.bind(
+    null,
+    agent.id,
+    agent.version,
+    comment,
+  );
+  const rejectAgentWithId = rejectAgent.bind(
+    null,
+    agent.id,
+    agent.version,
+    comment,
+  );
+
+  const handleApprove = async (e: React.FormEvent) => {
+    e.preventDefault();
+    await approveAgentWithId();
+    setIsApproved(true);
+  };
+
+  const handleReject = async (e: React.FormEvent) => {
+    e.preventDefault();
+    await rejectAgentWithId();
+    setIsRejected(true);
+  };
+
+  return (
+    <>
+      {!isApproved && !isRejected && (
+        <Card key={agent.id} className="m-3 flex h-[300px] flex-col p-4">
+          <div className="mb-2 flex items-start justify-between">
+            <Link
+              href={`/marketplace/${agent.id}`}
+              className="text-lg font-semibold hover:underline"
+            >
+              {agent.name}
+            </Link>
+            <Badge variant="outline">v{agent.version}</Badge>
+          </div>
+          <p className="mb-2 text-sm text-gray-500">by {agent.author}</p>
+          <ScrollArea className="flex-grow">
+            <p className="mb-2 text-sm text-gray-600">{agent.description}</p>
+            <div className="mb-2 flex flex-wrap gap-1">
+              {agent.categories.map((category) => (
+                <Badge key={category} variant="secondary">
+                  {category}
+                </Badge>
+              ))}
+            </div>
+            <div className="flex flex-wrap gap-1">
+              {agent.keywords.map((keyword) => (
+                <Badge key={keyword} variant="outline">
+                  {keyword}
+                </Badge>
+              ))}
+            </div>
+          </ScrollArea>
+          <div className="mb-2 flex justify-between text-xs text-gray-500">
+            <span>
+              Created: {new Date(agent.createdAt).toLocaleDateString()}
+            </span>
+            <span>
+              Updated: {new Date(agent.updatedAt).toLocaleDateString()}
+            </span>
+          </div>
+          <div className="mb-4 flex justify-between text-sm">
+            <span>👁 {agent.views}</span>
+            <span>⬇️ {agent.downloads}</span>
+          </div>
+          <div className="mt-auto space-y-2">
+            <div className="flex justify-end space-x-2">
+              <Input
+                type="text"
+                placeholder="Add a comment (optional)"
+                value={comment}
+                onChange={(e) => setComment(e.target.value)}
+              />
+              {!isRejected && (
+                <form onSubmit={handleReject}>
+                  <Button variant="outline" type="submit">
+                    Reject
+                  </Button>
+                </form>
+              )}
+              {!isApproved && (
+                <form onSubmit={handleApprove}>
+                  <Button type="submit">Approve</Button>
+                </form>
+              )}
+            </div>
+          </div>
+        </Card>
+      )}
+    </>
+  );
+}
+
+export default AdminMarketplaceCard;

autogpt_platform/autogpt_builder/src/components/admin/marketplace/FeaturedAgentsTable.tsx

@@ -0,0 +1,114 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { DataTable } from "@/components/ui/data-table";
+import { Agent } from "@/lib/marketplace-api";
+import { ColumnDef } from "@tanstack/react-table";
+import { ArrowUpDown } from "lucide-react";
+import { removeFeaturedAgent } from "./actions";
+import { GlobalActions } from "@/components/ui/data-table";
+
+export const columns: ColumnDef<Agent>[] = [
+  {
+    id: "select",
+    header: ({ table }) => (
+      <Checkbox
+        checked={
+          table.getIsAllPageRowsSelected() ||
+          (table.getIsSomePageRowsSelected() && "indeterminate")
+        }
+        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+        aria-label="Select all"
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={(value) => row.toggleSelected(!!value)}
+        aria-label="Select row"
+      />
+    ),
+  },
+  {
+    header: ({ column }) => {
+      return (
+        <Button
+          variant="ghost"
+          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+        >
+          Name
+          <ArrowUpDown className="ml-2 h-4 w-4" />
+        </Button>
+      );
+    },
+    accessorKey: "name",
+  },
+  {
+    header: "Description",
+    accessorKey: "description",
+  },
+  {
+    header: "Categories",
+    accessorKey: "categories",
+  },
+  {
+    header: "Keywords",
+    accessorKey: "keywords",
+  },
+  {
+    header: "Downloads",
+    accessorKey: "downloads",
+  },
+  {
+    header: "Author",
+    accessorKey: "author",
+  },
+  {
+    header: "Version",
+    accessorKey: "version",
+  },
+  {
+    header: "actions",
+    cell: ({ row }) => {
+      const handleRemove = async () => {
+        await removeFeaturedAgentWithId();
+      };
+      // const handleEdit = async () => {
+      //   console.log("edit");
+      // };
+      const removeFeaturedAgentWithId = removeFeaturedAgent.bind(
+        null,
+        row.original.id,
+      );
+      return (
+        <div className="flex justify-end gap-2">
+          <Button variant="outline" size="sm" onClick={handleRemove}>
+            Remove
+          </Button>
+          {/* <Button variant="outline" size="sm" onClick={handleEdit}>
+            Edit
+          </Button> */}
+        </div>
+      );
+    },
+  },
+];
+
+export default function FeaturedAgentsTable({
+  agents,
+  globalActions,
+}: {
+  agents: Agent[];
+  globalActions: GlobalActions<Agent>[];
+}) {
+  return (
+    <DataTable
+      columns={columns}
+      data={agents}
+      filterPlaceholder="Search agents..."
+      filterColumn="name"
+      globalActions={globalActions}
+    />
+  );
+}

autogpt_platform/autogpt_builder/src/components/admin/marketplace/actions.ts

@@ -0,0 +1,141 @@
+"use server";
+import MarketplaceAPI from "@/lib/marketplace-api";
+import { revalidatePath } from "next/cache";
+import * as Sentry from "@sentry/nextjs";
+
+export async function approveAgent(
+  agentId: string,
+  version: number,
+  comment: string,
+) {
+  return await Sentry.withServerActionInstrumentation(
+    "approveAgent",
+    {},
+    async () => {
+      const api = new MarketplaceAPI();
+      await api.approveAgentSubmission(agentId, version, comment);
+      console.debug(`Approving agent ${agentId}`);
+      revalidatePath("/marketplace");
+    },
+  );
+}
+
+export async function rejectAgent(
+  agentId: string,
+  version: number,
+  comment: string,
+) {
+  return await Sentry.withServerActionInstrumentation(
+    "rejectAgent",
+    {},
+    async () => {
+      const api = new MarketplaceAPI();
+      await api.rejectAgentSubmission(agentId, version, comment);
+      console.debug(`Rejecting agent ${agentId}`);
+      revalidatePath("/marketplace");
+    },
+  );
+}
+
+export async function getReviewableAgents() {
+  return await Sentry.withServerActionInstrumentation(
+    "getReviewableAgents",
+    {},
+    async () => {
+      const api = new MarketplaceAPI();
+      return api.getAgentSubmissions();
+    },
+  );
+}
+
+export async function getFeaturedAgents(
+  page: number = 1,
+  pageSize: number = 10,
+) {
+  return await Sentry.withServerActionInstrumentation(
+    "getFeaturedAgents",
+    {},
+    async () => {
+      const api = new MarketplaceAPI();
+      const featured = await api.getFeaturedAgents(page, pageSize);
+      console.debug(`Getting featured agents ${featured.agents.length}`);
+      return featured;
+    },
+  );
+}
+
+export async function getFeaturedAgent(agentId: string) {
+  return await Sentry.withServerActionInstrumentation(
+    "getFeaturedAgent",
+    {},
+    async () => {
+      const api = new MarketplaceAPI();
+      const featured = await api.getFeaturedAgent(agentId);
+      console.debug(`Getting featured agent ${featured.agentId}`);
+      return featured;
+    },
+  );
+}
+
+export async function addFeaturedAgent(
+  agentId: string,
+  categories: string[] = ["featured"],
+) {
+  return await Sentry.withServerActionInstrumentation(
+    "addFeaturedAgent",
+    {},
+    async () => {
+      const api = new MarketplaceAPI();
+      await api.addFeaturedAgent(agentId, categories);
+      console.debug(`Adding featured agent ${agentId}`);
+      revalidatePath("/marketplace");
+    },
+  );
+}
+
+export async function removeFeaturedAgent(
+  agentId: string,
+  categories: string[] = ["featured"],
+) {
+  return await Sentry.withServerActionInstrumentation(
+    "removeFeaturedAgent",
+    {},
+    async () => {
+      const api = new MarketplaceAPI();
+      await api.removeFeaturedAgent(agentId, categories);
+      console.debug(`Removing featured agent ${agentId}`);
+      revalidatePath("/marketplace");
+    },
+  );
+}
+
+export async function getCategories() {
+  return await Sentry.withServerActionInstrumentation(
+    "getCategories",
+    {},
+    async () => {
+      const api = new MarketplaceAPI();
+      const categories = await api.getCategories();
+      console.debug(
+        `Getting categories ${categories.unique_categories.length}`,
+      );
+      return categories;
+    },
+  );
+}
+
+export async function getNotFeaturedAgents(
+  page: number = 1,
+  pageSize: number = 100,
+) {
+  return await Sentry.withServerActionInstrumentation(
+    "getNotFeaturedAgents",
+    {},
+    async () => {
+      const api = new MarketplaceAPI();
+      const agents = await api.getNotFeaturedAgents(page, pageSize);
+      console.debug(`Getting not featured agents ${agents.agents.length}`);
+      return agents;
+    },
+  );
+}