Merge branch 'repo-restructure' into fix-path

.dockerignore

@@ -1,40 +0,0 @@
-# Ignore everything by default, selectively add things to context
-classic/run
-
-# AutoGPT
-!classic/original_autogpt/autogpt/
-!classic/original_autogpt/pyproject.toml
-!classic/original_autogpt/poetry.lock
-!classic/original_autogpt/README.md
-!classic/original_autogpt/tests/
-
-# Benchmark
-!classic/benchmark/agbenchmark/
-!classic/benchmark/pyproject.toml
-!classic/benchmark/poetry.lock
-!classic/benchmark/README.md
-
-# Forge
-!classic/forge/
-!classic/forge/pyproject.toml
-!classic/forge/poetry.lock
-!classic/forge/README.md
-
-# Frontend
-!classic/frontend/build/web/
-
-# Platform
-!autogpt_platform/
-
-# Explicitly re-ignore some folders
-.*
-**/__pycache__
-
-autogpt_platform/frontend/.next/
-autogpt_platform/frontend/node_modules
-autogpt_platform/frontend/.env.example
-autogpt_platform/frontend/.env.local
-autogpt_platform/backend/.env
-autogpt_platform/backend/.venv/
-
-autogpt_platform/market/.env

.github/PULL_REQUEST_TEMPLATE.md

@@ -21,16 +21,3 @@ Here is a list of our critical paths, if you need some inspiration on what and h
 - Upload agent to marketplace
 - Import an agent from marketplace and confirm it executes correctly
 - Edit an agent from monitor, and confirm it executes correctly
-
-### Configuration Changes 📝
-> [!NOTE] 
-Only for the new autogpt platform, currently in autogpt_platform/
-
-If you're making configuration or infrastructure changes, please remember to check you've updated the related infrastructure code in the autogpt_platform/infra folder.
-
-Examples of such changes might include: 
-
-- Changing ports
-- Adding new services that need to communicate with each other
-- Secrets or environment variable changes
-- New or infrastructure changes such as databases

.github/dependabot.yml

@@ -1,179 +0,0 @@
-version: 2
-updates:
-  # autogpt_libs (Poetry project)
-  - package-ecosystem: "pip"
-    directory: "autogpt_platform/autogpt_libs"
-    schedule:
-      interval: "weekly"
-    open-pull-requests-limit: 10
-    target-branch: "dev"
-    groups:
-      production-dependencies:
-        dependency-type: "production"
-        update-types:
-        - "minor"
-        - "patch"
-      development-dependencies:
-        dependency-type: "development"
-        update-types:
-        - "minor"
-        - "patch"
-
-  # backend (Poetry project)
-  - package-ecosystem: "pip"
-    directory: "autogpt_platform/backend"
-    schedule:
-      interval: "weekly"
-    open-pull-requests-limit: 10
-    target-branch: "dev"
-    groups:
-      production-dependencies:
-        dependency-type: "production"
-        update-types:
-        - "minor"
-        - "patch"
-      development-dependencies:
-        dependency-type: "development"
-        update-types:
-        - "minor"
-        - "patch"
-
-
-  # frontend (Next.js project)
-  - package-ecosystem: "npm"
-    directory: "autogpt_platform/frontend"
-    schedule:
-      interval: "weekly"
-    open-pull-requests-limit: 10
-    target-branch: "dev"
-    groups:
-      production-dependencies:
-        dependency-type: "production"
-        update-types:
-        - "minor"
-        - "patch"
-      development-dependencies:
-        dependency-type: "development"
-        update-types:
-        - "minor"
-        - "patch"
-
-
-  # infra (Terraform)
-  - package-ecosystem: "terraform"
-    directory: "autogpt_platform/infra"
-    schedule:
-      interval: "weekly"
-    open-pull-requests-limit: 5
-    target-branch: "dev"
-    groups:
-      production-dependencies:
-        dependency-type: "production"
-        update-types:
-        - "minor"
-        - "patch"
-      development-dependencies:
-        dependency-type: "development"
-        update-types:
-        - "minor"
-        - "patch"
-
-
-  # market (Poetry project)
-  - package-ecosystem: "pip"
-    directory: "autogpt_platform/market"
-    schedule:
-      interval: "weekly"
-    open-pull-requests-limit: 10
-    target-branch: "dev"
-    groups:
-      production-dependencies:
-        dependency-type: "production"
-        update-types:
-        - "minor"
-        - "patch"
-      development-dependencies:
-        dependency-type: "development"
-        update-types:
-        - "minor"
-        - "patch"
-
-
-  # GitHub Actions
-  - package-ecosystem: "github-actions"
-    directory: "/"
-    schedule:
-      interval: "weekly"
-    open-pull-requests-limit: 5
-    target-branch: "dev"
-    groups:
-      production-dependencies:
-        dependency-type: "production"
-        update-types:
-        - "minor"
-        - "patch"
-      development-dependencies:
-        dependency-type: "development"
-        update-types:
-        - "minor"
-        - "patch"
-
-
-  # Docker
-  - package-ecosystem: "docker"
-    directory: "autogpt_platform/"
-    schedule:
-      interval: "weekly"
-    open-pull-requests-limit: 5
-    target-branch: "dev"
-    groups:
-      production-dependencies:
-        dependency-type: "production"
-        update-types:
-        - "minor"
-        - "patch"
-      development-dependencies:
-        dependency-type: "development"
-        update-types:
-        - "minor"
-        - "patch"
-
-
-  # Submodules
-  - package-ecosystem: "gitsubmodule"
-    directory: "autogpt_platform/supabase"
-    schedule:
-      interval: "weekly"
-    open-pull-requests-limit: 1
-    target-branch: "dev"
-    groups:
-      production-dependencies:
-        dependency-type: "production"
-        update-types:
-        - "minor"
-        - "patch"
-      development-dependencies:
-        dependency-type: "development"
-        update-types:
-        - "minor"
-        - "patch"
-
-
-  # Docs
-  - package-ecosystem: 'pip'
-    directory: "docs/"
-    schedule:
-      interval: "weekly"
-    open-pull-requests-limit: 1
-    target-branch: "dev"
-    groups:
-      production-dependencies:
-        dependency-type: "production"
-        update-types:
-        - "minor"
-        - "patch"
-      development-dependencies:
-        dependency-type: "development"
-        update-types:
-        - "minor"
-        - "patch"

.github/labeler.yml

@@ -1,32 +1,27 @@
-Classic AutoGPT Agent:
+AutoGPT Agent:
 - changed-files:
   - any-glob-to-any-file: classic/original_autogpt/**
 
-Classic Benchmark:
-- changed-files:
-  - any-glob-to-any-file: classic/benchmark/**
-
-Classic Frontend:
-- changed-files:
-  - any-glob-to-any-file: classic/frontend/**
-
 Forge:
 - changed-files:
   - any-glob-to-any-file: classic/forge/**
 
+Benchmark:
+- changed-files:
+  - any-glob-to-any-file: classic/benchmark/**
+
+Frontend:
+- changed-files:
+  - any-glob-to-any-file: classic/frontend/**
+
 documentation:
 - changed-files:
   - any-glob-to-any-file: docs/**
 
-platform/frontend:
+Builder:
 - changed-files:
-  - any-glob-to-any-file: autogpt_platform/frontend/**
+  - any-glob-to-any-file: autogpt_platform/autogpt_builder/**
 
-platform/backend:
+Server:
 - changed-files:
-  - any-glob-to-any-file: autogpt_platform/backend/**
-  - all-globs-to-all-files: '!autogpt_platform/backend/backend/blocks/**'
-
-platform/blocks:
-- changed-files:
-  - any-glob-to-any-file: autogpt_platform/backend/backend/blocks/**
+  - any-glob-to-any-file: autogpt_platform/autogpt_server/**

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

@@ -2,12 +2,12 @@ name: Classic - AutoGPT CI
 
 on:
   push:
-    branches: [ master, dev, ci-test* ]
+    branches: [ master, development, ci-test* ]
     paths:
       - '.github/workflows/classic-autogpt-ci.yml'
       - 'classic/original_autogpt/**'
   pull_request:
-    branches: [ master, dev, release-* ]
+    branches: [ master, development, release-* ]
     paths:
       - '.github/workflows/classic-autogpt-ci.yml'
       - 'classic/original_autogpt/**'

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

@@ -8,7 +8,7 @@ on:
       - 'classic/original_autogpt/**'
       - 'classic/forge/**'
   pull_request:
-    branches: [ master, dev, release-* ]
+    branches: [ master, development, release-* ]
     paths:
       - '.github/workflows/classic-autogpt-docker-ci.yml'
       - 'classic/original_autogpt/**'

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

@@ -5,7 +5,7 @@ on:
   schedule:
     - cron: '0 8 * * *'
   push:
-    branches: [ master, dev, ci-test* ]
+    branches: [ master, development, ci-test* ]
     paths:
       - '.github/workflows/classic-autogpts-ci.yml'
       - 'classic/original_autogpt/**'
@@ -16,7 +16,7 @@ on:
       - 'classic/setup.py'
       - '!**/*.md'
   pull_request:
-    branches: [ master, dev, release-* ]
+    branches: [ master, development, release-* ]
     paths:
       - '.github/workflows/classic-autogpts-ci.yml'
       - 'classic/original_autogpt/**'

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

@@ -2,13 +2,13 @@ name: Classic - AGBenchmark CI
 
 on:
   push:
-    branches: [ master, dev, ci-test* ]
+    branches: [ master, development, ci-test* ]
     paths:
       - 'classic/benchmark/**'
       - '!classic/benchmark/reports/**'
       - .github/workflows/classic-benchmark-ci.yml
   pull_request:
-    branches: [ master, dev, release-* ]
+    branches: [ master, development, release-* ]
     paths:
       - 'classic/benchmark/**'
       - '!classic/benchmark/reports/**'

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

@@ -2,13 +2,13 @@ name: Classic - Forge CI
 
 on:
   push:
-    branches: [ master, dev, ci-test* ]
+    branches: [ master, development, ci-test* ]
     paths:
       - '.github/workflows/classic-forge-ci.yml'
       - 'classic/forge/**'
       - '!classic/forge/tests/vcr_cassettes'
   pull_request:
-    branches: [ master, dev, release-* ]
+    branches: [ master, development, release-* ]
     paths:
       - '.github/workflows/classic-forge-ci.yml'
       - 'classic/forge/**'

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

@@ -8,11 +8,11 @@ on:
       - 'ci-test*' # This will match any branch that starts with "ci-test"
     paths:
       - 'classic/frontend/**'
-      - '.github/workflows/classic-frontend-ci.yml'
+      - '.github/workflows/frontend-ci.yml'
   pull_request:
     paths:
       - 'classic/frontend/**'
-      - '.github/workflows/classic-frontend-ci.yml'
+      - '.github/workflows/frontend-ci.yml'
 
 jobs:
   build:
@@ -21,7 +21,7 @@ jobs:
       pull-requests: write
     runs-on: ubuntu-latest
     env:
-      BUILD_BRANCH: ${{ format('classic-frontend-build/{0}', github.ref_name) }}
+      BUILD_BRANCH: ${{ format('frontend-build/{0}', github.ref_name) }}
 
     steps:
     - name: Checkout Repo
@@ -49,7 +49,7 @@ jobs:
 
     - name: Create PR ${{ env.BUILD_BRANCH }} -> ${{ github.ref_name }}
       if: github.event_name == 'push'
-      uses: peter-evans/create-pull-request@v7
+      uses: peter-evans/create-pull-request@v6
       with:
         add-paths: classic/frontend/build/web
         base: ${{ github.ref_name }}

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

@@ -2,18 +2,18 @@ name: Classic - Python checks
 
 on:
   push:
-    branches: [ master, dev, ci-test* ]
+    branches: [ master, development, ci-test* ]
     paths:
-      - '.github/workflows/classic-python-checks-ci.yml'
+      - '.github/workflows/lint-ci.yml'
       - 'classic/original_autogpt/**'
       - 'classic/forge/**'
       - 'classic/benchmark/**'
       - '**.py'
       - '!classic/forge/tests/vcr_cassettes'
   pull_request:
-    branches: [ master, dev, release-* ]
+    branches: [ master, development, release-* ]
     paths:
-      - '.github/workflows/classic-python-checks-ci.yml'
+      - '.github/workflows/lint-ci.yml'
       - 'classic/original_autogpt/**'
       - 'classic/forge/**'
       - 'classic/benchmark/**'
@@ -21,7 +21,7 @@ on:
       - '!classic/forge/tests/vcr_cassettes'
 
 concurrency:
-  group: ${{ format('classic-python-checks-ci-{0}', github.head_ref && format('{0}-{1}', github.event_name, github.event.pull_request.number) || github.sha) }}
+  group: ${{ format('lint-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:

.github/workflows/codeql.yml

@@ -1,97 +0,0 @@
-# For most projects, this workflow file will not need changing; you simply need
-# to commit it to your repository.
-#
-# You may wish to alter this file to override the set of languages analyzed,
-# or to provide custom queries or build logic.
-#
-# ******** NOTE ********
-# We have attempted to detect the languages in your repository. Please check
-# the `language` matrix defined below to confirm you have the correct set of
-# supported CodeQL languages.
-#
-name: "CodeQL"
-
-on:
-  push:
-    branches: [ "master", "release-*" ]
-  pull_request:
-    branches: [ "master", "release-*" ]
-  schedule:
-    - cron: '15 4 * * 0'
-
-jobs:
-  analyze:
-    name: Analyze (${{ matrix.language }})
-    # Runner size impacts CodeQL analysis time. To learn more, please see:
-    #   - https://gh.io/recommended-hardware-resources-for-running-codeql
-    #   - https://gh.io/supported-runners-and-hardware-resources
-    #   - https://gh.io/using-larger-runners (GitHub.com only)
-    # Consider using larger runners or machines with greater resources for possible analysis time improvements.
-    runs-on: ${{ (matrix.language == 'swift' && 'macos-latest') || 'ubuntu-latest' }}
-    permissions:
-      # required for all workflows
-      security-events: write
-
-      # required to fetch internal or private CodeQL packs
-      packages: read
-
-      # only required for workflows in private repositories
-      actions: read
-      contents: read
-
-    strategy:
-      fail-fast: false
-      matrix:
-        include:
-        - language: typescript
-          build-mode: none
-        - language: python
-          build-mode: none
-        # CodeQL supports the following values keywords for 'language': 'c-cpp', 'csharp', 'go', 'java-kotlin', 'javascript-typescript', 'python', 'ruby', 'swift'
-        # Use `c-cpp` to analyze code written in C, C++ or both
-        # Use 'java-kotlin' to analyze code written in Java, Kotlin or both
-        # Use 'javascript-typescript' to analyze code written in JavaScript, TypeScript or both
-        # To learn more about changing the languages that are analyzed or customizing the build mode for your analysis,
-        # see https://docs.github.com/en/code-security/code-scanning/creating-an-advanced-setup-for-code-scanning/customizing-your-advanced-setup-for-code-scanning.
-        # If you are analyzing a compiled language, you can modify the 'build-mode' for that language to customize how
-        # your codebase is analyzed, see https://docs.github.com/en/code-security/code-scanning/creating-an-advanced-setup-for-code-scanning/codeql-code-scanning-for-compiled-languages
-    steps:
-    - name: Checkout repository
-      uses: actions/checkout@v4
-
-    # Initializes the CodeQL tools for scanning.
-    - name: Initialize CodeQL
-      uses: github/codeql-action/init@v3
-      with:
-        languages: ${{ matrix.language }}
-        build-mode: ${{ matrix.build-mode }}
-        # If you wish to specify custom queries, you can do so here or in a config file.
-        # By default, queries listed here will override any specified in a config file.
-        # Prefix the list here with "+" to use these queries and those in the config file.
-        config: |
-          paths-ignore:
-            - classic/frontend/build/**
-
-        # For more details on CodeQL's query packs, refer to: https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
-        # queries: security-extended,security-and-quality
-
-    # If the analyze step fails for one of the languages you are analyzing with
-    # "We were unable to automatically build your code", modify the matrix above
-    # to set the build mode to "manual" for that language. Then modify this step
-    # to build your code.
-    # ℹ️ Command-line programs to run using the OS shell.
-    # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
-    - if: matrix.build-mode == 'manual'
-      shell: bash
-      run: |
-        echo 'If you are using a "manual" build mode for one or more of the' \
-          'languages you are analyzing, replace this with the commands to build' \
-          'your code, for example:'
-        echo '  make bootstrap'
-        echo '  make release'
-        exit 1
-
-    - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v3
-      with:
-        category: "/language:${{matrix.language}}"

.github/workflows/platform-autgpt-deploy-prod.yml

@@ -1,182 +0,0 @@
-name: AutoGPT Platform - Build, Push, and Deploy Prod Environment
-
-on:
-  release:
-    types: [published]
-
-permissions:
-  contents: 'read'
-  id-token: 'write'
-
-env:
-  PROJECT_ID: ${{ secrets.GCP_PROJECT_ID }}
-  GKE_CLUSTER: prod-gke-cluster
-  GKE_ZONE: us-central1-a
-  NAMESPACE: prod-agpt
-
-jobs:
-  migrate:
-    environment: production
-    name: Run migrations for AutoGPT Platform
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-
-      - name: Set up Python
-        uses: actions/setup-python@v5
-        with:
-          python-version: '3.11'
-
-      - name: Install Python dependencies
-        run: |
-          python -m pip install --upgrade pip
-          pip install prisma
-
-      - name: Run Backend Migrations
-        working-directory: ./autogpt_platform/backend
-        run: |
-          python -m prisma migrate deploy
-        env:
-          DATABASE_URL: ${{ secrets.BACKEND_DATABASE_URL }}
-
-      - name: Run Market Migrations
-        working-directory: ./autogpt_platform/market
-        run: |
-          python -m prisma migrate deploy
-        env:
-          DATABASE_URL: ${{ secrets.MARKET_DATABASE_URL }}
-          
-  build-push-deploy:
-    environment: production
-    name: Build, Push, and Deploy
-    runs-on: ubuntu-latest
-
-    steps:
-    - name: Checkout code
-      uses: actions/checkout@v4
-      with:
-        fetch-depth: 0
-
-    - id: 'auth'
-      uses: 'google-github-actions/auth@v2'
-      with:
-        workload_identity_provider: 'projects/1021527134101/locations/global/workloadIdentityPools/prod-pool/providers/github'
-        service_account: 'prod-github-actions-sa@agpt-prod.iam.gserviceaccount.com'
-        token_format: 'access_token'
-        create_credentials_file: true
-
-    - name: 'Set up Cloud SDK'
-      uses: 'google-github-actions/setup-gcloud@v2'
-
-    - name: 'Configure Docker'
-      run: |
-        gcloud auth configure-docker us-east1-docker.pkg.dev
-
-    - name: Set up Docker Buildx
-      uses: docker/setup-buildx-action@v3
-
-    - name: Cache Docker layers
-      uses: actions/cache@v4
-      with:
-        path: /tmp/.buildx-cache
-        key: ${{ runner.os }}-buildx-${{ github.sha }}
-        restore-keys: |
-          ${{ runner.os }}-buildx-
-
-    - name: Check for changes
-      id: check_changes
-      run: |
-        git fetch origin master
-        BACKEND_CHANGED=$(git diff --name-only origin/master HEAD | grep "^autogpt_platform/backend/" && echo "true" || echo "false")
-        FRONTEND_CHANGED=$(git diff --name-only origin/master HEAD | grep "^autogpt_platform/frontend/" && echo "true" || echo "false")
-        MARKET_CHANGED=$(git diff --name-only origin/master HEAD | grep "^autogpt_platform/market/" && echo "true" || echo "false")
-        echo "backend_changed=$BACKEND_CHANGED" >> $GITHUB_OUTPUT
-        echo "frontend_changed=$FRONTEND_CHANGED" >> $GITHUB_OUTPUT
-        echo "market_changed=$MARKET_CHANGED" >> $GITHUB_OUTPUT
-
-    - name: Get GKE credentials
-      uses: 'google-github-actions/get-gke-credentials@v2'
-      with:
-        cluster_name: ${{ env.GKE_CLUSTER }}
-        location: ${{ env.GKE_ZONE }}
-
-    - name: Build and Push Backend
-      if: steps.check_changes.outputs.backend_changed == 'true'
-      uses: docker/build-push-action@v2
-      with:
-        context: .
-        file: ./autogpt_platform/backend/Dockerfile
-        push: true
-        tags: us-east1-docker.pkg.dev/agpt-prod/agpt-backend-prod/agpt-backend-prod:${{ github.sha }}
-        cache-from: type=local,src=/tmp/.buildx-cache
-        cache-to: type=local,dest=/tmp/.buildx-cache-new,mode=max
-
-    - name: Build and Push Frontend
-      if: steps.check_changes.outputs.frontend_changed == 'true'
-      uses: docker/build-push-action@v2
-      with:
-        context: .
-        file: ./autogpt_platform/frontend/Dockerfile
-        push: true
-        tags: us-east1-docker.pkg.dev/agpt-prod/agpt-frontend-prod/agpt-frontend-prod:${{ github.sha }}
-        cache-from: type=local,src=/tmp/.buildx-cache
-        cache-to: type=local,dest=/tmp/.buildx-cache-new,mode=max
-
-    - name: Build and Push Market
-      if: steps.check_changes.outputs.market_changed == 'true'
-      uses: docker/build-push-action@v2
-      with:
-        context: .
-        file: ./autogpt_platform/market/Dockerfile
-        push: true
-        tags: us-east1-docker.pkg.dev/agpt-prod/agpt-market-prod/agpt-market-prod:${{ github.sha }}
-        cache-from: type=local,src=/tmp/.buildx-cache
-        cache-to: type=local,dest=/tmp/.buildx-cache-new,mode=max
-
-    - name: Move cache
-      run: |
-        rm -rf /tmp/.buildx-cache
-        mv /tmp/.buildx-cache-new /tmp/.buildx-cache
-
-    - name: Set up Helm
-      uses: azure/setup-helm@v4
-      with:
-        version: v3.4.0
-
-    - name: Deploy Backend
-      if: steps.check_changes.outputs.backend_changed == 'true'
-      run: |
-        helm upgrade autogpt-server ./autogpt-server \
-          --namespace ${{ env.NAMESPACE }} \
-          -f autogpt-server/values.yaml \
-          -f autogpt-server/values.prod.yaml \
-          --set image.tag=${{ github.sha }}
-
-    - name: Deploy Websocket
-      if: steps.check_changes.outputs.backend_changed == 'true'
-      run: |
-        helm upgrade autogpt-websocket-server ./autogpt-websocket-server \
-          --namespace ${{ env.NAMESPACE }} \
-          -f autogpt-websocket-server/values.yaml \
-          -f autogpt-websocket-server/values.prod.yaml \
-          --set image.tag=${{ github.sha }}
-
-    - name: Deploy Market
-      if: steps.check_changes.outputs.market_changed == 'true'
-      run: |
-        helm upgrade autogpt-market ./autogpt-market \
-          --namespace ${{ env.NAMESPACE }} \
-          -f autogpt-market/values.yaml \
-          -f autogpt-market/values.prod.yaml \
-          --set image.tag=${{ github.sha }}
-
-    - name: Deploy Frontend
-      if: steps.check_changes.outputs.frontend_changed == 'true'
-      run: |
-        helm upgrade autogpt-builder ./autogpt-builder \
-          --namespace ${{ env.NAMESPACE }} \
-          -f autogpt-builder/values.yaml \
-          -f autogpt-builder/values.prod.yaml \
-          --set image.tag=${{ github.sha }}

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

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

.github/workflows/platform-autogpt-deploy.yaml

@@ -1,186 +0,0 @@
-name: AutoGPT Platform - Build, Push, and Deploy Dev Environment
-
-on:
-  push:
-    branches: [ dev ]
-    paths:
-      - 'autogpt_platform/backend/**'
-      - 'autogpt_platform/frontend/**'
-      - 'autogpt_platform/market/**'
-
-permissions:
-  contents: 'read'
-  id-token: 'write'
-
-env:
-  PROJECT_ID: ${{ secrets.GCP_PROJECT_ID }}
-  GKE_CLUSTER: dev-gke-cluster
-  GKE_ZONE: us-central1-a
-  NAMESPACE: dev-agpt
-
-jobs:
-  migrate:
-    environment: develop
-    name: Run migrations for AutoGPT Platform
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-
-      - name: Set up Python
-        uses: actions/setup-python@v5
-        with:
-          python-version: '3.11'
-
-      - name: Install Python dependencies
-        run: |
-          python -m pip install --upgrade pip
-          pip install prisma
-
-      - name: Run Backend Migrations
-        working-directory: ./autogpt_platform/backend
-        run: |
-          python -m prisma migrate deploy
-        env:
-          DATABASE_URL: ${{ secrets.BACKEND_DATABASE_URL }}
-
-      - name: Run Market Migrations
-        working-directory: ./autogpt_platform/market
-        run: |
-          python -m prisma migrate deploy
-        env:
-          DATABASE_URL: ${{ secrets.MARKET_DATABASE_URL }}
-
-  build-push-deploy:
-    name: Build, Push, and Deploy
-    needs: migrate
-    runs-on: ubuntu-latest
-
-    steps:
-    - name: Checkout code
-      uses: actions/checkout@v4
-      with:
-        fetch-depth: 0
-
-    - id: 'auth'
-      uses: 'google-github-actions/auth@v2'
-      with:
-        workload_identity_provider: 'projects/638488734936/locations/global/workloadIdentityPools/dev-pool/providers/github'
-        service_account: 'dev-github-actions-sa@agpt-dev.iam.gserviceaccount.com'
-        token_format: 'access_token'
-        create_credentials_file: true
-
-    - name: 'Set up Cloud SDK'
-      uses: 'google-github-actions/setup-gcloud@v2'
-
-    - name: 'Configure Docker'
-      run: |
-        gcloud auth configure-docker us-east1-docker.pkg.dev
-
-    - name: Set up Docker Buildx
-      uses: docker/setup-buildx-action@v3
-
-    - name: Cache Docker layers
-      uses: actions/cache@v4
-      with:
-        path: /tmp/.buildx-cache
-        key: ${{ runner.os }}-buildx-${{ github.sha }}
-        restore-keys: |
-          ${{ runner.os }}-buildx-
-
-    - name: Check for changes
-      id: check_changes
-      run: |
-        git fetch origin dev
-        BACKEND_CHANGED=$(git diff --name-only origin/dev HEAD | grep "^autogpt_platform/backend/" && echo "true" || echo "false")
-        FRONTEND_CHANGED=$(git diff --name-only origin/dev HEAD | grep "^autogpt_platform/frontend/" && echo "true" || echo "false")
-        MARKET_CHANGED=$(git diff --name-only origin/dev HEAD | grep "^autogpt_platform/market/" && echo "true" || echo "false")
-        echo "backend_changed=$BACKEND_CHANGED" >> $GITHUB_OUTPUT
-        echo "frontend_changed=$FRONTEND_CHANGED" >> $GITHUB_OUTPUT
-        echo "market_changed=$MARKET_CHANGED" >> $GITHUB_OUTPUT
-
-    - name: Get GKE credentials
-      uses: 'google-github-actions/get-gke-credentials@v2'
-      with:
-        cluster_name: ${{ env.GKE_CLUSTER }}
-        location: ${{ env.GKE_ZONE }}
-
-    - name: Build and Push Backend
-      if: steps.check_changes.outputs.backend_changed == 'true'
-      uses: docker/build-push-action@v2
-      with:
-        context: .
-        file: ./autogpt_platform/backend/Dockerfile
-        push: true
-        tags: us-east1-docker.pkg.dev/agpt-dev/agpt-backend-dev/agpt-backend-dev:${{ github.sha }}
-        cache-from: type=local,src=/tmp/.buildx-cache
-        cache-to: type=local,dest=/tmp/.buildx-cache-new,mode=max
-
-    - name: Build and Push Frontend
-      if: steps.check_changes.outputs.frontend_changed == 'true'
-      uses: docker/build-push-action@v2
-      with:
-        context: .
-        file: ./autogpt_platform/frontend/Dockerfile
-        push: true
-        tags: us-east1-docker.pkg.dev/agpt-dev/agpt-frontend-dev/agpt-frontend-dev:${{ github.sha }}
-        cache-from: type=local,src=/tmp/.buildx-cache
-        cache-to: type=local,dest=/tmp/.buildx-cache-new,mode=max
-
-    - name: Build and Push Market
-      if: steps.check_changes.outputs.market_changed == 'true'
-      uses: docker/build-push-action@v2
-      with:
-        context: .
-        file: ./autogpt_platform/market/Dockerfile
-        push: true
-        tags: us-east1-docker.pkg.dev/agpt-dev/agpt-market-dev/agpt-market-dev:${{ github.sha }}
-        cache-from: type=local,src=/tmp/.buildx-cache
-        cache-to: type=local,dest=/tmp/.buildx-cache-new,mode=max
-
-    - name: Move cache
-      run: |
-        rm -rf /tmp/.buildx-cache
-        mv /tmp/.buildx-cache-new /tmp/.buildx-cache
-
-    - name: Set up Helm
-      uses: azure/setup-helm@v4
-      with:
-        version: v3.4.0
-
-    - name: Deploy Backend
-      if: steps.check_changes.outputs.backend_changed == 'true'
-      run: |
-        helm upgrade autogpt-server ./autogpt-server \
-          --namespace ${{ env.NAMESPACE }} \
-          -f autogpt-server/values.yaml \
-          -f autogpt-server/values.dev.yaml \
-          --set image.tag=${{ github.sha }}
-
-    - name: Deploy Websocket
-      if: steps.check_changes.outputs.backend_changed == 'true'
-      run: |
-        helm upgrade autogpt-websocket-server ./autogpt-websocket-server \
-          --namespace ${{ env.NAMESPACE }} \
-          -f autogpt-websocket-server/values.yaml \
-          -f autogpt-websocket-server/values.dev.yaml \
-          --set image.tag=${{ github.sha }}
-
-    - name: Deploy Market
-      if: steps.check_changes.outputs.market_changed == 'true'
-      run: |
-        helm upgrade autogpt-market ./autogpt-market \
-          --namespace ${{ env.NAMESPACE }} \
-          -f autogpt-market/values.yaml \
-          -f autogpt-market/values.dev.yaml \
-          --set image.tag=${{ github.sha }}
-
-    - name: Deploy Frontend
-      if: steps.check_changes.outputs.frontend_changed == 'true'
-      run: |
-        helm upgrade autogpt-builder ./autogpt-builder \
-          --namespace ${{ env.NAMESPACE }} \
-          -f autogpt-builder/values.yaml \
-          -f autogpt-builder/values.dev.yaml \
-          --set image.tag=${{ github.sha }}

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

@@ -1,14 +1,14 @@
-name: AutoGPT Platform - Infra
+name: Platform - AutoGPT Builder Infra
 
 on:
   push:
-    branches: [ master, dev ]
+    branches: [ master ]
     paths:
-      - '.github/workflows/platform-autogpt-infra-ci.yml'
+      - '.github/workflows/autogpt-infra-ci.yml'
       - 'autogpt_platform/infra/**'
   pull_request:
     paths:
-      - '.github/workflows/platform-autogpt-infra-ci.yml'
+      - '.github/workflows/autogpt-infra-ci.yml'
       - 'autogpt_platform/infra/**'
 
 defaults:
@@ -22,7 +22,7 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v4
+        uses: actions/checkout@v2
         with:
           fetch-depth: 0
 
@@ -36,12 +36,12 @@ jobs:
             tflint_changed_only: false
 
       - name: Set up Helm
-        uses: azure/setup-helm@v4
+        uses: azure/setup-helm@v4.2.0
         with:
           version: v3.14.4
 
       - name: Set up chart-testing
-        uses: helm/chart-testing-action@v2.6.1
+        uses: helm/chart-testing-action@v2.6.0
 
       - name: Run chart-testing (list-changed)
         id: list-changed
@@ -53,4 +53,4 @@ jobs:
 
       - name: Run chart-testing (lint)
         if: steps.list-changed.outputs.changed == 'true'
-        run: ct lint --target-branch ${{ github.event.repository.default_branch }}
+        run: ct lint --target-branch ${{ github.event.repository.default_branch }}

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

@@ -0,0 +1,155 @@
+name: Platform - AutoGPT Server CI
+
+on:
+  push:
+    branches: [master, development, ci-test*]
+    paths:
+      - ".github/workflows/autogpt-server-ci.yml"
+      - "autogpt_platform/autogpt_server/**"
+  pull_request:
+    branches: [master, development, release-*]
+    paths:
+      - ".github/workflows/autogpt-server-ci.yml"
+      - "autogpt_platform/autogpt_server/**"
+
+concurrency:
+  group: ${{ format('autogpt-server-ci-{0}', github.head_ref && format('{0}-{1}', github.event_name, github.event.pull_request.number) || github.sha) }}
+  cancel-in-progress: ${{ startsWith(github.event_name, 'pull_request') }}
+
+defaults:
+  run:
+    shell: bash
+    working-directory: autogpt_platform/autogpt_server
+
+jobs:
+  test:
+    permissions:
+      contents: read
+    timeout-minutes: 30
+    strategy:
+      fail-fast: false
+      matrix:
+        python-version: ["3.10"]
+        platform-os: [ubuntu, macos, macos-arm64, windows]
+    runs-on: ${{ matrix.platform-os != 'macos-arm64' && format('{0}-latest', matrix.platform-os) || 'macos-14' }}
+
+    steps:
+      - name: Setup PostgreSQL
+        uses: ikalnytskyi/action-setup-postgres@v6
+        with:
+          username: ${{ secrets.DB_USER || 'postgres' }}
+          password: ${{ secrets.DB_PASS || 'postgres' }}
+          database: postgres
+          port: 5432
+        id: postgres
+
+      # Quite slow on macOS (2~4 minutes to set up Docker)
+      # - name: Set up Docker (macOS)
+      #   if: runner.os == 'macOS'
+      #   uses: crazy-max/ghaction-setup-docker@v3
+
+      - name: Start MinIO service (Linux)
+        if: runner.os == 'Linux'
+        working-directory: "."
+        run: |
+          docker pull minio/minio:edge-cicd
+          docker run -d -p 9000:9000 minio/minio:edge-cicd
+
+      - name: Start MinIO service (macOS)
+        if: runner.os == 'macOS'
+        working-directory: ${{ runner.temp }}
+        run: |
+          brew install minio/stable/minio
+          mkdir data
+          minio server ./data &
+
+      # No MinIO on Windows:
+      # - Windows doesn't support running Linux Docker containers
+      # - It doesn't seem possible to start background processes on Windows. They are
+      #   killed after the step returns.
+      #   See: https://github.com/actions/runner/issues/598#issuecomment-2011890429
+
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+          submodules: true
+
+      - name: Set up Python ${{ matrix.python-version }}
+        uses: actions/setup-python@v5
+        with:
+          python-version: ${{ matrix.python-version }}
+
+      - id: get_date
+        name: Get date
+        run: echo "date=$(date +'%Y-%m-%d')" >> $GITHUB_OUTPUT
+
+      - name: Set up Python dependency cache
+        # On Windows, unpacking cached dependencies takes longer than just installing them
+        if: runner.os != 'Windows'
+        uses: actions/cache@v4
+        with:
+          path: ${{ runner.os == 'macOS' && '~/Library/Caches/pypoetry' || '~/.cache/pypoetry' }}
+          key: poetry-${{ runner.os }}-${{ hashFiles('autogpt_platform/autogpt_server/poetry.lock') }}
+
+      - name: Install Poetry (Unix)
+        if: runner.os != 'Windows'
+        run: |
+          curl -sSL https://install.python-poetry.org | python3 -
+
+          if [ "${{ runner.os }}" = "macOS" ]; then
+            PATH="$HOME/.local/bin:$PATH"
+            echo "$HOME/.local/bin" >> $GITHUB_PATH
+          fi
+
+      - name: Install Poetry (Windows)
+        if: runner.os == 'Windows'
+        shell: pwsh
+        run: |
+          (Invoke-WebRequest -Uri https://install.python-poetry.org -UseBasicParsing).Content | python -
+
+          $env:PATH += ";$env:APPDATA\Python\Scripts"
+          echo "$env:APPDATA\Python\Scripts" >> $env:GITHUB_PATH
+
+      - name: Install Python dependencies
+        run: poetry install
+
+      - name: Generate Prisma Client
+        run: poetry run prisma generate
+
+      - name: Run Database Migrations
+        run: poetry run prisma migrate dev --name updates
+        env:
+          CONNECTION_STR: ${{ steps.postgres.outputs.connection-uri }}
+
+      - id: lint
+        name: Run Linter
+        run: poetry run lint
+
+      - name: Run pytest with coverage
+        run: |
+          if [[ "${{ runner.debug }}" == "1" ]]; then
+            poetry run pytest -vv -o log_cli=true -o log_cli_level=DEBUG test
+          else
+            poetry run pytest -vv test
+          fi
+        if: success() || (failure() && steps.lint.outcome == 'failure')
+        env:
+          LOG_LEVEL: ${{ runner.debug && 'DEBUG' || 'INFO' }}
+    env:
+      CI: true
+      PLAIN_OUTPUT: True
+      OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
+      DB_USER: ${{ secrets.DB_USER || 'postgres' }}
+      DB_PASS: ${{ secrets.DB_PASS || 'postgres' }}
+      DB_NAME: postgres
+      DB_PORT: 5432
+      RUN_ENV: local
+      PORT: 8080
+      DATABASE_URL: postgresql://${{ secrets.DB_USER || 'postgres' }}:${{ secrets.DB_PASS || 'postgres' }}@localhost:5432/${{ secrets.DB_NAME || 'postgres'}}
+
+      # - name: Upload coverage reports to Codecov
+      #   uses: codecov/codecov-action@v4
+      #   with:
+      #     token: ${{ secrets.CODECOV_TOKEN }}
+      #     flags: autogpt-server,${{ runner.os }}

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

@@ -1,133 +0,0 @@
-name: AutoGPT Platform - Backend CI
-
-on:
-  push:
-    branches: [master, dev, ci-test*]
-    paths:
-      - ".github/workflows/platform-backend-ci.yml"
-      - "autogpt_platform/backend/**"
-  pull_request:
-    branches: [master, dev, release-*]
-    paths:
-      - ".github/workflows/platform-backend-ci.yml"
-      - "autogpt_platform/backend/**"
-
-concurrency:
-  group: ${{ format('backend-ci-{0}', github.head_ref && format('{0}-{1}', github.event_name, github.event.pull_request.number) || github.sha) }}
-  cancel-in-progress: ${{ startsWith(github.event_name, 'pull_request') }}
-
-defaults:
-  run:
-    shell: bash
-    working-directory: autogpt_platform/backend
-
-jobs:
-  test:
-    permissions:
-      contents: read
-    timeout-minutes: 30
-    strategy:
-      fail-fast: false
-      matrix:
-        python-version: ["3.10"]
-    runs-on: ubuntu-latest
-
-    services:
-      redis:
-        image: bitnami/redis:6.2
-        env:
-          REDIS_PASSWORD: testpassword
-        ports:
-          - 6379:6379
-
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-          submodules: true
-
-      - name: Set up Python ${{ matrix.python-version }}
-        uses: actions/setup-python@v5
-        with:
-          python-version: ${{ matrix.python-version }}
-
-      - name: Setup Supabase
-        uses: supabase/setup-cli@v1
-        with:
-          version: latest
-
-      - id: get_date
-        name: Get date
-        run: echo "date=$(date +'%Y-%m-%d')" >> $GITHUB_OUTPUT
-
-      - name: Set up Python dependency cache
-        uses: actions/cache@v4
-        with:
-          path: ~/.cache/pypoetry
-          key: poetry-${{ runner.os }}-${{ hashFiles('autogpt_platform/backend/poetry.lock') }}
-
-      - name: Install Poetry (Unix)
-        run: |
-          curl -sSL https://install.python-poetry.org | python3 -
-
-          if [ "${{ runner.os }}" = "macOS" ]; then
-            PATH="$HOME/.local/bin:$PATH"
-            echo "$HOME/.local/bin" >> $GITHUB_PATH
-          fi
-
-      - name: Install Python dependencies
-        run: poetry install
-
-      - name: Generate Prisma Client
-        run: poetry run prisma generate
-
-      - id: supabase
-        name: Start Supabase
-        working-directory: .
-        run: |
-          supabase init
-          supabase start --exclude postgres-meta,realtime,storage-api,imgproxy,inbucket,studio,edge-runtime,logflare,vector,supavisor
-          supabase status -o env | sed 's/="/=/; s/"$//' >> $GITHUB_OUTPUT
-        # outputs:
-        # DB_URL, API_URL, GRAPHQL_URL, ANON_KEY, SERVICE_ROLE_KEY, JWT_SECRET
-
-      - name: Run Database Migrations
-        run: poetry run prisma migrate dev --name updates
-        env:
-          DATABASE_URL: ${{ steps.supabase.outputs.DB_URL }}
-
-      - id: lint
-        name: Run Linter
-        run: poetry run lint
-
-      - name: Run pytest with coverage
-        run: |
-          if [[ "${{ runner.debug }}" == "1" ]]; then
-            poetry run pytest -s -vv -o log_cli=true -o log_cli_level=DEBUG test
-          else
-            poetry run pytest -s -vv test
-          fi
-        if: success() || (failure() && steps.lint.outcome == 'failure')
-        env:
-          LOG_LEVEL: ${{ runner.debug && 'DEBUG' || 'INFO' }}
-          DATABASE_URL: ${{ steps.supabase.outputs.DB_URL }}
-          SUPABASE_URL: ${{ steps.supabase.outputs.API_URL }}
-          SUPABASE_SERVICE_ROLE_KEY: ${{ steps.supabase.outputs.SERVICE_ROLE_KEY }}
-          SUPABASE_JWT_SECRET: ${{ steps.supabase.outputs.JWT_SECRET }}
-          REDIS_HOST: 'localhost'
-          REDIS_PORT: '6379'
-          REDIS_PASSWORD: 'testpassword'
-
-    env:
-      CI: true
-      PLAIN_OUTPUT: True
-      RUN_ENV: local
-      PORT: 8080
-      OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
-
-      # - name: Upload coverage reports to Codecov
-      #   uses: codecov/codecov-action@v4
-      #   with:
-      #     token: ${{ secrets.CODECOV_TOKEN }}
-      #     flags: backend,${{ runner.os }}

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

@@ -1,96 +0,0 @@
-name: AutoGPT Platform - Frontend CI
-
-on:
-  push:
-    branches: [master, dev]
-    paths:
-      - ".github/workflows/platform-frontend-ci.yml"
-      - "autogpt_platform/frontend/**"
-  pull_request:
-    paths:
-      - ".github/workflows/platform-frontend-ci.yml"
-      - "autogpt_platform/frontend/**"
-
-defaults:
-  run:
-    shell: bash
-    working-directory: autogpt_platform/frontend
-
-jobs:
-  lint:
-    runs-on: ubuntu-latest
-
-    steps:
-      - uses: actions/checkout@v4
-      - name: Set up Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: "21"
-
-      - name: Install dependencies
-        run: |
-          yarn install --frozen-lockfile
-
-      - name: Run lint
-        run: |
-          yarn lint
-
-  test:
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Free Disk Space (Ubuntu)
-        uses: jlumbroso/free-disk-space@main
-        with:
-          # this might remove tools that are actually needed,
-          # if set to "true" but frees about 6 GB
-          tool-cache: false
-
-          # all of these default to true, but feel free to set to
-          # "false" if necessary for your workflow
-          android: false
-          dotnet: false
-          haskell: false
-          large-packages: true
-          docker-images: true
-          swap-storage: true
-
-      - name: Checkout repository
-        uses: actions/checkout@v4
-        with:
-          submodules: recursive
-
-      - name: Set up Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: "21"
-
-      - name: Copy default supabase .env
-        run: |
-          cp ../supabase/docker/.env.example ../.env
-
-      - name: Run docker compose
-        run: |
-          docker compose -f ../docker-compose.yml up -d
-
-      - name: Install dependencies
-        run: |
-          yarn install --frozen-lockfile
-
-      - name: Setup Builder .env
-        run: |
-          cp .env.example .env
-
-      - name: Install Playwright Browsers
-        run: yarn playwright install --with-deps
-
-      - name: Run tests
-        run: |
-          yarn test
-
-      - uses: actions/upload-artifact@v4
-        if: ${{ !cancelled() }}
-        with:
-          name: playwright-report
-          path: playwright-report/
-          retention-days: 30

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

@@ -1,125 +0,0 @@
-name: AutoGPT Platform - Backend CI
-
-on:
-  push:
-    branches: [master, dev, ci-test*]
-    paths:
-      - ".github/workflows/platform-market-ci.yml"
-      - "autogpt_platform/market/**"
-  pull_request:
-    branches: [master, dev, release-*]
-    paths:
-      - ".github/workflows/platform-market-ci.yml"
-      - "autogpt_platform/market/**"
-
-concurrency:
-  group: ${{ format('backend-ci-{0}', github.head_ref && format('{0}-{1}', github.event_name, github.event.pull_request.number) || github.sha) }}
-  cancel-in-progress: ${{ startsWith(github.event_name, 'pull_request') }}
-
-defaults:
-  run:
-    shell: bash
-    working-directory: autogpt_platform/market
-
-jobs:
-  test:
-    permissions:
-      contents: read
-    timeout-minutes: 30
-    strategy:
-      fail-fast: false
-      matrix:
-        python-version: ["3.10"]
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-          submodules: true
-
-      - name: Set up Python ${{ matrix.python-version }}
-        uses: actions/setup-python@v5
-        with:
-          python-version: ${{ matrix.python-version }}
-
-      - name: Setup Supabase
-        uses: supabase/setup-cli@v1
-        with:
-          version: latest
-
-      - id: get_date
-        name: Get date
-        run: echo "date=$(date +'%Y-%m-%d')" >> $GITHUB_OUTPUT
-
-      - name: Set up Python dependency cache
-        uses: actions/cache@v4
-        with:
-          path: ~/.cache/pypoetry
-          key: poetry-${{ runner.os }}-${{ hashFiles('autogpt_platform/market/poetry.lock') }}
-
-      - name: Install Poetry (Unix)
-        run: |
-          curl -sSL https://install.python-poetry.org | python3 -
-
-          if [ "${{ runner.os }}" = "macOS" ]; then
-            PATH="$HOME/.local/bin:$PATH"
-            echo "$HOME/.local/bin" >> $GITHUB_PATH
-          fi
-
-      - name: Install Python dependencies
-        run: poetry install
-
-      - name: Generate Prisma Client
-        run: poetry run prisma generate
-
-      - id: supabase
-        name: Start Supabase
-        working-directory: .
-        run: |
-          supabase init
-          supabase start --exclude postgres-meta,realtime,storage-api,imgproxy,inbucket,studio,edge-runtime,logflare,vector,supavisor
-          supabase status -o env | sed 's/="/=/; s/"$//' >> $GITHUB_OUTPUT
-        # outputs:
-        # DB_URL, API_URL, GRAPHQL_URL, ANON_KEY, SERVICE_ROLE_KEY, JWT_SECRET
-
-      - name: Run Database Migrations
-        run: poetry run prisma migrate dev --name updates
-        env:
-          DATABASE_URL: ${{ steps.supabase.outputs.DB_URL }}
-
-      - id: lint
-        name: Run Linter
-        run: poetry run lint
-
-      # Tests comment out because they do not work with prisma mock, nor have they been updated since they were created
-      # - name: Run pytest with coverage
-      #   run: |
-      #     if [[ "${{ runner.debug }}" == "1" ]]; then
-      #       poetry run pytest -s -vv -o log_cli=true -o log_cli_level=DEBUG test
-      #     else
-      #       poetry run pytest -s -vv test
-      #     fi
-      #   if: success() || (failure() && steps.lint.outcome == 'failure')
-      #   env:
-      #     LOG_LEVEL: ${{ runner.debug && 'DEBUG' || 'INFO' }}
-      #     DATABASE_URL: ${{ steps.supabase.outputs.DB_URL }}
-      #     SUPABASE_URL: ${{ steps.supabase.outputs.API_URL }}
-      #     SUPABASE_SERVICE_ROLE_KEY: ${{ steps.supabase.outputs.SERVICE_ROLE_KEY }}
-      #     SUPABASE_JWT_SECRET: ${{ steps.supabase.outputs.JWT_SECRET }}
-      #     REDIS_HOST: 'localhost'
-      #     REDIS_PORT: '6379'
-          # REDIS_PASSWORD: 'testpassword'
-
-    env:
-      CI: true
-      PLAIN_OUTPUT: True
-      RUN_ENV: local
-      PORT: 8080
-
-      # - name: Upload coverage reports to Codecov
-      #   uses: codecov/codecov-action@v4
-      #   with:
-      #     token: ${{ secrets.CODECOV_TOKEN }}
-      #     flags: backend,${{ runner.os }}

.github/workflows/repo-pr-enforce-base-branch.yml

@@ -1,21 +0,0 @@
-name: Repo - Enforce dev as base branch
-on:
-  pull_request_target:
-    branches: [ master ]
-    types: [ opened ]
-
-jobs:
-  check_pr_target:
-    runs-on: ubuntu-latest
-    permissions:
-      pull-requests: write
-    steps:
-      - name: Check if PR is from dev or hotfix
-        if: ${{ !(startsWith(github.event.pull_request.head.ref, 'hotfix/') || github.event.pull_request.head.ref == 'dev') }}
-        run: |
-          gh pr comment ${{ github.event.number }} --repo "$REPO" \
-            --body $'This PR targets the `master` branch but does not come from `dev` or a `hotfix/*` branch.\n\nAutomatically setting the base branch to `dev`.'
-          gh pr edit ${{ github.event.number }} --base dev --repo "$REPO"
-        env:
-          GITHUB_TOKEN: ${{ github.token }}
-          REPO: ${{ github.repository }}

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

@@ -3,7 +3,7 @@ name: Repo - Pull Request auto-label
 on:
   # So that PRs touching the same files as the push are updated
   push:
-    branches: [ master, dev, release-* ]
+    branches: [ master, development, release-* ]
     paths-ignore:
       - 'classic/forge/tests/vcr_cassettes'
       - 'classic/benchmark/reports/**'

.github/workflows/scripts/check_actions_status.py

@@ -5,7 +5,6 @@ import sys
 import time
 from typing import Dict, List, Tuple
 
-CHECK_INTERVAL = 30
 
 def get_environment_variables() -> Tuple[str, str, str, str, str]:
     """Retrieve and return necessary environment variables."""
@@ -94,10 +93,9 @@ def main():
             break
 
         print(
-            "Some check runs are still in progress. "
-            f"Waiting {CHECK_INTERVAL} seconds before checking again..."
+            "Some check runs are still in progress. Waiting 3 minutes before checking again..."
         )
-        time.sleep(CHECK_INTERVAL)
+        time.sleep(180)
 
     if all_others_passed:
         print("All other completed check runs have passed. This check passes.")

.gitignore

@@ -170,4 +170,4 @@ pri*
 ig*
 .github_access_token
 LICENSE.rtf
-autogpt_platform/backend/settings.py
+autogpt_platform/autogpt_server/settings.py

.pre-commit-config.yaml

@@ -9,15 +9,6 @@ repos:
       - id: check-merge-conflict
       - id: check-symlinks
       - id: debug-statements
-  
-  - repo: https://github.com/Yelp/detect-secrets
-    rev: v1.5.0
-    hooks:
-      - id: detect-secrets
-        name: Detect secrets
-        description: Detects high entropy strings that are likely to be passwords.
-        files: ^autogpt_platform/
-        stages: [push]
 
   - repo: local
     # isort needs the context of which packages are installed to function, so we
@@ -51,7 +42,7 @@ repos:
     hooks:
       - id: black
         name: Lint (Black)
-        language_version: python3.12
+        language_version: python3.10
 
   - repo: https://github.com/PyCQA/flake8
     rev: 7.0.0

.vscode/all-projects.code-workspace

@@ -1,12 +1,12 @@
 {
   "folders": [
     {
-      "name": "frontend",
-      "path": "../autogpt_platform/frontend"
+      "name": "autogpt_server",
+      "path": "../autogpt_platform/autogpt_server"
     },
     {
-      "name": "backend",
-      "path": "../autogpt_platform/backend"
+      "name": "autogpt_builder",
+      "path": "../autogpt_platform/autogpt_builder"
     },
     {
       "name": "market",
@@ -24,7 +24,10 @@
       "name": "docs",
       "path": "../docs"
     },
-
+    {
+      "name": "[root]",
+      "path": ".."
+    },
     {
       "name": "classic - autogpt",
       "path": "../classic/original_autogpt"
@@ -41,10 +44,6 @@
       "name": "classic - frontend",
       "path": "../classic/frontend"
     },
-    {
-      "name": "[root]",
-      "path": ".."
-    }
   ],
   "settings": {
     "python.analysis.typeCheckingMode": "basic"

CONTRIBUTING.md

@@ -10,9 +10,6 @@ Also check out our [🚀 Roadmap][roadmap] for information about our priorities
 [roadmap]: https://github.com/Significant-Gravitas/AutoGPT/discussions/6971
 [kanban board]: https://github.com/orgs/Significant-Gravitas/projects/1
 
-## Contributing to the AutoGPT Platform Folder
-All contributions to [the autogpt_platform folder](https://github.com/Significant-Gravitas/AutoGPT/blob/master/autogpt_platform) will be under our [Contribution License Agreement](https://github.com/Significant-Gravitas/AutoGPT/blob/master/autogpt_platform/Contributor%20License%20Agreement%20(CLA).md). By making a pull request contributing to this folder, you agree to the terms of our CLA for your contribution. All contributions to other folders will be under the MIT license.
-
 ## In short
 1. Avoid duplicate work, issues, PRs etc.
 2. We encourage you to collaborate with fellow community members on some of our bigger

LICENSE

@@ -1,13 +1,7 @@
-All portions of this repository are under one of two licenses. The majority of the AutoGPT repository is under the MIT License below. The autogpt_platform folder is under the
-Polyform Shield License. 
-
-
 MIT License
 
-
 Copyright (c) 2023 Toran Bruce Richards
 
-
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
 in the Software without restriction, including without limitation the rights
@@ -15,11 +9,9 @@ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 copies of the Software, and to permit persons to whom the Software is
 furnished to do so, subject to the following conditions:
 
-
 The above copyright notice and this permission notice shall be included in all
 copies or substantial portions of the Software.
 
-
 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE

README.md

@@ -1,71 +1,43 @@
-# AutoGPT: Build, Deploy, and Run AI Agents
+# AutoGPT: Build & Use AI Agents
 
 [![Discord Follow](https://dcbadge.vercel.app/api/server/autogpt?style=flat)](https://discord.gg/autogpt)  
 [![Twitter Follow](https://img.shields.io/twitter/follow/Auto_GPT?style=social)](https://twitter.com/Auto_GPT)  
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
-**AutoGPT** is a powerful platform that allows you to create, deploy, and manage continuous AI agents that automate complex workflows. 
+**AutoGPT** is a powerful tool that lets you create and run intelligent agents. These agents can perform various tasks automatically, making your life easier.
 
-## Hosting Options 
-   - Download to self-host
-   - [Join the Waitlist](https://bit.ly/3ZDijAI) for the cloud-hosted beta  
+## How to Get Started
 
-## How to Setup for Self-Hosting
-> [!NOTE]
-> Setting up and hosting the AutoGPT Platform yourself is a technical process. 
-> If you'd rather something that just works, we recommend [joining the waitlist](https://bit.ly/3ZDijAI) for the cloud-hosted beta.
+https://github.com/user-attachments/assets/8508f4dc-b362-4cab-900f-644964a96cdf
 
-https://github.com/user-attachments/assets/d04273a5-b36a-4a37-818e-f631ce72d603
+### 🧱 AutoGPT Builder 
 
-This tutorial assumes you have Docker, VSCode, git and npm installed.
-
-### 🧱 AutoGPT Frontend
-
-The AutoGPT frontend is where users interact with our powerful AI automation platform. It offers multiple ways to engage with and leverage our AI agents. This is the interface where you'll bring your AI automation ideas to life:
-
-   **Agent Builder:** For those who want to customize, our intuitive, low-code interface allows you to design and configure your own AI agents. 
-   
-   **Workflow Management:** Build, modify, and optimize your automation workflows with ease. You build your agent by connecting blocks, where each block     performs a single action.
-   
-   **Deployment Controls:** Manage the lifecycle of your agents, from testing to production.
-   
-   **Ready-to-Use Agents:** Don't want to build? Simply select from our library of pre-configured agents and put them to work immediately.
-   
-   **Agent Interaction:** Whether you've built your own or are using pre-configured agents, easily run and interact with them through our user-friendly      interface.
-
-   **Monitoring and Analytics:** Keep track of your agents' performance and gain insights to continually improve your automation processes.
+The AutoGPT Builder is the frontend. It allows you to design agents using an easy flowchart style. You build your agent by connecting blocks, where each block performs a single action. It's simple and intuitive!
 
 [Read this guide](https://docs.agpt.co/server/new_blocks/) to learn how to build your own custom blocks.
 
 ### 💽 AutoGPT Server
 
-The AutoGPT Server is the powerhouse of our platform This is where your agents run. Once deployed, agents can be triggered by external sources and can operate continuously. It contains all the essential components that make AutoGPT run smoothly.
-
-   **Source Code:** The core logic that drives our agents and automation processes.
-   
-   **Infrastructure:** Robust systems that ensure reliable and scalable performance.
-   
-   **Marketplace:** A comprehensive marketplace where you can find and deploy a wide range of pre-built agents.
+The AutoGPT Server is the backend. This is where your agents run. Once deployed, agents can be triggered by external sources and can operate continuously.
 
 ### 🐙 Example Agents
 
 Here are two examples of what you can do with AutoGPT:
 
-1. **Generate Viral Videos from Trending Topics**
-   - This agent reads topics on Reddit.
-   - It identifies trending topics.
-   - It then automatically creates a short-form video based on the content. 
+1. **Reddit Marketing Agent**
+   - This agent reads comments on Reddit.
+   - It looks for people asking about your product.
+   - It then automatically responds to them.
 
-2. **Identify Top Quotes from Videos for Social Media**
+2. **YouTube Content Repurposing Agent**
    - This agent subscribes to your YouTube channel.
    - When you post a new video, it transcribes it.
-   - It uses AI to identify the most impactful quotes to generate a summary.
-   - Then, it writes a post to automatically publish to your social media. 
+   - It uses AI to write a search engine optimized blog post.
+   - Then, it publishes this blog post to your Medium account.
 
-These examples show just a glimpse of what you can achieve with AutoGPT! You can create customized workflows to build agents for any use case.
+These examples show just a glimpse of what you can achieve with AutoGPT!
 
 ---
-### Mission and Licencing
 Our mission is to provide the tools, so that you can focus on what matters:
 
 - 🏗️ **Building** - Lay the foundation for something amazing.
@@ -78,13 +50,6 @@ Be part of the revolution! **AutoGPT** is here to stay, at the forefront of AI i
  | 
 **🚀 [Contributing](CONTRIBUTING.md)**
 
-**Licensing:**
-
-MIT License: The majority of the AutoGPT repository is under the MIT License.
-
-Polyform Shield License: This license applies to the autogpt_platform folder. 
-
-For more information, see https://agpt.co/blog/introducing-the-autogpt-platform
 
 ---
 ## 🤖 AutoGPT Classic
@@ -109,7 +74,7 @@ This guide will walk you through the process of creating your own agent and usin
 
 📦 [`agbenchmark`](https://pypi.org/project/agbenchmark/) on Pypi
  | 
-📘 [Learn More](https://github.com/Significant-Gravitas/AutoGPT/tree/master/classic/benchmark) about the Benchmark
+📘 [Learn More](https://github.com/Significant-Gravitas/AutoGPT/blob/master/benchmark) about the Benchmark
 
 ### 💻 UI
 
@@ -158,8 +123,6 @@ To maintain a uniform standard and ensure seamless compatibility with many curre
 
 ---
 
-## Stars stats
-
 <p align="center">
 <a href="https://star-history.com/#Significant-Gravitas/AutoGPT">
   <picture>
@@ -169,10 +132,3 @@ To maintain a uniform standard and ensure seamless compatibility with many curre
   </picture>
 </a>
 </p>
-
-
-## ⚡ Contributors
-
-<a href="https://github.com/Significant-Gravitas/AutoGPT/graphs/contributors" alt="View Contributors">
-  <img src="https://contrib.rocks/image?repo=Significant-Gravitas/AutoGPT&max=1000&columns=10" alt="Contributors" />
-</a>

autogpt_platform/Contributor License Agreement (CLA).md

@@ -1,21 +0,0 @@
-**Determinist Ltd** 
-
-**Contributor License Agreement (“Agreement”)**
-
-Thank you for your interest in the AutoGPT open source project at [https://github.com/Significant-Gravitas/AutoGPT](https://github.com/Significant-Gravitas/AutoGPT) stewarded by Determinist Ltd (“**Determinist**”), with offices at 3rd Floor 1 Ashley Road, Altrincham, Cheshire, WA14 2DT, United Kingdom. The form of license below is a document that clarifies the terms under which You, the person listed below, may contribute software code described below (the “**Contribution**”) to the project.  We appreciate your participation in our project, and your help in improving our products, so we want you to understand what will be done with the Contributions.  This license is for your protection as well as the protection of Determinist and its licensees; it does not change your rights to use your own Contributions for any other purpose.        
-
-By submitting a Pull Request which modifies the content of the “autogpt\_platform” folder at [https://github.com/Significant-Gravitas/AutoGPT/tree/master/autogpt\_platform](https://github.com/Significant-Gravitas/AutoGPT/tree/master/autogpt_platform), You hereby agree:  
-
-1\.	**You grant us the ability to use the Contributions in any way**.  You hereby grant to Determinist  a non-exclusive, irrevocable, worldwide, royalty-free, sublicenseable, transferable license under all of Your relevant intellectual property rights (including copyright, patent, and any other rights), to use, copy, prepare derivative works of, distribute and publicly perform and display the Contributions on any licensing terms, including without limitation: (a) open source licenses like the GNU General Public License (GPL), the GNU Lesser General Public License (LGPL), the Common Public License, or the Berkeley Science Division license (BSD); and (b) binary, proprietary, or commercial licenses.
-
-2\. 	**Grant of Patent License**. You hereby grant to Determinist a worldwide, non-exclusive, royalty-free, irrevocable, license, under any rights you may have, now or in the future, in any patents or patent applications, to make, have made, use, offer to sell, sell, and import products containing the Contribution or portions of the Contribution.  This license extends to patent claims that are infringed by the Contribution alone or by combination of the Contribution with other inventions.  
-
-4\. 	**Limitations on Licenses**.  The licenses granted in this Agreement will continue for the duration of the applicable patent or intellectual property right under which such license is granted.   The licenses granted in this Agreement will include the right to grant and authorize sublicenses, so long as the sublicenses are within the scope of the licenses granted in this Agreement.  Except for the licenses granted herein, You reserve all right, title, and interest in and to the Contribution.    
-
-5\. 	**You are able to grant us these rights**.  You represent that You are legally entitled to grant the above license.  If Your employer has rights to intellectual property that You create, You represent that You are authorized to make the Contributions on behalf of that employer, or that Your employer has waived such rights for the Contributions.  
-
-3\.	**The Contributions are your original work**.  You represent that the Contributions are Your original works of authorship, and to Your knowledge, no other person claims, or has the right to claim, any right in any invention or patent related to the Contributions.  You also represent that You are not legally obligated, whether by entering into an agreement or otherwise, in any way that conflicts with the terms of this license.  For example, if you have signed an agreement requiring you to assign the intellectual property rights in the Contributions to an employer or customer, that would conflict with the terms of this license.  
-    
-6\.  **We determine the code that is in our products**.  You understand that the decision to include the Contribution in any product or source repository is entirely that of Determinist, and this agreement does not guarantee that the Contributions will be included in any product. 
-
-7\. **No Implied Warranties.**  Determinist acknowledges that, except as explicitly described in this Agreement, the Contribution is provided on an “AS IS” BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING, WITHOUT   LIMITATION, ANY WARRANTIES OR CONDITIONS OF TITLE, NON-INFRINGEMENT, MERCHANTABILITY, OR FITNESS FOR A PARTICULAR PURPOSE.    

autogpt_platform/LICENCE.txt

@@ -1,164 +0,0 @@
-# PolyForm Shield License 1.0.0
-
-<https://polyformproject.org/licenses/shield/1.0.0>
-
-## Acceptance
-
-In order to get any license under these terms, you must agree
-to them as both strict obligations and conditions to all
-your licenses.
-
-## Copyright License
-
-The licensor grants you a copyright license for the
-software to do everything you might do with the software
-that would otherwise infringe the licensor's copyright
-in it for any permitted purpose.  However, you may
-only distribute the software according to [Distribution
-License](#distribution-license) and make changes or new works
-based on the software according to [Changes and New Works
-License](#changes-and-new-works-license).
-
-## Distribution License
-
-The licensor grants you an additional copyright license
-to distribute copies of the software.  Your license
-to distribute covers distributing the software with
-changes and new works permitted by [Changes and New Works
-License](#changes-and-new-works-license).
-
-## Notices
-
-You must ensure that anyone who gets a copy of any part of
-the software from you also gets a copy of these terms or the
-URL for them above, as well as copies of any plain-text lines
-beginning with `Required Notice:` that the licensor provided
-with the software.  For example:
-
-> Required Notice: Copyright Yoyodyne, Inc. (http://example.com)
-
-## Changes and New Works License
-
-The licensor grants you an additional copyright license to
-make changes and new works based on the software for any
-permitted purpose.
-
-## Patent License
-
-The licensor grants you a patent license for the software that
-covers patent claims the licensor can license, or becomes able
-to license, that you would infringe by using the software.
-
-## Noncompete
-
-Any purpose is a permitted purpose, except for providing any
-product that competes with the software or any product the
-licensor or any of its affiliates provides using the software.
-
-## Competition
-
-Goods and services compete even when they provide functionality
-through different kinds of interfaces or for different technical
-platforms.  Applications can compete with services, libraries
-with plugins, frameworks with development tools, and so on,
-even if they're written in different programming languages
-or for different computer architectures.  Goods and services
-compete even when provided free of charge.  If you market a
-product as a practical substitute for the software or another
-product, it definitely competes.
-
-## New Products
-
-If you are using the software to provide a product that does
-not compete, but the licensor or any of its affiliates brings
-your product into competition by providing a new version of
-the software or another product using the software, you may
-continue using versions of the software available under these
-terms beforehand to provide your competing product, but not
-any later versions.
-
-## Discontinued Products
-
-You may begin using the software to compete with a product
-or service that the licensor or any of its affiliates has
-stopped providing, unless the licensor includes a plain-text
-line beginning with `Licensor Line of Business:` with the
-software that mentions that line of business.  For example:
-
-> Licensor Line of Business: YoyodyneCMS Content Management
-System (http://example.com/cms)
-
-## Sales of Business
-
-If the licensor or any of its affiliates sells a line of
-business developing the software or using the software
-to provide a product, the buyer can also enforce
-[Noncompete](#noncompete) for that product.
-
-## Fair Use
-
-You may have "fair use" rights for the software under the
-law. These terms do not limit them.
-
-## No Other Rights
-
-These terms do not allow you to sublicense or transfer any of
-your licenses to anyone else, or prevent the licensor from
-granting licenses to anyone else.  These terms do not imply
-any other licenses.
-
-## Patent Defense
-
-If you make any written claim that the software infringes or
-contributes to infringement of any patent, your patent license
-for the software granted under these terms ends immediately. If
-your company makes such a claim, your patent license ends
-immediately for work on behalf of your company.
-
-## Violations
-
-The first time you are notified in writing that you have
-violated any of these terms, or done anything with the software
-not covered by your licenses, your licenses can nonetheless
-continue if you come into full compliance with these terms,
-and take practical steps to correct past violations, within
-32 days of receiving notice.  Otherwise, all your licenses
-end immediately.
-
-## No Liability
-
-***As far as the law allows, the software comes as is, without
-any warranty or condition, and the licensor will not be liable
-to you for any damages arising out of these terms or the use
-or nature of the software, under any kind of legal claim.***
-
-## Definitions
-
-The **licensor** is the individual or entity offering these
-terms, and the **software** is the software the licensor makes
-available under these terms.
-
-A **product** can be a good or service, or a combination
-of them.
-
-**You** refers to the individual or entity agreeing to these
-terms.
-
-**Your company** is any legal entity, sole proprietorship,
-or other kind of organization that you work for, plus all
-its affiliates.
-
-**Affiliates** means the other organizations than an
-organization has control over, is under the control of, or is
-under common control with.
-
-**Control** means ownership of substantially all the assets of
-an entity, or the power to direct its management and policies
-by vote, contract, or otherwise.  Control can be direct or
-indirect.
-
-**Your licenses** are all the licenses granted to you for the
-software under these terms.
-
-**Use** means anything you do with the software requiring one
-of your licenses.

autogpt_platform/README.md

@@ -8,67 +8,46 @@ Welcome to the AutoGPT Platform - a powerful system for creating and running AI
 
 - Docker
 - Docker Compose V2 (comes with Docker Desktop, or can be installed separately)
-- Node.js & NPM (for running the frontend application)
 
 ### Running the System
 
 To run the AutoGPT Platform, follow these steps:
 
-1. Clone this repository to your local machine and navigate to the `autogpt_platform` directory within the repository:
-   ```
-   git clone <https://github.com/Significant-Gravitas/AutoGPT.git | git@github.com:Significant-Gravitas/AutoGPT.git>
-   cd AutoGPT/autogpt_platform
-   ```
-
-2. Run the following command:
-   ```
-   git submodule update --init --recursive
-   ```
-   This command will initialize and update the submodules in the repository. The `supabase` folder will be cloned to the root directory.
-
+1. Clone this repository to your local machine.
+2. Navigate to autogpt_platform/supabase
 3. Run the following command:
    ```
-   cp supabase/docker/.env.example .env
+      git submodule update --init --recursive
    ```
-   This command will copy the `.env.example` file to `.env` in the `supabase/docker` directory. You can modify the `.env` file to add your own environment variables.
+4. Navigate back to rnd (cd ..)
+5. Run the following command:
+   ```
+      cp supabase/docker/.env.example .env
+   ```
+6. Run the following command:
 
-4. Run the following command:
    ```
-   docker compose up -d
-   ```
-   This command will start all the necessary backend services defined in the `docker-compose.yml` file in detached mode.
+   docker compose -f docker-compose.combined.yml up -d
 
-5. Navigate to `frontend` within the `autogpt_platform` directory:
-   ```
-   cd frontend
-   ```
-   You will need to run your frontend application separately on your local machine.
-
-6. Run the following command: 
-   ```
-   cp .env.example .env.local
-   ```
-   This command will copy the `.env.example` file to `.env.local` in the `frontend` directory. You can modify the `.env.local` within this folder to add your own environment variables for the frontend application.
-
-7. Run the following command:
-   ```
-   npm install
-   npm run dev
-   ```
-   This command will install the necessary dependencies and start the frontend application in development mode.
-   If you are using Yarn, you can run the following commands instead:
-   ```
-   yarn install && yarn dev
    ```
 
-8. Open your browser and navigate to `http://localhost:3000` to access the AutoGPT Platform frontend.
+   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 up -d`: Start the services in detached mode.
-- `docker compose stop`: Stop the running services without removing them.
+- `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.
@@ -149,3 +128,6 @@ To persist data for PostgreSQL and Redis, you can modify the `docker-compose.yml
 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

@@ -13,6 +13,3 @@ NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyAgCiAgICAic
 ## Only used if you're using Supabase and OAuth
 AUTH_CALLBACK_URL=http://localhost:3000/auth/callback
 GA_MEASUREMENT_ID=G-FH2XK2W4GN
-
-# When running locally, set NEXT_PUBLIC_BEHAVE_AS=CLOUD to use the a locally hosted marketplace (as is typical in development, and the cloud deployment), otherwise set it to LOCAL to have the marketplace open in a new tab
-NEXT_PUBLIC_BEHAVE_AS=LOCAL

autogpt_platform/autogpt_builder/.eslintrc.json

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

autogpt_platform/autogpt_builder/.gitignore

@@ -37,11 +37,3 @@ next-env.d.ts
 
 # Sentry Config File
 .env.sentry-build-plugin
-node_modules/
-/test-results/
-/playwright-report/
-/blob-report/
-/playwright/.cache/
-
-*storybook.log
-storybook-static

autogpt_platform/autogpt_builder/Dockerfile

@@ -1,20 +1,20 @@
 # Base stage for both dev and prod
 FROM node:21-alpine AS base
 WORKDIR /app
-COPY autogpt_platform/frontend/package.json autogpt_platform/frontend/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_platform/frontend/ .
+COPY autogpt_platform/autogpt_builder/ .
 EXPOSE 3000
 CMD ["yarn", "run", "dev"]
 
 # Build stage for prod
 FROM base AS build
-COPY autogpt_platform/frontend/ .
-RUN yarn build
+COPY autogpt_platform/autogpt_builder/ .
+RUN npm run build
 
 # Prod stage
 FROM node:21-alpine AS prod
@@ -29,4 +29,4 @@ COPY --from=build /app/public ./public
 COPY --from=build /app/next.config.mjs ./next.config.mjs
 
 EXPOSE 3000
-CMD ["yarn", "start"]
+CMD ["npm", "start"]

autogpt_platform/autogpt_builder/README.md

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

autogpt_platform/autogpt_builder/next.config.mjs

@@ -1,7 +1,16 @@
 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"],
   },

autogpt_platform/autogpt_builder/package.json

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

autogpt_platform/autogpt_builder/sentry.client.config.ts

@@ -7,8 +7,6 @@ import * as Sentry from "@sentry/nextjs";
 Sentry.init({
   dsn: "https://fe4e4aa4a283391808a5da396da20159@o4505260022104064.ingest.us.sentry.io/4507946746380288",
 
-  enabled: process.env.DISABLE_SENTRY !== "true",
-
   // Add optional integrations for additional features
   integrations: [
     Sentry.replayIntegration(),
@@ -31,6 +29,14 @@ Sentry.init({
     /^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

autogpt_platform/autogpt_builder/sentry.edge.config.ts

@@ -8,8 +8,6 @@ import * as Sentry from "@sentry/nextjs";
 Sentry.init({
   dsn: "https://fe4e4aa4a283391808a5da396da20159@o4505260022104064.ingest.us.sentry.io/4507946746380288",
 
-  enabled: process.env.NODE_ENV !== "development",
-
   // Define how likely traces are sampled. Adjust this value in production, or use tracesSampler for greater control.
   tracesSampleRate: 1,
 

autogpt_platform/autogpt_builder/sentry.server.config.ts

@@ -8,8 +8,6 @@ import * as Sentry from "@sentry/nextjs";
 Sentry.init({
   dsn: "https://fe4e4aa4a283391808a5da396da20159@o4505260022104064.ingest.us.sentry.io/4507946746380288",
 
-  enabled: process.env.NODE_ENV !== "development",
-
   // Define how likely traces are sampled. Adjust this value in production, or use tracesSampler for greater control.
   tracesSampleRate: 1,
 

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

@@ -10,7 +10,7 @@ async function AdminMarketplace() {
 
   return (
     <>
-      <AdminMarketplaceAgentList agents={reviewableAgents.items} />
+      <AdminMarketplaceAgentList agents={reviewableAgents.agents} />
       <Separator className="my-4" />
       <AdminFeaturedAgentsControl className="mt-4" />
     </>

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

@@ -6,7 +6,7 @@ export async function GET(request: Request) {
   const { searchParams, origin } = new URL(request.url);
   const code = searchParams.get("code");
   // if "next" is in param, use it as the redirect URL
-  const next = searchParams.get("next") ?? "/";
+  const next = searchParams.get("next") ?? "/profile";
 
   if (code) {
     const supabase = createServerClient();

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

@@ -8,7 +8,7 @@ export default function Home() {
 
   return (
       <FlowEditor
-        className="flow-container"
+        className="flow-container w-full min-h-[86vh] border border-gray-300 dark:border-gray-700 rounded-lg"
         flowID={query.get("flowID") ?? query.get("templateID") ?? undefined}
         template={!!query.get("templateID")}
       />

autogpt_platform/autogpt_builder/src/app/globals.css

@@ -27,7 +27,7 @@
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 0 0% 98%;
     --border: 240 5.9% 90%;
-    --input: 240 5.9% 85%;
+    --input: 240 5.9% 90%;
     --ring: 240 5.9% 10%;
     --radius: 0.5rem;
     --chart-1: 12 76% 61%;
@@ -72,12 +72,4 @@
   body {
     @apply bg-background text-foreground;
   }
-
-  .agpt-border-input {
-    @apply border-input focus-visible:border-gray-400 focus-visible:outline-none;
-  }
-
-  .agpt-shadow-input {
-    @apply shadow-sm focus-visible:shadow-md;
-  }
 }

autogpt_platform/autogpt_builder/src/app/layout.tsx

@@ -34,7 +34,7 @@ export default function RootLayout({
         >
           <div className="flex min-h-screen flex-col">
             <NavBar />
-            <main className="flex-1 p-4">{children}</main>
+            <main className="flex-1 overflow-hidden p-4">{children}</main>
             <TallyPopupSimple />
           </div>
           <Toaster />

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

@@ -22,11 +22,6 @@ export async function login(values: z.infer<typeof loginFormSchema>) {
     const { data, error } = await supabase.auth.signInWithPassword(values);
 
     if (error) {
-      if (error.status == 400) {
-        // Hence User is not present
-        redirect("/signup");
-      }
-
       return error.message;
     }
 
@@ -35,6 +30,35 @@ export async function login(values: z.infer<typeof loginFormSchema>) {
     }
 
     revalidatePath("/", "layout");
-    redirect("/");
+    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

@@ -27,7 +27,7 @@ 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 Use and Privacy Policy",
+    message: "You must agree to the Terms of Service and Privacy Policy",
   }),
 });
 
@@ -48,8 +48,8 @@ export default function LoginPage() {
   });
 
   if (user) {
-    console.log("User exists, redirecting to home");
-    router.push("/");
+    console.log("User exists, redirecting to profile");
+    router.push("/profile");
   }
 
   if (isUserLoading || isSupabaseLoading || user) {
@@ -98,11 +98,23 @@ export default function LoginPage() {
     setFeedback(null);
   };
 
+  const onSignup = async (data: z.infer<typeof loginFormSchema>) => {
+    if (await form.trigger()) {
+      setIsLoading(true);
+      const error = await signup(data);
+      setIsLoading(false);
+      if (error) {
+        setFeedback(error);
+        return;
+      }
+      setFeedback(null);
+    }
+  };
+
   return (
     <div className="flex h-[80vh] items-center justify-center">
       <div className="w-full max-w-md space-y-6 rounded-lg p-8 shadow-md">
-        <h1 className="text-lg font-medium">Log in to your Account </h1>
-        {/* <div className="mb-6 space-y-2">
+        <div className="mb-6 space-y-2">
           <Button
             className="w-full"
             onClick={() => handleSignInWithProvider("google")}
@@ -133,7 +145,7 @@ export default function LoginPage() {
             <FaDiscord className="mr-2 h-4 w-4" />
             Sign in with Discord
           </Button>
-        </div> */}
+        </div>
         <Form {...form}>
           <form onSubmit={form.handleSubmit(onLogin)}>
             <FormField
@@ -179,11 +191,8 @@ export default function LoginPage() {
                   <div className="space-y-1 leading-none">
                     <FormLabel>
                       I agree to the{" "}
-                      <Link
-                        href="https://auto-gpt.notion.site/Terms-of-Use-11400ef5bece80d0b087d7831c5fd6bf"
-                        className="underline"
-                      >
-                        Terms of Use
+                      <Link href="/terms-of-service" className="underline">
+                        Terms of Service
                       </Link>{" "}
                       and{" "}
                       <Link
@@ -198,19 +207,23 @@ export default function LoginPage() {
                 </FormItem>
               )}
             />
-            <div className="mb-6 mt-8 flex w-full space-x-4">
+            <div className="mb-6 mt-6 flex w-full space-x-4">
               <Button
-                className="flex w-full justify-center"
+                className="flex w-1/2 justify-center"
                 type="submit"
                 disabled={isLoading}
               >
                 Log in
               </Button>
-            </div>
-            <div className="w-full text-center">
-              <Link href={"/signup"} className="w-fit text-xs hover:underline">
-                Create a new Account
-              </Link>
+              <Button
+                className="flex w-1/2 justify-center"
+                variant="outline"
+                type="button"
+                onClick={form.handleSubmit(onSignup)}
+                disabled={isLoading}
+              >
+                Sign up
+              </Button>
             </div>
           </form>
           <p className="text-sm text-red-500">{feedback}</p>

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

@@ -6,6 +6,7 @@ import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import MarketplaceAPI, {
   AgentResponse,
+  AgentListResponse,
   AgentWithRank,
 } from "@/lib/marketplace-api";
 import {
@@ -104,7 +105,7 @@ const AgentCard: React.FC<{ agent: Agent; featured?: boolean }> = ({
 
   return (
     <div
-      className={`flex cursor-pointer flex-col justify-between rounded-lg border p-6 transition-colors duration-200 hover:bg-gray-50 ${featured ? "border-indigo-500 shadow-md" : "border-gray-300"}`}
+      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>
@@ -118,7 +119,7 @@ const AgentCard: React.FC<{ agent: Agent; featured?: boolean }> = ({
           {agent.description}
         </p>
         <div className="mb-2 text-xs text-gray-400">
-          Categories: {agent.categories?.join(", ")}
+          Categories: {agent.categories.join(", ")}
         </div>
       </div>
       <div className="flex items-end justify-between">
@@ -191,19 +192,17 @@ const Marketplace: React.FC = () => {
   const [searchResults, setSearchResults] = useState<Agent[]>([]);
   const [featuredAgents, setFeaturedAgents] = useState<Agent[]>([]);
   const [topAgents, setTopAgents] = useState<Agent[]>([]);
+  const [page, setPage] = useState(1);
+  const [totalPages, setTotalPages] = useState(1);
   const [isLoading, setIsLoading] = useState(false);
-  const [topAgentsPage, setTopAgentsPage] = useState(1);
-  const [searchPage, setSearchPage] = useState(1);
-  const [topAgentsTotalPages, setTopAgentsTotalPages] = useState(1);
-  const [searchTotalPages, setSearchTotalPages] = useState(1);
 
   const fetchTopAgents = useCallback(
     async (currentPage: number) => {
       setIsLoading(true);
       try {
         const response = await api.getTopDownloadedAgents(currentPage, 9);
-        setTopAgents(response.items);
-        setTopAgentsTotalPages(response.total_pages);
+        setTopAgents(response.agents);
+        setTotalPages(response.total_pages);
       } catch (error) {
         console.error("Error fetching top agents:", error);
       } finally {
@@ -216,20 +215,19 @@ const Marketplace: React.FC = () => {
   const fetchFeaturedAgents = useCallback(async () => {
     try {
       const featured = await api.getFeaturedAgents();
-      setFeaturedAgents(featured.items);
+      setFeaturedAgents(featured.agents);
     } catch (error) {
       console.error("Error fetching featured agents:", error);
     }
   }, [api]);
 
   const searchAgents = useCallback(
-    async (searchTerm: string, currentPage: number) => {
+    async (searchTerm: string) => {
       setIsLoading(true);
       try {
-        const response = await api.searchAgents(searchTerm, currentPage, 9);
-        const filteredAgents = response.items.filter((agent) => agent.rank > 0);
+        const response = await api.searchAgents(searchTerm, 1, 30);
+        const filteredAgents = response.filter((agent) => agent.rank > 0);
         setSearchResults(filteredAgents);
-        setSearchTotalPages(response.total_pages);
       } catch (error) {
         console.error("Error searching agents:", error);
       } finally {
@@ -246,11 +244,11 @@ const Marketplace: React.FC = () => {
 
   useEffect(() => {
     if (searchValue) {
-      searchAgents(searchValue, searchPage);
+      debouncedSearch(searchValue);
     } else {
-      fetchTopAgents(topAgentsPage);
+      fetchTopAgents(page);
     }
-  }, [searchValue, searchPage, topAgentsPage, searchAgents, fetchTopAgents]);
+  }, [searchValue, page, debouncedSearch, fetchTopAgents]);
 
   useEffect(() => {
     fetchFeaturedAgents();
@@ -258,30 +256,18 @@ const Marketplace: React.FC = () => {
 
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setSearchValue(e.target.value);
-    setSearchPage(1);
+    setPage(1);
   };
 
   const handleNextPage = () => {
-    if (searchValue) {
-      if (searchPage < searchTotalPages) {
-        setSearchPage(searchPage + 1);
-      }
-    } else {
-      if (topAgentsPage < topAgentsTotalPages) {
-        setTopAgentsPage(topAgentsPage + 1);
-      }
+    if (page < totalPages) {
+      setPage(page + 1);
     }
   };
 
   const handlePrevPage = () => {
-    if (searchValue) {
-      if (searchPage > 1) {
-        setSearchPage(searchPage - 1);
-      }
-    } else {
-      if (topAgentsPage > 1) {
-        setTopAgentsPage(topAgentsPage - 1);
-      }
+    if (page > 1) {
+      setPage(page - 1);
     }
   };
 
@@ -297,15 +283,7 @@ const Marketplace: React.FC = () => {
           </div>
         ) : searchValue ? (
           searchResults.length > 0 ? (
-            <>
-              <AgentGrid agents={searchResults} title="Search Results" />
-              <Pagination
-                page={searchPage}
-                totalPages={searchTotalPages}
-                onPrevPage={handlePrevPage}
-                onNextPage={handleNextPage}
-              />
-            </>
+            <AgentGrid agents={searchResults} title="Search Results" />
           ) : (
             <div className="py-12 text-center">
               <p className="text-gray-600">
@@ -315,30 +293,17 @@ const Marketplace: React.FC = () => {
           )
         ) : (
           <>
-            {featuredAgents?.length > 0 ? (
+            {featuredAgents.length > 0 && (
               <AgentGrid
                 agents={featuredAgents}
                 title="Featured Agents"
                 featured={true}
               />
-            ) : (
-              <div className="py-12 text-center">
-                <p className="text-gray-600">No Featured Agents found</p>
-              </div>
-            )}
-
-            <hr />
-
-            {topAgents?.length > 0 ? (
-              <AgentGrid agents={topAgents} title="Top Downloaded Agents" />
-            ) : (
-              <div className="py-12 text-center">
-                <p className="text-gray-600">No Top Downloaded Agents found</p>
-              </div>
             )}
+            <AgentGrid agents={topAgents} title="Top Downloaded Agents" />
             <Pagination
-              page={topAgentsPage}
-              totalPages={topAgentsTotalPages}
+              page={page}
+              totalPages={totalPages}
               onPrevPage={handlePrevPage}
               onNextPage={handleNextPage}
             />

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

@@ -37,49 +37,6 @@ type FormData = {
   selectedAgentId: string;
 };
 
-const keywords = [
-  "Automation",
-  "AI Workflows",
-  "Integration",
-  "Task Automation",
-  "Data Processing",
-  "Workflow Management",
-  "Real-time Analytics",
-  "Custom Triggers",
-  "Event-driven",
-  "API Integration",
-  "Data Transformation",
-  "Multi-step Workflows",
-  "Collaboration Tools",
-  "Business Process Automation",
-  "No-code Solutions",
-  "AI-Powered",
-  "Smart Notifications",
-  "Data Syncing",
-  "User Engagement",
-  "Reporting Automation",
-  "Lead Generation",
-  "Customer Support Automation",
-  "E-commerce Automation",
-  "Social Media Management",
-  "Email Marketing Automation",
-  "Document Management",
-  "Data Enrichment",
-  "Performance Tracking",
-  "Predictive Analytics",
-  "Resource Allocation",
-  "Chatbot",
-  "Virtual Assistant",
-  "Workflow Automation",
-  "Social Media Manager",
-  "Email Optimizer",
-  "Content Generator",
-  "Data Analyzer",
-  "Task Scheduler",
-  "Customer Service Bot",
-  "Personalization Engine",
-];
-
 const SubmitPage: React.FC = () => {
   const router = useRouter();
   const {
@@ -129,7 +86,7 @@ const SubmitPage: React.FC = () => {
     const fetchAgentGraph = async () => {
       if (selectedAgentId) {
         const api = new AutoGPTServerAPI();
-        const graph = await api.getGraph(selectedAgentId, undefined, true);
+        const graph = await api.getGraph(selectedAgentId);
         setSelectedAgentGraph(graph);
         setValue("name", graph.name);
         setValue("description", graph.description);
@@ -144,7 +101,7 @@ const SubmitPage: React.FC = () => {
     setSubmitError(null);
 
     if (!data.agreeToTerms) {
-      throw new Error("You must agree to the terms of use");
+      throw new Error("You must agree to the terms of service");
     }
 
     try {
@@ -335,11 +292,12 @@ const SubmitPage: React.FC = () => {
                     </MultiSelectorTrigger>
                     <MultiSelectorContent>
                       <MultiSelectorList>
-                        {keywords.map((keyword) => (
-                          <MultiSelectorItem key={keyword} value={keyword}>
-                            {keyword}
-                          </MultiSelectorItem>
-                        ))}
+                        <MultiSelectorItem value="keyword1">
+                          Keyword 1
+                        </MultiSelectorItem>
+                        <MultiSelectorItem value="keyword2">
+                          Keyword 2
+                        </MultiSelectorItem>
                         {/* Add more predefined keywords as needed */}
                       </MultiSelectorList>
                     </MultiSelectorContent>
@@ -404,7 +362,7 @@ const SubmitPage: React.FC = () => {
             <Controller
               name="agreeToTerms"
               control={control}
-              rules={{ required: "You must agree to the terms of use" }}
+              rules={{ required: "You must agree to the terms of service" }}
               render={({ field }) => (
                 <div className="flex items-center space-x-2">
                   <Checkbox
@@ -417,11 +375,8 @@ const SubmitPage: React.FC = () => {
                     className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                   >
                     I agree to the{" "}
-                    <a
-                      href="https://auto-gpt.notion.site/Terms-of-Use-11400ef5bece80d0b087d7831c5fd6bf"
-                      className="text-blue-500 hover:underline"
-                    >
-                      terms of use
+                    <a href="/terms" className="text-blue-500 hover:underline">
+                      terms of service
                     </a>
                   </label>
                 </div>

autogpt_platform/autogpt_builder/src/app/page.tsx

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

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

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

autogpt_platform/autogpt_builder/src/app/providers.tsx

@@ -5,15 +5,12 @@ import { ThemeProvider as NextThemesProvider } from "next-themes";
 import { ThemeProviderProps } from "next-themes/dist/types";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import SupabaseProvider from "@/components/SupabaseProvider";
-import CredentialsProvider from "@/components/integrations/credentials-provider";
 
 export function Providers({ children, ...props }: ThemeProviderProps) {
   return (
     <NextThemesProvider {...props}>
       <SupabaseProvider>
-        <CredentialsProvider>
-          <TooltipProvider>{children}</TooltipProvider>
-        </CredentialsProvider>
+        <TooltipProvider>{children}</TooltipProvider>
       </SupabaseProvider>
     </NextThemesProvider>
   );

autogpt_platform/autogpt_builder/src/components/CreditButton.tsx

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

autogpt_platform/autogpt_builder/src/components/CustomEdge.tsx

@@ -48,9 +48,9 @@ export function CustomEdge({
   }>({ beads: [], created: 0, destroyed: 0 });
   const { svgPath, length, getPointForT, getTForDistance } = useBezierPath(
     sourceX - 5,
-    sourceY - 5,
-    targetX - 9,
-    targetY - 5,
+    sourceY,
+    targetX + 3,
+    targetY,
   );
   const { deleteElements } = useReactFlow<Node, CustomEdge>();
   const { visualizeBeads } = useContext(FlowContext) ?? {

autogpt_platform/autogpt_builder/src/components/CustomNode.tsx

@@ -21,20 +21,18 @@ import {
 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 NodeOutputs from "./NodeOutputs";
-import { IconCoin } from "./ui/icons";
-import * as Separator from "@radix-ui/react-separator";
-import * as ContextMenu from "@radix-ui/react-context-menu";
-import { DotsVerticalIcon, TrashIcon, CopyIcon } from "@radix-ui/react-icons";
+import DataTable from "./DataTable";
 
 type ParsedKey = { key: string; index?: number };
 
@@ -73,19 +71,14 @@ export type CustomNodeData = {
 
 export type CustomNode = Node<CustomNodeData, "custom">;
 
-export function CustomNode({
-  data,
-  id,
-  width,
-  height,
-  selected,
-}: NodeProps<CustomNode>) {
+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
@@ -171,14 +164,14 @@ export function CustomNode({
           const isAdvanced = propSchema.advanced;
           return (
             (isRequired || isAdvancedOpen || !isAdvanced) && (
-              <div key={propKey} data-id={`input-handle-${propKey}`}>
-                <span className="text-m green mb-0 text-gray-900">
+              <div key={propKey}>
+                <span className="text-m green -mb-1 text-gray-900">
                   {propSchema.title || beautifyString(propKey)}
                 </span>
-                <div key={propKey}>
+                <div key={propKey} onMouseOver={() => {}}>
                   {!isConnected && (
                     <NodeGenericInputField
-                      nodeId={id}
+                      className="mb-2 mt-1"
                       propKey={propKey}
                       propSchema={propSchema}
                       currentValue={getValue(propKey)}
@@ -221,9 +214,9 @@ export function CustomNode({
           const isAdvanced = propSchema.advanced;
           return (
             (isRequired || isAdvancedOpen || !isAdvanced) && (
-              <div key={propKey} data-id={`output-handle-${propKey}`}>
+              <div key={propKey} onMouseOver={() => {}}>
                 {propKey !== "value" ? (
-                  <span className="text-m green mb-0 text-gray-900">
+                  <span className="text-m green -mb-1 text-gray-900">
                     {propSchema.title || beautifyString(propKey)}
                   </span>
                 ) : (
@@ -237,7 +230,7 @@ export function CustomNode({
                 )}
                 {!isConnected && (
                   <NodeGenericInputField
-                    nodeId={id}
+                    className="mb-2 mt-1"
                     propKey={propKey}
                     propSchema={propSchema}
                     currentValue={getValue(propKey)}
@@ -260,23 +253,17 @@ export function CustomNode({
           const isAdvanced = propSchema.advanced;
           return (
             (isRequired || isAdvancedOpen || isConnected || !isAdvanced) && (
-              <div key={propKey} data-id={`input-handle-${propKey}`}>
-                {"credentials_provider" in propSchema ? (
-                  <span className="text-m green mb-0 text-gray-900">
-                    Credentials
-                  </span>
-                ) : (
-                  <NodeHandle
-                    keyName={propKey}
-                    isConnected={isConnected}
-                    isRequired={isRequired}
-                    schema={propSchema}
-                    side="left"
-                  />
-                )}
+              <div key={propKey} onMouseOver={() => {}}>
+                <NodeHandle
+                  keyName={propKey}
+                  isConnected={isConnected}
+                  isRequired={isRequired}
+                  schema={propSchema}
+                  side="left"
+                />
                 {!isConnected && (
                   <NodeGenericInputField
-                    nodeId={id}
+                    className="mb-2 mt-1"
                     propKey={propKey}
                     propSchema={propSchema}
                     currentValue={getValue(propKey)}
@@ -398,7 +385,7 @@ export function CustomNode({
   };
 
   const handleInputClick = (key: string) => {
-    console.debug(`Opening modal for key: ${key}`);
+    console.log(`Opening modal for key: ${key}`);
     setActiveKey(key);
     const value = getValue(key);
     setInputModalValue(
@@ -424,8 +411,16 @@ export function CustomNode({
     setIsOutputModalOpen(true);
   };
 
+  const handleHovered = () => {
+    setIsHovered(true);
+  };
+
+  const handleMouseLeave = () => {
+    setIsHovered(false);
+  };
+
   const deleteNode = useCallback(() => {
-    console.debug("Deleting node:", id);
+    console.log("Deleting node:", id);
 
     // Remove the node
     deleteElements({ nodes: [{ id }] });
@@ -462,7 +457,7 @@ export function CustomNode({
 
     history.push({
       type: "ADD_NODE",
-      payload: { node: { ...newNode, ...newNode.data } as CustomNodeData },
+      payload: { node: newNode },
       undo: () => deleteElements({ nodes: [{ id: newId }] }),
       redo: () => addNodes(newNode),
     });
@@ -505,53 +500,20 @@ export function CustomNode({
     "custom-node",
     "dark-theme",
     "rounded-xl",
+    "border",
     "bg-white/[.9]",
-    "border border-gray-300",
-    data.uiType === BlockUIType.NOTE ? "w-[300px]" : "w-[500px]",
-    data.uiType === BlockUIType.NOTE ? "bg-yellow-100" : "bg-white",
-    selected ? "shadow-2xl" : "",
+    "shadow-md",
   ]
     .filter(Boolean)
     .join(" ");
 
   const errorClass =
-    hasConfigErrors || hasOutputError ? "border-red-200 border-2" : "";
+    hasConfigErrors || hasOutputError ? "border-red-500 border-2" : "";
 
-  const statusClass = (() => {
-    if (hasConfigErrors || hasOutputError) return "border-red-200 border-4";
-    switch (data.status?.toLowerCase()) {
-      case "completed":
-        return "border-green-200 border-4";
-      case "running":
-        return "border-yellow-200 border-4";
-      case "failed":
-        return "border-red-200 border-4";
-      case "incomplete":
-        return "border-purple-200 border-4";
-      case "queued":
-        return "border-cyan-200 border-4";
-      default:
-        return "";
-    }
-  })();
-
-  const statusBackgroundClass = (() => {
-    if (hasConfigErrors || hasOutputError) return "bg-red-200";
-    switch (data.status?.toLowerCase()) {
-      case "completed":
-        return "bg-green-200";
-      case "running":
-        return "bg-yellow-200";
-      case "failed":
-        return "bg-red-200";
-      case "incomplete":
-        return "bg-purple-200";
-      case "queued":
-        return "bg-cyan-200";
-      default:
-        return "";
-    }
-  })();
+  const statusClass =
+    hasConfigErrors || hasOutputError
+      ? "failed"
+      : (data.status?.toLowerCase() ?? "");
 
   const hasAdvancedFields =
     data.inputSchema &&
@@ -571,213 +533,115 @@ export function CustomNode({
           value === inputValues[key] || (!value && !inputValues[key]),
       ),
     );
+  console.debug(`Block cost ${inputValues}|${data.blockCosts}=${blockCost}`);
 
-  const LineSeparator = () => (
-    <div className="bg-white pt-6">
-      <Separator.Root className="h-[1px] w-full bg-gray-300"></Separator.Root>
-    </div>
-  );
-
-  const ContextMenuContent = () => (
-    <ContextMenu.Content className="z-10 rounded-xl border bg-white p-1 shadow-md">
-      <ContextMenu.Item
-        onSelect={copyNode}
-        className="flex cursor-pointer items-center rounded-md px-3 py-2 hover:bg-gray-100"
-      >
-        <CopyIcon className="mr-2 h-5 w-5" />
-        <span>Copy</span>
-      </ContextMenu.Item>
-      <ContextMenu.Separator className="my-1 h-px bg-gray-300" />
-      <ContextMenu.Item
-        onSelect={deleteNode}
-        className="flex cursor-pointer items-center rounded-md px-3 py-2 text-red-500 hover:bg-gray-100"
-      >
-        <TrashIcon className="mr-2 h-5 w-5 text-red-500" />
-        <span>Delete</span>
-      </ContextMenu.Item>
-    </ContextMenu.Content>
-  );
-
-  const onContextButtonTrigger = (e: React.MouseEvent) => {
-    e.preventDefault();
-    const rect = e.currentTarget.getBoundingClientRect();
-    const event = new MouseEvent("contextmenu", {
-      bubbles: true,
-      clientX: rect.left + rect.width / 2,
-      clientY: rect.top + rect.height / 2,
-    });
-    e.currentTarget.dispatchEvent(event);
-  };
-
-  const stripeColor = getPrimaryCategoryColor(data.categories);
-
-  const nodeContent = () => (
+  return (
     <div
-      className={`${blockClasses} ${errorClass} ${statusClass}`}
+      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}`}
-      z-index={1}
     >
-      {/* Header */}
       <div
-        className={`flex h-24 border-b border-gray-300 ${data.uiType === BlockUIType.NOTE ? "bg-yellow-100" : "bg-white"} items-center rounded-t-xl`}
+        className={`mb-2 p-3 ${data.uiType === BlockUIType.NOTE ? "bg-yellow-100" : getPrimaryCategoryColor(data.categories)} rounded-t-xl`}
       >
-        {/* Color Stripe */}
-        <div className={`-ml-px h-full w-3 rounded-tl-xl ${stripeColor}`}></div>
-
-        <div className="flex w-full flex-col">
-          <div className="flex flex-row items-center justify-between">
-            <div className="font-roboto px-3 text-lg font-semibold">
-              {beautifyString(
-                data.blockType?.replace(/Block$/, "") || data.title,
-              )}
-            </div>
+        <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>
-          {blockCost && (
-            <div className="px-3 text-base font-light">
-              <span className="ml-auto flex items-center">
-                <IconCoin />{" "}
-                <span className="m-1 font-medium">{blockCost.cost_amount}</span>{" "}
-                credits/{blockCost.cost_type}
-              </span>
-            </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>
-        {data.categories.map((category) => (
-          <Badge
-            key={category.category}
-            variant="outline"
-            className={`mr-5 ${getPrimaryCategoryColor([category])} whitespace-nowrap rounded-xl border border-gray-300 opacity-50`}
-          >
-            {beautifyString(category.category.toLowerCase())}
-          </Badge>
-        ))}
-        <button
-          aria-label="Options"
-          className="mr-2 cursor-pointer rounded-full border-none bg-transparent p-1 hover:bg-gray-100"
-          onClick={onContextButtonTrigger}
-        >
-          <DotsVerticalIcon className="h-5 w-5" />
-        </button>
-
-        <ContextMenuContent />
       </div>
-      {/* Body */}
-      <div className="ml-5 mt-6 rounded-b-xl">
-        {/* Input Handles */}
-        {data.uiType !== BlockUIType.NOTE ? (
-          <div
-            className="flex w-fit items-start justify-between"
-            data-id="input-handles"
-          >
-            <div>
-              {data.inputSchema &&
-                generateInputHandles(data.inputSchema, data.uiType)}
-            </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>
-        )}
-
-        {/* Advanced Settings */}
-        {data.uiType !== BlockUIType.NOTE && hasAdvancedFields && (
-          <>
-            <LineSeparator />
-            <div className="flex items-center justify-between pt-6">
-              Advanced
-              <Switch
-                onCheckedChange={toggleAdvancedSettings}
-                checked={isAdvancedOpen}
-                className="mr-5"
-              />
-            </div>
-          </>
-        )}
-        {/* Output Handles */}
-        {data.uiType !== BlockUIType.NOTE && (
-          <>
-            <LineSeparator />
-            <div className="flex items-start justify-end rounded-b-xl pb-2 pr-2 pt-6">
-              <div className="flex-none">
-                {data.outputSchema &&
-                  generateOutputHandles(data.outputSchema, data.uiType)}
-              </div>
-            </div>
-          </>
-        )}
-      </div>
-      {/* End Body */}
-      {/* Footer */}
-      <div className="flex rounded-b-xl">
-        {/* Display Outputs  */}
-        {isOutputOpen && data.uiType !== BlockUIType.NOTE && (
-          <div
-            data-id="latest-output"
-            className={cn(
-              "nodrag w-full overflow-hidden break-words",
-              statusBackgroundClass,
-            )}
-          >
-            {(data.executionResults?.length ?? 0) > 0 ? (
-              <div className="mt-0 rounded-b-xl bg-gray-50">
-                <LineSeparator />
-                <NodeOutputs
-                  title="Latest Output"
-                  truncateLongData
-                  data={data.executionResults!.at(-1)?.data || {}}
-                />
-                <div className="flex justify-end">
-                  <Button
-                    variant="ghost"
-                    onClick={handleOutputClick}
-                    className="border border-gray-300"
-                  >
-                    View More
-                  </Button>
-                </div>
-              </div>
-            ) : (
-              <div className="mt-0 min-h-4 rounded-b-xl bg-white"></div>
-            )}
-            <div
-              className={cn(
-                "flex min-h-12 items-center justify-end",
-                statusBackgroundClass,
-              )}
-            >
-              <Badge
-                variant="default"
-                data-id={`badge-${id}-${data.status}`}
-                className={cn(
-                  "mr-4 flex min-w-[114px] items-center justify-center rounded-3xl text-center text-xs font-semibold",
-                  hasConfigErrors || hasOutputError
-                    ? "border-red-600 bg-red-600 text-white"
-                    : {
-                        "border-green-600 bg-green-600 text-white":
-                          data.status === "COMPLETED",
-                        "border-yellow-600 bg-yellow-600 text-white":
-                          data.status === "RUNNING",
-                        "border-red-600 bg-red-600 text-white":
-                          data.status === "FAILED",
-                        "border-blue-600 bg-blue-600 text-white":
-                          data.status === "QUEUED",
-                        "border-gray-600 bg-gray-600 font-black":
-                          data.status === "INCOMPLETE",
-                      },
-                )}
-              >
-                {hasConfigErrors || hasOutputError
-                  ? "Error"
-                  : data.status
-                    ? beautifyString(data.status)
-                    : "Not Run"}
-              </Badge>
-            </div>
+          <div className="flex-none">
+            {data.outputSchema &&
+              generateOutputHandles(data.outputSchema, data.uiType)}
           </div>
-        )}
-      </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}
@@ -793,10 +657,4 @@ export function CustomNode({
       />
     </div>
   );
-
-  return (
-    <ContextMenu.Root>
-      <ContextMenu.Trigger>{nodeContent()}</ContextMenu.Trigger>
-    </ContextMenu.Root>
-  );
 }

autogpt_platform/autogpt_builder/src/components/DataTable.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { beautifyString } from "@/lib/utils";
 import { Button } from "./ui/button";
 import {
@@ -11,7 +10,6 @@ import {
 } from "./ui/table";
 import { Clipboard } from "lucide-react";
 import { useToast } from "./ui/use-toast";
-import { ContentRenderer } from "./ui/render";
 
 type DataTableProps = {
   title?: string;
@@ -53,7 +51,7 @@ export default function DataTable({
                 {beautifyString(key)}
               </TableCell>
               <TableCell className="cursor-text">
-                <div className="flex min-h-9 items-center whitespace-pre-wrap">
+                <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"
@@ -64,7 +62,7 @@ export default function DataTable({
                         value
                           .map((i) =>
                             typeof i === "object"
-                              ? JSON.stringify(i, null, 2)
+                              ? JSON.stringify(i)
                               : String(i),
                           )
                           .join(", "),
@@ -74,15 +72,15 @@ export default function DataTable({
                   >
                     <Clipboard size={18} />
                   </Button>
-                  {value.map((item, index) => (
-                    <React.Fragment key={index}>
-                      <ContentRenderer
-                        value={item}
-                        truncateLongData={truncateLongData}
-                      />
-                      {index < value.length - 1 && ", "}
-                    </React.Fragment>
-                  ))}
+                  {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>

autogpt_platform/autogpt_builder/src/components/Flow.tsx

@@ -26,30 +26,29 @@ import {
 import "@xyflow/react/dist/style.css";
 import { CustomNode } from "./CustomNode";
 import "./flow.css";
-import { BlockUIType, Link } from "@/lib/autogpt-server-api";
-import {
-  getTypeColor,
-  filterBlocksByType,
-  findNewlyAddedBlockCoordinates,
-} from "@/lib/utils";
+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 { IconUndo2, IconRedo2 } from "@/components/ui/icons";
+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";
-import PrimaryActionBar from "@/components/PrimaryActionButton";
-import { useToast } from "@/components/ui/use-toast";
-import { forceLoad } from "@sentry/nextjs";
-import { useCopyPaste } from "../hooks/useCopyPaste";
 
 // 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
@@ -61,15 +60,6 @@ type FlowContextType = {
   getNextNodeId: () => string;
 };
 
-export type NodeDimension = {
-  [nodeId: string]: {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-  };
-};
-
 export const FlowContext = createContext<FlowContextType | null>(null);
 
 const FlowEditor: React.FC<{
@@ -77,14 +67,8 @@ const FlowEditor: React.FC<{
   template?: boolean;
   className?: string;
 }> = ({ flowID, template, className }) => {
-  const {
-    addNodes,
-    addEdges,
-    getNode,
-    deleteElements,
-    updateNode,
-    setViewport,
-  } = useReactFlow<CustomNode, CustomEdge>();
+  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[]>([]);
@@ -112,45 +96,39 @@ const FlowEditor: React.FC<{
 
   const router = useRouter();
   const pathname = usePathname();
-  const params = useSearchParams();
   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);
-  // State to control if save popover should be pinned open
-  const [pinSavePopover, setPinSavePopover] = useState(false);
 
   const runnerUIRef = useRef<RunnerUIWrapperRef>(null);
 
-  const { toast } = useToast();
-
-  const TUTORIAL_STORAGE_KEY = "shepherd-tour";
-
-  // It stores the dimension of all nodes with position as well
-  const [nodeDimensions, setNodeDimensions] = useState<NodeDimension>({});
-
   useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+
+    // If resetting tutorial
     if (params.get("resetTutorial") === "true") {
-      localStorage.removeItem(TUTORIAL_STORAGE_KEY);
+      localStorage.removeItem("shepherd-tour"); // Clear tutorial flag
       router.push(pathname);
-    } else if (!localStorage.getItem(TUTORIAL_STORAGE_KEY)) {
-      const emptyNodes = (forceRemove: boolean = false) =>
-        forceRemove ? (setNodes([]), setEdges([]), true) : nodes.length === 0;
-      startTutorial(emptyNodes, setPinBlocksPopover, setPinSavePopover);
-      localStorage.setItem(TUTORIAL_STORAGE_KEY, "yes");
+    } 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,
-    router,
-    pathname,
-    params,
-    setEdges,
-    setNodes,
-    nodes.length,
-  ]);
+  }, [availableNodes, tutorialStarted, router, pathname]);
 
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
@@ -424,36 +402,16 @@ const FlowEditor: React.FC<{
         return;
       }
 
-      /*
-       Calculate a position to the right of the newly added block, allowing for some margin.
-       If adding to the right side causes the new block to collide with an existing block, attempt to place it at the bottom or left.
-       Why not the top? Because the height of the new block is unknown.
-       If it still collides, run a loop to find the best position where it does not collide.
-       Then, adjust the canvas to center on the newly added block.
-       Note: The width is known, e.g., w = 300px for a note and w = 500px for others, but the height is dynamic.
-       */
-
-      // Alternative: We could also use D3 force, Intersection for this (React flow Pro examples)
-
-      const viewportCoordinates =
-        nodeDimensions && Object.keys(nodeDimensions).length > 0
-          ? // we will get all the dimension of nodes, then store
-            findNewlyAddedBlockCoordinates(
-              nodeDimensions,
-              (nodeSchema.uiType == BlockUIType.NOTE ? 300 : 500) / zoom,
-              60 / zoom,
-              zoom,
-            )
-          : // we will get all the dimension of nodes, then store
-            {
-              x: (window.innerWidth / 2 - x) / zoom,
-              y: (window.innerHeight / 2 - y) / zoom,
-            };
+      // 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: viewportCoordinates, // Set the position to the calculated viewport center
+        position: viewportCenter, // Set the position to the calculated viewport center
         data: {
           blockType: nodeType,
           blockCosts: nodeSchema.costs,
@@ -475,28 +433,17 @@ const FlowEditor: React.FC<{
       setNodeId((prevId) => prevId + 1);
       clearNodesStatusAndOutput(); // Clear status and output when a new node is added
 
-      setViewport(
-        {
-          x: -viewportCoordinates.x * zoom + window.innerWidth / 2,
-          y: -viewportCoordinates.y * zoom + window.innerHeight / 2 - 100,
-          zoom: 0.8,
-        },
-        { duration: 500 },
-      );
-
       history.push({
         type: "ADD_NODE",
-        payload: { node: { ...newNode, ...newNode.data } },
+        payload: { node: newNode.data },
         undo: () => deleteElements({ nodes: [{ id: newNode.id }] }),
         redo: () => addNodes(newNode),
       });
     },
     [
       nodeId,
-      setViewport,
       availableNodes,
       addNodes,
-      nodeDimensions,
       deleteElements,
       clearNodesStatusAndOutput,
       x,
@@ -505,38 +452,6 @@ const FlowEditor: React.FC<{
     ],
   );
 
-  const findNodeDimensions = useCallback(() => {
-    const newNodeDimensions: NodeDimension = nodes.reduce((acc, node) => {
-      const nodeElement = document.querySelector(
-        `[data-id="custom-node-${node.id}"]`,
-      );
-      if (nodeElement) {
-        const rect = nodeElement.getBoundingClientRect();
-        const { left, top, width, height } = rect;
-
-        // Convert screen coordinates to flow coordinates
-        const flowX = (left - x) / zoom;
-        const flowY = (top - y) / zoom;
-        const flowWidth = width / zoom;
-        const flowHeight = height / zoom;
-
-        acc[node.id] = {
-          x: flowX,
-          y: flowY,
-          width: flowWidth,
-          height: flowHeight,
-        };
-      }
-      return acc;
-    }, {} as NodeDimension);
-
-    setNodeDimensions(newNodeDimensions);
-  }, [nodes, x, y, zoom]);
-
-  useEffect(() => {
-    findNodeDimensions();
-  }, [nodes, findNodeDimensions]);
-
   const handleUndo = () => {
     history.undo();
   };
@@ -545,8 +460,6 @@ const FlowEditor: React.FC<{
     history.redo();
   };
 
-  const handleCopyPaste = useCopyPaste(getNextNodeId);
-
   const handleKeyDown = useCallback(
     (event: KeyboardEvent) => {
       // Prevent copy/paste if any modal is open or if the focus is on an input element
@@ -558,9 +471,68 @@ const FlowEditor: React.FC<{
 
       if (isAnyModalOpen || isInputField) return;
 
-      handleCopyPaste(event);
+      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, handleCopyPaste],
+    [
+      isAnyModalOpen,
+      nodes,
+      edges,
+      copiedNodes,
+      setNodes,
+      addNodes,
+      copiedEdges,
+      addEdges,
+      nodeId,
+    ],
   );
 
   useEffect(() => {
@@ -585,6 +557,23 @@ const FlowEditor: React.FC<{
       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 (
@@ -610,49 +599,21 @@ const FlowEditor: React.FC<{
         >
           <Controls />
           <Background />
-          <ControlPanel
-            className="absolute z-10"
-            controls={editorControls}
-            topChildren={
-              <BlocksControl
-                pinBlocksPopover={pinBlocksPopover} // Pass the state to BlocksControl
-                blocks={availableNodes}
-                addBlock={addNode}
-              />
-            }
-            botChildren={
-              <SaveControl
-                agentMeta={savedAgent}
-                onSave={(isTemplate) => requestSave(isTemplate ?? false)}
-                agentDescription={agentDescription}
-                onDescriptionChange={setAgentDescription}
-                agentName={agentName}
-                onNameChange={setAgentName}
-                pinSavePopover={pinSavePopover}
-              />
-            }
-          ></ControlPanel>
-          <PrimaryActionBar
-            onClickAgentOutputs={() => runnerUIRef.current?.openRunnerOutput()}
-            onClickRunAgent={() => {
-              if (!savedAgent) {
-                toast({
-                  title: `Please save the agent using the button in the left sidebar before running it.`,
-                  duration: 2000,
-                });
-                return;
-              }
-              if (!isRunning) {
-                runnerUIRef.current?.runOrOpenInput();
-              } else {
-                requestStopRun();
-              }
-            }}
-            isDisabled={!savedAgent}
-            isRunning={isRunning}
-            requestStopRun={requestStopRun}
-            runAgentTooltip={!isRunning ? "Run Agent" : "Stop Agent"}
-          />
+          <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

autogpt_platform/autogpt_builder/src/components/NavBar.tsx

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

autogpt_platform/autogpt_builder/src/components/NodeHandle.tsx

@@ -31,27 +31,20 @@ const NodeHandle: FC<HandleProps> = ({
   const typeClass = `text-sm ${getTypeTextColor(schema.type || "any")} ${side === "left" ? "text-left" : "text-right"}`;
 
   const label = (
-    <div className="flex flex-grow flex-row">
-      <span className="text-m green flex items-end pr-2 text-gray-900">
-        {schema.title || beautifyString(keyName.toLowerCase())}
+    <div className="flex flex-grow flex-col">
+      <span className="text-m green -mb-1 text-gray-900">
+        {schema.title || beautifyString(keyName)}
         {isRequired ? "*" : ""}
       </span>
-      <span className={`${typeClass} flex items-end`}>
-        ({typeName[schema.type as keyof typeof typeName] || "any"})
-      </span>
+      <span className={typeClass}>{typeName[schema.type] || "any"}</span>
     </div>
   );
 
-  const Dot = ({ className = "" }) => {
-    const color = isConnected
-      ? getTypeBgColor(schema.type || "any")
-      : "border-gray-300";
-    return (
-      <div
-        className={`${className} ${color} m-1 h-4 w-4 rounded-full border-2 bg-white transition-colors duration-100 group-hover:bg-gray-300`}
-      />
-    );
-  };
+  const dot = (
+    <div
+      className={`m-1 h-4 w-4 border-2 bg-white ${isConnected ? getTypeBgColor(schema.type || "any") : "border-gray-300"} rounded-full transition-colors duration-100 group-hover:bg-gray-300`}
+    />
+  );
 
   if (side === "left") {
     return (
@@ -60,10 +53,10 @@ const NodeHandle: FC<HandleProps> = ({
           type="target"
           position={Position.Left}
           id={keyName}
-          className="-ml-[26px]"
+          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 className={`-ml-2 mr-2`} />
+            {dot}
             {label}
           </div>
         </Handle>
@@ -81,7 +74,7 @@ const NodeHandle: FC<HandleProps> = ({
         >
           <div className="pointer-events-none flex items-center">
             {label}
-            <Dot />
+            {dot}
           </div>
         </Handle>
       </div>

autogpt_platform/autogpt_builder/src/components/OutputModalComponent.tsx

@@ -26,7 +26,7 @@ const OutputModalComponent: FC<OutputModalProps> = ({
     <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 p-2">
+        <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} />

autogpt_platform/autogpt_builder/src/components/ProfileDropdown.tsx

@@ -42,11 +42,7 @@ const ProfileDropdown = () => {
             Admin Dashboard
           </DropdownMenuItem>
         )}
-        <DropdownMenuItem
-          onClick={() =>
-            supabase?.auth.signOut().then(() => router.replace("/login"))
-          }
-        >
+        <DropdownMenuItem onClick={() => supabase?.auth.signOut()}>
           Log out
         </DropdownMenuItem>
       </DropdownMenuContent>

autogpt_platform/autogpt_builder/src/components/RunnerUIWrapper.tsx

@@ -8,7 +8,7 @@ import RunnerInputUI from "./runner-ui/RunnerInputUI";
 import RunnerOutputUI from "./runner-ui/RunnerOutputUI";
 import { Node } from "@xyflow/react";
 import { filterBlocksByType } from "@/lib/utils";
-import { BlockIORootSchema, BlockUIType } from "@/lib/autogpt-server-api/types";
+import { BlockIORootSchema } from "@/lib/autogpt-server-api/types";
 
 interface RunnerUIWrapperProps {
   nodes: Node[];
@@ -31,12 +31,12 @@ const RunnerUIWrapper = forwardRef<RunnerUIWrapperRef, RunnerUIWrapperProps>(
     const getBlockInputsAndOutputs = useCallback(() => {
       const inputBlocks = filterBlocksByType(
         nodes,
-        (node) => node.data.uiType === BlockUIType.INPUT,
+        (node) => node.data.block_id === "c0a8e994-ebf1-4a9c-a4d8-89d09c86741b",
       );
 
       const outputBlocks = filterBlocksByType(
         nodes,
-        (node) => node.data.uiType === BlockUIType.OUTPUT,
+        (node) => node.data.block_id === "363ae599-353e-4804-937e-b2ee3cef3da4",
       );
 
       const inputs = inputBlocks.map((node) => ({

autogpt_platform/autogpt_builder/src/components/TallyPopup.tsx

@@ -1,12 +1,10 @@
 "use client";
 import React, { useEffect, useState } from "react";
 import { Button } from "./ui/button";
-import { QuestionMarkCircledIcon } from "@radix-ui/react-icons";
-import { useRouter } from "next/navigation";
+import { IconMegaphone } from "@/components/ui/icons";
 
 const TallyPopupSimple = () => {
   const [isFormVisible, setIsFormVisible] = useState(false);
-  const router = useRouter();
 
   useEffect(() => {
     // Load Tally script
@@ -44,26 +42,22 @@ const TallyPopupSimple = () => {
   }
 
   const resetTutorial = () => {
-    router.push("/build?resetTutorial=true");
+    const url = `${window.location.origin}/build?resetTutorial=true`;
+    window.location.href = url;
   };
 
   return (
-    <div className="fixed bottom-1 right-6 z-50 hidden items-center gap-4 p-3 transition-all duration-300 ease-in-out md:flex">
-      <Button
-        variant="default"
-        onClick={resetTutorial}
-        className="font-inter mb-0 h-14 w-28 rounded-2xl bg-[rgba(65,65,64,1)] text-left text-lg font-medium leading-6"
-      >
+    <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
-        className="h-14 w-14 rounded-2xl bg-[rgba(65,65,64,1)]"
         variant="default"
         data-tally-open="3yx2L0"
         data-tally-emoji-text="👋"
         data-tally-emoji-animation="wave"
       >
-        <QuestionMarkCircledIcon className="h-6 w-6" />
+        <IconMegaphone size="lg" />
         <span className="sr-only">Reach Out</span>
       </Button>
     </div>

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

@@ -46,11 +46,11 @@ export default async function AdminFeaturedAgentsControl({
         <h3 className="text-lg font-semibold">Featured Agent Controls</h3>
         <AdminAddFeaturedAgentDialog
           categories={categories.unique_categories}
-          agents={notFeaturedAgents.items}
+          agents={notFeaturedAgents.agents}
         />
       </div>
       <FeaturedAgentsTable
-        agents={agents.items}
+        agents={agents.agents}
         globalActions={[
           {
             component: <Button>Remove</Button>,

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

@@ -1,6 +1,5 @@
 "use server";
 import MarketplaceAPI from "@/lib/marketplace-api";
-import ServerSideMarketplaceAPI from "@/lib/marketplace-api/server-client";
 import { revalidatePath } from "next/cache";
 import * as Sentry from "@sentry/nextjs";
 
@@ -13,7 +12,7 @@ export async function approveAgent(
     "approveAgent",
     {},
     async () => {
-      const api = new ServerSideMarketplaceAPI();
+      const api = new MarketplaceAPI();
       await api.approveAgentSubmission(agentId, version, comment);
       console.debug(`Approving agent ${agentId}`);
       revalidatePath("/marketplace");
@@ -30,7 +29,7 @@ export async function rejectAgent(
     "rejectAgent",
     {},
     async () => {
-      const api = new ServerSideMarketplaceAPI();
+      const api = new MarketplaceAPI();
       await api.rejectAgentSubmission(agentId, version, comment);
       console.debug(`Rejecting agent ${agentId}`);
       revalidatePath("/marketplace");
@@ -43,7 +42,7 @@ export async function getReviewableAgents() {
     "getReviewableAgents",
     {},
     async () => {
-      const api = new ServerSideMarketplaceAPI();
+      const api = new MarketplaceAPI();
       return api.getAgentSubmissions();
     },
   );
@@ -57,9 +56,9 @@ export async function getFeaturedAgents(
     "getFeaturedAgents",
     {},
     async () => {
-      const api = new ServerSideMarketplaceAPI();
+      const api = new MarketplaceAPI();
       const featured = await api.getFeaturedAgents(page, pageSize);
-      console.debug(`Getting featured agents ${featured.items.length}`);
+      console.debug(`Getting featured agents ${featured.agents.length}`);
       return featured;
     },
   );
@@ -70,7 +69,7 @@ export async function getFeaturedAgent(agentId: string) {
     "getFeaturedAgent",
     {},
     async () => {
-      const api = new ServerSideMarketplaceAPI();
+      const api = new MarketplaceAPI();
       const featured = await api.getFeaturedAgent(agentId);
       console.debug(`Getting featured agent ${featured.agentId}`);
       return featured;
@@ -86,7 +85,7 @@ export async function addFeaturedAgent(
     "addFeaturedAgent",
     {},
     async () => {
-      const api = new ServerSideMarketplaceAPI();
+      const api = new MarketplaceAPI();
       await api.addFeaturedAgent(agentId, categories);
       console.debug(`Adding featured agent ${agentId}`);
       revalidatePath("/marketplace");
@@ -102,7 +101,7 @@ export async function removeFeaturedAgent(
     "removeFeaturedAgent",
     {},
     async () => {
-      const api = new ServerSideMarketplaceAPI();
+      const api = new MarketplaceAPI();
       await api.removeFeaturedAgent(agentId, categories);
       console.debug(`Removing featured agent ${agentId}`);
       revalidatePath("/marketplace");
@@ -115,7 +114,7 @@ export async function getCategories() {
     "getCategories",
     {},
     async () => {
-      const api = new ServerSideMarketplaceAPI();
+      const api = new MarketplaceAPI();
       const categories = await api.getCategories();
       console.debug(
         `Getting categories ${categories.unique_categories.length}`,
@@ -133,9 +132,9 @@ export async function getNotFeaturedAgents(
     "getNotFeaturedAgents",
     {},
     async () => {
-      const api = new ServerSideMarketplaceAPI();
+      const api = new MarketplaceAPI();
       const agents = await api.getNotFeaturedAgents(page, pageSize);
-      console.debug(`Getting not featured agents ${agents.items.length}`);
+      console.debug(`Getting not featured agents ${agents.agents.length}`);
       return agents;
     },
   );

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

@@ -33,44 +33,6 @@ const formSchema = z.object({
   importAsTemplate: z.boolean(),
 });
 
-function updateBlockIDs(graph: Graph) {
-  // https://github.com/Significant-Gravitas/AutoGPT/issues/8223
-  const updatedBlockIDMap: Record<string, string> = {
-    "a1b2c3d4-5e6f-7g8h-9i0j-k1l2m3n4o5p6":
-      "436c3984-57fd-4b85-8e9a-459b356883bd",
-    "b2g2c3d4-5e6f-7g8h-9i0j-k1l2m3n4o5p6":
-      "0e50422c-6dee-4145-83d6-3a5a392f65de",
-    "c3d4e5f6-7g8h-9i0j-1k2l-m3n4o5p6q7r8":
-      "a0a69be1-4528-491c-a85a-a4ab6873e3f0",
-    "c3d4e5f6-g7h8-i9j0-k1l2-m3n4o5p6q7r8":
-      "32a87eab-381e-4dd4-bdb8-4c47151be35a",
-    "b2c3d4e5-6f7g-8h9i-0j1k-l2m3n4o5p6q7":
-      "87840993-2053-44b7-8da4-187ad4ee518c",
-    "h1i2j3k4-5l6m-7n8o-9p0q-r1s2t3u4v5w6":
-      "d0822ab5-9f8a-44a3-8971-531dd0178b6b",
-    "d3f4g5h6-1i2j-3k4l-5m6n-7o8p9q0r1s2t":
-      "df06086a-d5ac-4abb-9996-2ad0acb2eff7",
-    "h5e7f8g9-1b2c-3d4e-5f6g-7h8i9j0k1l2m":
-      "f5b0f5d0-1862-4d61-94be-3ad0fa772760",
-    "a1234567-89ab-cdef-0123-456789abcdef":
-      "4335878a-394e-4e67-adf2-919877ff49ae",
-    "f8e7d6c5-b4a3-2c1d-0e9f-8g7h6i5j4k3l":
-      "f66a3543-28d3-4ab5-8945-9b336371e2ce",
-    "b29c1b50-5d0e-4d9f-8f9d-1b0e6fcbf0h2":
-      "716a67b3-6760-42e7-86dc-18645c6e00fc",
-    "31d1064e-7446-4693-o7d4-65e5ca9110d1":
-      "cc10ff7b-7753-4ff2-9af6-9399b1a7eddc",
-    "c6731acb-4105-4zp1-bc9b-03d0036h370g":
-      "5ebe6768-8e5d-41e3-9134-1c7bd89a8d52",
-  };
-  graph.nodes
-    .filter((node) => node.block_id in updatedBlockIDMap)
-    .forEach((node) => {
-      node.block_id = updatedBlockIDMap[node.block_id];
-    });
-  return graph;
-}
-
 export const AgentImportForm: React.FC<
   React.FormHTMLAttributes<HTMLFormElement>
 > = ({ className, ...props }) => {
@@ -154,7 +116,6 @@ export const AgentImportForm: React.FC<
                             );
                           }
                           const agent = obj as Graph;
-                          updateBlockIDs(agent);
                           setAgentObject(agent);
                           form.setValue("agentName", agent.name);
                           form.setValue("agentDescription", agent.description);

autogpt_platform/autogpt_builder/src/components/customedge.css

@@ -42,7 +42,3 @@
 .react-flow__edges > svg:has(> g.selected) {
   z-index: 10 !important;
 }
-
-.react-flow__edgelabel-renderer {
-  z-index: 11 !important;
-}

autogpt_platform/autogpt_builder/src/components/customnode.css

@@ -4,6 +4,20 @@
   transition: border-color 0.3s ease-in-out;
 }
 
+.custom-node .mb-2 {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  min-height: 40px;
+  /* Increased to accommodate larger buttons */
+  margin-bottom: 10px;
+}
+
+.custom-node .mb-2 .text-lg {
+  flex-grow: 1;
+  margin-right: 10px;
+}
+
 /* Existing styles */
 .handle-container {
   display: flex;

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>
+  );
+};

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

@@ -25,8 +25,7 @@ export type Control = {
 
 interface ControlPanelProps {
   controls: Control[];
-  topChildren?: React.ReactNode;
-  botChildren?: React.ReactNode;
+  children?: React.ReactNode;
   className?: string;
 }
 
@@ -40,15 +39,14 @@ interface ControlPanelProps {
  */
 export const ControlPanel = ({
   controls,
-  topChildren,
-  botChildren,
+  children,
   className,
 }: ControlPanelProps) => {
   return (
-    <Card className={cn("m-4 mt-24 w-14", className)}>
+    <Card className={cn("w-14", className)}>
       <CardContent className="p-0">
-        <div className="flex flex-col items-center gap-3 rounded-xl py-3">
-          {topChildren}
+        <div className="rounded-radius flex flex-col items-center gap-8 px-2 sm:py-5">
+          {children}
           <Separator />
           {controls.map((control, index) => (
             <Tooltip key={index} delayDuration={500}>
@@ -69,8 +67,6 @@ export const ControlPanel = ({
               <TooltipContent side="right">{control.label}</TooltipContent>
             </Tooltip>
           ))}
-          <Separator />
-          {botChildren}
         </div>
       </CardContent>
     </Card>