Merge branch 'repo-restructure' into fix-path

add to docs

.gitattributes

@@ -1,10 +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,7 +1,7 @@
 * @Significant-Gravitas/maintainers
 .github/workflows/ @Significant-Gravitas/devops
-forge/ @Significant-Gravitas/forge-maintainers
-benchmark/ @Significant-Gravitas/benchmark-maintainers
-frontend/ @Significant-Gravitas/frontend-maintainers
-rnd/infra @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,20 +1,20 @@
-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:
 

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

@@ -1,20 +1,20 @@
-name: AutoGPT Builder Infra
+name: Platform - AutoGPT Builder Infra
 
 on:
   push:
     branches: [ master ]
     paths:
       - '.github/workflows/autogpt-infra-ci.yml'
-      - 'rnd/infra/**'
+      - 'autogpt_platform/infra/**'
   pull_request:
     paths:
       - '.github/workflows/autogpt-infra-ci.yml'
-      - 'rnd/infra/**'
+      - 'autogpt_platform/infra/**'
 
 defaults:
   run:
     shell: bash
-    working-directory: rnd/infra
+    working-directory: autogpt_platform/infra
 
 jobs:
   lint:

.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:
@@ -31,12 +31,10 @@ jobs:
       matrix:
         python-version: ["3.10"]
         platform-os: [ubuntu, macos, macos-arm64, windows]
-        db-platform: [postgres, sqlite]
     runs-on: ${{ matrix.platform-os != 'macos-arm64' && format('{0}-latest', matrix.platform-os) || 'macos-14' }}
 
     steps:
       - name: Setup PostgreSQL
-        if: matrix.db-platform == 'postgres'
         uses: ikalnytskyi/action-setup-postgres@v6
         with:
           username: ${{ secrets.DB_USER || 'postgres' }}
@@ -92,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'
@@ -116,31 +114,28 @@ jobs:
       - name: Install Python dependencies
         run: poetry install
 
-      - name: Generate Prisma Client (Postgres)
-        if: matrix.db-platform == 'postgres'
-        run: poetry run prisma generate --schema postgres/schema.prisma
+      - name: Generate Prisma Client
+        run: poetry run prisma generate
 
-      - name: Run Database Migrations (Postgres)
-        if: matrix.db-platform == 'postgres'
-        run: poetry run prisma migrate dev --schema postgres/schema.prisma --name updates
+      - name: Run Database Migrations
+        run: poetry run prisma migrate dev --name updates
         env:
           CONNECTION_STR: ${{ steps.postgres.outputs.connection-uri }}
 
-      - name: Generate Prisma Client (SQLite)
-        if: matrix.db-platform == 'sqlite'
-        run: poetry run prisma generate
-
-      - name: Run Database Migrations (SQLite)
-        if: matrix.db-platform == 'sqlite'
-        run: poetry run prisma migrate dev --name updates
-
-      - 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

.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,41 +1,49 @@
 {
   "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": "market",
-      "path": "../rnd/market"
-    },
     {
       "name": "[root]",
       "path": ".."
-    }
+    },
+    {
+      "name": "classic - autogpt",
+      "path": "../classic/original_autogpt"
+    },
+    {
+      "name": "classic - benchmark",
+      "path": "../classic/benchmark"
+    },
+    {
+      "name": "classic - forge",
+      "path": "../classic/forge"
+    },
+    {
+      "name": "classic - frontend",
+      "path": "../classic/frontend"
+    },
   ],
   "settings": {
     "python.analysis.typeCheckingMode": "basic"

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/.vscode/settings.json

@@ -1,3 +0,0 @@
-{
-  "python.analysis.typeCheckingMode": "basic",
-}

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

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

autogpt_platform/autogpt_builder/Dockerfile

@@ -1,19 +1,19 @@
 # Base stage for both dev and prod
 FROM node:21-alpine AS base
 WORKDIR /app
-COPY autogpt_builder/package.json autogpt_builder/yarn.lock ./
+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_builder/ .
+COPY autogpt_platform/autogpt_builder/ .
 EXPOSE 3000
-CMD ["npm", "run", "dev"]
+CMD ["yarn", "run", "dev"]
 
 # Build stage for prod
 FROM base AS build
-COPY autogpt_builder/ .
+COPY autogpt_platform/autogpt_builder/ .
 RUN npm run build
 
 # Prod stage

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

@@ -11,24 +11,31 @@
   },
   "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-select": "^2.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",
@@ -42,10 +49,11 @@
     "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": {
@@ -57,6 +65,7 @@
     "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/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/layout.tsx

@@ -7,6 +7,8 @@ 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"] });
 
@@ -30,13 +32,18 @@ export default function RootLayout({
           // enableSystem
           disableTransitionOnChange
         >
-          <div className="flex flex-col min-h-screen ">
+          <div className="flex min-h-screen flex-col">
             <NavBar />
-            <main className="flex-1 p-4 overflow-hidden">{children}</main>
+            <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

@@ -20,10 +20,15 @@ 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() {
@@ -38,6 +43,7 @@ export default function LoginPage() {
     defaultValues: {
       email: "",
       password: "",
+      agreeToTerms: false,
     },
   });
 
@@ -48,7 +54,7 @@ export default function LoginPage() {
 
   if (isUserLoading || isSupabaseLoading || user) {
     return (
-      <div className="flex justify-center items-center h-[80vh]">
+      <div className="flex h-[80vh] items-center justify-center">
         <FaSpinner className="mr-2 h-16 w-16 animate-spin" />
       </div>
     );
@@ -71,11 +77,6 @@ export default function LoginPage() {
         redirectTo:
           process.env.AUTH_CALLBACK_URL ??
           `http://localhost:3000/auth/callback`,
-        // Get Google provider_refresh_token
-        // queryParams: {
-        //   access_type: 'offline',
-        //   prompt: 'consent',
-        // },
       },
     });
 
@@ -111,8 +112,8 @@ export default function LoginPage() {
   };
 
   return (
-    <div className="flex items-center justify-center h-[80vh]">
-      <div className="w-full max-w-md p-8 rounded-lg shadow-md space-y-6">
+    <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"
@@ -176,16 +177,46 @@ export default function LoginPage() {
                 </FormItem>
               )}
             />
-            <div className="flex w-full space-x-4 mt-6 mb-6">
+            <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="w-1/2 flex justify-center"
+                className="flex w-1/2 justify-center"
                 type="submit"
                 disabled={isLoading}
               >
                 Log in
               </Button>
               <Button
-                className="w-1/2 flex justify-center"
+                className="flex w-1/2 justify-center"
                 variant="outline"
                 type="button"
                 onClick={form.handleSubmit(onSignup)}
@@ -195,10 +226,7 @@ export default function LoginPage() {
               </Button>
             </div>
           </form>
-          <p className="text-red-500 text-sm">{feedback}</p>
-          <p className="text-primary text-center text-sm">
-            By continuing you agree to everything
-          </p>
+          <p className="text-sm text-red-500">{feedback}</p>
         </Form>
       </div>
     </div>

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

@@ -2,12 +2,12 @@ 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/AgentDetailContent";
+import AgentDetailContent from "@/components/marketplace/AgentDetailContent";
 
 async function getAgentDetails(id: string): Promise<AgentDetailResponse> {
   const apiUrl =
     process.env.NEXT_PUBLIC_AGPT_MARKETPLACE_URL ||
-    "http://localhost:8001/api/v1/market";
+    "http://localhost:8015/api/v1/market";
   const api = new MarketplaceAPI(apiUrl);
   try {
     console.log(`Fetching agent details for id: ${id}`);

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

@@ -1,6 +1,7 @@
 "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, {
@@ -8,7 +9,13 @@ import MarketplaceAPI, {
   AgentListResponse,
   AgentWithRank,
 } from "@/lib/marketplace-api";
-import { ChevronLeft, ChevronRight, Search, Star } from "lucide-react";
+import {
+  ChevronLeft,
+  ChevronRight,
+  PlusCircle,
+  Search,
+  Star,
+} from "lucide-react";
 
 // Utility Functions
 function debounce<T extends (...args: any[]) => any>(
@@ -26,44 +33,61 @@ function debounce<T extends (...args: any[]) => any>(
 type Agent = AgentResponse | AgentWithRank;
 
 // Components
-const HeroSection: React.FC = () => (
-  <div className="relative bg-indigo-600 py-6">
-    <div className="absolute inset-0 z-0">
-      <img
-        className="w-full h-full object-cover opacity-20"
-        src="https://images.unsplash.com/photo-1562408590-e32931084e23?auto=format&fit=crop&w=2070&q=80"
-        alt="Marketplace background"
-      />
-      <div
-        className="absolute inset-0 bg-indigo-600 mix-blend-multiply"
-        aria-hidden="true"
-      ></div>
+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>
-    <div className="relative max-w-7xl mx-auto py-4 px-4 sm:px-6 lg:px-8">
-      <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 sm:text-base text-indigo-100">
-        Discover and share proven AI Agents to supercharge your business.
-      </p>
-    </div>
-  </div>
-);
+  );
+};
 
 const SearchInput: React.FC<{
   value: string;
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }> = ({ value, onChange }) => (
-  <div className="mb-8 relative">
+  <div className="relative mb-8">
     <Input
       placeholder="Search agents..."
       type="text"
-      className="w-full pl-10 pr-4 py-2 rounded-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500"
+      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 transform -translate-y-1/2 text-gray-400"
+      className="absolute left-3 top-1/2 -translate-y-1/2 transform text-gray-400"
       size={20}
     />
   </div>
@@ -81,24 +105,24 @@ const AgentCard: React.FC<{ agent: Agent; featured?: boolean }> = ({
 
   return (
     <div
-      className={`flex flex-col justify-between p-6 cursor-pointer hover:bg-gray-50 transition-colors duration-200 rounded-lg border ${featured ? "border-indigo-500 shadow-md" : "border-gray-200"}`}
+      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="flex items-center justify-between mb-2">
-          <h3 className="text-lg font-semibold text-gray-900 truncate">
+        <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="text-sm text-gray-500 line-clamp-2 mb-4">
+        <p className="mb-4 line-clamp-2 text-sm text-gray-500">
           {agent.description}
         </p>
-        <div className="text-xs text-gray-400 mb-2">
+        <div className="mb-2 text-xs text-gray-400">
           Categories: {agent.categories.join(", ")}
         </div>
       </div>
-      <div className="flex justify-between items-end">
+      <div className="flex items-end justify-between">
         <div className="text-xs text-gray-400">
           Updated {new Date(agent.updatedAt).toLocaleDateString()}
         </div>
@@ -119,8 +143,8 @@ const AgentGrid: React.FC<{
   featured?: boolean;
 }> = ({ agents, title, featured = false }) => (
   <div className="mb-12">
-    <h2 className="text-2xl font-bold text-gray-900 mb-4">{title}</h2>
-    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+    <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} />
       ))}
@@ -134,11 +158,11 @@ const Pagination: React.FC<{
   onPrevPage: () => void;
   onNextPage: () => void;
 }> = ({ page, totalPages, onPrevPage, onNextPage }) => (
-  <div className="flex justify-between items-center mt-8">
+  <div className="mt-8 flex items-center justify-between">
     <Button
       onClick={onPrevPage}
       disabled={page === 1}
-      className="flex items-center space-x-2 px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50"
+      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>
@@ -149,7 +173,7 @@ const Pagination: React.FC<{
     <Button
       onClick={onNextPage}
       disabled={page === totalPages}
-      className="flex items-center space-x-2 px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50"
+      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} />
@@ -161,7 +185,7 @@ const Pagination: React.FC<{
 const Marketplace: React.FC = () => {
   const apiUrl =
     process.env.NEXT_PUBLIC_AGPT_MARKETPLACE_URL ||
-    "http://localhost:8001/api/v1/market";
+    "http://localhost:8015/api/v1/market";
   const api = useMemo(() => new MarketplaceAPI(apiUrl), [apiUrl]);
 
   const [searchValue, setSearchValue] = useState("");
@@ -248,20 +272,20 @@ const Marketplace: React.FC = () => {
   };
 
   return (
-    <div className="bg-gray-50 min-h-screen">
+    <div className="min-h-screen bg-gray-50">
       <HeroSection />
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+      <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="text-center py-12">
-            <div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900"></div>
+          <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="text-center py-12">
+            <div className="py-12 text-center">
               <p className="text-gray-600">
                 No agents found matching your search criteria.
               </p>

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

@@ -1,5 +1,5 @@
 "use client";
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 
 import AutoGPTServerAPI, {
   GraphMeta,
@@ -22,61 +22,64 @@ const Monitor = () => {
   const [selectedFlow, setSelectedFlow] = useState<GraphMeta | null>(null);
   const [selectedRun, setSelectedRun] = useState<FlowRun | null>(null);
 
-  const api = new AutoGPTServerAPI();
+  const api = useMemo(() => new AutoGPTServerAPI(), []);
 
-  useEffect(() => fetchFlowsAndRuns(), []);
+  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);
-  }, []);
-
-  function fetchFlowsAndRuns() {
-    api.listGraphs().then((flows) => {
-      setFlows(flows);
-      flows.map((flow) => refreshFlowRuns(flow.id));
-    });
-  }
-
-  function refreshFlowRuns(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];
-          }),
-        );
-      }),
-    );
-  }
+  }, [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 md:grid-cols-5 lg:grid-cols-4 xl:grid-cols-10 gap-4">
+    <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}
@@ -90,10 +93,11 @@ const Monitor = () => {
       <FlowRunsList
         className={column2}
         flows={flows}
-        runs={(selectedFlow
-          ? flowRuns.filter((v) => v.graphID == selectedFlow.id)
-          : flowRuns
-        ).toSorted((a, b) => Number(a.startTime) - Number(b.startTime))}
+        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)}
       />

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

@@ -13,7 +13,7 @@ export default function PrivatePage() {
 
   if (isLoading) {
     return (
-      <div className="flex justify-center items-center h-[80vh]">
+      <div className="flex h-[80vh] items-center justify-center">
         <FaSpinner className="mr-2 h-16 w-16 animate-spin" />
       </div>
     );

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

@@ -3,7 +3,7 @@ import {
   ConnectionLineComponentProps,
   getBezierPath,
   Position,
-} from "reactflow";
+} from "@xyflow/react";
 
 const ConnectionLine: React.FC<ConnectionLineComponentProps> = ({
   fromPosition,

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

@@ -9,9 +9,12 @@ 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(
@@ -21,8 +24,8 @@ export async function NavBar() {
   const { user } = await getServerUser();
 
   return (
-    <header className="sticky top-0 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6 z-50">
-      <div className="flex items-center gap-4 flex-1">
+    <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
@@ -38,19 +41,19 @@ export async function NavBar() {
             <nav className="grid gap-6 text-lg font-medium">
               <Link
                 href="/"
-                className="text-muted-foreground hover:text-foreground flex flex-row gap-2 "
+                className="flex flex-row gap-2 text-muted-foreground hover:text-foreground"
               >
                 <IconSquareActivity /> Monitor
               </Link>
               <Link
                 href="/build"
-                className="text-muted-foreground hover:text-foreground flex flex-row gap-2"
+                className="flex flex-row gap-2 text-muted-foreground hover:text-foreground"
               >
                 <IconWorkFlow /> Build
               </Link>
               <Link
                 href="/marketplace"
-                className="text-muted-foreground hover:text-foreground flex flex-row gap-2"
+                className="flex flex-row gap-2 text-muted-foreground hover:text-foreground"
               >
                 <IconPackage2 /> Marketplace
               </Link>
@@ -60,25 +63,25 @@ export async function NavBar() {
         <nav className="hidden md:flex md:flex-row md:items-center md:gap-5 lg:gap-6">
           <Link
             href="/"
-            className="text-muted-foreground hover:text-foreground flex flex-row gap-2 items-center"
+            className="flex flex-row items-center gap-2 text-muted-foreground hover:text-foreground"
           >
             <IconSquareActivity /> Monitor
           </Link>
           <Link
             href="/build"
-            className="text-muted-foreground hover:text-foreground flex flex-row gap-2 items-center"
+            className="flex flex-row items-center gap-2 text-muted-foreground hover:text-foreground"
           >
             <IconWorkFlow /> Build
           </Link>
           <Link
             href="/marketplace"
-            className="text-muted-foreground hover:text-foreground flex flex-row gap-2 items-center"
+            className="flex flex-row items-center gap-2 text-muted-foreground hover:text-foreground"
           >
             <IconPackage2 /> Marketplace
           </Link>
         </nav>
       </div>
-      <div className="flex-1 flex justify-center relative">
+      <div className="relative flex flex-1 justify-center">
         <a
           className="pointer-events-auto flex place-items-center gap-2"
           href="https://news.agpt.co/"
@@ -95,11 +98,13 @@ export async function NavBar() {
           />
         </a>
       </div>
-      <div className="flex items-center gap-4 flex-1 justify-end">
+      <div className="flex flex-1 items-center justify-end gap-4">
+        {isAvailable && user && <CreditButton />}
+
         {isAvailable && !user && (
           <Link
             href="/login"
-            className="text-muted-foreground hover:text-foreground flex flex-row gap-2 items-center"
+            className="flex flex-row items-center gap-2 text-muted-foreground hover:text-foreground"
           >
             Log In
             <IconCircleUser />

autogpt_platform/autogpt_builder/src/components/NodeHandle.tsx

@@ -1,7 +1,7 @@
 import { BlockIOSubSchema } from "@/lib/autogpt-server-api/types";
 import { beautifyString, getTypeBgColor, getTypeTextColor } from "@/lib/utils";
 import { FC } from "react";
-import { Handle, Position } from "reactflow";
+import { Handle, Position } from "@xyflow/react";
 import SchemaTooltip from "./SchemaTooltip";
 
 type HandleProps = {
@@ -23,7 +23,7 @@ const NodeHandle: FC<HandleProps> = ({
     string: "text",
     number: "number",
     boolean: "true/false",
-    object: "complex",
+    object: "object",
     array: "list",
     null: "null",
   };
@@ -31,8 +31,8 @@ const NodeHandle: FC<HandleProps> = ({
   const typeClass = `text-sm ${getTypeTextColor(schema.type || "any")} ${side === "left" ? "text-left" : "text-right"}`;
 
   const label = (
-    <div className="flex flex-col flex-grow">
-      <span className="text-m text-gray-900 -mb-1 green">
+    <div className="flex flex-grow flex-col">
+      <span className="text-m green -mb-1 text-gray-900">
         {schema.title || beautifyString(keyName)}
         {isRequired ? "*" : ""}
       </span>
@@ -42,7 +42,7 @@ const NodeHandle: FC<HandleProps> = ({
 
   const dot = (
     <div
-      className={`w-4 h-4 m-1 border-2 bg-white ${isConnected ? getTypeBgColor(schema.type || "any") : "border-gray-300"} rounded-full transition-colors duration-100 group-hover:bg-gray-300`}
+      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`}
     />
   );
 
@@ -53,7 +53,7 @@ const NodeHandle: FC<HandleProps> = ({
           type="target"
           position={Position.Left}
           id={keyName}
-          className="group -ml-[26px] background-color: white; border: 2px solid black; width: 15px; height: 15px; border-radius: 50%; bottom: -7px; left: 20%;"
+          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}

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

@@ -22,14 +22,14 @@ const PasswordInput = forwardRef<HTMLInputElement, InputProps>(
           type="button"
           variant="ghost"
           size="sm"
-          className="absolute top-0 right-0 h-full px-3 py-2 hover:bg-transparent"
+          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="w-4 h-4" aria-hidden="true" />
+            <EyeIcon className="h-4 w-4" aria-hidden="true" />
           ) : (
-            <EyeOffIcon className="w-4 h-4" aria-hidden="true" />
+            <EyeOffIcon className="h-4 w-4" aria-hidden="true" />
           )}
           <span className="sr-only">
             {showPassword ? "Hide password" : "Show password"}

autogpt_platform/autogpt_builder/src/components/ProfileDropdown.tsx

@@ -14,21 +14,34 @@ 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="https://github.com/shadcn.png" alt="@shadcn" />
+            <AvatarImage
+              src={user?.user_metadata["avatar_url"]}
+              alt="User Avatar"
+            />
             <AvatarFallback>CN</AvatarFallback>
           </Avatar>
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end">
-        <DropdownMenuItem onClick={() => router.push("profile")}>
+        <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>

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

@@ -14,13 +14,17 @@ const SchemaTooltip: React.FC<{ description?: string }> = ({ description }) => {
     <TooltipProvider delayDuration={400}>
       <Tooltip>
         <TooltipTrigger asChild>
-          <Info className="p-1 rounded-full hover:bg-gray-300" size={24} />
+          <Info className="rounded-full p-1 hover:bg-gray-300" size={24} />
         </TooltipTrigger>
-        <TooltipContent className="max-w-xs tooltip-content">
+        <TooltipContent className="tooltip-content max-w-xs">
           <ReactMarkdown
             components={{
               a: ({ node, ...props }) => (
-                <a className="text-blue-400 underline" {...props} />
+                <a
+                  target="_blank"
+                  className="text-blue-400 underline"
+                  {...props}
+                />
               ),
             }}
           >

autogpt_platform/autogpt_builder/src/components/TallyPopup.tsx

@@ -41,8 +41,16 @@ const TallyPopupSimple = () => {
     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 p-3 transition-all duration-300 ease-in-out z-50">
+    <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"

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

@@ -21,8 +21,13 @@ import AutoGPTServerAPI, {
 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(),
@@ -165,7 +170,7 @@ export const AgentImportForm: React.FC<
             <FormItem>
               <FormLabel>Import as</FormLabel>
               <FormControl>
-                <div className="flex space-x-2 items-center">
+                <div className="flex items-center space-x-2">
                   <span
                     className={
                       field.value ? "text-gray-400 dark:text-gray-600" : ""

autogpt_platform/autogpt_builder/src/components/customedge.css

@@ -38,3 +38,7 @@
 .react-flow__edge-interaction {
   cursor: pointer;
 }
+
+.react-flow__edges > svg:has(> g.selected) {
+  z-index: 10 !important;
+}

autogpt_platform/autogpt_builder/src/components/customnode.css

@@ -1,6 +1,5 @@
 .custom-node {
   color: #000000;
-  width: 500px;
   box-sizing: border-box;
   transition: border-color 0.3s ease-in-out;
 }
@@ -26,7 +25,6 @@
   margin-bottom: 0px;
   padding: 5px;
   min-height: 44px;
-  width: 100%;
   height: 100%;
 }
 
@@ -101,16 +99,6 @@
   margin-top: 5px;
 }
 
-.node-output {
-  margin-top: 5px;
-  margin-bottom: 5px;
-  background: #fff;
-  border: 1px solid #000; /* Border for output section */
-  padding: 10px;
-  border-radius: 10px;
-  width: 100%;
-}
-
 .error-message {
   color: #d9534f;
   font-size: 13px;
@@ -136,7 +124,7 @@
 }
 
 .queued {
-  border-color: #25e6e6; /* Cyanic border for failed nodes */
+  border-color: #25e6e6; /* Cyan border for queued nodes */
 }
 
 .custom-switch {

autogpt_platform/autogpt_builder/src/components/edit/control/BlocksControl.tsx

@@ -0,0 +1,171 @@
+import React, { useState } from "react";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { Label } from "@/components/ui/label";
+import { Button } from "@/components/ui/button";
+import { ToyBrick } from "lucide-react";
+import { Input } from "@/components/ui/input";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { beautifyString } from "@/lib/utils";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Block } from "@/lib/autogpt-server-api";
+import { PlusIcon } from "@radix-ui/react-icons";
+import { IconToyBrick } from "@/components/ui/icons";
+import SchemaTooltip from "@/components/SchemaTooltip";
+import { getPrimaryCategoryColor } from "@/lib/utils";
+import { Badge } from "@/components/ui/badge";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+
+interface BlocksControlProps {
+  blocks: Block[];
+  addBlock: (id: string, name: string) => void;
+  pinBlocksPopover: boolean;
+}
+
+/**
+ * A React functional component that displays a control for managing blocks.
+ *
+ * @component
+ * @param {Object} BlocksControlProps - The properties for the BlocksControl component.
+ * @param {Block[]} BlocksControlProps.blocks - An array of blocks to be displayed and filtered.
+ * @param {(id: string, name: string) => void} BlocksControlProps.addBlock - A function to call when a block is added.
+ * @returns The rendered BlocksControl component.
+ */
+export const BlocksControl: React.FC<BlocksControlProps> = ({
+  blocks,
+  addBlock,
+  pinBlocksPopover,
+}) => {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
+
+  // Extract unique categories from blocks
+  const categories = Array.from(
+    new Set(
+      blocks.flatMap((block) => block.categories.map((cat) => cat.category)),
+    ),
+  );
+
+  const filteredBlocks = blocks.filter(
+    (block: Block) =>
+      (block.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        beautifyString(block.name)
+          .toLowerCase()
+          .includes(searchQuery.toLowerCase())) &&
+      (!selectedCategory ||
+        block.categories.some((cat) => cat.category === selectedCategory)),
+  );
+
+  return (
+    <Popover open={pinBlocksPopover ? true : undefined}>
+      <Tooltip delayDuration={500}>
+        <TooltipTrigger asChild>
+          <PopoverTrigger asChild>
+            <Button
+              variant="ghost"
+              size="icon"
+              data-id="blocks-control-popover-trigger"
+            >
+              <IconToyBrick />
+            </Button>
+          </PopoverTrigger>
+        </TooltipTrigger>
+        <TooltipContent side="right">Blocks</TooltipContent>
+      </Tooltip>
+      <PopoverContent
+        side="right"
+        sideOffset={22}
+        align="start"
+        className="w-[30rem] p-0"
+        data-id="blocks-control-popover-content"
+      >
+        <Card className="border-none shadow-md">
+          <CardHeader className="flex flex-col gap-x-8 gap-y-2 p-3 px-2">
+            <div className="items-center justify-between">
+              <Label
+                htmlFor="search-blocks"
+                className="whitespace-nowrap border-b-2 border-violet-500 text-base font-semibold text-black 2xl:text-xl"
+                data-id="blocks-control-label"
+              >
+                Blocks
+              </Label>
+            </div>
+            <Input
+              id="search-blocks"
+              type="text"
+              placeholder="Search blocks..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              data-id="blocks-control-search-input"
+            />
+            <div className="mt-2 flex flex-wrap gap-2">
+              {categories.map((category) => (
+                <Badge
+                  key={category}
+                  variant={
+                    selectedCategory === category ? "default" : "outline"
+                  }
+                  className={`cursor-pointer ${getPrimaryCategoryColor([{ category, description: "" }])}`}
+                  onClick={() =>
+                    setSelectedCategory(
+                      selectedCategory === category ? null : category,
+                    )
+                  }
+                >
+                  {beautifyString(category)}
+                </Badge>
+              ))}
+            </div>
+          </CardHeader>
+          <CardContent className="p-1">
+            <ScrollArea
+              className="h-[60vh]"
+              data-id="blocks-control-scroll-area"
+            >
+              {filteredBlocks.map((block) => (
+                <Card
+                  key={block.id}
+                  className={`m-2 ${getPrimaryCategoryColor(block.categories)}`}
+                  data-id={`block-card-${block.id}`}
+                >
+                  <div className="m-3 flex items-center justify-between">
+                    <div className="mr-2 min-w-0 flex-1">
+                      <span
+                        className="block truncate font-medium"
+                        data-id={`block-name-${block.id}`}
+                      >
+                        {beautifyString(block.name)}
+                      </span>
+                    </div>
+                    <SchemaTooltip description={block.description} />
+                    <div
+                      className="flex flex-shrink-0 items-center gap-1"
+                      data-id={`block-tooltip-${block.id}`}
+                    >
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        onClick={() => addBlock(block.id, block.name)}
+                        aria-label="Add block"
+                        data-id={`add-block-button-${block.id}`}
+                      >
+                        <PlusIcon />
+                      </Button>
+                    </div>
+                  </div>
+                </Card>
+              ))}
+            </ScrollArea>
+          </CardContent>
+        </Card>
+      </PopoverContent>
+    </Popover>
+  );
+};