Merge branch 'repo-restructure' into fix-path

add to docs

.gitattributes

@@ -1,8 +1,10 @@
-frontend/build/** linguist-generated
+classic/frontend/build/** linguist-generated
 
 **/poetry.lock linguist-generated
 
 docs/_javascript/** linguist-vendored
 
 # Exclude VCR cassettes from stats
-forge/tests/vcr_cassettes/**/**.y*ml linguist-generated
+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/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,18 +1,18 @@
 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:
@@ -20,8 +20,8 @@ documentation:
 
 Builder:
 - changed-files:
-  - any-glob-to-any-file: rnd/autogpt_builder/**
+  - any-glob-to-any-file: autogpt_platform/autogpt_builder/**
 
 Server:
 - changed-files:
-  - any-glob-to-any-file: rnd/autogpt_server/**
+  - any-glob-to-any-file: autogpt_platform/autogpt_server/**

.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: AutoGPT CI
+name: Classic - AutoGPT CI
 
 on:
   push:
     branches: [ master, development, ci-test* ]
     paths:
-      - '.github/workflows/autogpt-ci.yml'
-      - 'autogpt/**'
+      - '.github/workflows/classic-autogpt-ci.yml'
+      - 'classic/original_autogpt/**'
   pull_request:
     branches: [ master, development, release-* ]
     paths:
-      - '.github/workflows/autogpt-ci.yml'
-      - 'autogpt/**'
+      - '.github/workflows/classic-autogpt-ci.yml'
+      - 'classic/original_autogpt/**'
 
 concurrency:
-  group: ${{ format('autogpt-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: autogpt
+    working-directory: classic/original_autogpt
 
 jobs:
   test:
@@ -86,7 +86,7 @@ jobs:
         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/original_autogpt/poetry.lock') }}
 
       - name: Install Poetry (Unix)
         if: runner.os != 'Windows'
@@ -135,4 +135,4 @@ jobs:
         uses: actions/upload-artifact@v4
         with:
           name: test-logs
-          path: autogpt/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,24 +1,26 @@
-name: AutoGPT Docker CI
+name: Classic - AutoGPT Docker CI
 
 on:
   push:
     branches: [ master, development ]
     paths:
-      - '.github/workflows/autogpt-docker-ci.yml'
-      - 'autogpt/**'
+      - '.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/**'
+      - '.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
@@ -47,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 }}
@@ -116,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 '(agbenchmark/challenges)|(../classic/frontend/assets)') || echo "No diffs"
           if [ ! -z "$CHANGED" ]; then
             echo "There are unstaged changes please run agbenchmark and commit those changes since they are needed."
             echo "$CHANGED"

.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,18 +1,18 @@
-name: Forge CI
+name: Classic - Forge CI
 
 on:
   push:
     branches: [ master, development, ci-test* ]
     paths:
-      - '.github/workflows/forge-ci.yml'
-      - 'forge/**'
-      - '!forge/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/forge-ci.yml'
-      - 'forge/**'
-      - '!forge/tests/vcr_cassettes'
+      - '.github/workflows/classic-forge-ci.yml'
+      - 'classic/forge/**'
+      - '!classic/forge/tests/vcr_cassettes'
 
 concurrency:
   group: ${{ format('forge-ci-{0}', github.head_ref && format('{0}-{1}', github.event_name, github.event.pull_request.number) || github.sha) }}
@@ -21,7 +21,7 @@ concurrency:
 defaults:
   run:
     shell: bash
-    working-directory: forge
+    working-directory: classic/forge
 
 jobs:
   test:
@@ -110,7 +110,7 @@ jobs:
         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/forge/poetry.lock') }}
 
       - name: Install Poetry (Unix)
         if: runner.os != 'Windows'
@@ -233,4 +233,4 @@ jobs:
         uses: actions/upload-artifact@v4
         with:
           name: test-logs
-          path: forge/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'
-      - '!forge/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'
-      - '!forge/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

@@ -1,22 +1,23 @@
-name: AutoGPT Builder CI
+name: Platform - AutoGPT Builder CI
 
 on:
   push:
     branches: [ master ]
     paths:
       - '.github/workflows/autogpt-builder-ci.yml'
-      - 'rnd/autogpt_builder/**'
+      - 'autogpt_platform/autogpt_builder/**'
   pull_request:
     paths:
       - '.github/workflows/autogpt-builder-ci.yml'
-      - 'rnd/autogpt_builder/**'
+      - 'autogpt_platform/autogpt_builder/**'
 
 defaults:
   run:
     shell: bash
-    working-directory: rnd/autogpt_builder
+    working-directory: autogpt_platform/autogpt_builder
 
 jobs:
+
   lint:
     runs-on: ubuntu-latest
 
@@ -31,6 +32,10 @@ jobs:
       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

@@ -1,16 +1,16 @@
-name: AutoGPT Server CI
+name: Platform - AutoGPT Server CI
 
 on:
   push:
     branches: [master, development, ci-test*]
     paths:
       - ".github/workflows/autogpt-server-ci.yml"
-      - "rnd/autogpt_server/**"
+      - "autogpt_platform/autogpt_server/**"
   pull_request:
     branches: [master, development, release-*]
     paths:
       - ".github/workflows/autogpt-server-ci.yml"
-      - "rnd/autogpt_server/**"
+      - "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) }}
@@ -19,7 +19,7 @@ concurrency:
 defaults:
   run:
     shell: bash
-    working-directory: rnd/autogpt_server
+    working-directory: autogpt_platform/autogpt_server
 
 jobs:
   test:
@@ -37,8 +37,8 @@ jobs:
       - name: Setup PostgreSQL
         uses: ikalnytskyi/action-setup-postgres@v6
         with:
-          username: ${{ secrets.DB_USER }}
-          password: ${{ secrets.DB_PASS }}
+          username: ${{ secrets.DB_USER || 'postgres' }}
+          password: ${{ secrets.DB_PASS || 'postgres' }}
           database: postgres
           port: 5432
         id: postgres
@@ -90,7 +90,7 @@ jobs:
         uses: actions/cache@v4
         with:
           path: ${{ runner.os == 'macOS' && '~/Library/Caches/pypoetry' || '~/.cache/pypoetry' }}
-          key: poetry-${{ runner.os }}-${{ hashFiles('rnd/autogpt_server/poetry.lock') }}
+          key: poetry-${{ runner.os }}-${{ hashFiles('autogpt_platform/autogpt_server/poetry.lock') }}
 
       - name: Install Poetry (Unix)
         if: runner.os != 'Windows'
@@ -115,31 +115,38 @@ jobs:
         run: poetry install
 
       - name: Generate Prisma Client
-        run: poetry run prisma generate --schema postgres/schema.prisma
+        run: poetry run prisma generate
 
       - name: Run Database Migrations
-        run: poetry run prisma migrate dev --schema postgres/schema.prisma --name updates
+        run: poetry run prisma migrate dev --name updates
         env:
           CONNECTION_STR: ${{ steps.postgres.outputs.connection-uri }}
 
-      - name: Run Linter
+      - id: lint
+        name: Run Linter
         run: poetry run lint
 
       - name: Run pytest with coverage
         run: |
-          poetry run pytest -vv \
-            test
+          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 }}
-      DB_PASS: ${{ secrets.DB_PASS }}
+      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 }}:${{ secrets.DB_PASS }}@localhost:5432/${{ secrets.DB_NAME }}
+      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

.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:
-      - 'forge/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

@@ -1,55 +1,109 @@
+import json
 import os
 import requests
 import sys
+import time
+from typing import Dict, List, Tuple
 
-# GitHub API endpoint
-api_url = os.environ["GITHUB_API_URL"]
-repo = os.environ["GITHUB_REPOSITORY"]
-sha = os.environ["GITHUB_SHA"]
 
-# GitHub token for authentication
-github_token = os.environ["GITHUB_TOKEN"]
+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)
 
-# API endpoint for check runs for the specific SHA
-endpoint = f"{api_url}/repos/{repo}/commits/{sha}/check-runs"
+        sha = event["pull_request"]["head"]["sha"]
 
-# Set up headers for authentication
-headers = {
-    "Authorization": f"token {github_token}",
-    "Accept": "application/vnd.github.v3+json"
-}
+        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)
 
-# Make the API request
-response = requests.get(endpoint, headers=headers)
 
-if response.status_code != 200:
-    print(f"Error: Unable to fetch check runs data. Status code: {response.status_code}")
-    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)
 
-check_runs = response.json()["check_runs"]
 
-# Flag to track if all other check runs have passed
-all_others_passed = True
+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
 
-# Current run id
-current_run_id = os.environ["GITHUB_RUN_ID"]
+    for run in check_runs:
+        if str(run["name"]) != "Check PR Status":
+            status = run["status"]
+            conclusion = run["conclusion"]
 
-for run in check_runs:
-    if str(run["id"]) != current_run_id:
-        status = run["status"]
-        conclusion = run["conclusion"]
-        
-        if status == "completed":
-            if conclusion not in ["success", "skipped", "neutral"]:
+            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
-                print(f"Check run {run['name']} (ID: {run['id']}) has conclusion: {conclusion}")
         else:
-            print(f"Check run {run['name']} (ID: {run['id']}) is still {status}.")
-            all_others_passed = False
+            print(
+                f"Skipping check run {run['name']} (ID: {run['id']}) as it is the current run."
+            )
 
-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)
+    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()

.github/workflows/workflow-checker.yml

@@ -1,51 +0,0 @@
-name: PR Status Checker
-on:
-  workflow_run:
-    workflows: ["*"]
-    types:
-      - completed
-
-jobs:
-  status-check:
-    name: Check Actions Status
-    runs-on: ubuntu-latest
-    steps:
-    - uses: actions/checkout@v4
-    - 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: Debug Information
-      run: |
-        echo "Event name: ${{ github.event_name }}"
-        echo "Workflow: ${{ github.workflow }}"
-        echo "Action: ${{ github.action }}"
-        echo "Actor: ${{ github.actor }}"
-        echo "Repository: ${{ github.repository }}"
-        echo "Ref: ${{ github.ref }}"
-        echo "Head ref: ${{ github.head_ref }}"
-        echo "Base ref: ${{ github.base_ref }}"
-        echo "Event payload:"
-        cat $GITHUB_EVENT_PATH
-    - name: Debug File Structure
-      run: |
-        echo "Current directory:"
-        pwd
-        echo "Directory contents:"
-        ls -R
-        echo "GitHub workspace:"
-        echo $GITHUB_WORKSPACE
-        echo "GitHub workspace contents:"
-        ls -R $GITHUB_WORKSPACE
-    - name: Check Actions Status
-      run: |
-        echo "Current directory before running Python script:"
-        pwd
-        echo "Attempting to run Python script:"
-        python .github/scripts/check_actions_status.py
-      env:
-        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.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
@@ -157,7 +157,7 @@ openai/
 CURRENT_BULLETIN.md
 
 # AgBenchmark
-agbenchmark/reports/
+classic/benchmark/agbenchmark/reports/
 
 # Nodejs
 package-lock.json
@@ -170,4 +170,4 @@ pri*
 ig*
 .github_access_token
 LICENSE.rtf
-rnd/autogpt_server/settings.py
+autogpt_platform/autogpt_server/settings.py

.gitmodules

@@ -1,3 +1,6 @@
-[submodule "forge/tests/vcr_cassettes"]
-	path = forge/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/|poetry\.lock$)
+        files: ^classic/benchmark/(agbenchmark/|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/(agbenchmark/|tests/|poetry\.lock$)
         language: system
         pass_filenames: false

.vscode/all-projects.code-workspace

@@ -1,39 +1,53 @@
 {
   "folders": [
     {
-      "name": "autogpt",
-      "path": "../autogpt"
+      "name": "autogpt_server",
+      "path": "../autogpt_platform/autogpt_server"
     },
     {
-      "name": "benchmark",
-      "path": "../benchmark"
+      "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": "forge",
-      "path": "../forge"
-    },
-    {
-      "name": "frontend",
-      "path": "../frontend"
-    },
-    {
-      "name": "autogpt_server",
-      "path": "../rnd/autogpt_server"
-    },
-    {
-      "name": "autogpt_builder",
-      "path": "../rnd/autogpt_builder"
-    },
     {
       "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": {},
+  "settings": {
+    "python.analysis.typeCheckingMode": "basic"
+  },
   "extensions": {
     "recommendations": [
       "charliermarsh.ruff",

README.md

@@ -55,15 +55,16 @@ Be part of the revolution! **AutoGPT** is here to stay, at the forefront of AI i
 ## 🤖 AutoGPT Classic
 > Below is information about the classic version of AutoGPT.
 
-**🛠️ [Build your own Agent - Quickstart](FORGE-QUICKSTART.md)**
+**🛠️ [Build your own Agent - Quickstart](classic/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 toolkit to build your own agent application. It handles most of the boilerplate code, 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 [`forge`](/classic/forge/) 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
+📘 [Learn More](https://github.com/Significant-Gravitas/AutoGPT/tree/master/classic/forge) about Forge
 
 ### 🎯 Benchmark
 
@@ -83,7 +84,7 @@ This guide will walk you through the process of creating your own agent and usin
 
 The frontend works out-of-the-box with all agents in the repo. Just use the [CLI] to run your agent of choice!
 
-📘 [Learn More](https://github.com/Significant-Gravitas/AutoGPT/tree/master/frontend) about the Frontend
+📘 [Learn More](https://github.com/Significant-Gravitas/AutoGPT/tree/master/classic/frontend) about the Frontend
 
 ### ⌨️ CLI
 

autogpt/autogpt/agents/prompt_strategies/code_flow.py

@@ -1,355 +0,0 @@
-import inspect
-import re
-from logging import Logger
-from typing import Callable, Iterable, Sequence, get_args, get_origin
-
-from forge.command import Command
-from forge.components.code_flow_executor import CodeFlowExecutionComponent
-from forge.config.ai_directives import AIDirectives
-from forge.config.ai_profile import AIProfile
-from forge.json.parsing import extract_dict_from_json
-from forge.llm.prompting import ChatPrompt, LanguageModelClassification, PromptStrategy
-from forge.llm.prompting.utils import indent
-from forge.llm.providers.schema import (
-    AssistantChatMessage,
-    AssistantFunctionCall,
-    ChatMessage,
-)
-from forge.models.config import SystemConfiguration
-from forge.models.json_schema import JSONSchema
-from forge.utils.exceptions import InvalidAgentResponseError
-from forge.utils.function.code_validation import CodeValidator
-from forge.utils.function.model import FunctionDef
-from pydantic import BaseModel, Field
-
-from autogpt.agents.prompt_strategies.one_shot import (
-    AssistantThoughts,
-    OneShotAgentActionProposal,
-    OneShotAgentPromptConfiguration,
-)
-
-_RESPONSE_INTERFACE_NAME = "AssistantResponse"
-
-
-class CodeFlowAgentActionProposal(BaseModel):
-    thoughts: AssistantThoughts
-    immediate_plan: str = Field(
-        ...,
-        description="We will be running an iterative process to execute the plan, "
-        "Write the partial / immediate plan to execute your plan as detailed and "
-        "efficiently as possible without the help of the reasoning/intelligence. "
-        "The plan should describe the output of the immediate plan, so that the next "
-        "iteration can be executed by taking the output into account. "
-        "Try to do as much as possible without making any assumption or uninformed "
-        "guesses. Avoid large output at all costs!!!\n"
-        "Format: Objective[Objective of this iteration, explain what's the use of this "
-        "iteration for the next one] Plan[Plan that does not require any reasoning or "
-        "intelligence] Output[Output of the plan / should be small, avoid whole file "
-        "output]",
-    )
-    python_code: str = Field(
-        ...,
-        description=(
-            "Write the fully-functional Python code of the immediate plan. "
-            "The output will be an `async def main() -> str` function of the immediate "
-            "plan that return the string output, the output will be passed into the "
-            "LLM context window so avoid returning the whole content!. "
-            "Use ONLY the listed available functions and built-in Python features. "
-            "Leverage the given magic functions to implement function calls for which "
-            "the arguments can't be determined yet. "
-            "Example:`async def main() -> str:\n"
-            "    return await provided_function('arg1', 'arg2').split('\\n')[0]`"
-        ),
-    )
-
-
-FINAL_INSTRUCTION: str = (
-    "You have to give the answer in the from of JSON schema specified previously. "
-    "For the `python_code` field, you have to write Python code to execute your plan "
-    "as efficiently as possible. Your code will be executed directly without any "
-    "editing, if it doesn't work you will be held responsible. "
-    "Use ONLY the listed available functions and built-in Python features. "
-    "Do not make uninformed assumptions "
-    "(e.g. about the content or format of an unknown file). Leverage the given magic "
-    "functions to implement function calls for which the arguments can't be determined "
-    "yet. Reduce the amount of unnecessary data passed into these magic functions "
-    "where possible, because magic costs money and magically processing large amounts "
-    "of data is expensive. If you think are done with the task, you can simply call "
-    "finish(reason='your reason') to end the task, "
-    "a function that has one `finish` command, don't mix finish with other functions! "
-    "If you still need to do other functions, "
-    "let the next cycle execute the `finish` function. "
-    "Avoid hard-coding input values as input, and avoid returning large outputs. "
-    "The code that you have been executing in the past cycles can also be buggy, "
-    "so if you see undesired output, you can always try to re-plan, and re-code. "
-)
-
-
-class CodeFlowAgentPromptStrategy(PromptStrategy):
-    default_configuration: OneShotAgentPromptConfiguration = (
-        OneShotAgentPromptConfiguration()
-    )
-
-    def __init__(
-        self,
-        configuration: SystemConfiguration,
-        logger: Logger,
-    ):
-        self.config = configuration
-        self.response_schema = JSONSchema.from_dict(
-            CodeFlowAgentActionProposal.model_json_schema()
-        )
-        self.logger = logger
-        self.commands: Sequence[Command] = []  # Sequence -> disallow list modification
-
-    @property
-    def llm_classification(self) -> LanguageModelClassification:
-        return LanguageModelClassification.SMART_MODEL  # FIXME: dynamic switching
-
-    def build_prompt(
-        self,
-        *,
-        messages: list[ChatMessage],
-        task: str,
-        ai_profile: AIProfile,
-        ai_directives: AIDirectives,
-        commands: Sequence[Command],
-        **extras,
-    ) -> ChatPrompt:
-        """Constructs and returns a prompt with the following structure:
-        1. System prompt
-        3. `cycle_instruction`
-        """
-        system_prompt, response_prefill = self.build_system_prompt(
-            ai_profile=ai_profile,
-            ai_directives=ai_directives,
-            commands=commands,
-        )
-
-        self.commands = commands
-        final_instruction_msg = ChatMessage.system(FINAL_INSTRUCTION)
-
-        return ChatPrompt(
-            messages=[
-                ChatMessage.system(system_prompt),
-                ChatMessage.user(f'"""{task}"""'),
-                *messages,
-                *(
-                    [final_instruction_msg]
-                    if not any(m.role == "assistant" for m in messages)
-                    else []
-                ),
-            ],
-            prefill_response=response_prefill,
-        )
-
-    def build_system_prompt(
-        self,
-        ai_profile: AIProfile,
-        ai_directives: AIDirectives,
-        commands: Iterable[Command],
-    ) -> tuple[str, str]:
-        """
-        Builds the system prompt.
-
-        Returns:
-            str: The system prompt body
-            str: The desired start for the LLM's response; used to steer the output
-        """
-        response_fmt_instruction, response_prefill = self.response_format_instruction()
-        system_prompt_parts = (
-            self._generate_intro_prompt(ai_profile)
-            + [
-                "## Your Task\n"
-                "The user will specify a task for you to execute, in triple quotes,"
-                " in the next message. Your job is to complete the task, "
-                "and terminate when your task is done."
-            ]
-            + ["## Available Functions\n" + self._generate_function_headers(commands)]
-            + ["## RESPONSE FORMAT\n" + response_fmt_instruction]
-        )
-
-        # Join non-empty parts together into paragraph format
-        return (
-            "\n\n".join(filter(None, system_prompt_parts)).strip("\n"),
-            response_prefill,
-        )
-
-    def response_format_instruction(self) -> tuple[str, str]:
-        response_schema = self.response_schema.model_copy(deep=True)
-        assert response_schema.properties
-
-        # Unindent for performance
-        response_format = re.sub(
-            r"\n\s+",
-            "\n",
-            response_schema.to_typescript_object_interface(_RESPONSE_INTERFACE_NAME),
-        )
-        response_prefill = f'{{\n    "{list(response_schema.properties.keys())[0]}":'
-
-        return (
-            (
-                f"YOU MUST ALWAYS RESPOND WITH A JSON OBJECT OF THE FOLLOWING TYPE:\n"
-                f"{response_format}"
-            ),
-            response_prefill,
-        )
-
-    def _generate_intro_prompt(self, ai_profile: AIProfile) -> list[str]:
-        """Generates the introduction part of the prompt.
-
-        Returns:
-            list[str]: A list of strings forming the introduction part of the prompt.
-        """
-        return [
-            f"You are {ai_profile.ai_name}, {ai_profile.ai_role.rstrip('.')}.",
-            # "Your decisions must always be made independently without seeking "
-            # "user assistance. Play to your strengths as an LLM and pursue "
-            # "simple strategies with no legal complications.",
-        ]
-
-    def _generate_function_headers(self, commands: Iterable[Command]) -> str:
-        function_stubs: list[str] = []
-        annotation_types_in_context: set[type] = set()
-        for f in commands:
-            # Add source code of non-builtin types from function signatures
-            new_annotation_types = extract_annotation_types(f.method).difference(
-                annotation_types_in_context
-            )
-            new_annotation_types_src = [
-                f"# {a.__module__}.{a.__qualname__}\n{inspect.getsource(a)}"
-                for a in new_annotation_types
-            ]
-            annotation_types_in_context.update(new_annotation_types)
-
-            param_descriptions = "\n".join(
-                f"{param.name}: {param.spec.description}"
-                for param in f.parameters
-                if param.spec.description
-            )
-            full_function_stub = (
-                ("\n".join(new_annotation_types_src) + "\n" + f.header).strip()
-                + "\n"
-                + indent(
-                    (
-                        '"""\n'
-                        f"{f.description}\n\n"
-                        f"Params:\n{indent(param_descriptions)}\n"
-                        '"""\n'
-                        "pass"
-                    ),
-                )
-            )
-            function_stubs.append(full_function_stub)
-
-        return "\n\n\n".join(function_stubs)
-
-    async def parse_response_content(
-        self,
-        response: AssistantChatMessage,
-    ) -> OneShotAgentActionProposal:
-        if not response.content:
-            raise InvalidAgentResponseError("Assistant response has no text content")
-
-        self.logger.debug(
-            "LLM response content:"
-            + (
-                f"\n{response.content}"
-                if "\n" in response.content
-                else f" '{response.content}'"
-            )
-        )
-        assistant_reply_dict = extract_dict_from_json(response.content)
-
-        parsed_response = CodeFlowAgentActionProposal.model_validate(
-            assistant_reply_dict
-        )
-        if not parsed_response.python_code:
-            raise ValueError("python_code is empty")
-
-        available_functions = {
-            c.name: FunctionDef(
-                name=c.name,
-                arg_types=[(p.name, p.spec.python_type) for p in c.parameters],
-                arg_descs={p.name: p.spec.description for p in c.parameters},
-                arg_defaults={
-                    p.name: p.spec.default or "None"
-                    for p in c.parameters
-                    if p.spec.default or not p.spec.required
-                },
-                return_type=c.return_type,
-                return_desc="Output of the function",
-                function_desc=c.description,
-                is_async=c.is_async,
-            )
-            for c in self.commands
-        }
-        available_functions.update(
-            {
-                "main": FunctionDef(
-                    name="main",
-                    arg_types=[],
-                    arg_descs={},
-                    return_type="str",
-                    return_desc="Output of the function",
-                    function_desc="The main function to execute the plan",
-                    is_async=True,
-                )
-            }
-        )
-        code_validation = await CodeValidator(
-            function_name="main",
-            available_functions=available_functions,
-        ).validate_code(parsed_response.python_code)
-
-        clean_response = response.model_copy()
-        clean_response.content = parsed_response.model_dump_json(indent=4)
-
-        # TODO: prevent combining finish with other functions
-        if _finish_call := re.search(
-            r"finish\((reason=)?(.*?)\)", code_validation.functionCode
-        ):
-            finish_reason = _finish_call.group(2)[1:-1]  # remove quotes
-            result = OneShotAgentActionProposal(
-                thoughts=parsed_response.thoughts,
-                use_tool=AssistantFunctionCall(
-                    name="finish",
-                    arguments={"reason": finish_reason},
-                ),
-                raw_message=clean_response,
-            )
-        else:
-            result = OneShotAgentActionProposal(
-                thoughts=parsed_response.thoughts,
-                use_tool=AssistantFunctionCall(
-                    name=CodeFlowExecutionComponent.execute_code_flow.name,
-                    arguments={
-                        "python_code": code_validation.functionCode,
-                        "plan_text": parsed_response.immediate_plan,
-                    },
-                ),
-                raw_message=clean_response,
-            )
-        return result
-
-
-def extract_annotation_types(func: Callable) -> set[type]:
-    annotation_types = set()
-    for annotation in inspect.get_annotations(func).values():
-        annotation_types.update(_get_nested_types(annotation))
-    return annotation_types
-
-
-def _get_nested_types(annotation: type) -> Iterable[type]:
-    if _args := get_args(annotation):
-        for a in _args:
-            yield from _get_nested_types(a)
-    if not _is_builtin_type(_a := get_origin(annotation) or annotation):
-        yield _a
-
-
-def _is_builtin_type(_type: type):
-    """Check if a given type is a built-in type."""
-    import sys
-
-    return _type.__module__ in sys.stdlib_module_names

autogpt/tests/unit/test_code_flow_strategy.py

@@ -1,126 +0,0 @@
-import logging
-from typing import Optional
-
-import pytest
-from forge.agent.protocols import CommandProvider
-from forge.command import Command, command
-from forge.components.code_flow_executor import CodeFlowExecutionComponent
-from forge.config.ai_directives import AIDirectives
-from forge.config.ai_profile import AIProfile
-from forge.llm.providers import AssistantChatMessage
-from forge.llm.providers.schema import JSONSchema
-
-from autogpt.agents.prompt_strategies.code_flow import CodeFlowAgentPromptStrategy
-
-logger = logging.getLogger(__name__)
-config = CodeFlowAgentPromptStrategy.default_configuration.copy(deep=True)
-prompt_strategy = CodeFlowAgentPromptStrategy(config, logger)
-
-
-class MockWebSearchProvider(CommandProvider):
-    def get_commands(self):
-        yield self.mock_web_search
-
-    @command(
-        description="Searches the web",
-        parameters={
-            "query": JSONSchema(
-                type=JSONSchema.Type.STRING,
-                description="The search query",
-                required=True,
-            ),
-            "num_results": JSONSchema(
-                type=JSONSchema.Type.INTEGER,
-                description="The number of results to return",
-                minimum=1,
-                maximum=10,
-                required=False,
-            ),
-        },
-    )
-    def mock_web_search(self, query: str, num_results: Optional[int] = None) -> str:
-        return "results"
-
-
-@pytest.mark.asyncio
-async def test_code_flow_build_prompt():
-    commands = list(MockWebSearchProvider().get_commands())
-
-    ai_profile = AIProfile()
-    ai_profile.ai_name = "DummyGPT"
-    ai_profile.ai_goals = ["A model for testing purposes"]
-    ai_profile.ai_role = "Help Testing"
-
-    ai_directives = AIDirectives()
-    ai_directives.resources = ["resource_1"]
-    ai_directives.constraints = ["constraint_1"]
-    ai_directives.best_practices = ["best_practice_1"]
-
-    prompt = str(
-        prompt_strategy.build_prompt(
-            task="Figure out from file.csv how much was spent on utilities",
-            messages=[],
-            ai_profile=ai_profile,
-            ai_directives=ai_directives,
-            commands=commands,
-        )
-    )
-    assert "DummyGPT" in prompt
-    assert (
-        "def mock_web_search(query: str, num_results: Optional[int] = None)" in prompt
-    )
-
-
-@pytest.mark.asyncio
-async def test_code_flow_parse_response():
-    response_content = """
-{
-"thoughts": {
-  "past_action_summary": "This is the past action summary.",
-  "observations": "This is the observation.",
-  "text": "Some text on the AI's thoughts.",
-  "reasoning": "This is the reasoning.",
-  "self_criticism": "This is the self-criticism.",
-  "plan": [
-    "Plan 1",
-    "Plan 2",
-    "Plan 3"
-  ],
-  "speak": "This is what the AI would say."
-},
-"immediate_plan": "Objective[objective1] Plan[plan1] Output[out1]",
-"python_code": "async def main() -> str:\n    return 'You passed the test.'",
-}
-    """
-    response = await CodeFlowAgentPromptStrategy(config, logger).parse_response_content(
-        AssistantChatMessage(content=response_content)
-    )
-    assert "This is the observation." == response.thoughts.observations
-    assert "This is the reasoning." == response.thoughts.reasoning
-
-    assert CodeFlowExecutionComponent.execute_code_flow.name == response.use_tool.name
-    assert "async def main() -> str" in response.use_tool.arguments["python_code"]
-    assert (
-        "Objective[objective1] Plan[plan1] Output[out1]"
-        in response.use_tool.arguments["plan_text"]
-    )
-
-
-@pytest.mark.asyncio
-async def test_code_flow_execution():
-    executor = CodeFlowExecutionComponent(
-        lambda: [
-            Command(
-                names=["test_func"],
-                description="",
-                parameters=[],
-                method=lambda: "You've passed the test!",
-            )
-        ]
-    )
-
-    result = await executor.execute_code_flow(
-        python_code="async def main() -> str:\n    return test_func()",
-        plan_text="This is the plan text.",
-    )
-    assert "You've passed the test!" in result

autogpt/tests/unit/test_function_code_validation.py

@@ -1,75 +0,0 @@
-import pytest
-from forge.utils.function.code_validation import CodeValidator, FunctionDef
-
-
-@pytest.mark.asyncio
-async def test_code_validation():
-    validator = CodeValidator(
-        available_functions={
-            "read_webpage": FunctionDef(
-                name="read_webpage",
-                arg_types=[("url", "str"), ("query", "str")],
-                arg_descs={
-                    "url": "URL to read",
-                    "query": "Query to search",
-                    "return_type": "Type of return value",
-                },
-                return_type="str",
-                return_desc="Information matching the query",
-                function_desc="Read a webpage and return the info matching the query",
-                is_async=True,
-            ),
-            "web_search": FunctionDef(
-                name="web_search",
-                arg_types=[("query", "str")],
-                arg_descs={"query": "Query to search"},
-                return_type="list[(str,str)]",
-                return_desc="List of tuples with title and URL",
-                function_desc="Search the web and return the search results",
-                is_async=True,
-            ),
-            "main": FunctionDef(
-                name="main",
-                arg_types=[],
-                arg_descs={},
-                return_type="str",
-                return_desc="Answer in the text format",
-                function_desc="Get the num of contributors to the autogpt github repo",
-                is_async=False,
-            ),
-        },
-        available_objects={},
-    )
-    response = await validator.validate_code(
-        raw_code="""
-def crawl_info(url: str, query: str) -> str | None:
-    info = await read_webpage(url, query)
-    if info:
-        return info
-
-    urls = await read_webpage(url, "autogpt github contributor page")
-    for url in urls.split('\\n'):
-        info = await crawl_info(url, query)
-        if info:
-            return info
-
-    return None
-
-def hehe():
-    return 'hehe'
-
-def main() -> str:
-    query = "Find the number of contributors to the autogpt github repository"
-    for title, url in ("autogpt github contributor page"):
-        info = await crawl_info(url, query)
-        if info:
-            return info
-    x = await hehe()
-    return "No info found"
-""",
-        packages=[],
-    )
-    assert response.functionCode is not None
-    assert "async def crawl_info" in response.functionCode  # async is added
-    assert "async def main" in response.functionCode
-    assert "x = hehe()" in response.functionCode  # await is removed

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/.gitignore

@@ -34,3 +34,6 @@ yarn-error.log*
 # 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

@@ -2,7 +2,19 @@ This is the frontend for AutoGPT's next generation
 
 ## Getting Started
 
-First, run the development server:
+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
@@ -18,8 +30,12 @@ Open [http://localhost:3000](http://localhost:3000) with your browser to see the
 
 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 
+## Deploy
 
-TODO
+TODO

autogpt_platform/autogpt_builder/components.json

@@ -14,4 +14,4 @@
     "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

@@ -6,21 +6,36 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "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",
@@ -31,12 +46,14 @@
     "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",
-    "reactflow": "^11.11.4",
+    "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": {
@@ -47,6 +64,8 @@
     "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/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,408 @@
+"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 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>
+                        <MultiSelectorItem value="keyword1">
+                          Keyword 1
+                        </MultiSelectorItem>
+                        <MultiSelectorItem value="keyword2">
+                          Keyword 2
+                        </MultiSelectorItem>
+                        {/* Add more predefined keywords as needed */}
+                      </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;
+    },
+  );
+}

autogpt_platform/autogpt_builder/src/components/agent-import-form.tsx

@@ -1,7 +1,7 @@
-import { z } from "zod"
-import { useForm } from "react-hook-form"
-import { zodResolver } from "@hookform/resolvers/zod"
-import React, { useState } from "react"
+import { z } from "zod";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import React, { useState } from "react";
 import {
   Form,
   FormControl,
@@ -9,28 +9,35 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from "@/components/ui/form"
-import { Input } from "@/components/ui/input"
-import { Button } from "@/components/ui/button"
-import { Switch } from "@/components/ui/switch"
-import { Textarea } from "@/components/ui/textarea"
-import AutoGPTServerAPI, { Graph, GraphCreatable } from "@/lib/autogpt-server-api"
-import { cn } from "@/lib/utils"
-import { EnterIcon } from "@radix-ui/react-icons"
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Switch } from "@/components/ui/switch";
+import { Textarea } from "@/components/ui/textarea";
+import AutoGPTServerAPI, {
+  Graph,
+  GraphCreatable,
+} from "@/lib/autogpt-server-api";
+import { cn } from "@/lib/utils";
+import { EnterIcon } from "@radix-ui/react-icons";
 
+// Add this custom schema for File type
+const fileSchema = z.custom<File>((val) => val instanceof File, {
+  message: "Must be a File object",
+});
 
 const formSchema = z.object({
-  agentFile: z.instanceof(File),
+  agentFile: fileSchema,
   agentName: z.string().min(1, "Agent name is required"),
   agentDescription: z.string(),
   importAsTemplate: z.boolean(),
-})
+});
 
-export const AgentImportForm: React.FC<React.FormHTMLAttributes<HTMLFormElement>> = (
-  { className, ...props }
-) => {
-  const [agentObject, setAgentObject] = useState<GraphCreatable | null>(null)
-  const api = new AutoGPTServerAPI()
+export const AgentImportForm: React.FC<
+  React.FormHTMLAttributes<HTMLFormElement>
+> = ({ className, ...props }) => {
+  const [agentObject, setAgentObject] = useState<GraphCreatable | null>(null);
+  const api = new AutoGPTServerAPI();
 
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
@@ -39,12 +46,12 @@ export const AgentImportForm: React.FC<React.FormHTMLAttributes<HTMLFormElement>
       agentDescription: "",
       importAsTemplate: false,
     },
-  })
+  });
 
   function onSubmit(values: z.infer<typeof formSchema>) {
     if (!agentObject) {
-      form.setError("root", { message: "No Agent object to save" })
-      return
+      form.setError("root", { message: "No Agent object to save" });
+      return;
     }
     const payload: GraphCreatable = {
       ...agentObject,
@@ -54,15 +61,20 @@ export const AgentImportForm: React.FC<React.FormHTMLAttributes<HTMLFormElement>
       is_template: values.importAsTemplate,
     };
 
-    (values.importAsTemplate ? api.createTemplate(payload) : api.createGraph(payload))
+    (values.importAsTemplate
+      ? api.createTemplate(payload)
+      : api.createGraph(payload)
+    )
       .then((response) => {
         const qID = values.importAsTemplate ? "templateID" : "flowID";
         window.location.href = `/build?${qID}=${response.id}`;
       })
-      .catch(error => {
-        const entity_type = values.importAsTemplate ? 'template' : 'agent';
-        form.setError("root", { message: `Could not create ${entity_type}: ${error}` });
-      })
+      .catch((error) => {
+        const entity_type = values.importAsTemplate ? "template" : "agent";
+        form.setError("root", {
+          message: `Could not create ${entity_type}: ${error}`,
+        });
+      });
   }
 
   return (
@@ -85,21 +97,22 @@ export const AgentImportForm: React.FC<React.FormHTMLAttributes<HTMLFormElement>
                   onChange={(e) => {
                     const file = e.target.files?.[0];
                     if (file) {
-                      field.onChange(file)
+                      field.onChange(file);
                       const reader = new FileReader();
                       // Attach parser to file reader
                       reader.onload = (event) => {
                         try {
                           const obj = JSON.parse(
-                            event.target?.result as string
+                            event.target?.result as string,
                           );
                           if (
-                            !["name", "description", "nodes", "links"]
-                            .every(key => !!obj[key])
+                            !["name", "description", "nodes", "links"].every(
+                              (key) => !!obj[key],
+                            )
                           ) {
                             throw new Error(
-                              "Invalid agent object in file: "
-                              + JSON.stringify(obj, null, 2)
+                              "Invalid agent object in file: " +
+                                JSON.stringify(obj, null, 2),
                             );
                           }
                           const agent = obj as Graph;
@@ -157,14 +170,26 @@ export const AgentImportForm: React.FC<React.FormHTMLAttributes<HTMLFormElement>
             <FormItem>
               <FormLabel>Import as</FormLabel>
               <FormControl>
-                <div className="flex space-x-2 items-center">
-                  <span className={field.value ? "text-gray-400 dark:text-gray-600" : ""}>Agent</span>
+                <div className="flex items-center space-x-2">
+                  <span
+                    className={
+                      field.value ? "text-gray-400 dark:text-gray-600" : ""
+                    }
+                  >
+                    Agent
+                  </span>
                   <Switch
                     disabled={field.disabled}
                     checked={field.value}
                     onCheckedChange={field.onChange}
                   />
-                  <span className={field.value ? "" : "text-gray-400 dark:text-gray-600"}>Template</span>
+                  <span
+                    className={
+                      field.value ? "" : "text-gray-400 dark:text-gray-600"
+                    }
+                  >
+                    Template
+                  </span>
                 </div>
               </FormControl>
               <FormMessage />
@@ -176,5 +201,5 @@ export const AgentImportForm: React.FC<React.FormHTMLAttributes<HTMLFormElement>
         </Button>
       </form>
     </Form>
-  )
-}
+  );
+};

autogpt_platform/autogpt_builder/src/components/customedge.css

@@ -0,0 +1,44 @@
+.edge-label-renderer {
+  position: absolute;
+  pointer-events: all;
+}
+
+.edge-label-button {
+  width: 20px;
+  height: 20px;
+  background: #eee;
+  border: 1px solid #fff;
+  cursor: pointer;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+  color: #555;
+  opacity: 0;
+  transition:
+    opacity 0.2s ease-in-out,
+    background-color 0.2s ease-in-out;
+}
+
+.edge-label-button.visible {
+  opacity: 1;
+}
+
+.edge-label-button:hover {
+  box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.08);
+  background: #f0f0f0;
+}
+
+.edge-label-button svg {
+  width: 14px;
+  height: 14px;
+}
+
+.react-flow__edge-interaction {
+  cursor: pointer;
+}
+
+.react-flow__edges > svg:has(> g.selected) {
+  z-index: 10 !important;
+}