Merge branch 'dev' into abhimanyuyadav/secrt-1938-remove-old-builder-code-and-unused-shared-components

(#12081)

### Changes 🏗️

This PR completes the migration from the legacy builder to the new Flow
editor by removing all legacy code and feature flags.

**Removed:**
- Old builder view toggle functionality (`BuilderViewTabs.tsx`)
- Legacy debug panel (`RightSidebar.tsx`)
- Feature flags: `NEW_FLOW_EDITOR` and `BUILDER_VIEW_SWITCH`
- `useBuilderView` hook and related view-switching logic

**Updated:**
- Simplified `build/page.tsx` to always render the new Flow editor
- Added CSS styling (`flow.css`) to properly render Phosphor icons in
React Flow handles

**Tests:**
- Skipped e2e test suite in `build.spec.ts` (legacy builder tests)
- Follow-up PR (#12082) will add new e2e tests for the Flow editor

### Checklist 📋

#### For code changes:

- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:
    - [x] Create a new flow and verify it loads correctly
    - [x] Add nodes and connections to verify basic functionality works
    - [x] Verify that node handles render correctly with the new CSS
- [x] Check that the UI is clean without the old debug panel or view
toggles

#### For configuration changes:

- [x] `.env.default` is updated or already compatible with my changes
- [x] `docker-compose.yml` is updated or already compatible with my
changes

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

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

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

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

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

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

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

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

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

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

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

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

.gitignore

@@ -3,7 +3,6 @@
 classic/original_autogpt/keys.py
 classic/original_autogpt/*.json
 auto_gpt_workspace/*
-.autogpt/
 *.mpeg
 .env
 # Root .env files
@@ -160,10 +159,6 @@ CURRENT_BULLETIN.md
 
 # AgBenchmark
 classic/benchmark/agbenchmark/reports/
-classic/reports/
-classic/direct_benchmark/reports/
-classic/.benchmark_workspaces/
-classic/direct_benchmark/.benchmark_workspaces/
 
 # Nodejs
 package-lock.json
@@ -182,11 +177,7 @@ autogpt_platform/backend/settings.py
 
 *.ign.*
 .test-contents
-**/.claude/settings.local.json
 .claude/settings.local.json
 CLAUDE.local.md
 /autogpt_platform/backend/logs
-
-# Test database
-test.db
-.next
+.next

.gitmodules

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

.pre-commit-config.yaml

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

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

@@ -2,7 +2,7 @@ import asyncio
 import logging
 import uuid
 from datetime import UTC, datetime
-from typing import Any
+from typing import Any, cast
 from weakref import WeakValueDictionary
 
 from openai.types.chat import (
@@ -104,6 +104,26 @@ class ChatSession(BaseModel):
     successful_agent_runs: dict[str, int] = {}
     successful_agent_schedules: dict[str, int] = {}
 
+    def add_tool_call_to_current_turn(self, tool_call: dict) -> None:
+        """Attach a tool_call to the current turn's assistant message.
+
+        Searches backwards for the most recent assistant message (stopping at
+        any user message boundary). If found, appends the tool_call to it.
+        Otherwise creates a new assistant message with the tool_call.
+        """
+        for msg in reversed(self.messages):
+            if msg.role == "user":
+                break
+            if msg.role == "assistant":
+                if not msg.tool_calls:
+                    msg.tool_calls = []
+                msg.tool_calls.append(tool_call)
+                return
+
+        self.messages.append(
+            ChatMessage(role="assistant", content="", tool_calls=[tool_call])
+        )
+
     @staticmethod
     def new(user_id: str) -> "ChatSession":
         return ChatSession(
@@ -172,6 +192,47 @@ class ChatSession(BaseModel):
             successful_agent_schedules=successful_agent_schedules,
         )
 
+    @staticmethod
+    def _merge_consecutive_assistant_messages(
+        messages: list[ChatCompletionMessageParam],
+    ) -> list[ChatCompletionMessageParam]:
+        """Merge consecutive assistant messages into single messages.
+
+        Long-running tool flows can create split assistant messages: one with
+        text content and another with tool_calls. Anthropic's API requires
+        tool_result blocks to reference a tool_use in the immediately preceding
+        assistant message, so these splits cause 400 errors via OpenRouter.
+        """
+        if len(messages) < 2:
+            return messages
+
+        result: list[ChatCompletionMessageParam] = [messages[0]]
+        for msg in messages[1:]:
+            prev = result[-1]
+            if prev.get("role") != "assistant" or msg.get("role") != "assistant":
+                result.append(msg)
+                continue
+
+            prev = cast(ChatCompletionAssistantMessageParam, prev)
+            curr = cast(ChatCompletionAssistantMessageParam, msg)
+
+            curr_content = curr.get("content") or ""
+            if curr_content:
+                prev_content = prev.get("content") or ""
+                prev["content"] = (
+                    f"{prev_content}\n{curr_content}" if prev_content else curr_content
+                )
+
+            curr_tool_calls = curr.get("tool_calls")
+            if curr_tool_calls:
+                prev_tool_calls = prev.get("tool_calls")
+                prev["tool_calls"] = (
+                    list(prev_tool_calls) + list(curr_tool_calls)
+                    if prev_tool_calls
+                    else list(curr_tool_calls)
+                )
+        return result
+
     def to_openai_messages(self) -> list[ChatCompletionMessageParam]:
         messages = []
         for message in self.messages:
@@ -258,7 +319,7 @@ class ChatSession(BaseModel):
                         name=message.name or "",
                     )
                 )
-        return messages
+        return self._merge_consecutive_assistant_messages(messages)
 
 
 async def _get_session_from_cache(session_id: str) -> ChatSession | None:

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

@@ -1,4 +1,16 @@
+from typing import cast
+
 import pytest
+from openai.types.chat import (
+    ChatCompletionAssistantMessageParam,
+    ChatCompletionMessageParam,
+    ChatCompletionToolMessageParam,
+    ChatCompletionUserMessageParam,
+)
+from openai.types.chat.chat_completion_message_tool_call_param import (
+    ChatCompletionMessageToolCallParam,
+    Function,
+)
 
 from .model import (
     ChatMessage,
@@ -117,3 +129,205 @@ async def test_chatsession_db_storage(setup_test_user, test_user_id):
                 loaded.tool_calls is not None
             ), f"Tool calls missing for {orig.role} message"
             assert len(orig.tool_calls) == len(loaded.tool_calls)
+
+
+# --------------------------------------------------------------------------- #
+#  _merge_consecutive_assistant_messages                                       #
+# --------------------------------------------------------------------------- #
+
+_tc = ChatCompletionMessageToolCallParam(
+    id="tc1", type="function", function=Function(name="do_stuff", arguments="{}")
+)
+_tc2 = ChatCompletionMessageToolCallParam(
+    id="tc2", type="function", function=Function(name="other", arguments="{}")
+)
+
+
+def test_merge_noop_when_no_consecutive_assistants():
+    """Messages without consecutive assistants are returned unchanged."""
+    msgs = [
+        ChatCompletionUserMessageParam(role="user", content="hi"),
+        ChatCompletionAssistantMessageParam(role="assistant", content="hello"),
+        ChatCompletionUserMessageParam(role="user", content="bye"),
+    ]
+    merged = ChatSession._merge_consecutive_assistant_messages(msgs)
+    assert len(merged) == 3
+    assert [m["role"] for m in merged] == ["user", "assistant", "user"]
+
+
+def test_merge_splits_text_and_tool_calls():
+    """The exact bug scenario: text-only assistant followed by tool_calls-only assistant."""
+    msgs = [
+        ChatCompletionUserMessageParam(role="user", content="build agent"),
+        ChatCompletionAssistantMessageParam(
+            role="assistant", content="Let me build that"
+        ),
+        ChatCompletionAssistantMessageParam(
+            role="assistant", content="", tool_calls=[_tc]
+        ),
+        ChatCompletionToolMessageParam(role="tool", content="ok", tool_call_id="tc1"),
+    ]
+    merged = ChatSession._merge_consecutive_assistant_messages(msgs)
+
+    assert len(merged) == 3
+    assert merged[0]["role"] == "user"
+    assert merged[2]["role"] == "tool"
+    a = cast(ChatCompletionAssistantMessageParam, merged[1])
+    assert a["role"] == "assistant"
+    assert a.get("content") == "Let me build that"
+    assert a.get("tool_calls") == [_tc]
+
+
+def test_merge_combines_tool_calls_from_both():
+    """Both consecutive assistants have tool_calls — they get merged."""
+    msgs: list[ChatCompletionAssistantMessageParam] = [
+        ChatCompletionAssistantMessageParam(
+            role="assistant", content="text", tool_calls=[_tc]
+        ),
+        ChatCompletionAssistantMessageParam(
+            role="assistant", content="", tool_calls=[_tc2]
+        ),
+    ]
+    merged = ChatSession._merge_consecutive_assistant_messages(msgs)  # type: ignore[arg-type]
+
+    assert len(merged) == 1
+    a = cast(ChatCompletionAssistantMessageParam, merged[0])
+    assert a.get("tool_calls") == [_tc, _tc2]
+    assert a.get("content") == "text"
+
+
+def test_merge_three_consecutive_assistants():
+    """Three consecutive assistants collapse into one."""
+    msgs: list[ChatCompletionAssistantMessageParam] = [
+        ChatCompletionAssistantMessageParam(role="assistant", content="a"),
+        ChatCompletionAssistantMessageParam(role="assistant", content="b"),
+        ChatCompletionAssistantMessageParam(
+            role="assistant", content="", tool_calls=[_tc]
+        ),
+    ]
+    merged = ChatSession._merge_consecutive_assistant_messages(msgs)  # type: ignore[arg-type]
+
+    assert len(merged) == 1
+    a = cast(ChatCompletionAssistantMessageParam, merged[0])
+    assert a.get("content") == "a\nb"
+    assert a.get("tool_calls") == [_tc]
+
+
+def test_merge_empty_and_single_message():
+    """Edge cases: empty list and single message."""
+    assert ChatSession._merge_consecutive_assistant_messages([]) == []
+
+    single: list[ChatCompletionMessageParam] = [
+        ChatCompletionUserMessageParam(role="user", content="hi")
+    ]
+    assert ChatSession._merge_consecutive_assistant_messages(single) == single
+
+
+# --------------------------------------------------------------------------- #
+#  add_tool_call_to_current_turn                                               #
+# --------------------------------------------------------------------------- #
+
+_raw_tc = {
+    "id": "tc1",
+    "type": "function",
+    "function": {"name": "f", "arguments": "{}"},
+}
+_raw_tc2 = {
+    "id": "tc2",
+    "type": "function",
+    "function": {"name": "g", "arguments": "{}"},
+}
+
+
+def test_add_tool_call_appends_to_existing_assistant():
+    """When the last assistant is from the current turn, tool_call is added to it."""
+    session = ChatSession.new(user_id="u")
+    session.messages = [
+        ChatMessage(role="user", content="hi"),
+        ChatMessage(role="assistant", content="working on it"),
+    ]
+    session.add_tool_call_to_current_turn(_raw_tc)
+
+    assert len(session.messages) == 2  # no new message created
+    assert session.messages[1].tool_calls == [_raw_tc]
+
+
+def test_add_tool_call_creates_assistant_when_none_exists():
+    """When there's no current-turn assistant, a new one is created."""
+    session = ChatSession.new(user_id="u")
+    session.messages = [
+        ChatMessage(role="user", content="hi"),
+    ]
+    session.add_tool_call_to_current_turn(_raw_tc)
+
+    assert len(session.messages) == 2
+    assert session.messages[1].role == "assistant"
+    assert session.messages[1].tool_calls == [_raw_tc]
+
+
+def test_add_tool_call_does_not_cross_user_boundary():
+    """A user message acts as a boundary — previous assistant is not modified."""
+    session = ChatSession.new(user_id="u")
+    session.messages = [
+        ChatMessage(role="assistant", content="old turn"),
+        ChatMessage(role="user", content="new message"),
+    ]
+    session.add_tool_call_to_current_turn(_raw_tc)
+
+    assert len(session.messages) == 3  # new assistant was created
+    assert session.messages[0].tool_calls is None  # old assistant untouched
+    assert session.messages[2].role == "assistant"
+    assert session.messages[2].tool_calls == [_raw_tc]
+
+
+def test_add_tool_call_multiple_times():
+    """Multiple long-running tool calls accumulate on the same assistant."""
+    session = ChatSession.new(user_id="u")
+    session.messages = [
+        ChatMessage(role="user", content="hi"),
+        ChatMessage(role="assistant", content="doing stuff"),
+    ]
+    session.add_tool_call_to_current_turn(_raw_tc)
+    # Simulate a pending tool result in between (like _yield_tool_call does)
+    session.messages.append(
+        ChatMessage(role="tool", content="pending", tool_call_id="tc1")
+    )
+    session.add_tool_call_to_current_turn(_raw_tc2)
+
+    assert len(session.messages) == 3  # user, assistant, tool — no extra assistant
+    assert session.messages[1].tool_calls == [_raw_tc, _raw_tc2]
+
+
+def test_to_openai_messages_merges_split_assistants():
+    """End-to-end: session with split assistants produces valid OpenAI messages."""
+    session = ChatSession.new(user_id="u")
+    session.messages = [
+        ChatMessage(role="user", content="build agent"),
+        ChatMessage(role="assistant", content="Let me build that"),
+        ChatMessage(
+            role="assistant",
+            content="",
+            tool_calls=[
+                {
+                    "id": "tc1",
+                    "type": "function",
+                    "function": {"name": "create_agent", "arguments": "{}"},
+                }
+            ],
+        ),
+        ChatMessage(role="tool", content="done", tool_call_id="tc1"),
+        ChatMessage(role="assistant", content="Saved!"),
+        ChatMessage(role="user", content="show me an example run"),
+    ]
+    openai_msgs = session.to_openai_messages()
+
+    # The two consecutive assistants at index 1,2 should be merged
+    roles = [m["role"] for m in openai_msgs]
+    assert roles == ["user", "assistant", "tool", "assistant", "user"]
+
+    # The merged assistant should have both content and tool_calls
+    merged = cast(ChatCompletionAssistantMessageParam, openai_msgs[1])
+    assert merged.get("content") == "Let me build that"
+    tc_list = merged.get("tool_calls")
+    assert tc_list is not None and len(list(tc_list)) == 1
+    assert list(tc_list)[0]["id"] == "tc1"

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

@@ -800,9 +800,13 @@ async def stream_chat_completion(
         # Build the messages list in the correct order
         messages_to_save: list[ChatMessage] = []
 
-        # Add assistant message with tool_calls if any
+        # Add assistant message with tool_calls if any.
+        # Use extend (not assign) to preserve tool_calls already added by
+        # _yield_tool_call for long-running tools.
         if accumulated_tool_calls:
-            assistant_response.tool_calls = accumulated_tool_calls
+            if not assistant_response.tool_calls:
+                assistant_response.tool_calls = []
+            assistant_response.tool_calls.extend(accumulated_tool_calls)
             logger.info(
                 f"Added {len(accumulated_tool_calls)} tool calls to assistant message"
             )
@@ -1404,13 +1408,9 @@ async def _yield_tool_call(
                 operation_id=operation_id,
             )
 
-            # Save assistant message with tool_call FIRST (required by LLM)
-            assistant_message = ChatMessage(
-                role="assistant",
-                content="",
-                tool_calls=[tool_calls[yield_idx]],
-            )
-            session.messages.append(assistant_message)
+            # Attach the tool_call to the current turn's assistant message
+            # (or create one if this is a tool-only response with no text).
+            session.add_tool_call_to_current_turn(tool_calls[yield_idx])
 
             # Then save pending tool result
             pending_message = ChatMessage(

autogpt_platform/frontend/src/app/(platform)/build/components/BuilderViewTabs/BuilderViewTabs.tsx

@@ -1,31 +0,0 @@
-"use client";
-
-import { Tabs, TabsList, TabsTrigger } from "@/components/__legacy__/ui/tabs";
-
-export type BuilderView = "old" | "new";
-
-export function BuilderViewTabs({
-  value,
-  onChange,
-}: {
-  value: BuilderView;
-  onChange: (value: BuilderView) => void;
-}) {
-  return (
-    <div className="pointer-events-auto fixed right-4 top-20 z-50">
-      <Tabs
-        value={value}
-        onValueChange={(v: string) => onChange(v as BuilderView)}
-      >
-        <TabsList className="w-fit bg-zinc-900">
-          <TabsTrigger value="old" className="text-gray-100">
-            Old
-          </TabsTrigger>
-          <TabsTrigger value="new" className="text-gray-100">
-            New
-          </TabsTrigger>
-        </TabsList>
-      </Tabs>
-    </div>
-  );
-}

autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/Flow.tsx

@@ -23,6 +23,9 @@ import { useCopyPaste } from "./useCopyPaste";
 import { useFlow } from "./useFlow";
 import { useFlowRealtime } from "./useFlowRealtime";
 
+import "@xyflow/react/dist/style.css";
+import "./flow.css";
+
 export const Flow = () => {
   const [{ flowID, flowExecutionID }] = useQueryStates({
     flowID: parseAsString,

autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/flow.css

@@ -0,0 +1,9 @@
+/* Reset default xyflow handle styles so custom Phosphor icon handles render correctly */
+.react-flow__handle {
+  background: transparent;
+  width: auto;
+  height: auto;
+  border: 0;
+  position: relative;
+  transform: none;
+}

autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/NewControlPanel.tsx

@@ -1,100 +1,30 @@
-// import { Separator } from "@/components/__legacy__/ui/separator";
 import { cn } from "@/lib/utils";
 import React, { memo } from "react";
 import { BlockMenu } from "./NewBlockMenu/BlockMenu/BlockMenu";
 import { useNewControlPanel } from "./useNewControlPanel";
-// import { NewSaveControl } from "../SaveControl/NewSaveControl";
-import { GraphExecutionID } from "@/lib/autogpt-server-api";
-// import { ControlPanelButton } from "../ControlPanelButton";
-// import { GraphSearchMenu } from "../GraphMenu/GraphMenu";
 import { Separator } from "@/components/__legacy__/ui/separator";
-import { Flag, useGetFlag } from "@/services/feature-flags/use-get-flag";
-import { CustomNode } from "../FlowEditor/nodes/CustomNode/CustomNode";
 import { NewSaveControl } from "./NewSaveControl/NewSaveControl";
 import { UndoRedoButtons } from "./UndoRedoButtons";
 
-export type Control = {
-  icon: React.ReactNode;
-  label: string;
-  disabled?: boolean;
-  onClick: () => void;
-};
+export const NewControlPanel = memo(() => {
+  useNewControlPanel({});
 
-export type NewControlPanelProps = {
-  flowExecutionID?: GraphExecutionID | undefined;
-  visualizeBeads?: "no" | "static" | "animate";
-  pinSavePopover?: boolean;
-  pinBlocksPopover?: boolean;
-  nodes?: CustomNode[];
-  onNodeSelect?: (nodeId: string) => void;
-  onNodeHover?: (nodeId: string) => void;
-};
-export const NewControlPanel = memo(
-  ({
-    flowExecutionID: _flowExecutionID,
-    visualizeBeads: _visualizeBeads,
-    pinSavePopover: _pinSavePopover,
-    pinBlocksPopover: _pinBlocksPopover,
-    nodes: _nodes,
-    onNodeSelect: _onNodeSelect,
-    onNodeHover: _onNodeHover,
-  }: NewControlPanelProps) => {
-    const _isGraphSearchEnabled = useGetFlag(Flag.GRAPH_SEARCH);
-
-    const {
-      // agentDescription,
-      // setAgentDescription,
-      // saveAgent,
-      // agentName,
-      // setAgentName,
-      // savedAgent,
-      // isSaving,
-      // isRunning,
-      // isStopping,
-    } = useNewControlPanel({});
-
-    return (
-      <section
-        className={cn(
-          "absolute left-4 top-10 z-10 overflow-hidden rounded-[1rem] border-none bg-white p-0 shadow-[0_1px_5px_0_rgba(0,0,0,0.1)]",
-        )}
-      >
-        <div className="flex flex-col items-center justify-center rounded-[1rem] p-0">
-          <BlockMenu />
-          {/* <Separator className="text-[#E1E1E1]" />
-        {isGraphSearchEnabled && (
-          <>
-            <GraphSearchMenu
-              nodes={nodes}
-              blockMenuSelected={blockMenuSelected}
-              setBlockMenuSelected={setBlockMenuSelected}
-              onNodeSelect={onNodeSelect}
-              onNodeHover={onNodeHover}
-            />
-            <Separator className="text-[#E1E1E1]" />
-          </>
-        )}
-        {controls.map((control, index) => (
-          <ControlPanelButton
-            key={index}
-            onClick={() => control.onClick()}
-            data-id={`control-button-${index}`}
-            data-testid={`blocks-control-${control.label.toLowerCase()}-button`}
-            disabled={control.disabled || false}
-            className="rounded-none"
-          >
-            {control.icon}
-          </ControlPanelButton>
-        ))} */}
-          <Separator className="text-[#E1E1E1]" />
-          <NewSaveControl />
-          <Separator className="text-[#E1E1E1]" />
-          <UndoRedoButtons />
-        </div>
-      </section>
-    );
-  },
-);
+  return (
+    <section
+      className={cn(
+        "absolute left-4 top-10 z-10 overflow-hidden rounded-[1rem] border-none bg-white p-0 shadow-[0_1px_5px_0_rgba(0,0,0,0.1)]",
+      )}
+    >
+      <div className="flex flex-col items-center justify-center rounded-[1rem] p-0">
+        <BlockMenu />
+        <Separator className="text-[#E1E1E1]" />
+        <NewSaveControl />
+        <Separator className="text-[#E1E1E1]" />
+        <UndoRedoButtons />
+      </div>
+    </section>
+  );
+});
 
 export default NewControlPanel;
 

autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/NewSearchGraph/GraphMenu/GraphMenu.tsx

@@ -1,4 +1,4 @@
-import { CustomNode } from "@/app/(platform)/build/components/legacy-builder/CustomNode/CustomNode";
+import { CustomNode } from "../../../FlowEditor/nodes/CustomNode/CustomNode";
 import {
   Popover,
   PopoverContent,

autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/NewSearchGraph/GraphMenu/useGraphMenu.ts

@@ -1,5 +1,5 @@
 import { useGraphSearch } from "../GraphMenuSearchBar/useGraphMenuSearchBar";
-import { CustomNode } from "@/app/(platform)/build/components/legacy-builder/CustomNode/CustomNode";
+import { CustomNode } from "../../../FlowEditor/nodes/CustomNode/CustomNode";
 
 interface UseGraphMenuProps {
   nodes: CustomNode[];

autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/NewSearchGraph/GraphMenuContent/GraphContent.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Separator } from "@/components/__legacy__/ui/separator";
 import { ScrollArea } from "@/components/__legacy__/ui/scroll-area";
-import { beautifyString, getPrimaryCategoryColor } from "@/lib/utils";
+import { beautifyString, categoryColorMap } from "@/lib/utils";
 import { SearchableNode } from "../GraphMenuSearchBar/useGraphMenuSearchBar";
 import { TextRenderer } from "@/components/__legacy__/ui/render";
 import {
@@ -73,14 +73,12 @@ export const GraphSearchContent: React.FC<GraphSearchContentProps> = ({
               }
 
               const nodeTitle =
-                node.data?.metadata?.customized_name ||
-                beautifyString(node.data?.blockType || "").replace(
-                  / Block$/,
-                  "",
-                );
-              const nodeType = beautifyString(
-                node.data?.blockType || "",
-              ).replace(/ Block$/, "");
+                (node.data?.metadata?.customized_name as string) ||
+                beautifyString(node.data?.title || "").replace(/ Block$/, "");
+              const nodeType = beautifyString(node.data?.title || "").replace(
+                / Block$/,
+                "",
+              );
 
               return (
                 <TooltipProvider key={node.id}>
@@ -100,7 +98,13 @@ export const GraphSearchContent: React.FC<GraphSearchContentProps> = ({
                         onMouseLeave={() => onNodeHover?.(null)}
                       >
                         <div
-                          className={`h-full w-3 rounded-l-[7px] ${getPrimaryCategoryColor(node.data?.categories)}`}
+                          className={`h-full w-3 rounded-l-[7px] ${
+                            (node.data?.categories?.[0]?.category &&
+                              categoryColorMap[
+                                node.data.categories[0].category
+                              ]) ||
+                            "bg-gray-300 dark:bg-slate-700"
+                          }`}
                         />
                         <div className="mx-3 flex flex-1 items-center justify-between">
                           <div className="mr-2 min-w-0">
@@ -129,9 +133,10 @@ export const GraphSearchContent: React.FC<GraphSearchContentProps> = ({
                         <div className="font-semibold">
                           Node Type: {nodeType}
                         </div>
-                        {node.data?.metadata?.customized_name && (
+                        {!!node.data?.metadata?.customized_name && (
                           <div className="text-xs text-gray-500">
-                            Custom Name: {node.data.metadata.customized_name}
+                            Custom Name:{" "}
+                            {String(node.data.metadata.customized_name)}
                           </div>
                         )}
                       </div>

autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/NewSearchGraph/GraphMenuSearchBar/useGraphMenuSearchBar.tsx

@@ -1,5 +1,5 @@
 import { useState, useMemo, useDeferredValue } from "react";
-import { CustomNode } from "@/app/(platform)/build/components/legacy-builder/CustomNode/CustomNode";
+import { CustomNode } from "../../../FlowEditor/nodes/CustomNode/CustomNode";
 import { beautifyString } from "@/lib/utils";
 import jaro from "jaro-winkler";
 
@@ -67,10 +67,10 @@ function calculateNodeScore(
   const nodeTitle = (node.data?.title || "").toLowerCase(); // This includes the ID
   const nodeId = (node.id || "").toLowerCase();
   const nodeDescription = (node.data?.description || "").toLowerCase();
-  const blockType = (node.data?.blockType || "").toLowerCase();
+  const blockType = (node.data?.title || "").toLowerCase();
   const beautifiedBlockType = beautifyString(blockType).toLowerCase();
-  const customizedName = (
-    node.data?.metadata?.customized_name || ""
+  const customizedName = String(
+    node.data?.metadata?.customized_name || "",
   ).toLowerCase();
 
   // Get input and output names with defensive checks

autogpt_platform/frontend/src/app/(platform)/build/components/NewControlPanel/useNewControlPanel.ts

@@ -1,54 +1,18 @@
-import { GraphID } from "@/lib/autogpt-server-api";
-import { useSearchParams } from "next/navigation";
 import { useState } from "react";
 
 export interface NewControlPanelProps {
-  // flowExecutionID: GraphExecutionID | undefined;
   visualizeBeads?: "no" | "static" | "animate";
 }
 
 export const useNewControlPanel = ({
-  // flowExecutionID,
   visualizeBeads: _visualizeBeads,
 }: NewControlPanelProps) => {
   const [blockMenuSelected, setBlockMenuSelected] = useState<
     "save" | "block" | "search" | ""
   >("");
-  const query = useSearchParams();
-  const _graphVersion = query.get("flowVersion");
-  const _graphVersionParsed = _graphVersion
-    ? parseInt(_graphVersion)
-    : undefined;
-
-  const _flowID = (query.get("flowID") as GraphID | null) ?? undefined;
-  // const {
-  //   agentDescription,
-  //   setAgentDescription,
-  //   saveAgent,
-  //   agentName,
-  //   setAgentName,
-  //   savedAgent,
-  //   isSaving,
-  //   isRunning,
-  //   isStopping,
-  // } = useAgentGraph(
-  //   flowID,
-  //   graphVersion,
-  //   flowExecutionID,
-  //   visualizeBeads !== "no",
-  // );
 
   return {
     blockMenuSelected,
     setBlockMenuSelected,
-    // agentDescription,
-    // setAgentDescription,
-    // saveAgent,
-    // agentName,
-    // setAgentName,
-    // savedAgent,
-    // isSaving,
-    // isRunning,
-    // isStopping,
   };
 };

autogpt_platform/frontend/src/app/(platform)/build/components/RIghtSidebar.tsx

@@ -1,83 +0,0 @@
-import { useMemo } from "react";
-
-import { Link } from "@/app/api/__generated__/models/link";
-import { useEdgeStore } from "../stores/edgeStore";
-import { useNodeStore } from "../stores/nodeStore";
-import { scrollbarStyles } from "@/components/styles/scrollbars";
-import { cn } from "@/lib/utils";
-import { customEdgeToLink } from "./helper";
-
-export const RightSidebar = () => {
-  const edges = useEdgeStore((s) => s.edges);
-  const nodes = useNodeStore((s) => s.nodes);
-
-  const backendLinks: Link[] = useMemo(
-    () => edges.map(customEdgeToLink),
-    [edges],
-  );
-
-  return (
-    <div
-      className={cn(
-        "flex h-full w-full flex-col border-l border-slate-200 bg-white p-4 dark:border-slate-700 dark:bg-slate-900",
-        scrollbarStyles,
-      )}
-    >
-      <div className="mb-4">
-        <h2 className="text-lg font-semibold text-slate-800 dark:text-slate-200">
-          Graph Debug Panel
-        </h2>
-      </div>
-
-      <div className="flex-1 overflow-y-auto">
-        <h3 className="mb-2 text-sm font-semibold text-slate-700 dark:text-slate-200">
-          Nodes ({nodes.length})
-        </h3>
-        <div className="mb-6 space-y-3">
-          {nodes.map((n) => (
-            <div
-              key={n.id}
-              className="rounded border p-2 text-xs dark:border-slate-700"
-            >
-              <div className="mb-1 font-medium">
-                #{n.id} {n.data?.title ? `– ${n.data.title}` : ""}
-              </div>
-              <div className="text-slate-500 dark:text-slate-400">
-                hardcodedValues
-              </div>
-              <pre className="mt-1 max-h-40 overflow-auto rounded bg-slate-50 p-2 dark:bg-slate-800">
-                {JSON.stringify(n.data?.hardcodedValues ?? {}, null, 2)}
-              </pre>
-            </div>
-          ))}
-        </div>
-
-        <h3 className="mb-2 text-sm font-semibold text-slate-700 dark:text-slate-200">
-          Links ({backendLinks.length})
-        </h3>
-        <div className="mb-6 space-y-3">
-          {backendLinks.map((l) => (
-            <div
-              key={l.id}
-              className="rounded border p-2 text-xs dark:border-slate-700"
-            >
-              <div className="font-medium">
-                {l.source_id}[{l.source_name}] → {l.sink_id}[{l.sink_name}]
-              </div>
-              <div className="mt-1 text-slate-500 dark:text-slate-400">
-                edge.id: {l.id}
-              </div>
-            </div>
-          ))}
-        </div>
-
-        <h4 className="mb-2 text-xs font-semibold text-slate-600 dark:text-slate-300">
-          Backend Links JSON
-        </h4>
-        <pre className="max-h-64 overflow-auto rounded bg-slate-50 p-2 text-[11px] dark:bg-slate-800">
-          {JSON.stringify(backendLinks, null, 2)}
-        </pre>
-      </div>
-    </div>
-  );
-};

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/BlocksControl.tsx

@@ -1,443 +0,0 @@
-import React, { useCallback, useMemo, useState, useDeferredValue } from "react";
-import { Card, CardContent, CardHeader } from "@/components/__legacy__/ui/card";
-import { Label } from "@/components/__legacy__/ui/label";
-import { Button } from "@/components/__legacy__/ui/button";
-import { Input } from "@/components/__legacy__/ui/input";
-import { TextRenderer } from "@/components/__legacy__/ui/render";
-import { ScrollArea } from "@/components/__legacy__/ui/scroll-area";
-import { CustomNode } from "@/app/(platform)/build/components/legacy-builder/CustomNode/CustomNode";
-import { beautifyString } from "@/lib/utils";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/__legacy__/ui/popover";
-import {
-  Block,
-  BlockIORootSchema,
-  BlockUIType,
-  GraphInputSchema,
-  GraphOutputSchema,
-  SpecialBlockID,
-} from "@/lib/autogpt-server-api";
-import { MagnifyingGlassIcon, PlusIcon } from "@radix-ui/react-icons";
-import { IconToyBrick } from "@/components/__legacy__/ui/icons";
-import { getPrimaryCategoryColor } from "@/lib/utils";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/atoms/Tooltip/BaseTooltip";
-import { GraphMeta } from "@/lib/autogpt-server-api";
-import jaro from "jaro-winkler";
-import { getV1GetSpecificGraph } from "@/app/api/__generated__/endpoints/graphs/graphs";
-import { okData } from "@/app/api/helpers";
-
-type _Block = Omit<Block, "inputSchema" | "outputSchema"> & {
-  uiKey?: string;
-  inputSchema: BlockIORootSchema | GraphInputSchema;
-  outputSchema: BlockIORootSchema | GraphOutputSchema;
-  hardcodedValues?: Record<string, any>;
-  _cached?: {
-    blockName: string;
-    beautifiedName: string;
-    description: string;
-  };
-};
-
-// Hook to preprocess blocks with cached expensive operations
-const useSearchableBlocks = (blocks: _Block[]): _Block[] => {
-  return useMemo(
-    () =>
-      blocks.map((block) => {
-        if (!block._cached) {
-          block._cached = {
-            blockName: block.name.toLowerCase(),
-            beautifiedName: beautifyString(block.name).toLowerCase(),
-            description: block.description.toLowerCase(),
-          };
-        }
-        return block;
-      }),
-    [blocks],
-  );
-};
-
-interface BlocksControlProps {
-  blocks: _Block[];
-  addBlock: (
-    id: string,
-    name: string,
-    hardcodedValues: Record<string, any>,
-  ) => void;
-  pinBlocksPopover: boolean;
-  flows: GraphMeta[];
-  nodes: CustomNode[];
-}
-
-/**
- * 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 function BlocksControl({
-  blocks: _blocks,
-  addBlock,
-  pinBlocksPopover,
-  flows,
-  nodes,
-}: BlocksControlProps) {
-  const [searchQuery, setSearchQuery] = useState("");
-  const deferredSearchQuery = useDeferredValue(searchQuery);
-  const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
-
-  const blocks = useSearchableBlocks(_blocks);
-
-  const graphHasWebhookNodes = nodes.some((n) =>
-    [BlockUIType.WEBHOOK, BlockUIType.WEBHOOK_MANUAL].includes(n.data.uiType),
-  );
-  const graphHasInputNodes = nodes.some(
-    (n) => n.data.uiType == BlockUIType.INPUT,
-  );
-
-  const filteredAvailableBlocks = useMemo(() => {
-    const blockList = blocks
-      .filter((b) => b.uiType !== BlockUIType.AGENT)
-      .sort((a, b) => a.name.localeCompare(b.name));
-
-    // Agent blocks are created from GraphMeta which doesn't include schemas.
-    // Schemas will be fetched on-demand when the block is actually added.
-    const agentBlockList = flows
-      .map((flow): _Block => {
-        return {
-          id: SpecialBlockID.AGENT,
-          name: flow.name,
-          description:
-            `Ver.${flow.version}` +
-            (flow.description ? ` | ${flow.description}` : ""),
-          categories: [{ category: "AGENT", description: "" }],
-          // Empty schemas - will be populated when block is added
-          inputSchema: { type: "object", properties: {} },
-          outputSchema: { type: "object", properties: {} },
-          staticOutput: false,
-          uiType: BlockUIType.AGENT,
-          costs: [],
-          uiKey: flow.id,
-          hardcodedValues: {
-            graph_id: flow.id,
-            graph_version: flow.version,
-            // Schemas will be fetched on-demand when block is added
-          },
-        };
-      })
-      .map(
-        (agentBlock): _Block => ({
-          ...agentBlock,
-          _cached: {
-            blockName: agentBlock.name.toLowerCase(),
-            beautifiedName: beautifyString(agentBlock.name).toLowerCase(),
-            description: agentBlock.description.toLowerCase(),
-          },
-        }),
-      );
-
-    return blockList
-      .concat(agentBlockList)
-      .map((block) => ({
-        block,
-        score: blockScoreForQuery(block, deferredSearchQuery),
-      }))
-      .filter(
-        ({ block, score }) =>
-          score > 0 &&
-          (!selectedCategory ||
-            block.categories.some((cat) => cat.category === selectedCategory)),
-      )
-      .sort((a, b) => b.score - a.score)
-      .map(({ block }) => ({
-        ...block,
-        notAvailable:
-          (block.uiType == BlockUIType.WEBHOOK &&
-            graphHasWebhookNodes &&
-            "Agents can only have one webhook-triggered block") ||
-          (block.uiType == BlockUIType.WEBHOOK &&
-            graphHasInputNodes &&
-            "Webhook-triggered blocks can't be used together with input blocks") ||
-          (block.uiType == BlockUIType.INPUT &&
-            graphHasWebhookNodes &&
-            "Input blocks can't be used together with a webhook-triggered block") ||
-          null,
-      }));
-  }, [
-    blocks,
-    flows,
-    selectedCategory,
-    deferredSearchQuery,
-    graphHasInputNodes,
-    graphHasWebhookNodes,
-  ]);
-
-  const resetFilters = useCallback(() => {
-    setSearchQuery("");
-    setSelectedCategory(null);
-  }, []);
-
-  // Handler to add a block, fetching graph data on-demand for agent blocks
-  const handleAddBlock = useCallback(
-    async (block: _Block & { notAvailable: string | null }) => {
-      if (block.notAvailable) return;
-
-      // For agent blocks, fetch the full graph to get schemas
-      if (block.uiType === BlockUIType.AGENT && block.hardcodedValues) {
-        const graphID = block.hardcodedValues.graph_id as string;
-        const graphVersion = block.hardcodedValues.graph_version as number;
-        const graphData = okData(
-          await getV1GetSpecificGraph(graphID, { version: graphVersion }),
-        );
-
-        if (graphData) {
-          addBlock(block.id, block.name, {
-            ...block.hardcodedValues,
-            input_schema: graphData.input_schema,
-            output_schema: graphData.output_schema,
-          });
-        } else {
-          // Fallback: add without schemas (will be incomplete)
-          console.error("Failed to fetch graph data for agent block");
-          addBlock(block.id, block.name, block.hardcodedValues || {});
-        }
-      } else {
-        addBlock(block.id, block.name, block.hardcodedValues || {});
-      }
-    },
-    [addBlock],
-  );
-
-  // Extract unique categories from blocks
-  const categories = useMemo(() => {
-    return Array.from(
-      new Set([
-        null,
-        ...blocks
-          .flatMap((block) => block.categories.map((cat) => cat.category))
-          .sort(),
-      ]),
-    );
-  }, [blocks]);
-
-  return (
-    <Popover
-      open={pinBlocksPopover ? true : undefined}
-      onOpenChange={(open) => open || resetFilters()}
-    >
-      <Tooltip delayDuration={500}>
-        <TooltipTrigger asChild>
-          <PopoverTrigger asChild>
-            <Button
-              variant="ghost"
-              size="icon"
-              data-id="blocks-control-popover-trigger"
-              data-testid="blocks-control-blocks-button"
-              name="Blocks"
-              className="dark:hover:bg-slate-800"
-            >
-              <IconToyBrick />
-            </Button>
-          </PopoverTrigger>
-        </TooltipTrigger>
-        <TooltipContent side="right">Blocks</TooltipContent>
-      </Tooltip>
-      <PopoverContent
-        side="right"
-        sideOffset={22}
-        align="start"
-        className="absolute -top-3 w-[17rem] rounded-xl border-none p-0 shadow-none md:w-[30rem]"
-        data-id="blocks-control-popover-content"
-      >
-        <Card className="p-3 pb-0 dark:bg-slate-900">
-          <CardHeader className="flex flex-col gap-x-8 gap-y-1 p-3 px-2">
-            <div className="items-center justify-between">
-              <Label
-                htmlFor="search-blocks"
-                className="whitespace-nowrap text-base font-bold text-black dark:text-white 2xl:text-xl"
-                data-id="blocks-control-label"
-                data-testid="blocks-control-blocks-label"
-              >
-                Blocks
-              </Label>
-            </div>
-            <div className="relative flex items-center">
-              <MagnifyingGlassIcon className="absolute m-2 h-5 w-5 text-gray-500 dark:text-gray-400" />
-              <Input
-                id="search-blocks"
-                type="text"
-                placeholder="Search blocks"
-                value={searchQuery}
-                onChange={(e) => setSearchQuery(e.target.value)}
-                className="rounded-lg px-8 py-5 dark:bg-slate-800 dark:text-white"
-                data-id="blocks-control-search-input"
-                autoComplete="off"
-              />
-            </div>
-            <div
-              className="mt-2 flex flex-wrap gap-2"
-              data-testid="blocks-categories-list"
-            >
-              {categories.map((category) => {
-                const color = getPrimaryCategoryColor([
-                  { category: category || "All", description: "" },
-                ]);
-                const colorClass =
-                  selectedCategory === category ? `${color}` : "";
-                return (
-                  <div
-                    key={category}
-                    data-testid="blocks-category"
-                    role="button"
-                    className={`cursor-pointer rounded-xl border px-2 py-2 text-xs font-medium dark:border-slate-700 dark:text-white ${colorClass}`}
-                    onClick={() =>
-                      setSelectedCategory(
-                        selectedCategory === category ? null : category,
-                      )
-                    }
-                  >
-                    {beautifyString((category || "All").toLowerCase())}
-                  </div>
-                );
-              })}
-            </div>
-          </CardHeader>
-          <CardContent className="overflow-scroll border-t border-t-gray-200 p-0 dark:border-t-slate-700">
-            <ScrollArea
-              className="h-[60vh] w-full"
-              data-id="blocks-control-scroll-area"
-            >
-              {filteredAvailableBlocks.map((block) => (
-                <Card
-                  key={block.uiKey || block.id}
-                  className={`m-2 my-4 flex h-20 shadow-none dark:border-slate-700 dark:bg-slate-800 dark:text-slate-100 dark:hover:bg-slate-700 ${
-                    block.notAvailable
-                      ? "cursor-not-allowed opacity-50"
-                      : "cursor-move hover:shadow-lg"
-                  }`}
-                  data-id={`block-card-${block.id}`}
-                  draggable={!block.notAvailable}
-                  onDragStart={(e) => {
-                    if (block.notAvailable) return;
-                    e.dataTransfer.effectAllowed = "copy";
-                    e.dataTransfer.setData(
-                      "application/reactflow",
-                      JSON.stringify({
-                        blockId: block.id,
-                        blockName: block.name,
-                        hardcodedValues: block?.hardcodedValues || {},
-                      }),
-                    );
-                  }}
-                  onClick={() => handleAddBlock(block)}
-                  title={block.notAvailable ?? undefined}
-                >
-                  <div
-                    className={`-ml-px h-full w-3 rounded-l-xl ${getPrimaryCategoryColor(block.categories)}`}
-                  ></div>
-
-                  <div className="mx-3 flex flex-1 items-center justify-between">
-                    <div className="mr-2 min-w-0">
-                      <span
-                        className="block truncate pb-1 text-sm font-semibold dark:text-white"
-                        data-id={`block-name-${block.id}`}
-                        data-type={block.uiType}
-                        data-testid={`block-name-${block.id}`}
-                      >
-                        <TextRenderer
-                          value={beautifyString(block.name).replace(
-                            / Block$/,
-                            "",
-                          )}
-                          truncateLengthLimit={45}
-                        />
-                      </span>
-                      <span
-                        className="block break-all text-xs font-normal text-gray-500 dark:text-gray-400"
-                        data-testid={`block-description-${block.id}`}
-                      >
-                        <TextRenderer
-                          value={block.description}
-                          truncateLengthLimit={165}
-                        />
-                      </span>
-                    </div>
-                    <div
-                      className="flex flex-shrink-0 items-center gap-1"
-                      data-id={`block-tooltip-${block.id}`}
-                      data-testid={`block-add`}
-                    >
-                      <PlusIcon className="h-6 w-6 rounded-lg bg-gray-200 stroke-black stroke-[0.5px] p-1 dark:bg-gray-700 dark:stroke-white" />
-                    </div>
-                  </div>
-                </Card>
-              ))}
-            </ScrollArea>
-          </CardContent>
-        </Card>
-      </PopoverContent>
-    </Popover>
-  );
-}
-
-/**
- * Evaluates how well a block matches the search query and returns a relevance score.
- * The scoring algorithm works as follows:
- * - Returns 1 if no query (all blocks match equally)
- * - Normalized query for case-insensitive matching
- * - Returns 3 for exact substring matches in block name (highest priority)
- * - Returns 2 when all query words appear in the block name (regardless of order)
- * - Returns 1.X for blocks with names similar to query using Jaro-Winkler distance (X is similarity score)
- * - Returns 0.5 when all query words appear in the block description (lowest priority)
- * - Returns 0 for no match
- *
- * Higher scores will appear first in search results.
- */
-function blockScoreForQuery(block: _Block, query: string): number {
-  if (!query) return 1;
-  const normalizedQuery = query.toLowerCase().trim();
-  const queryWords = normalizedQuery.split(/\s+/);
-
-  // Use cached values for performance
-  const { blockName, beautifiedName, description } = block._cached!;
-
-  // 1. Exact match in name (highest priority)
-  if (
-    blockName.includes(normalizedQuery) ||
-    beautifiedName.includes(normalizedQuery)
-  ) {
-    return 3;
-  }
-
-  // 2. All query words in name (regardless of order)
-  const allWordsInName = queryWords.every(
-    (word) => blockName.includes(word) || beautifiedName.includes(word),
-  );
-  if (allWordsInName) return 2;
-
-  // 3. Similarity with name (Jaro-Winkler)
-  const similarityThreshold = 0.65;
-  const nameSimilarity = jaro(blockName, normalizedQuery);
-  const beautifiedSimilarity = jaro(beautifiedName, normalizedQuery);
-  const maxSimilarity = Math.max(nameSimilarity, beautifiedSimilarity);
-  if (maxSimilarity > similarityThreshold) {
-    return 1 + maxSimilarity; // Score between 1 and 2
-  }
-
-  // 4. All query words in description (lower priority)
-  const allWordsInDescription = queryWords.every((word) =>
-    description.includes(word),
-  );
-  if (allWordsInDescription) return 0.5;
-
-  return 0;
-}

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/BuildActionBar.tsx

@@ -1,119 +0,0 @@
-import React from "react";
-import { cn } from "@/lib/utils";
-import { Button } from "@/components/__legacy__/ui/button";
-import { LogOut } from "lucide-react";
-import { ClockIcon, WarningIcon } from "@phosphor-icons/react";
-import { IconPlay, IconSquare } from "@/components/__legacy__/ui/icons";
-
-interface Props {
-  onClickAgentOutputs?: () => void;
-  onClickRunAgent?: () => void;
-  onClickStopRun: () => void;
-  onClickScheduleButton?: () => void;
-  isRunning: boolean;
-  isDisabled: boolean;
-  className?: string;
-  resolutionModeActive?: boolean;
-}
-
-export const BuildActionBar: React.FC<Props> = ({
-  onClickAgentOutputs,
-  onClickRunAgent,
-  onClickStopRun,
-  onClickScheduleButton,
-  isRunning,
-  isDisabled,
-  className,
-  resolutionModeActive = false,
-}) => {
-  const buttonClasses =
-    "flex items-center gap-2 text-sm font-medium md:text-lg";
-
-  // Show resolution mode message instead of action buttons
-  if (resolutionModeActive) {
-    return (
-      <div
-        className={cn(
-          "flex w-fit select-none items-center justify-center p-4",
-          className,
-        )}
-      >
-        <div className="flex items-center gap-3 rounded-lg border border-amber-300 bg-amber-50 px-4 py-3 dark:border-amber-700 dark:bg-amber-900/30">
-          <WarningIcon className="size-5 text-amber-600 dark:text-amber-400" />
-          <span className="text-sm font-medium text-amber-800 dark:text-amber-200">
-            Remove incompatible connections to continue
-          </span>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div
-      className={cn(
-        "flex w-fit select-none items-center justify-center p-4",
-        className,
-      )}
-    >
-      <div className="flex gap-1 md:gap-4">
-        {onClickAgentOutputs && (
-          <Button
-            className={buttonClasses}
-            variant="outline"
-            size="primary"
-            onClick={onClickAgentOutputs}
-            title="View agent outputs"
-          >
-            <LogOut className="hidden size-5 md:flex" /> Agent Outputs
-          </Button>
-        )}
-
-        {!isRunning ? (
-          <Button
-            className={cn(
-              buttonClasses,
-              onClickRunAgent && isDisabled
-                ? "cursor-default opacity-50 hover:bg-accent"
-                : "",
-            )}
-            variant="accent"
-            size="primary"
-            onClick={onClickRunAgent}
-            disabled={!onClickRunAgent}
-            title="Run the agent"
-            aria-label="Run the agent"
-            data-testid="primary-action-run-agent"
-            data-tutorial-id="primary-action-run-agent"
-          >
-            <IconPlay /> Run
-          </Button>
-        ) : (
-          <Button
-            className={buttonClasses}
-            variant="destructive"
-            size="primary"
-            onClick={onClickStopRun}
-            title="Stop the agent"
-            data-id="primary-action-stop-agent"
-          >
-            <IconSquare /> Stop
-          </Button>
-        )}
-
-        {onClickScheduleButton && (
-          <Button
-            className={buttonClasses}
-            variant="outline"
-            size="primary"
-            onClick={onClickScheduleButton}
-            title="Set up a run schedule for the agent"
-            data-id="primary-action-schedule-agent"
-          >
-            <ClockIcon className="hidden h-5 w-5 md:flex" />
-            Schedule Run
-          </Button>
-        )}
-      </div>
-    </div>
-  );
-};

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/ConnectionLine.tsx

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

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/ControlPanel.tsx

@@ -1,86 +0,0 @@
-import { Card, CardContent } from "@/components/__legacy__/ui/card";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/atoms/Tooltip/BaseTooltip";
-import { Button } from "@/components/__legacy__/ui/button";
-import { Separator } from "@/components/__legacy__/ui/separator";
-import { cn } from "@/lib/utils";
-import React from "react";
-
-/**
- * Represents a control element for the ControlPanel Component.
- * @type {Object} Control
- * @property {React.ReactNode} icon - The icon of the control from lucide-react https://lucide.dev/icons/
- * @property {string} label - The label of the control, to be leveraged by ToolTip.
- * @property {onclick} onClick - The function to be executed when the control is clicked.
- */
-export type Control = {
-  icon: React.ReactNode;
-  label: string;
-  disabled?: boolean;
-  onClick: () => void;
-};
-
-interface ControlPanelProps {
-  controls: Control[];
-  topChildren?: React.ReactNode;
-  botChildren?: React.ReactNode;
-  className?: string;
-}
-
-/**
- * ControlPanel component displays a panel with controls as icons.tsx with the ability to take in children.
- * @param {Object} ControlPanelProps - The properties of the control panel component.
- * @param {Array} ControlPanelProps.controls - An array of control objects representing actions to be preformed.
- * @param {Array} ControlPanelProps.children - The child components of the control panel.
- * @param {string} ControlPanelProps.className - Additional CSS class names for the control panel.
- * @returns The rendered control panel component.
- */
-export const ControlPanel = ({
-  controls,
-  topChildren,
-  botChildren,
-  className,
-}: ControlPanelProps) => {
-  return (
-    <Card className={cn("m-4 mt-24 w-14 dark:bg-slate-900", className)}>
-      <CardContent className="p-0">
-        <div className="flex flex-col items-center gap-3 rounded-xl py-3">
-          {topChildren}
-          <Separator className="dark:bg-slate-700" />
-          {controls.map((control, index) => (
-            <Tooltip key={index} delayDuration={500}>
-              <TooltipTrigger asChild>
-                <div>
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    onClick={() => control.onClick()}
-                    data-id={`control-button-${index}`}
-                    data-testid={`blocks-control-${control.label.toLowerCase()}-button`}
-                    disabled={control.disabled || false}
-                    className="dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"
-                  >
-                    {control.icon}
-                    <span className="sr-only">{control.label}</span>
-                  </Button>
-                </div>
-              </TooltipTrigger>
-              <TooltipContent
-                side="right"
-                className="dark:bg-slate-800 dark:text-slate-100"
-              >
-                {control.label}
-              </TooltipContent>
-            </Tooltip>
-          ))}
-          <Separator className="dark:bg-slate-700" />
-          {botChildren}
-        </div>
-      </CardContent>
-    </Card>
-  );
-};
-export default ControlPanel;

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/CustomEdge/CustomEdge.tsx

@@ -1,240 +0,0 @@
-import React, {
-  useCallback,
-  useContext,
-  useEffect,
-  useState,
-  useRef,
-} from "react";
-import {
-  BaseEdge,
-  EdgeLabelRenderer,
-  EdgeProps,
-  useReactFlow,
-  XYPosition,
-  Edge,
-  Node,
-} from "@xyflow/react";
-import "./customedge.css";
-import { X } from "lucide-react";
-import { BuilderContext } from "../Flow/Flow";
-import { NodeExecutionResult } from "@/lib/autogpt-server-api";
-import { useCustomEdge } from "./useCustomEdge";
-
-export type CustomEdgeData = {
-  edgeColor: string;
-  sourcePos?: XYPosition;
-  isStatic?: boolean;
-  beadUp: number;
-  beadDown: number;
-  beadData?: Map<string, NodeExecutionResult["status"]>;
-};
-
-type Bead = {
-  t: number;
-  targetT: number;
-  startTime: number;
-};
-
-export type CustomEdge = Edge<CustomEdgeData, "custom">;
-
-export function CustomEdge({
-  id,
-  data,
-  selected,
-  sourceX,
-  sourceY,
-  targetX,
-  targetY,
-  markerEnd,
-}: EdgeProps<CustomEdge>) {
-  const [beads, setBeads] = useState<{
-    beads: Bead[];
-    created: number;
-    destroyed: number;
-  }>({ beads: [], created: 0, destroyed: 0 });
-  const beadsRef = useRef(beads);
-  const { svgPath, length, getPointForT, getTForDistance } = useCustomEdge(
-    sourceX - 5,
-    sourceY - 5,
-    targetX + 3,
-    targetY - 5,
-  );
-  const { deleteElements } = useReactFlow<Node, CustomEdge>();
-  const builderContext = useContext(BuilderContext);
-  const { visualizeBeads } = builderContext ?? {
-    visualizeBeads: "no",
-  };
-
-  // Check if this edge is broken (during resolution mode)
-  const isBroken =
-    builderContext?.resolutionMode?.active &&
-    builderContext?.resolutionMode?.brokenEdgeIds?.includes(id);
-
-  const onEdgeRemoveClick = () => {
-    deleteElements({ edges: [{ id }] });
-  };
-
-  const animationDuration = 500; // Duration in milliseconds for bead to travel the curve
-  const beadDiameter = 12;
-  const deltaTime = 16;
-
-  const setTargetPositions = useCallback(
-    (beads: Bead[]) => {
-      const distanceBetween = Math.min(
-        (length - beadDiameter) / (beads.length + 1),
-        beadDiameter,
-      );
-
-      return beads.map((bead, index) => {
-        const distanceFromEnd = beadDiameter * 1.35;
-        const targetPosition = distanceBetween * index + distanceFromEnd;
-        const t = getTForDistance(-targetPosition);
-
-        return {
-          ...bead,
-          t: visualizeBeads === "animate" ? bead.t : t,
-          targetT: t,
-        } as Bead;
-      });
-    },
-    [getTForDistance, length, visualizeBeads],
-  );
-
-  beadsRef.current = beads;
-  useEffect(() => {
-    const beadUp: number = data?.beadUp ?? 0;
-    const beadDown: number = data?.beadDown ?? 0;
-
-    if (
-      beadUp === 0 &&
-      beadDown === 0 &&
-      (beads.created > 0 || beads.destroyed > 0)
-    ) {
-      setBeads({ beads: [], created: 0, destroyed: 0 });
-      return;
-    }
-
-    // Add beads
-    if (beadUp > beads.created) {
-      setBeads(({ beads, created, destroyed }) => {
-        const newBeads = [];
-        for (let i = 0; i < beadUp - created; i++) {
-          newBeads.push({ t: 0, targetT: 0, startTime: Date.now() });
-        }
-
-        const b = setTargetPositions([...beads, ...newBeads]);
-        return { beads: b, created: beadUp, destroyed };
-      });
-    }
-
-    // Animate and remove beads
-    const interval = setInterval(
-      ({ current: beads }) => {
-        // If there are no beads visible or moving, stop re-rendering
-        if (
-          (beadUp === beads.created && beads.created === beads.destroyed) ||
-          beads.beads.every((bead) => bead.t >= bead.targetT)
-        ) {
-          clearInterval(interval);
-          return;
-        }
-
-        setBeads(({ beads, created, destroyed }) => {
-          let destroyedCount = 0;
-
-          const newBeads = beads
-            .map((bead) => {
-              const progressIncrement = deltaTime / animationDuration;
-              const t = Math.min(
-                bead.t + bead.targetT * progressIncrement,
-                bead.targetT,
-              );
-
-              return { ...bead, t };
-            })
-            .filter((bead, index) => {
-              const removeCount = beadDown - destroyed;
-              if (bead.t >= bead.targetT && index < removeCount) {
-                destroyedCount++;
-                return false;
-              }
-              return true;
-            });
-
-          return {
-            beads: setTargetPositions(newBeads),
-            created,
-            destroyed: destroyed + destroyedCount,
-          };
-        });
-      },
-      deltaTime,
-      beadsRef,
-    );
-
-    return () => clearInterval(interval);
-  }, [data?.beadUp, data?.beadDown, setTargetPositions, visualizeBeads]);
-
-  const middle = getPointForT(0.5);
-
-  // Determine edge color - red for broken edges
-  const baseColor = data?.edgeColor ?? "#555555";
-  const edgeColor = isBroken ? "#ef4444" : baseColor;
-  // Add opacity to hex color (99 = 60% opacity, 80 = 50% opacity)
-  const strokeColor = isBroken
-    ? `${edgeColor}99`
-    : selected
-      ? edgeColor
-      : `${edgeColor}80`;
-
-  return (
-    <>
-      <BaseEdge
-        path={svgPath}
-        markerEnd={markerEnd}
-        style={{
-          stroke: strokeColor,
-          strokeWidth: data?.isStatic ? 2.5 : 2,
-          strokeDasharray: data?.isStatic ? "5 3" : undefined,
-        }}
-        className="data-sentry-unmask transition-all duration-200"
-      />
-      <path
-        d={svgPath}
-        fill="none"
-        strokeOpacity={0}
-        strokeWidth={20}
-        className="data-sentry-unmask react-flow__edge-interaction"
-      />
-      <EdgeLabelRenderer>
-        <div
-          style={{
-            position: "absolute",
-            transform: `translate(-50%, -50%) translate(${middle.x}px,${middle.y}px)`,
-            pointerEvents: "all",
-          }}
-          className="edge-label-renderer"
-        >
-          <button
-            className="edge-label-button opacity-0 transition-opacity duration-200 hover:opacity-100"
-            onClick={onEdgeRemoveClick}
-          >
-            <X className="size-4" />
-          </button>
-        </div>
-      </EdgeLabelRenderer>
-      {beads.beads.map((bead, index) => {
-        const pos = getPointForT(bead.t);
-        return (
-          <circle
-            key={index}
-            cx={pos.x}
-            cy={pos.y}
-            r={beadDiameter / 2} // Bead radius
-            fill={data?.edgeColor ?? "#555555"}
-          />
-        );
-      })}
-    </>
-  );
-}

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/CustomEdge/customedge.css

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

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/CustomEdge/useCustomEdge.ts

@@ -1,157 +0,0 @@
-import { useCallback, useMemo } from "react";
-
-type XYPosition = {
-  x: number;
-  y: number;
-};
-
-export type BezierPath = {
-  sourcePosition: XYPosition;
-  control1: XYPosition;
-  control2: XYPosition;
-  targetPosition: XYPosition;
-};
-
-export function useCustomEdge(
-  sourceX: number,
-  sourceY: number,
-  targetX: number,
-  targetY: number,
-) {
-  const path: BezierPath = useMemo(() => {
-    const xDifference = Math.abs(sourceX - targetX);
-    const yDifference = Math.abs(sourceY - targetY);
-    const xControlDistance =
-      sourceX < targetX ? 64 : Math.max(xDifference / 2, 64);
-    const yControlDistance = yDifference < 128 && sourceX > targetX ? -64 : 0;
-
-    return {
-      sourcePosition: { x: sourceX, y: sourceY },
-      control1: {
-        x: sourceX + xControlDistance,
-        y: sourceY + yControlDistance,
-      },
-      control2: {
-        x: targetX - xControlDistance,
-        y: targetY + yControlDistance,
-      },
-      targetPosition: { x: targetX, y: targetY },
-    };
-  }, [sourceX, sourceY, targetX, targetY]);
-
-  const svgPath = useMemo(
-    () =>
-      `M ${path.sourcePosition.x} ${path.sourcePosition.y} ` +
-      `C ${path.control1.x} ${path.control1.y} ${path.control2.x} ${path.control2.y} ` +
-      `${path.targetPosition.x}, ${path.targetPosition.y}`,
-    [path],
-  );
-
-  const getPointForT = useCallback(
-    (t: number) => {
-      // Bezier formula: (1-t)^3 * p0 + 3*(1-t)^2*t*p1 + 3*(1-t)*t^2*p2 + t^3*p3
-      const x =
-        Math.pow(1 - t, 3) * path.sourcePosition.x +
-        3 * Math.pow(1 - t, 2) * t * path.control1.x +
-        3 * (1 - t) * Math.pow(t, 2) * path.control2.x +
-        Math.pow(t, 3) * path.targetPosition.x;
-
-      const y =
-        Math.pow(1 - t, 3) * path.sourcePosition.y +
-        3 * Math.pow(1 - t, 2) * t * path.control1.y +
-        3 * (1 - t) * Math.pow(t, 2) * path.control2.y +
-        Math.pow(t, 3) * path.targetPosition.y;
-
-      return { x, y };
-    },
-    [path],
-  );
-
-  const getArcLength = useCallback(
-    (t: number, samples: number = 100) => {
-      let length = 0;
-      let prevPoint = getPointForT(0);
-
-      for (let i = 1; i <= samples; i++) {
-        const currT = (i / samples) * t;
-        const currPoint = getPointForT(currT);
-        length += Math.sqrt(
-          Math.pow(currPoint.x - prevPoint.x, 2) +
-            Math.pow(currPoint.y - prevPoint.y, 2),
-        );
-        prevPoint = currPoint;
-      }
-
-      return length;
-    },
-    [getPointForT],
-  );
-
-  const length = useMemo(() => {
-    return getArcLength(1);
-  }, [getArcLength]);
-
-  const getBezierDerivative = useCallback(
-    (t: number) => {
-      const mt = 1 - t;
-      const x =
-        3 *
-        (mt * mt * (path.control1.x - path.sourcePosition.x) +
-          2 * mt * t * (path.control2.x - path.control1.x) +
-          t * t * (path.targetPosition.x - path.control2.x));
-      const y =
-        3 *
-        (mt * mt * (path.control1.y - path.sourcePosition.y) +
-          2 * mt * t * (path.control2.y - path.control1.y) +
-          t * t * (path.targetPosition.y - path.control2.y));
-      return { x, y };
-    },
-    [path],
-  );
-
-  const getTForDistance = useCallback(
-    (distance: number, epsilon: number = 0.0001) => {
-      if (distance < 0) {
-        distance = length + distance; // If distance is negative, calculate from the end of the curve
-      }
-
-      let t = distance / getArcLength(1);
-      let prevT = 0;
-
-      while (Math.abs(t - prevT) > epsilon) {
-        prevT = t;
-        const length = getArcLength(t);
-        const derivative = Math.sqrt(
-          Math.pow(getBezierDerivative(t).x, 2) +
-            Math.pow(getBezierDerivative(t).y, 2),
-        );
-        t -= (length - distance) / derivative;
-        t = Math.max(0, Math.min(1, t)); // Clamp t between 0 and 1
-      }
-
-      return t;
-    },
-    [getArcLength, getBezierDerivative, length],
-  );
-
-  const getPointAtDistance = useCallback(
-    (distance: number) => {
-      if (distance < 0) {
-        distance = length + distance; // If distance is negative, calculate from the end of the curve
-      }
-
-      const t = getTForDistance(distance);
-      return getPointForT(t);
-    },
-    [getTForDistance, getPointForT, length],
-  );
-
-  return {
-    path,
-    svgPath,
-    length,
-    getPointForT,
-    getTForDistance,
-    getPointAtDistance,
-  };
-}

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/CustomNode/IncompatibilityDialog.tsx

@@ -1,244 +0,0 @@
-import React from "react";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/__legacy__/ui/dialog";
-import { Button } from "@/components/__legacy__/ui/button";
-import { AlertTriangle, XCircle, PlusCircle } from "lucide-react";
-import { IncompatibilityInfo } from "../../../hooks/useSubAgentUpdate/types";
-import { beautifyString } from "@/lib/utils";
-import { Alert, AlertDescription } from "@/components/molecules/Alert/Alert";
-
-interface IncompatibilityDialogProps {
-  isOpen: boolean;
-  onClose: () => void;
-  onConfirm: () => void;
-  currentVersion: number;
-  latestVersion: number;
-  agentName: string;
-  incompatibilities: IncompatibilityInfo;
-}
-
-export const IncompatibilityDialog: React.FC<IncompatibilityDialogProps> = ({
-  isOpen,
-  onClose,
-  onConfirm,
-  currentVersion,
-  latestVersion,
-  agentName,
-  incompatibilities,
-}) => {
-  const hasMissingInputs = incompatibilities.missingInputs.length > 0;
-  const hasMissingOutputs = incompatibilities.missingOutputs.length > 0;
-  const hasNewInputs = incompatibilities.newInputs.length > 0;
-  const hasNewOutputs = incompatibilities.newOutputs.length > 0;
-  const hasNewRequired = incompatibilities.newRequiredInputs.length > 0;
-  const hasTypeMismatches = incompatibilities.inputTypeMismatches.length > 0;
-
-  const hasInputChanges = hasMissingInputs || hasNewInputs;
-  const hasOutputChanges = hasMissingOutputs || hasNewOutputs;
-
-  return (
-    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
-      <DialogContent className="max-w-lg">
-        <DialogHeader>
-          <DialogTitle className="flex items-center gap-2">
-            <AlertTriangle className="h-5 w-5 text-amber-500" />
-            Incompatible Update
-          </DialogTitle>
-          <DialogDescription>
-            Updating <strong>{beautifyString(agentName)}</strong> from v
-            {currentVersion} to v{latestVersion} will break some connections.
-          </DialogDescription>
-        </DialogHeader>
-
-        <div className="space-y-4 py-2">
-          {/* Input changes - two column layout */}
-          {hasInputChanges && (
-            <TwoColumnSection
-              title="Input Changes"
-              leftIcon={<XCircle className="h-4 w-4 text-red-500" />}
-              leftTitle="Removed"
-              leftItems={incompatibilities.missingInputs}
-              rightIcon={<PlusCircle className="h-4 w-4 text-green-500" />}
-              rightTitle="Added"
-              rightItems={incompatibilities.newInputs}
-            />
-          )}
-
-          {/* Output changes - two column layout */}
-          {hasOutputChanges && (
-            <TwoColumnSection
-              title="Output Changes"
-              leftIcon={<XCircle className="h-4 w-4 text-red-500" />}
-              leftTitle="Removed"
-              leftItems={incompatibilities.missingOutputs}
-              rightIcon={<PlusCircle className="h-4 w-4 text-green-500" />}
-              rightTitle="Added"
-              rightItems={incompatibilities.newOutputs}
-            />
-          )}
-
-          {hasTypeMismatches && (
-            <SingleColumnSection
-              icon={<XCircle className="h-4 w-4 text-red-500" />}
-              title="Type Changed"
-              description="These connected inputs have a different type:"
-              items={incompatibilities.inputTypeMismatches.map(
-                (m) => `${m.name} (${m.oldType} → ${m.newType})`,
-              )}
-            />
-          )}
-
-          {hasNewRequired && (
-            <SingleColumnSection
-              icon={<PlusCircle className="h-4 w-4 text-amber-500" />}
-              title="New Required Inputs"
-              description="These inputs are now required:"
-              items={incompatibilities.newRequiredInputs}
-            />
-          )}
-        </div>
-
-        <Alert variant="warning">
-          <AlertDescription>
-            If you proceed, you&apos;ll need to remove the broken connections
-            before you can save or run your agent.
-          </AlertDescription>
-        </Alert>
-
-        <DialogFooter className="gap-2 sm:gap-0">
-          <Button variant="outline" onClick={onClose}>
-            Cancel
-          </Button>
-          <Button
-            variant="destructive"
-            onClick={onConfirm}
-            className="bg-amber-600 hover:bg-amber-700"
-          >
-            Update Anyway
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-};
-
-interface TwoColumnSectionProps {
-  title: string;
-  leftIcon: React.ReactNode;
-  leftTitle: string;
-  leftItems: string[];
-  rightIcon: React.ReactNode;
-  rightTitle: string;
-  rightItems: string[];
-}
-
-const TwoColumnSection: React.FC<TwoColumnSectionProps> = ({
-  title,
-  leftIcon,
-  leftTitle,
-  leftItems,
-  rightIcon,
-  rightTitle,
-  rightItems,
-}) => (
-  <div className="rounded-md border border-gray-200 p-3 dark:border-gray-700">
-    <span className="font-medium">{title}</span>
-    <div className="mt-2 grid grid-cols-2 items-start gap-4">
-      {/* Left column - Breaking changes */}
-      <div className="min-w-0">
-        <div className="flex items-center gap-1.5 text-sm text-gray-500 dark:text-gray-400">
-          {leftIcon}
-          <span>{leftTitle}</span>
-        </div>
-        <ul className="mt-1.5 space-y-1">
-          {leftItems.length > 0 ? (
-            leftItems.map((item) => (
-              <li
-                key={item}
-                className="text-sm text-gray-700 dark:text-gray-300"
-              >
-                <code className="rounded bg-red-50 px-1 py-0.5 font-mono text-xs text-red-700 dark:bg-red-900/30 dark:text-red-300">
-                  {item}
-                </code>
-              </li>
-            ))
-          ) : (
-            <li className="text-sm italic text-gray-400 dark:text-gray-500">
-              None
-            </li>
-          )}
-        </ul>
-      </div>
-
-      {/* Right column - Possible solutions */}
-      <div className="min-w-0">
-        <div className="flex items-center gap-1.5 text-sm text-gray-500 dark:text-gray-400">
-          {rightIcon}
-          <span>{rightTitle}</span>
-        </div>
-        <ul className="mt-1.5 space-y-1">
-          {rightItems.length > 0 ? (
-            rightItems.map((item) => (
-              <li
-                key={item}
-                className="text-sm text-gray-700 dark:text-gray-300"
-              >
-                <code className="rounded bg-green-50 px-1 py-0.5 font-mono text-xs text-green-700 dark:bg-green-900/30 dark:text-green-300">
-                  {item}
-                </code>
-              </li>
-            ))
-          ) : (
-            <li className="text-sm italic text-gray-400 dark:text-gray-500">
-              None
-            </li>
-          )}
-        </ul>
-      </div>
-    </div>
-  </div>
-);
-
-interface SingleColumnSectionProps {
-  icon: React.ReactNode;
-  title: string;
-  description: string;
-  items: string[];
-}
-
-const SingleColumnSection: React.FC<SingleColumnSectionProps> = ({
-  icon,
-  title,
-  description,
-  items,
-}) => (
-  <div className="rounded-md border border-gray-200 p-3 dark:border-gray-700">
-    <div className="flex items-center gap-2">
-      {icon}
-      <span className="font-medium">{title}</span>
-    </div>
-    <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
-      {description}
-    </p>
-    <ul className="mt-2 space-y-1">
-      {items.map((item) => (
-        <li
-          key={item}
-          className="ml-4 list-disc text-sm text-gray-700 dark:text-gray-300"
-        >
-          <code className="rounded bg-gray-100 px-1 py-0.5 font-mono text-xs dark:bg-gray-800">
-            {item}
-          </code>
-        </li>
-      ))}
-    </ul>
-  </div>
-);
-
-export default IncompatibilityDialog;

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/CustomNode/SubAgentUpdateBar.tsx

@@ -1,130 +0,0 @@
-import React from "react";
-import { Button } from "@/components/__legacy__/ui/button";
-import { ArrowUp, AlertTriangle, Info } from "lucide-react";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/atoms/Tooltip/BaseTooltip";
-import { IncompatibilityInfo } from "../../../hooks/useSubAgentUpdate/types";
-import { cn } from "@/lib/utils";
-
-interface SubAgentUpdateBarProps {
-  currentVersion: number;
-  latestVersion: number;
-  isCompatible: boolean;
-  incompatibilities: IncompatibilityInfo | null;
-  onUpdate: () => void;
-  isInResolutionMode?: boolean;
-}
-
-export const SubAgentUpdateBar: React.FC<SubAgentUpdateBarProps> = ({
-  currentVersion,
-  latestVersion,
-  isCompatible,
-  incompatibilities,
-  onUpdate,
-  isInResolutionMode = false,
-}) => {
-  if (isInResolutionMode) {
-    return <ResolutionModeBar incompatibilities={incompatibilities} />;
-  }
-
-  return (
-    <div className="flex items-center justify-between gap-2 rounded-t-lg bg-blue-50 px-3 py-2 dark:bg-blue-900/30">
-      <div className="flex items-center gap-2">
-        <ArrowUp className="h-4 w-4 text-blue-600 dark:text-blue-400" />
-        <span className="text-sm text-blue-700 dark:text-blue-300">
-          Update available (v{currentVersion} → v{latestVersion})
-        </span>
-        {!isCompatible && (
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <AlertTriangle className="h-4 w-4 text-amber-500" />
-            </TooltipTrigger>
-            <TooltipContent className="max-w-xs">
-              <p className="font-medium">Incompatible changes detected</p>
-              <p className="text-xs text-gray-400">
-                Click Update to see details
-              </p>
-            </TooltipContent>
-          </Tooltip>
-        )}
-      </div>
-      <Button
-        size="sm"
-        variant={isCompatible ? "default" : "outline"}
-        onClick={onUpdate}
-        className={cn(
-          "h-7 text-xs",
-          !isCompatible && "border-amber-500 text-amber-600 hover:bg-amber-50",
-        )}
-      >
-        Update
-      </Button>
-    </div>
-  );
-};
-
-interface ResolutionModeBarProps {
-  incompatibilities: IncompatibilityInfo | null;
-}
-
-const ResolutionModeBar: React.FC<ResolutionModeBarProps> = ({
-  incompatibilities,
-}) => {
-  const formatIncompatibilities = () => {
-    if (!incompatibilities) return "No incompatibilities";
-
-    const items: string[] = [];
-
-    if (incompatibilities.missingInputs.length > 0) {
-      items.push(
-        `Missing inputs: ${incompatibilities.missingInputs.join(", ")}`,
-      );
-    }
-    if (incompatibilities.missingOutputs.length > 0) {
-      items.push(
-        `Missing outputs: ${incompatibilities.missingOutputs.join(", ")}`,
-      );
-    }
-    if (incompatibilities.newRequiredInputs.length > 0) {
-      items.push(
-        `New required inputs: ${incompatibilities.newRequiredInputs.join(", ")}`,
-      );
-    }
-    if (incompatibilities.inputTypeMismatches.length > 0) {
-      const mismatches = incompatibilities.inputTypeMismatches
-        .map((m) => `${m.name} (${m.oldType} → ${m.newType})`)
-        .join(", ");
-      items.push(`Type changed: ${mismatches}`);
-    }
-
-    return items.join("\n");
-  };
-
-  return (
-    <div className="flex items-center justify-between gap-2 rounded-t-lg bg-amber-50 px-3 py-2 dark:bg-amber-900/30">
-      <div className="flex items-center gap-2">
-        <AlertTriangle className="h-4 w-4 text-amber-600 dark:text-amber-400" />
-        <span className="text-sm text-amber-700 dark:text-amber-300">
-          Remove incompatible connections
-        </span>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Info className="h-4 w-4 cursor-help text-amber-500" />
-          </TooltipTrigger>
-          <TooltipContent className="max-w-sm whitespace-pre-line">
-            <p className="font-medium">Incompatible changes:</p>
-            <p className="mt-1 text-xs">{formatIncompatibilities()}</p>
-            <p className="mt-2 text-xs text-gray-400">
-              Delete the red connections to continue
-            </p>
-          </TooltipContent>
-        </Tooltip>
-      </div>
-    </div>
-  );
-};
-
-export default SubAgentUpdateBar;

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/CustomNode/customnode.css

@@ -1,131 +0,0 @@
-.custom-node {
-  color: #000000;
-  box-sizing: border-box;
-  transition: border-color 0.3s ease-in-out;
-}
-
-.custom-node .custom-switch {
-  padding: 0.5rem 1.25rem;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.error-message {
-  color: #d9534f;
-  font-size: 13px;
-  padding-left: 0.5rem;
-}
-
-/* Existing styles */
-.handle-container {
-  display: flex;
-  position: relative;
-  margin-bottom: 0px;
-  padding: 5px;
-  min-height: 44px;
-  height: 100%;
-}
-
-.react-flow__handle {
-  background: transparent;
-  width: auto;
-  height: auto;
-  border: 0;
-  position: relative;
-  transform: none;
-}
-
-.border-error {
-  border: 1px solid #d9534f;
-}
-
-.select-input {
-  width: 100%;
-  padding: 5px;
-  border-radius: 4px;
-  border: 1px solid #000;
-  background: #fff;
-  color: #000;
-}
-
-.radio-label {
-  display: block;
-  margin: 5px 0;
-  color: #000;
-}
-
-.number-input {
-  width: 100%;
-  padding: 5px;
-  border-radius: 4px;
-  background: #fff;
-  color: #000;
-}
-
-.array-item-container {
-  display: flex;
-  align-items: center;
-  margin-bottom: 5px;
-}
-
-.array-item-input {
-  flex-grow: 1;
-  padding: 5px;
-  border-radius: 4px;
-  border: 1px solid #000;
-  background: #fff;
-  color: #000;
-}
-
-.array-item-remove {
-  background: #d9534f;
-  border: none;
-  color: white;
-  cursor: pointer;
-  margin-left: 5px;
-  border-radius: 4px;
-  padding: 5px 10px;
-}
-
-.array-item-add {
-  background: #5bc0de;
-  border: none;
-  color: white;
-  cursor: pointer;
-  border-radius: 4px;
-  padding: 5px 10px;
-  margin-top: 5px;
-}
-
-.error-message {
-  color: #d9534f;
-  font-size: 13px;
-  margin-top: 5px;
-  margin-left: 5px;
-}
-
-/* Styles for node states */
-.completed {
-  border-color: #27ae60; /* Green border for completed nodes */
-}
-
-.running {
-  border-color: #f39c12; /* Orange border for running nodes */
-}
-
-.failed {
-  border-color: #c0392b; /* Red border for failed nodes */
-}
-
-.incomplete {
-  border-color: #9f14ab; /* Pink border for incomplete nodes */
-}
-
-.queued {
-  border-color: #25e6e6; /* Cyan border for queued nodes */
-}
-
-.custom-switch {
-  padding-left: 2px;
-}

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/DataTable.tsx

@@ -1,166 +0,0 @@
-import { beautifyString } from "@/lib/utils";
-import { Clipboard, Maximize2 } from "lucide-react";
-import React, { useMemo, useState } from "react";
-import { Button } from "../../../../../components/__legacy__/ui/button";
-import { ContentRenderer } from "../../../../../components/__legacy__/ui/render";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "../../../../../components/__legacy__/ui/table";
-import type { OutputMetadata } from "@/components/contextual/OutputRenderers";
-import {
-  globalRegistry,
-  OutputItem,
-} from "@/components/contextual/OutputRenderers";
-import { Flag, useGetFlag } from "@/services/feature-flags/use-get-flag";
-import { useToast } from "../../../../../components/molecules/Toast/use-toast";
-import ExpandableOutputDialog from "./ExpandableOutputDialog";
-
-type DataTableProps = {
-  title?: string;
-  truncateLongData?: boolean;
-  data: { [key: string]: Array<any> };
-};
-
-export default function DataTable({
-  title,
-  truncateLongData,
-  data,
-}: DataTableProps) {
-  const { toast } = useToast();
-  const enableEnhancedOutputHandling = useGetFlag(
-    Flag.ENABLE_ENHANCED_OUTPUT_HANDLING,
-  );
-  const [expandedDialog, setExpandedDialog] = useState<{
-    isOpen: boolean;
-    execId: string;
-    pinName: string;
-    data: any[];
-  } | null>(null);
-
-  // Prepare renderers for each item when enhanced mode is enabled
-  const getItemRenderer = useMemo(() => {
-    if (!enableEnhancedOutputHandling) return null;
-    return (item: unknown) => {
-      const metadata: OutputMetadata = {};
-      return globalRegistry.getRenderer(item, metadata);
-    };
-  }, [enableEnhancedOutputHandling]);
-
-  const copyData = (pin: string, data: string) => {
-    navigator.clipboard.writeText(data).then(() => {
-      toast({
-        title: `"${pin}" data copied to clipboard!`,
-        duration: 2000,
-      });
-    });
-  };
-
-  const openExpandedView = (pinName: string, pinData: any[]) => {
-    setExpandedDialog({
-      isOpen: true,
-      execId: title || "Unknown Execution",
-      pinName,
-      data: pinData,
-    });
-  };
-
-  const closeExpandedView = () => {
-    setExpandedDialog(null);
-  };
-
-  return (
-    <>
-      {title && <strong className="mt-2 flex justify-center">{title}</strong>}
-      <Table className="cursor-default select-text">
-        <TableHeader>
-          <TableRow>
-            <TableHead>Pin</TableHead>
-            <TableHead>Data</TableHead>
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          {Object.entries(data).map(([key, value]) => (
-            <TableRow className="group" key={key}>
-              <TableCell className="cursor-text">
-                {beautifyString(key)}
-              </TableCell>
-              <TableCell className="cursor-text">
-                <div className="flex min-h-9 items-center whitespace-pre-wrap">
-                  <div className="absolute right-1 top-auto m-1 hidden gap-1 group-hover:flex">
-                    <Button
-                      variant="outline"
-                      size="icon"
-                      onClick={() => openExpandedView(key, value)}
-                      title="Expand Full View"
-                    >
-                      <Maximize2 size={18} />
-                    </Button>
-                    <Button
-                      variant="outline"
-                      size="icon"
-                      onClick={() =>
-                        copyData(
-                          beautifyString(key),
-                          value
-                            .map((i) =>
-                              typeof i === "object"
-                                ? JSON.stringify(i, null, 2)
-                                : String(i),
-                            )
-                            .join(", "),
-                        )
-                      }
-                      title="Copy Data"
-                    >
-                      <Clipboard size={18} />
-                    </Button>
-                  </div>
-                  {value.map((item, index) => {
-                    const renderer = getItemRenderer?.(item);
-                    if (enableEnhancedOutputHandling && renderer) {
-                      const metadata: OutputMetadata = {};
-                      return (
-                        <React.Fragment key={index}>
-                          <OutputItem
-                            value={item}
-                            metadata={metadata}
-                            renderer={renderer}
-                          />
-                          {index < value.length - 1 && ", "}
-                        </React.Fragment>
-                      );
-                    }
-                    return (
-                      <React.Fragment key={index}>
-                        <ContentRenderer
-                          value={item}
-                          truncateLongData={truncateLongData}
-                        />
-                        {index < value.length - 1 && ", "}
-                      </React.Fragment>
-                    );
-                  })}
-                </div>
-              </TableCell>
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
-
-      {expandedDialog && (
-        <ExpandableOutputDialog
-          isOpen={expandedDialog.isOpen}
-          onClose={closeExpandedView}
-          execId={expandedDialog.execId}
-          pinName={expandedDialog.pinName}
-          data={expandedDialog.data}
-        />
-      )}
-    </>
-  );
-}

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/ExpandableOutputDialog.tsx

@@ -1,269 +0,0 @@
-import type { OutputMetadata } from "@/components/contextual/OutputRenderers";
-import {
-  globalRegistry,
-  OutputActions,
-  OutputItem,
-} from "@/components/contextual/OutputRenderers";
-import { Dialog } from "@/components/molecules/Dialog/Dialog";
-import { beautifyString } from "@/lib/utils";
-import { Flag, useGetFlag } from "@/services/feature-flags/use-get-flag";
-import { Clipboard, Maximize2 } from "lucide-react";
-import React, { FC, useMemo, useState } from "react";
-import { Button } from "../../../../../components/__legacy__/ui/button";
-import { ContentRenderer } from "../../../../../components/__legacy__/ui/render";
-import { ScrollArea } from "../../../../../components/__legacy__/ui/scroll-area";
-import { Separator } from "../../../../../components/__legacy__/ui/separator";
-import { Switch } from "../../../../../components/atoms/Switch/Switch";
-import { useToast } from "../../../../../components/molecules/Toast/use-toast";
-
-interface ExpandableOutputDialogProps {
-  isOpen: boolean;
-  onClose: () => void;
-  execId: string;
-  pinName: string;
-  data: any[];
-}
-
-const ExpandableOutputDialog: FC<ExpandableOutputDialogProps> = ({
-  isOpen,
-  onClose,
-  execId,
-  pinName,
-  data,
-}) => {
-  const { toast } = useToast();
-  const enableEnhancedOutputHandling = useGetFlag(
-    Flag.ENABLE_ENHANCED_OUTPUT_HANDLING,
-  );
-  const [useEnhancedRenderer, setUseEnhancedRenderer] = useState(false);
-
-  // Prepare items for the enhanced renderer system
-  const outputItems = useMemo(() => {
-    if (!data || !useEnhancedRenderer) return [];
-
-    const items: Array<{
-      key: string;
-      label: string;
-      value: unknown;
-      metadata?: OutputMetadata;
-      renderer: any;
-    }> = [];
-
-    data.forEach((value, index) => {
-      const metadata: OutputMetadata = {};
-
-      // Extract metadata from the value if it's an object
-      if (
-        typeof value === "object" &&
-        value !== null &&
-        !React.isValidElement(value)
-      ) {
-        const objValue = value as any;
-        if (objValue.type) metadata.type = objValue.type;
-        if (objValue.mimeType) metadata.mimeType = objValue.mimeType;
-        if (objValue.filename) metadata.filename = objValue.filename;
-        if (objValue.language) metadata.language = objValue.language;
-      }
-
-      const renderer = globalRegistry.getRenderer(value, metadata);
-      if (renderer) {
-        items.push({
-          key: `item-${index}`,
-          label: index === 0 ? beautifyString(pinName) : "",
-          value,
-          metadata,
-          renderer,
-        });
-      } else {
-        // Fallback to text renderer
-        const textRenderer = globalRegistry
-          .getAllRenderers()
-          .find((r) => r.name === "TextRenderer");
-        if (textRenderer) {
-          items.push({
-            key: `item-${index}`,
-            label: index === 0 ? beautifyString(pinName) : "",
-            value:
-              typeof value === "string"
-                ? value
-                : JSON.stringify(value, null, 2),
-            metadata,
-            renderer: textRenderer,
-          });
-        }
-      }
-    });
-
-    return items;
-  }, [data, useEnhancedRenderer, pinName]);
-
-  const copyData = () => {
-    const formattedData = data
-      .map((item) =>
-        typeof item === "object" ? JSON.stringify(item, null, 2) : String(item),
-      )
-      .join("\n\n");
-
-    navigator.clipboard.writeText(formattedData).then(() => {
-      toast({
-        title: `"${beautifyString(pinName)}" data copied to clipboard!`,
-        duration: 2000,
-      });
-    });
-  };
-
-  return (
-    <Dialog
-      title={
-        <div className="flex items-center justify-between pr-8">
-          <div className="flex items-center gap-2">
-            <Maximize2 size={20} />
-            Full Output Preview
-          </div>
-          {enableEnhancedOutputHandling && (
-            <div className="flex items-center gap-3">
-              <label
-                htmlFor="enhanced-rendering-toggle"
-                className="cursor-pointer select-none text-sm font-normal text-gray-600"
-              >
-                Enhanced Rendering
-              </label>
-              <Switch
-                id="enhanced-rendering-toggle"
-                checked={useEnhancedRenderer}
-                onCheckedChange={setUseEnhancedRenderer}
-              />
-            </div>
-          )}
-        </div>
-      }
-      controlled={{
-        isOpen,
-        set: (open) => {
-          if (!open) onClose();
-        },
-      }}
-      onClose={onClose}
-      styling={{
-        maxWidth: "56rem",
-        width: "90vw",
-        height: "90vh",
-      }}
-    >
-      <Dialog.Content>
-        <div className="flex h-full flex-col">
-          <div className="pb-4">
-            <p className="text-sm text-zinc-600">
-              Execution ID: <span className="font-mono text-xs">{execId}</span>
-              <br />
-              Pin:{" "}
-              <span className="font-semibold">{beautifyString(pinName)}</span>
-            </p>
-          </div>
-
-          <div className="flex flex-1 flex-col overflow-hidden">
-            {useEnhancedRenderer && outputItems.length > 0 && (
-              <div className="border-b px-4 py-2">
-                <OutputActions
-                  items={outputItems.map((item) => ({
-                    value: item.value,
-                    metadata: item.metadata,
-                    renderer: item.renderer,
-                  }))}
-                />
-              </div>
-            )}
-            <ScrollArea className="h-full">
-              <div className="p-4">
-                {data.length > 0 ? (
-                  useEnhancedRenderer ? (
-                    <div className="space-y-4">
-                      {outputItems.map((item) => (
-                        <OutputItem
-                          key={item.key}
-                          value={item.value}
-                          metadata={item.metadata}
-                          renderer={item.renderer}
-                          label={item.label}
-                        />
-                      ))}
-                    </div>
-                  ) : (
-                    <div className="space-y-4">
-                      {data.map((item, index) => (
-                        <div
-                          key={index}
-                          className="rounded-lg border bg-gray-50 p-4"
-                        >
-                          <div className="mb-2 flex items-center justify-between">
-                            <span className="text-sm font-medium text-gray-600">
-                              Item {index + 1} of {data.length}
-                            </span>
-                            <Button
-                              variant="outline"
-                              size="sm"
-                              onClick={() => {
-                                const itemData =
-                                  typeof item === "object"
-                                    ? JSON.stringify(item, null, 2)
-                                    : String(item);
-                                navigator.clipboard
-                                  .writeText(itemData)
-                                  .then(() => {
-                                    toast({
-                                      title: `Item ${index + 1} copied to clipboard!`,
-                                      duration: 2000,
-                                    });
-                                  });
-                              }}
-                              className="flex items-center gap-1"
-                            >
-                              <Clipboard size={14} />
-                              Copy Item
-                            </Button>
-                          </div>
-                          <Separator className="mb-3" />
-                          <div className="whitespace-pre-wrap break-words font-mono text-sm">
-                            <ContentRenderer
-                              value={item}
-                              truncateLongData={false}
-                            />
-                          </div>
-                        </div>
-                      ))}
-                    </div>
-                  )
-                ) : (
-                  <div className="py-8 text-center text-gray-500">
-                    No data available
-                  </div>
-                )}
-              </div>
-            </ScrollArea>
-          </div>
-
-          <Dialog.Footer className="flex justify-between">
-            <div className="text-sm text-gray-600">
-              {data.length} item{data.length !== 1 ? "s" : ""} total
-            </div>
-            <div className="flex gap-2">
-              {!useEnhancedRenderer && (
-                <Button
-                  variant="outline"
-                  onClick={copyData}
-                  className="flex items-center gap-1"
-                >
-                  <Clipboard size={16} />
-                  Copy All
-                </Button>
-              )}
-              <Button onClick={onClose}>Close</Button>
-            </div>
-          </Dialog.Footer>
-        </div>
-      </Dialog.Content>
-    </Dialog>
-  );
-};
-
-export default ExpandableOutputDialog;

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/Flow/flow.css

@@ -1,103 +0,0 @@
-/* flow.css or index.css */
-
-body {
-  font-family:
-    -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
-    "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-}
-
-code {
-  font-family:
-    source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
-}
-
-.modal {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  right: auto;
-  bottom: auto;
-  margin-right: -50%;
-  transform: translate(-50%, -50%);
-  background: #ffffff;
-  padding: 20px;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  color: #000000;
-}
-
-.overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.75);
-}
-
-.modal h2 {
-  margin-top: 0;
-}
-
-.modal button {
-  margin-right: 10px;
-}
-
-.modal form {
-  display: flex;
-  flex-direction: column;
-}
-
-.modal form div {
-  margin-bottom: 15px;
-}
-
-.sidebar {
-  position: fixed;
-  top: 0;
-  left: -600px;
-  width: 350px;
-  height: calc(100vh - 68px); /* Full height minus top offset */
-  background-color: #ffffff;
-  color: #000000;
-  padding: 20px;
-  transition: left 0.3s ease;
-  z-index: 1000;
-  overflow-y: auto;
-  margin-top: 68px; /* Margin to push content below the top fixed area */
-}
-
-.sidebar.open {
-  left: 0;
-}
-
-.sidebar h3 {
-  margin: 0 0 10px;
-}
-
-.sidebar input {
-  margin: 0 0 10px;
-}
-
-.sidebarNodeRowStyle {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  background-color: #e2e2e2;
-  padding: 10px;
-  margin-bottom: 10px;
-  border-radius: 10px;
-  cursor: grab;
-}
-
-.sidebarNodeRowStyle.dragging {
-  opacity: 0.5;
-}
-
-.flow-container {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-}

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/GraphSearchControl.tsx

@@ -1,82 +0,0 @@
-import React from "react";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/__legacy__/ui/popover";
-import { Button } from "@/components/atoms/Button/Button";
-import { MagnifyingGlassIcon } from "@radix-ui/react-icons";
-import { CustomNode } from "@/app/(platform)/build/components/legacy-builder/CustomNode/CustomNode";
-import { GraphSearchContent } from "../NewControlPanel/NewSearchGraph/GraphMenuContent/GraphContent";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/atoms/Tooltip/BaseTooltip";
-import { useGraphMenu } from "../NewControlPanel/NewSearchGraph/GraphMenu/useGraphMenu";
-
-interface GraphSearchControlProps {
-  nodes: CustomNode[];
-  onNodeSelect: (nodeId: string) => void;
-  onNodeHover?: (nodeId: string | null) => void;
-}
-
-export function GraphSearchControl({
-  nodes,
-  onNodeSelect,
-  onNodeHover,
-}: GraphSearchControlProps) {
-  // Use the same hook as GraphSearchMenu for consistency
-  const {
-    open,
-    searchQuery,
-    setSearchQuery,
-    filteredNodes,
-    handleNodeSelect,
-    handleOpenChange,
-  } = useGraphMenu({
-    nodes,
-    blockMenuSelected: "", // We don't need to track this in the old control panel
-    setBlockMenuSelected: () => {}, // Not needed in this context
-    onNodeSelect,
-  });
-
-  return (
-    <Popover open={open} onOpenChange={handleOpenChange}>
-      <Tooltip delayDuration={500}>
-        <TooltipTrigger asChild>
-          <PopoverTrigger asChild>
-            <Button
-              variant="ghost"
-              size="icon"
-              data-id="graph-search-control-trigger"
-              data-testid="graph-search-control-button"
-              name="Search"
-              className="dark:hover:bg-slate-800"
-            >
-              <MagnifyingGlassIcon className="h-5 w-5" />
-            </Button>
-          </PopoverTrigger>
-        </TooltipTrigger>
-        <TooltipContent side="right">Search Graph</TooltipContent>
-      </Tooltip>
-
-      <PopoverContent
-        side="right"
-        sideOffset={22}
-        align="start"
-        alignOffset={-50} // Offset upward to align with control panel top
-        className="absolute -top-3 w-[17rem] rounded-xl border-none p-0 shadow-none md:w-[30rem]"
-        data-id="graph-search-popover-content"
-      >
-        <GraphSearchContent
-          searchQuery={searchQuery}
-          onSearchChange={setSearchQuery}
-          filteredNodes={filteredNodes}
-          onNodeSelect={handleNodeSelect}
-          onNodeHover={onNodeHover}
-        />
-      </PopoverContent>
-    </Popover>
-  );
-}

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/InputModalComponent.tsx

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

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/NodeHandle.tsx

@@ -1,163 +0,0 @@
-import { BlockIOSubSchema } from "@/lib/autogpt-server-api/types";
-import {
-  cn,
-  beautifyString,
-  getTypeBgColor,
-  getTypeTextColor,
-  getEffectiveType,
-} from "@/lib/utils";
-import { FC, memo, useCallback } from "react";
-import { Handle, Position } from "@xyflow/react";
-import { InformationTooltip } from "@/components/molecules/InformationTooltip/InformationTooltip";
-
-type HandleProps = {
-  keyName: string;
-  schema: BlockIOSubSchema;
-  isConnected: boolean;
-  isRequired?: boolean;
-  side: "left" | "right";
-  title?: string;
-  className?: string;
-  isBroken?: boolean;
-};
-
-// Move the constant out of the component to avoid re-creation on every render.
-const TYPE_NAME: Record<string, string> = {
-  string: "text",
-  number: "number",
-  integer: "integer",
-  boolean: "true/false",
-  object: "object",
-  array: "list",
-  null: "null",
-};
-
-// Extract and memoize the Dot component so that it doesn't re-render unnecessarily.
-const Dot: FC<{ isConnected: boolean; type?: string; isBroken?: boolean }> =
-  memo(({ isConnected, type, isBroken }) => {
-    const color = isBroken
-      ? "border-red-500 bg-red-100 dark:bg-red-900/30"
-      : isConnected
-        ? getTypeBgColor(type || "any")
-        : "border-gray-300 dark:border-gray-600";
-    return (
-      <div
-        className={cn(
-          "m-1 h-4 w-4 rounded-full border-2 bg-white transition-colors duration-100 group-hover:bg-gray-300 dark:bg-slate-800 dark:group-hover:bg-gray-700",
-          color,
-          isBroken && "opacity-50",
-        )}
-      />
-    );
-  });
-Dot.displayName = "Dot";
-
-const NodeHandle: FC<HandleProps> = ({
-  keyName,
-  schema,
-  isConnected,
-  isRequired,
-  side,
-  title,
-  className,
-  isBroken = false,
-}) => {
-  // Extract effective type from schema (handles anyOf/oneOf/allOf wrappers)
-  const effectiveType = getEffectiveType(schema);
-
-  const typeClass = `text-sm ${getTypeTextColor(effectiveType || "any")} ${
-    side === "left" ? "text-left" : "text-right"
-  }`;
-
-  const label = (
-    <div className={cn("flex flex-grow flex-row", isBroken && "opacity-50")}>
-      <span
-        className={cn(
-          "data-sentry-unmask text-m green flex items-end pr-2 text-gray-900 dark:text-gray-100",
-          className,
-          isBroken && "text-red-500 line-through",
-        )}
-      >
-        {title || schema.title || beautifyString(keyName.toLowerCase())}
-        {isRequired ? "*" : ""}
-      </span>
-      <span
-        className={cn(
-          `${typeClass} data-sentry-unmask flex items-end`,
-          isBroken && "text-red-400",
-        )}
-      >
-        ({TYPE_NAME[effectiveType as keyof typeof TYPE_NAME] || "any"})
-      </span>
-    </div>
-  );
-
-  // Use a native HTML onContextMenu handler instead of wrapping a large node with a Radix ContextMenu trigger.
-  const handleContextMenu = useCallback(
-    (e: React.MouseEvent<HTMLDivElement>) => {
-      e.preventDefault();
-      // Optionally, you can trigger a custom, lightweight context menu here.
-    },
-    [],
-  );
-
-  if (side === "left") {
-    return (
-      <div
-        key={keyName}
-        className={cn("handle-container", isBroken && "pointer-events-none")}
-        onContextMenu={handleContextMenu}
-      >
-        <Handle
-          type="target"
-          data-testid={`input-handle-${keyName}`}
-          position={Position.Left}
-          id={keyName}
-          className={cn("group -ml-[38px]", isBroken && "cursor-not-allowed")}
-          isConnectable={!isBroken}
-        >
-          <div className="pointer-events-none flex items-center">
-            <Dot
-              isConnected={isConnected}
-              type={effectiveType}
-              isBroken={isBroken}
-            />
-            {label}
-          </div>
-        </Handle>
-        <InformationTooltip description={schema.description} />
-      </div>
-    );
-  } else {
-    return (
-      <div
-        key={keyName}
-        className={cn(
-          "handle-container justify-end",
-          isBroken && "pointer-events-none",
-        )}
-        onContextMenu={handleContextMenu}
-      >
-        <Handle
-          type="source"
-          data-testid={`output-handle-${keyName}`}
-          position={Position.Right}
-          id={keyName}
-          className={cn("group -mr-[38px]", isBroken && "cursor-not-allowed")}
-          isConnectable={!isBroken}
-        >
-          <div className="pointer-events-none flex items-center">
-            {label}
-            <Dot
-              isConnected={isConnected}
-              type={effectiveType}
-              isBroken={isBroken}
-            />
-          </div>
-        </Handle>
-      </div>
-    );
-  }
-};
-
-export default memo(NodeHandle);

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/NodeOutputs.tsx

@@ -1,158 +0,0 @@
-import React, { useContext, useMemo, useState } from "react";
-import { Button } from "@/components/__legacy__/ui/button";
-import { Maximize2 } from "lucide-react";
-import * as Separator from "@radix-ui/react-separator";
-import { ContentRenderer } from "@/components/__legacy__/ui/render";
-import type { OutputMetadata } from "@/components/contextual/OutputRenderers";
-import {
-  globalRegistry,
-  OutputItem,
-} from "@/components/contextual/OutputRenderers";
-import { Flag, useGetFlag } from "@/services/feature-flags/use-get-flag";
-
-import { beautifyString } from "@/lib/utils";
-
-import { BuilderContext } from "./Flow/Flow";
-import ExpandableOutputDialog from "./ExpandableOutputDialog";
-
-type NodeOutputsProps = {
-  title?: string;
-  truncateLongData?: boolean;
-  data: { [key: string]: Array<any> };
-};
-
-export default function NodeOutputs({
-  title,
-  truncateLongData,
-  data,
-}: NodeOutputsProps) {
-  const builderContext = useContext(BuilderContext);
-  const enableEnhancedOutputHandling = useGetFlag(
-    Flag.ENABLE_ENHANCED_OUTPUT_HANDLING,
-  );
-
-  const [expandedDialog, setExpandedDialog] = useState<{
-    isOpen: boolean;
-    execId: string;
-    pinName: string;
-    data: any[];
-  } | null>(null);
-
-  if (!builderContext) {
-    throw new Error(
-      "BuilderContext consumer must be inside FlowEditor component",
-    );
-  }
-
-  const { getNodeTitle } = builderContext;
-
-  // Prepare renderers for each item when enhanced mode is enabled
-  const getItemRenderer = useMemo(() => {
-    if (!enableEnhancedOutputHandling) return null;
-    return (item: unknown) => {
-      const metadata: OutputMetadata = {};
-      return globalRegistry.getRenderer(item, metadata);
-    };
-  }, [enableEnhancedOutputHandling]);
-
-  const getBeautifiedPinName = (pin: string) => {
-    if (!pin.startsWith("tools_^_")) {
-      return beautifyString(pin);
-    }
-    // Special handling for tool pins: replace node ID with node title
-    const toolNodeID = pin.slice(8).split("_~_")[0]; // tools_^_{node_id}_~_{field}
-    const toolNodeTitle = getNodeTitle(toolNodeID);
-    return toolNodeTitle
-      ? beautifyString(pin.replace(toolNodeID, toolNodeTitle))
-      : beautifyString(pin);
-  };
-
-  const openExpandedView = (pinName: string, pinData: any[]) => {
-    setExpandedDialog({
-      isOpen: true,
-      execId: title || "Node Output",
-      pinName,
-      data: pinData,
-    });
-  };
-
-  const closeExpandedView = () => {
-    setExpandedDialog(null);
-  };
-  return (
-    <div className="m-4 space-y-4">
-      {title && <strong className="mt-2flex">{title}</strong>}
-      {Object.entries(data).map(([pin, dataArray]) => (
-        <div key={pin} className="group">
-          <div className="flex items-center justify-between">
-            <div className="flex items-center">
-              <strong className="mr-2">Pin:</strong>
-              <span>{getBeautifiedPinName(pin)}</span>
-            </div>
-            {(truncateLongData || dataArray.length > 10) && (
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={() => openExpandedView(pin, dataArray)}
-                className="hidden items-center gap-1 group-hover:flex"
-                title="Expand Full View"
-              >
-                <Maximize2 size={14} />
-                Expand
-              </Button>
-            )}
-          </div>
-          <div className="mt-2">
-            <strong className="mr-2">Data:</strong>
-            <div className="mt-1">
-              {dataArray.slice(0, 10).map((item, index) => {
-                const renderer = getItemRenderer?.(item);
-                if (enableEnhancedOutputHandling && renderer) {
-                  const metadata: OutputMetadata = {};
-                  return (
-                    <React.Fragment key={index}>
-                      <OutputItem
-                        value={item}
-                        metadata={metadata}
-                        renderer={renderer}
-                      />
-                      {index < Math.min(dataArray.length, 10) - 1 && ", "}
-                    </React.Fragment>
-                  );
-                }
-                return (
-                  <React.Fragment key={index}>
-                    <ContentRenderer
-                      value={item}
-                      truncateLongData={truncateLongData}
-                    />
-                    {index < Math.min(dataArray.length, 10) - 1 && ", "}
-                  </React.Fragment>
-                );
-              })}
-              {dataArray.length > 10 && (
-                <span style={{ color: "#888" }}>
-                  <br />
-                  <b>⋮</b>
-                  <br />
-                  <span>and {dataArray.length - 10} more</span>
-                </span>
-              )}
-            </div>
-            <Separator.Root className="my-4 h-[1px] bg-gray-300" />
-          </div>
-        </div>
-      ))}
-
-      {expandedDialog && (
-        <ExpandableOutputDialog
-          isOpen={expandedDialog.isOpen}
-          onClose={closeExpandedView}
-          execId={expandedDialog.execId}
-          pinName={expandedDialog.pinName}
-          data={expandedDialog.data}
-        />
-      )}
-    </div>
-  );
-}

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/NodeTableInput.tsx

@@ -1,205 +0,0 @@
-import { FC, useCallback, useEffect, useState } from "react";
-
-import NodeHandle from "@/app/(platform)/build/components/legacy-builder/NodeHandle";
-import type {
-  BlockIOTableSubSchema,
-  TableCellValue,
-  TableRow,
-} from "@/lib/autogpt-server-api/types";
-import type { ConnectedEdge } from "./CustomNode/CustomNode";
-import { cn } from "@/lib/utils";
-import { PlusIcon, XIcon } from "@phosphor-icons/react";
-import { Button } from "@/components/atoms/Button/Button";
-import { Input } from "@/components/atoms/Input/Input";
-
-interface NodeTableInputProps {
-  /** Unique identifier for the node in the builder graph */
-  nodeId: string;
-  /** Key identifier for this specific input field within the node */
-  selfKey: string;
-  /** Schema definition for the table structure */
-  schema: BlockIOTableSubSchema;
-  /** Column headers for the table */
-  headers: string[];
-  /** Initial row data for the table */
-  rows?: TableRow[];
-  /** Validation errors mapped by field key */
-  errors: { [key: string]: string | undefined };
-  /** Graph connections between nodes in the builder */
-  connections: ConnectedEdge[];
-  /** Callback when table data changes */
-  handleInputChange: (key: string, value: TableRow[]) => void;
-  /** Callback when input field is clicked (for builder selection) */
-  handleInputClick: (key: string) => void;
-  /** Additional CSS classes */
-  className?: string;
-  /** Display name for the input field */
-  displayName?: string;
-}
-
-/**
- * Table input component for the workflow builder interface.
- *
- * This component is specifically designed for use in the agent builder where users
- * design workflows with connected nodes. It includes graph connection capabilities
- * via NodeHandle and is tightly integrated with the builder's state management.
- *
- * @warning Do NOT use this component in runtime/execution contexts (like RunAgentInputs).
- * For runtime table inputs, use a simpler implementation without builder-specific features.
- *
- * @example
- * ```tsx
- * <NodeTableInput
- *   nodeId="node-123"
- *   selfKey="table_data"
- *   schema={tableSchema}
- *   headers={["Name", "Value"]}
- *   rows={existingData}
- *   connections={graphConnections}
- *   handleInputChange={handleChange}
- *   handleInputClick={handleClick}
- *   errors={{}}
- * />
- * ```
- *
- * @see Used exclusively in: `/app/(platform)/build/components/legacy-builder/NodeInputs.tsx`
- */
-export const NodeTableInput: FC<NodeTableInputProps> = ({
-  nodeId,
-  selfKey,
-  schema,
-  headers,
-  rows = [],
-  errors,
-  connections,
-  handleInputChange,
-  handleInputClick: _handleInputClick,
-  className,
-  displayName,
-}) => {
-  const [tableData, setTableData] = useState<TableRow[]>(rows);
-
-  // Sync with parent state when rows change
-  useEffect(() => {
-    setTableData(rows);
-  }, [rows]);
-
-  const isConnected = (key: string) =>
-    connections.some((c) => c.targetHandle === key && c.target === nodeId);
-
-  const updateTableData = useCallback(
-    (newData: TableRow[]) => {
-      setTableData(newData);
-      handleInputChange(selfKey, newData);
-    },
-    [selfKey, handleInputChange],
-  );
-
-  const updateCell = (
-    rowIndex: number,
-    header: string,
-    value: TableCellValue,
-  ) => {
-    const newData = [...tableData];
-    if (!newData[rowIndex]) {
-      newData[rowIndex] = {};
-    }
-    newData[rowIndex][header] = value;
-    updateTableData(newData);
-  };
-
-  const addRow = () => {
-    if (!headers || headers.length === 0) {
-      return;
-    }
-    const newRow: TableRow = {};
-    headers.forEach((header) => {
-      newRow[header] = "";
-    });
-    updateTableData([...tableData, newRow]);
-  };
-
-  const removeRow = (index: number) => {
-    const newData = tableData.filter((_, i) => i !== index);
-    updateTableData(newData);
-  };
-
-  return (
-    <div className={cn("w-full space-y-2", className)}>
-      <NodeHandle
-        title={displayName || selfKey}
-        keyName={selfKey}
-        schema={schema}
-        isConnected={isConnected(selfKey)}
-        isRequired={false}
-        side="left"
-      />
-
-      {!isConnected(selfKey) && (
-        <div className="nodrag overflow-x-auto">
-          <table className="w-full border-collapse">
-            <thead>
-              <tr>
-                {headers.map((header, index) => (
-                  <th
-                    key={index}
-                    className="border border-gray-300 bg-gray-100 px-2 py-1 text-left text-sm font-medium dark:border-gray-600 dark:bg-gray-800"
-                  >
-                    {header}
-                  </th>
-                ))}
-                <th className="w-10"></th>
-              </tr>
-            </thead>
-            <tbody>
-              {tableData.map((row, rowIndex) => (
-                <tr key={rowIndex}>
-                  {headers.map((header, colIndex) => (
-                    <td
-                      key={colIndex}
-                      className="border border-gray-300 p-1 dark:border-gray-600"
-                    >
-                      <Input
-                        id={`${selfKey}-${rowIndex}-${header}`}
-                        label={header}
-                        type="text"
-                        value={String(row[header] || "")}
-                        onChange={(e) =>
-                          updateCell(rowIndex, header, e.target.value)
-                        }
-                        className="h-8 w-full"
-                        placeholder={`Enter ${header}`}
-                      />
-                    </td>
-                  ))}
-                  <td className="p-1">
-                    <Button
-                      variant="ghost"
-                      size="small"
-                      onClick={() => removeRow(rowIndex)}
-                      className="h-8 w-8 p-0"
-                    >
-                      <XIcon />
-                    </Button>
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-
-          <Button
-            className="mt-2 bg-gray-200 font-normal text-black hover:text-white dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600"
-            onClick={addRow}
-            size="small"
-          >
-            <PlusIcon className="mr-2" /> Add Row
-          </Button>
-        </div>
-      )}
-
-      {errors[selfKey] && (
-        <span className="text-sm text-red-500">{errors[selfKey]}</span>
-      )}
-    </div>
-  );
-};

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/OttoChatWidget.tsx

@@ -1,311 +0,0 @@
-"use client";
-
-import React, { useEffect, useState, useRef } from "react";
-import ReactMarkdown from "react-markdown";
-
-import type { GraphID } from "@/lib/autogpt-server-api/types";
-import { askOtto } from "@/app/(platform)/build/actions";
-import { cn } from "@/lib/utils";
-import { environment } from "@/services/environment";
-
-interface Message {
-  type: "user" | "assistant";
-  content: string;
-}
-
-export default function OttoChatWidget({
-  graphID,
-  className,
-}: {
-  graphID?: GraphID;
-  className?: string;
-}): React.ReactNode {
-  const [isOpen, setIsOpen] = useState(false);
-  const [messages, setMessages] = useState<Message[]>([]);
-  const [inputValue, setInputValue] = useState("");
-  const [isProcessing, setIsProcessing] = useState(false);
-  const [includeGraphData, setIncludeGraphData] = useState(false);
-  const messagesEndRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    // Add welcome message when component mounts
-    if (messages.length === 0) {
-      setMessages([
-        {
-          type: "assistant",
-          content: "Hello, I am Otto! Ask me anything about AutoGPT!",
-        },
-      ]);
-    }
-  }, [messages.length]);
-
-  useEffect(() => {
-    // Scroll to bottom whenever messages change
-    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
-  }, [messages]);
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!inputValue.trim() || isProcessing) return;
-
-    const userMessage = inputValue.trim();
-    setInputValue("");
-    setIsProcessing(true);
-
-    // Add user message to chat
-    setMessages((prev) => [...prev, { type: "user", content: userMessage }]);
-
-    // Add temporary processing message
-    setMessages((prev) => [
-      ...prev,
-      { type: "assistant", content: "Processing your question..." },
-    ]);
-
-    const conversationHistory = messages.reduce<
-      { query: string; response: string }[]
-    >((acc, msg, i, arr) => {
-      if (
-        msg.type === "user" &&
-        i + 1 < arr.length &&
-        arr[i + 1].type === "assistant" &&
-        arr[i + 1].content !== "Processing your question..."
-      ) {
-        acc.push({
-          query: msg.content,
-          response: arr[i + 1].content,
-        });
-      }
-      return acc;
-    }, []);
-
-    try {
-      const data = await askOtto(
-        userMessage,
-        conversationHistory,
-        includeGraphData,
-        graphID,
-      );
-
-      // Check if the response contains an error
-      if ("error" in data && data.error === true) {
-        // Handle different error types
-        let errorMessage =
-          "Sorry, there was an error processing your message. Please try again.";
-
-        if (data.answer === "Authentication required") {
-          errorMessage = "Please sign in to use the chat feature.";
-        } else if (data.answer === "Failed to connect to Otto service") {
-          errorMessage =
-            "Otto service is currently unavailable. Please try again later.";
-        } else if (data.answer.includes("timed out")) {
-          errorMessage = "Request timed out. Please try again later.";
-        }
-
-        // Remove processing message and add error message
-        setMessages((prev) => [
-          ...prev.slice(0, -1),
-          { type: "assistant", content: errorMessage },
-        ]);
-      } else {
-        // Remove processing message and add actual response
-        setMessages((prev) => [
-          ...prev.slice(0, -1),
-          { type: "assistant", content: data.answer },
-        ]);
-      }
-    } catch (error) {
-      console.error("Unexpected error in chat widget:", error);
-      setMessages((prev) => [
-        ...prev.slice(0, -1),
-        {
-          type: "assistant",
-          content:
-            "An unexpected error occurred. Please refresh the page and try again.",
-        },
-      ]);
-    } finally {
-      setIsProcessing(false);
-      setIncludeGraphData(false);
-    }
-  };
-
-  // Don't render the chat widget if we're not on the build page or in local mode
-  if (environment.isLocal()) {
-    return null;
-  }
-
-  if (!isOpen) {
-    return (
-      <div className={className}>
-        <button
-          onClick={() => setIsOpen(true)}
-          className="inline-flex h-14 w-14 items-center justify-center whitespace-nowrap rounded-2xl bg-[rgba(65,65,64,1)] text-neutral-50 shadow transition-colors hover:bg-neutral-900/90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-neutral-950 disabled:pointer-events-none disabled:opacity-50 dark:bg-neutral-50 dark:text-neutral-900 dark:hover:bg-neutral-50/90 dark:focus-visible:ring-neutral-300"
-          aria-label="Open chat widget"
-        >
-          <svg
-            viewBox="0 0 24 24"
-            className="h-6 w-6"
-            stroke="currentColor"
-            strokeWidth="2"
-            fill="none"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          >
-            <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
-          </svg>
-        </button>
-      </div>
-    );
-  }
-
-  return (
-    <div
-      className={cn(
-        "flex h-[600px] w-[600px] flex-col rounded-lg border bg-background shadow-xl",
-        className,
-        "z-40",
-      )}
-    >
-      {/* Header */}
-      <div className="flex items-center justify-between border-b p-4">
-        <h2 className="font-semibold">Otto Assistant</h2>
-        <button
-          onClick={() => setIsOpen(false)}
-          className="text-muted-foreground transition-colors hover:text-foreground"
-          aria-label="Close chat"
-        >
-          <svg
-            viewBox="0 0 24 24"
-            className="h-5 w-5"
-            stroke="currentColor"
-            strokeWidth="2"
-            fill="none"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          >
-            <line x1="18" y1="6" x2="6" y2="18" />
-            <line x1="6" y1="6" x2="18" y2="18" />
-          </svg>
-        </button>
-      </div>
-
-      {/* Messages */}
-      <div className="flex-1 space-y-4 overflow-y-auto p-4">
-        {messages.map((message, index) => (
-          <div
-            key={index}
-            className={`flex ${message.type === "user" ? "justify-end" : "justify-start"}`}
-          >
-            <div
-              className={`max-w-[80%] rounded-lg p-3 ${
-                message.type === "user"
-                  ? "ml-4 bg-black text-white"
-                  : "mr-4 bg-[#8b5cf6] text-white"
-              }`}
-            >
-              {message.type === "user" ? (
-                message.content
-              ) : (
-                <ReactMarkdown
-                  className="prose prose-sm dark:prose-invert max-w-none"
-                  components={{
-                    p: ({ children }) => (
-                      <p className="mb-2 last:mb-0">{children}</p>
-                    ),
-                    code(props) {
-                      const { children, className, node: _, ...rest } = props;
-                      const match = /language-(\w+)/.exec(className || "");
-                      return match ? (
-                        <pre className="overflow-x-auto rounded-md bg-muted-foreground/20 p-3">
-                          <code className="font-mono text-sm" {...rest}>
-                            {children}
-                          </code>
-                        </pre>
-                      ) : (
-                        <code
-                          className="rounded-md bg-muted-foreground/20 px-1 py-0.5 font-mono text-sm"
-                          {...rest}
-                        >
-                          {children}
-                        </code>
-                      );
-                    },
-                    ul: ({ children }) => (
-                      <ul className="mb-2 list-disc pl-4 last:mb-0">
-                        {children}
-                      </ul>
-                    ),
-                    ol: ({ children }) => (
-                      <ol className="mb-2 list-decimal pl-4 last:mb-0">
-                        {children}
-                      </ol>
-                    ),
-                    li: ({ children }) => (
-                      <li className="mb-1 last:mb-0">{children}</li>
-                    ),
-                  }}
-                >
-                  {message.content}
-                </ReactMarkdown>
-              )}
-            </div>
-          </div>
-        ))}
-        <div ref={messagesEndRef} />
-      </div>
-
-      {/* Input */}
-      <form onSubmit={handleSubmit} className="border-t p-4">
-        <div className="flex flex-col gap-2">
-          <div className="flex gap-2">
-            <input
-              type="text"
-              value={inputValue}
-              onChange={(e) => setInputValue(e.target.value)}
-              placeholder="Type your message..."
-              className="flex-1 rounded-md border bg-background px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary"
-              disabled={isProcessing}
-            />
-            <button
-              type="submit"
-              disabled={isProcessing}
-              className="rounded-md bg-primary px-4 py-2 text-primary-foreground transition-colors hover:bg-primary/90 disabled:opacity-50"
-            >
-              Send
-            </button>
-          </div>
-          {graphID && (
-            <button
-              type="button"
-              onClick={() => {
-                setIncludeGraphData((prev) => !prev);
-              }}
-              className={`flex items-center gap-2 rounded border px-2 py-1.5 text-sm transition-all duration-200 ${
-                includeGraphData
-                  ? "border-primary/30 bg-primary/10 text-primary hover:shadow-[0_0_10px_3px_rgba(139,92,246,0.3)]"
-                  : "border-transparent bg-muted text-muted-foreground hover:bg-muted/80 hover:shadow-[0_0_10px_3px_rgba(139,92,246,0.15)]"
-              }`}
-            >
-              <svg
-                viewBox="0 0 24 24"
-                className="h-4 w-4"
-                stroke="currentColor"
-                strokeWidth="2"
-                fill="none"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              >
-                <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
-                <circle cx="8.5" cy="8.5" r="1.5" />
-                <polyline points="21 15 16 10 5 21" />
-              </svg>
-              {includeGraphData
-                ? "Graph data will be included"
-                : "Include graph data"}
-            </button>
-          )}
-        </div>
-      </form>
-    </div>
-  );
-}

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/OutputModalComponent.tsx

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

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/RunnerInputUI.tsx

@@ -1,96 +0,0 @@
-import { useCallback } from "react";
-
-import { AgentRunDraftView } from "@/app/(platform)/library/agents/[id]/components/OldAgentLibraryView/components/agent-run-draft-view";
-import { Dialog } from "@/components/molecules/Dialog/Dialog";
-import type {
-  CredentialsMetaInput,
-  Graph,
-} from "@/lib/autogpt-server-api/types";
-
-interface RunInputDialogProps {
-  isOpen: boolean;
-  doClose: () => void;
-  graph: Graph;
-  doRun?: (
-    inputs: Record<string, any>,
-    credentialsInputs: Record<string, CredentialsMetaInput>,
-  ) => Promise<void> | void;
-  doCreateSchedule?: (
-    cronExpression: string,
-    scheduleName: string,
-    inputs: Record<string, any>,
-    credentialsInputs: Record<string, CredentialsMetaInput>,
-  ) => Promise<void> | void;
-}
-
-export function RunnerInputDialog({
-  isOpen,
-  doClose,
-  graph,
-  doRun,
-  doCreateSchedule,
-}: RunInputDialogProps) {
-  const handleRun = useCallback(
-    doRun
-      ? async (
-          inputs: Record<string, any>,
-          credentials_inputs: Record<string, CredentialsMetaInput>,
-        ) => {
-          await doRun(inputs, credentials_inputs);
-          doClose();
-        }
-      : async () => {},
-    [doRun, doClose],
-  );
-
-  const handleSchedule = useCallback(
-    doCreateSchedule
-      ? async (
-          cronExpression: string,
-          scheduleName: string,
-          inputs: Record<string, any>,
-          credentialsInputs: Record<string, CredentialsMetaInput>,
-        ) => {
-          await doCreateSchedule(
-            cronExpression,
-            scheduleName,
-            inputs,
-            credentialsInputs,
-          );
-          doClose();
-        }
-      : async () => {},
-    [doCreateSchedule, doClose],
-  );
-
-  return (
-    <Dialog
-      title="Run your agent"
-      controlled={{
-        isOpen,
-        set: (open) => {
-          if (!open) doClose();
-        },
-      }}
-      onClose={doClose}
-      styling={{
-        maxWidth: "56rem",
-        width: "90vw",
-      }}
-    >
-      <Dialog.Content>
-        <div className="flex flex-col p-10">
-          <p className="mt-2 text-sm text-zinc-600">{graph.name}</p>
-          <AgentRunDraftView
-            className="p-0"
-            graph={graph}
-            doRun={doRun ? handleRun : undefined}
-            onRun={doRun ? undefined : doClose}
-            doCreateSchedule={doCreateSchedule ? handleSchedule : undefined}
-            onCreateSchedule={doCreateSchedule ? undefined : doClose}
-          />
-        </div>
-      </Dialog.Content>
-    </Dialog>
-  );
-}

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/RunnerOutputUI.tsx

@@ -1,156 +0,0 @@
-import React from "react";
-import {
-  Sheet,
-  SheetContent,
-  SheetHeader,
-  SheetTitle,
-  SheetDescription,
-} from "@/components/__legacy__/ui/sheet";
-import { ScrollArea } from "@/components/__legacy__/ui/scroll-area";
-import { Label } from "@/components/__legacy__/ui/label";
-import { Textarea } from "@/components/__legacy__/ui/textarea";
-import { Button } from "@/components/__legacy__/ui/button";
-import { Clipboard } from "lucide-react";
-import { useToast } from "@/components/molecules/Toast/use-toast";
-
-export type OutputNodeInfo = {
-  metadata: {
-    name: string;
-    description: string;
-  };
-  result?: any;
-};
-
-interface OutputModalProps {
-  isOpen: boolean;
-  doClose: () => void;
-  outputs: OutputNodeInfo[];
-  graphExecutionError?: string | null;
-}
-
-const formatOutput = (output: any): string => {
-  if (typeof output === "object") {
-    try {
-      if (
-        Array.isArray(output) &&
-        output.every((item) => typeof item === "string")
-      ) {
-        return output.join("\n").replace(/\\n/g, "\n");
-      }
-      return JSON.stringify(output, null, 2);
-    } catch (error) {
-      return `Error formatting output: ${(error as Error).message}`;
-    }
-  }
-  if (typeof output === "string") {
-    return output.replace(/\\n/g, "\n");
-  }
-  return String(output);
-};
-
-export function RunnerOutputUI({
-  isOpen,
-  doClose,
-  outputs,
-  graphExecutionError,
-}: OutputModalProps) {
-  const { toast } = useToast();
-
-  const copyOutput = (name: string, output: any) => {
-    const formattedOutput = formatOutput(output);
-    navigator.clipboard.writeText(formattedOutput).then(() => {
-      toast({
-        title: `"${name}" output copied to clipboard!`,
-        duration: 2000,
-      });
-    });
-  };
-
-  const adjustTextareaHeight = (textarea: HTMLTextAreaElement) => {
-    textarea.style.height = "auto";
-    textarea.style.height = `${textarea.scrollHeight}px`;
-  };
-
-  return (
-    <Sheet open={isOpen} onOpenChange={doClose}>
-      <SheetContent
-        side="right"
-        className="flex h-full w-full flex-col overflow-hidden sm:max-w-[600px]"
-      >
-        <SheetHeader className="px-2 py-2">
-          <SheetTitle className="text-xl">Run Outputs</SheetTitle>
-          <SheetDescription className="mt-1 text-sm">
-            View the outputs from your agent run.
-          </SheetDescription>
-        </SheetHeader>
-        <div className="flex-grow overflow-y-auto px-2 py-2">
-          <ScrollArea className="h-full overflow-auto pr-4">
-            <div className="space-y-4">
-              {graphExecutionError && (
-                <div className="rounded-md border border-red-200 bg-red-50 p-3 dark:border-red-800 dark:bg-red-900/20">
-                  <p className="text-sm text-red-800 dark:text-red-200">
-                    <strong>Error:</strong> {graphExecutionError}
-                  </p>
-                </div>
-              )}
-              {outputs && outputs.length > 0 ? (
-                outputs.map((output, i) => (
-                  <div key={i} className="space-y-1">
-                    <Label className="text-base font-semibold">
-                      {output.metadata.name || "Unnamed Output"}
-                    </Label>
-
-                    {output.metadata.description && (
-                      <Label className="block text-sm text-gray-600">
-                        {output.metadata.description}
-                      </Label>
-                    )}
-
-                    <div className="group relative rounded-md bg-gray-100 p-2">
-                      <Button
-                        className="absolute right-1 top-1 z-10 m-1 hidden p-2 group-hover:block"
-                        variant="outline"
-                        size="icon"
-                        onClick={() =>
-                          copyOutput(
-                            output.metadata.name || "Unnamed Output",
-                            output.result,
-                          )
-                        }
-                        title="Copy Output"
-                      >
-                        <Clipboard size={18} />
-                      </Button>
-                      <Textarea
-                        readOnly
-                        value={formatOutput(output.result ?? "No output yet")}
-                        className="w-full resize-none whitespace-pre-wrap break-words border-none bg-transparent text-sm"
-                        style={{
-                          height: "auto",
-                          minHeight: "2.5rem",
-                          maxHeight: "400px",
-                        }}
-                        ref={(el) => {
-                          if (el) {
-                            adjustTextareaHeight(el);
-                            if (el.scrollHeight > 400) {
-                              el.style.height = "400px";
-                            }
-                          }
-                        }}
-                      />
-                    </div>
-                  </div>
-                ))
-              ) : (
-                <p>No output blocks available.</p>
-              )}
-            </div>
-          </ScrollArea>
-        </div>
-      </SheetContent>
-    </Sheet>
-  );
-}
-
-export default RunnerOutputUI;

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/RunnerUIWrapper.tsx

@@ -1,117 +0,0 @@
-import React, {
-  useState,
-  forwardRef,
-  useImperativeHandle,
-  useMemo,
-} from "react";
-import { Node } from "@xyflow/react";
-import { CustomNodeData } from "@/app/(platform)/build/components/legacy-builder/CustomNode/CustomNode";
-import {
-  BlockUIType,
-  CredentialsMetaInput,
-  Graph,
-} from "@/lib/autogpt-server-api/types";
-import RunnerOutputUI, { OutputNodeInfo } from "./RunnerOutputUI";
-import { RunnerInputDialog } from "./RunnerInputUI";
-
-interface RunnerUIWrapperProps {
-  graph: Graph;
-  nodes: Node<CustomNodeData>[];
-  graphExecutionError?: string | null;
-  saveAndRun: (
-    inputs: Record<string, any>,
-    credentialsInputs: Record<string, CredentialsMetaInput>,
-  ) => void;
-  createRunSchedule: (
-    cronExpression: string,
-    scheduleName: string,
-    inputs: Record<string, any>,
-    credentialsInputs: Record<string, CredentialsMetaInput>,
-  ) => Promise<void>;
-}
-
-export interface RunnerUIWrapperRef {
-  openRunInputDialog: () => void;
-  openRunnerOutput: () => void;
-  runOrOpenInput: () => void;
-}
-
-const RunnerUIWrapper = forwardRef<RunnerUIWrapperRef, RunnerUIWrapperProps>(
-  (
-    { graph, nodes, graphExecutionError, saveAndRun, createRunSchedule },
-    ref,
-  ) => {
-    const [isRunInputDialogOpen, setIsRunInputDialogOpen] = useState(false);
-    const [isRunnerOutputOpen, setIsRunnerOutputOpen] = useState(false);
-
-    const graphInputs = graph.input_schema.properties;
-
-    const graphOutputs = useMemo((): OutputNodeInfo[] => {
-      const outputNodes = nodes.filter(
-        (node) => node.data.uiType === BlockUIType.OUTPUT,
-      );
-
-      return outputNodes.map(
-        (node) =>
-          ({
-            metadata: {
-              name: node.data.hardcodedValues.name || "Output",
-              description:
-                node.data.hardcodedValues.description ||
-                "Output from the agent",
-            },
-            result:
-              (node.data.executionResults as any)
-                ?.map((result: any) => result?.data?.output)
-                .join("\n--\n") || "No output yet",
-          }) satisfies OutputNodeInfo,
-      );
-    }, [nodes]);
-
-    const openRunInputDialog = () => setIsRunInputDialogOpen(true);
-    const openRunnerOutput = () => setIsRunnerOutputOpen(true);
-
-    const runOrOpenInput = () => {
-      if (
-        Object.keys(graphInputs).length > 0 ||
-        Object.keys(graph.credentials_input_schema.properties).length > 0
-      ) {
-        openRunInputDialog();
-      } else {
-        saveAndRun({}, {});
-      }
-    };
-
-    useImperativeHandle(
-      ref,
-      () =>
-        ({
-          openRunInputDialog,
-          openRunnerOutput,
-          runOrOpenInput,
-        }) satisfies RunnerUIWrapperRef,
-    );
-
-    return (
-      <>
-        <RunnerInputDialog
-          isOpen={isRunInputDialogOpen}
-          doClose={() => setIsRunInputDialogOpen(false)}
-          graph={graph}
-          doRun={saveAndRun}
-          doCreateSchedule={createRunSchedule}
-        />
-        <RunnerOutputUI
-          isOpen={isRunnerOutputOpen}
-          doClose={() => setIsRunnerOutputOpen(false)}
-          outputs={graphOutputs}
-          graphExecutionError={graphExecutionError}
-        />
-      </>
-    );
-  },
-);
-
-RunnerUIWrapper.displayName = "RunnerUIWrapper";
-
-export default RunnerUIWrapper;

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/SaveControl.tsx

@@ -1,217 +0,0 @@
-import React, { useEffect, useState } from "react";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/__legacy__/ui/popover";
-import { Card, CardContent, CardFooter } from "@/components/__legacy__/ui/card";
-import { Input } from "@/components/__legacy__/ui/input";
-import { Button } from "@/components/__legacy__/ui/button";
-import { GraphMeta } from "@/lib/autogpt-server-api";
-import { Label } from "@/components/__legacy__/ui/label";
-import { IconSave } from "@/components/__legacy__/ui/icons";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/atoms/Tooltip/BaseTooltip";
-import { useToast } from "@/components/molecules/Toast/use-toast";
-import { useQueryClient } from "@tanstack/react-query";
-import { getGetV2ListMySubmissionsQueryKey } from "@/app/api/__generated__/endpoints/store/store";
-import { CronExpressionDialog } from "@/app/(platform)/library/agents/[id]/components/OldAgentLibraryView/components/cron-scheduler-dialog";
-import { humanizeCronExpression } from "@/lib/cron-expression-utils";
-import { CalendarClockIcon } from "lucide-react";
-
-interface SaveControlProps {
-  agentMeta: GraphMeta | null;
-  agentName: string;
-  agentDescription: string;
-  agentRecommendedScheduleCron: string;
-  canSave: boolean;
-  onSave: () => Promise<void>;
-  onNameChange: (name: string) => void;
-  onDescriptionChange: (description: string) => void;
-  onRecommendedScheduleCronChange: (cron: string) => void;
-  pinSavePopover: boolean;
-}
-
-/**
- * A SaveControl component to be used within the ControlPanel. It allows the user to save the agent.
- * @param {Object} SaveControlProps - The properties of the SaveControl component.
- * @param {GraphMeta | null} SaveControlProps.agentMeta - The agent's metadata, or null if creating a new agent.
- * @param {string} SaveControlProps.agentName - The agent's name.
- * @param {string} SaveControlProps.agentDescription - The agent's description.
- * @param {boolean} SaveControlProps.canSave - Whether the button to save the agent should be enabled.
- * @param {() => void} SaveControlProps.onSave - Function to save the agent.
- * @param {(name: string) => void} SaveControlProps.onNameChange - Function to handle name changes.
- * @param {(description: string) => void} SaveControlProps.onDescriptionChange - Function to handle description changes.
- * @returns The SaveControl component.
- */
-export const SaveControl = ({
-  agentMeta,
-  canSave,
-  onSave,
-  agentName,
-  onNameChange,
-  agentDescription,
-  onDescriptionChange,
-  agentRecommendedScheduleCron,
-  onRecommendedScheduleCronChange,
-  pinSavePopover,
-}: SaveControlProps) => {
-  /**
-   * Note for improvement:
-   * At the moment we are leveraging onDescriptionChange and onNameChange to handle the changes in the description and name of the agent.
-   * We should migrate this to be handled with form controls and a form library.
-   */
-
-  const { toast } = useToast();
-  const queryClient = useQueryClient();
-  const [cronScheduleDialogOpen, setCronScheduleDialogOpen] = useState(false);
-
-  const handleScheduleChange = (cronExpression: string) => {
-    onRecommendedScheduleCronChange(cronExpression);
-  };
-
-  useEffect(() => {
-    const handleKeyDown = async (event: KeyboardEvent) => {
-      if ((event.ctrlKey || event.metaKey) && event.key === "s") {
-        event.preventDefault(); // Stop the browser default action
-        await onSave(); // Call your save function
-        queryClient.invalidateQueries({
-          queryKey: getGetV2ListMySubmissionsQueryKey(),
-        });
-        toast({
-          duration: 2000,
-          title: "All changes saved successfully!",
-        });
-      }
-    };
-
-    window.addEventListener("keydown", handleKeyDown);
-
-    return () => {
-      window.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [onSave, toast]);
-
-  return (
-    <Popover open={pinSavePopover ? true : undefined}>
-      <Tooltip delayDuration={500}>
-        <TooltipTrigger asChild>
-          <PopoverTrigger asChild>
-            <Button
-              variant="ghost"
-              size="icon"
-              data-id="save-control-popover-trigger"
-              data-testid="blocks-control-save-button"
-              name="Save"
-            >
-              <IconSave className="dark:text-gray-300" />
-            </Button>
-          </PopoverTrigger>
-        </TooltipTrigger>
-        <TooltipContent side="right">Save</TooltipContent>
-      </Tooltip>
-      <PopoverContent
-        side="right"
-        sideOffset={15}
-        align="start"
-        data-id="save-control-popover-content"
-        className="w-96 max-w-[400px]"
-      >
-        <Card className="border-none shadow-none dark:bg-slate-900">
-          <CardContent className="p-4">
-            <div className="space-y-3">
-              <div>
-                <Label htmlFor="name" className="dark:text-gray-300">
-                  Name
-                </Label>
-                <Input
-                  id="name"
-                  placeholder="Enter your agent name"
-                  value={agentName}
-                  onChange={(e) => onNameChange(e.target.value)}
-                  data-id="save-control-name-input"
-                  data-testid="save-control-name-input"
-                  maxLength={100}
-                  className="mt-1"
-                />
-              </div>
-
-              <div>
-                <Label htmlFor="description" className="dark:text-gray-300">
-                  Description
-                </Label>
-                <Input
-                  id="description"
-                  placeholder="Your agent description"
-                  value={agentDescription}
-                  onChange={(e) => onDescriptionChange(e.target.value)}
-                  data-id="save-control-description-input"
-                  data-testid="save-control-description-input"
-                  maxLength={500}
-                  className="mt-1"
-                />
-              </div>
-
-              <div>
-                <Label className="dark:text-gray-300">
-                  Recommended Schedule
-                </Label>
-                <Button
-                  variant="outline"
-                  onClick={() => setCronScheduleDialogOpen(true)}
-                  className="mt-1 w-full min-w-0 justify-start text-sm"
-                  data-id="save-control-recommended-schedule-button"
-                  data-testid="save-control-recommended-schedule-button"
-                >
-                  <CalendarClockIcon className="mr-2 h-4 w-4 flex-shrink-0" />
-                  <span className="min-w-0 flex-1 truncate">
-                    {agentRecommendedScheduleCron
-                      ? humanizeCronExpression(agentRecommendedScheduleCron)
-                      : "Set schedule"}
-                  </span>
-                </Button>
-              </div>
-
-              {agentMeta?.version && (
-                <div>
-                  <Label htmlFor="version" className="dark:text-gray-300">
-                    Version
-                  </Label>
-                  <Input
-                    id="version"
-                    placeholder="Version"
-                    value={agentMeta?.version || "-"}
-                    disabled
-                    data-testid="save-control-version-output"
-                    className="mt-1"
-                  />
-                </div>
-              )}
-            </div>
-          </CardContent>
-          <CardFooter className="flex flex-col items-stretch gap-2">
-            <Button
-              className="w-full dark:bg-slate-700 dark:text-slate-100 dark:hover:bg-slate-800"
-              onClick={onSave}
-              data-id="save-control-save-agent"
-              data-testid="save-control-save-agent-button"
-              disabled={!canSave}
-            >
-              Save Agent
-            </Button>
-          </CardFooter>
-        </Card>
-      </PopoverContent>
-      <CronExpressionDialog
-        open={cronScheduleDialogOpen}
-        setOpen={setCronScheduleDialogOpen}
-        onSubmit={handleScheduleChange}
-        defaultCronExpression={agentRecommendedScheduleCron}
-        title="Recommended Schedule"
-      />
-    </Popover>
-  );
-};

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/history.ts

@@ -1,95 +0,0 @@
-import { CustomNodeData } from "./CustomNode/CustomNode";
-import { CustomEdgeData } from "./CustomEdge/CustomEdge";
-import { Edge } from "@xyflow/react";
-
-type ActionType =
-  | "ADD_NODE"
-  | "DELETE_NODE"
-  | "ADD_EDGE"
-  | "DELETE_EDGE"
-  | "UPDATE_NODE"
-  | "MOVE_NODE"
-  | "UPDATE_INPUT"
-  | "UPDATE_NODE_POSITION";
-
-type AddNodePayload = { node: CustomNodeData };
-type DeleteNodePayload = { nodeId: string };
-type AddEdgePayload = { edge: Edge<CustomEdgeData> };
-type DeleteEdgePayload = { edgeId: string };
-type UpdateNodePayload = { nodeId: string; newData: Partial<CustomNodeData> };
-type MoveNodePayload = { nodeId: string; position: { x: number; y: number } };
-type UpdateInputPayload = {
-  nodeId: string;
-  oldValues: { [key: string]: any };
-  newValues: { [key: string]: any };
-};
-type UpdateNodePositionPayload = {
-  nodeId: string;
-  oldPosition: { x: number; y: number };
-  newPosition: { x: number; y: number };
-};
-
-type ActionPayload =
-  | AddNodePayload
-  | DeleteNodePayload
-  | AddEdgePayload
-  | DeleteEdgePayload
-  | UpdateNodePayload
-  | MoveNodePayload
-  | UpdateInputPayload
-  | UpdateNodePositionPayload;
-
-type Action = {
-  type: ActionType;
-  payload: ActionPayload;
-  undo: () => void;
-  redo: () => void;
-};
-
-class History {
-  private past: Action[] = [];
-  private future: Action[] = [];
-
-  push(action: Action) {
-    this.past.push(action);
-    this.future = [];
-  }
-
-  undo() {
-    const action = this.past.pop();
-    if (action) {
-      action.undo();
-      this.future.push(action);
-    }
-  }
-
-  redo() {
-    const action = this.future.pop();
-    if (action) {
-      action.redo();
-      this.past.push(action);
-    }
-  }
-
-  canUndo(): boolean {
-    return this.past.length > 0;
-  }
-
-  canRedo(): boolean {
-    return this.future.length > 0;
-  }
-
-  clear() {
-    this.past = [];
-    this.future = [];
-  }
-
-  getHistoryState() {
-    return {
-      past: [...this.past],
-      future: [...this.future],
-    };
-  }
-}
-
-export const history = new History();

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/tutorial.ts

@@ -1,569 +0,0 @@
-import Shepherd from "shepherd.js";
-import "shepherd.js/dist/css/shepherd.css";
-import { Key, storage } from "@/services/storage/local-storage";
-import { analytics } from "@/services/analytics";
-
-export const startTutorial = (
-  emptyNodeList: (forceEmpty: boolean) => boolean,
-  setPinBlocksPopover: (value: boolean) => void,
-  setPinSavePopover: (value: boolean) => void,
-) => {
-  const tour = new Shepherd.Tour({
-    useModalOverlay: true,
-    defaultStepOptions: {
-      cancelIcon: { enabled: true },
-      scrollTo: { behavior: "smooth", block: "center" },
-    },
-  });
-
-  // CSS classes for disabling and highlighting blocks
-  const disableClass = "disable-blocks";
-  const highlightClass = "highlight-block";
-  let isConnecting = false;
-
-  // Helper function to disable all blocks except the target block
-  const disableOtherBlocks = (targetBlockSelector: string) => {
-    document.querySelectorAll('[data-id^="block-card-"]').forEach((block) => {
-      block.classList.toggle(disableClass, !block.matches(targetBlockSelector));
-      block.classList.toggle(
-        highlightClass,
-        block.matches(targetBlockSelector),
-      );
-    });
-  };
-
-  // Helper function to enable all blocks
-  const enableAllBlocks = () => {
-    document.querySelectorAll('[data-id^="block-card-"]').forEach((block) => {
-      block.classList.remove(disableClass, highlightClass);
-    });
-  };
-
-  // Inject CSS for disabling and highlighting blocks
-  const injectStyles = () => {
-    const style = document.createElement("style");
-    style.textContent = `
-            .${disableClass} {
-                pointer-events: none;
-                opacity: 0.5;
-            }
-            .${highlightClass} {
-                background-color: #ffeb3b;
-                border: 2px solid #fbc02d;
-                transition: background-color 0.3s, border-color 0.3s;
-            }
-        `;
-    document.head.appendChild(style);
-  };
-
-  // Helper function to check if an element is present in the DOM
-  const waitForElement = (selector: string): Promise<void> => {
-    return new Promise((resolve) => {
-      const checkElement = () => {
-        if (document.querySelector(selector)) {
-          resolve();
-        } else {
-          setTimeout(checkElement, 10);
-        }
-      };
-      checkElement();
-    });
-  };
-
-  // Function to detect the correct connection and advance the tour
-  const detectConnection = () => {
-    const checkForConnection = () => {
-      const correctConnection = document.querySelector(
-        '[data-testid^="rf__edge-"]',
-      );
-      if (correctConnection) {
-        tour.show("press-run-again");
-      } else {
-        setTimeout(checkForConnection, 100);
-      }
-    };
-
-    checkForConnection();
-  };
-
-  // Define state management functions to handle connection state
-  function startConnecting() {
-    isConnecting = true;
-  }
-
-  function stopConnecting() {
-    isConnecting = false;
-  }
-
-  // Reset connection state when revisiting the step
-  function resetConnectionState() {
-    stopConnecting();
-  }
-
-  // Event handlers for mouse down and up to manage connection state
-  function handleMouseDown() {
-    startConnecting();
-    setTimeout(() => {
-      if (isConnecting) {
-        tour.next();
-      }
-    }, 100);
-  }
-  // Event handler for mouse up to check if the connection was successful
-  function handleMouseUp(event: { target: any }) {
-    const target = event.target;
-    const validConnectionPoint = document.querySelector(
-      '[data-testid^="rf__node-"]:nth-child(2) [data-id$="-a-target"]',
-    );
-
-    if (validConnectionPoint && !validConnectionPoint.contains(target)) {
-      setTimeout(() => {
-        if (!document.querySelector('[data-testid^="rf__edge-"]')) {
-          stopConnecting();
-          tour.show("connect-blocks-output");
-        }
-      }, 200);
-    } else {
-      stopConnecting();
-    }
-  }
-
-  // Define the fitViewToScreen function
-  const fitViewToScreen = () => {
-    const fitViewButton = document.querySelector(
-      ".react-flow__controls-fitview",
-    ) as HTMLButtonElement;
-    if (fitViewButton) {
-      fitViewButton.click();
-    }
-  };
-
-  injectStyles();
-
-  const warningText = emptyNodeList(false)
-    ? ""
-    : "<br/><br/><b>Caution: Clicking next will start a tutorial and will clear the current flow.</b>";
-
-  tour.addStep({
-    id: "starting-step",
-    title: "Welcome to the Tutorial",
-    text: `This is the AutoGPT builder! ${warningText}`,
-    buttons: [
-      {
-        text: "Skip Tutorial",
-        action: () => {
-          tour.cancel(); // Ends the tour
-          storage.set(Key.SHEPHERD_TOUR, "skipped"); // Set the tutorial as skipped in local storage
-        },
-        classes: "shepherd-button-secondary", // Optionally add a class for styling the skip button differently
-      },
-      {
-        text: "Next",
-        action: () => {
-          emptyNodeList(true);
-          tour.next();
-        },
-      },
-    ],
-  });
-
-  tour.addStep({
-    id: "open-block-step",
-    title: "Open Blocks Menu",
-    text: "Please click the block button to open the blocks menu.",
-    attachTo: {
-      element: '[data-id="blocks-control-popover-trigger"]',
-      on: "right",
-    },
-    advanceOn: {
-      selector: '[data-id="blocks-control-popover-trigger"]',
-      event: "click",
-    },
-    buttons: [],
-  });
-
-  tour.addStep({
-    id: "scroll-block-menu",
-    title: "Scroll Down or Search",
-    text: 'Scroll down or search in the blocks menu for the "Calculator Block" and press the block to add it.',
-    attachTo: {
-      element: '[data-id="blocks-control-popover-content"]',
-      on: "right",
-    },
-    buttons: [],
-    beforeShowPromise: () =>
-      waitForElement('[data-id="blocks-control-popover-content"]').then(() => {
-        disableOtherBlocks(
-          '[data-id="block-card-b1ab9b19-67a6-406d-abf5-2dba76d00c79"]',
-        );
-      }),
-    advanceOn: {
-      selector: '[data-id="block-card-b1ab9b19-67a6-406d-abf5-2dba76d00c79"]',
-      event: "click",
-    },
-    when: {
-      show: () => setPinBlocksPopover(true),
-      hide: enableAllBlocks,
-    },
-  });
-
-  tour.addStep({
-    id: "focus-new-block",
-    title: "New Block",
-    text: "This is the Calculator Block! Let's go over how it works.",
-    attachTo: { element: `[data-id="custom-node-1"]`, on: "left" },
-    beforeShowPromise: () => waitForElement('[data-id="custom-node-1"]'),
-    buttons: [
-      {
-        text: "Next",
-        action: tour.next,
-      },
-    ],
-    when: {
-      show: () => {
-        setPinBlocksPopover(false);
-        setTimeout(() => {
-          fitViewToScreen();
-        }, 100);
-      },
-    },
-  });
-
-  tour.addStep({
-    id: "input-to-block",
-    title: "Input to the Block",
-    text: "This is the input pin for the block. You can input the output of other blocks here; this block takes numbers as input.",
-    attachTo: { element: '[data-nodeid="1"]', on: "left" },
-    buttons: [
-      {
-        text: "Back",
-        action: tour.back,
-      },
-      {
-        text: "Next",
-        action: tour.next,
-      },
-    ],
-  });
-
-  tour.addStep({
-    id: "output-from-block",
-    title: "Output from the Block",
-    text: "This is the output pin for the block. You can connect this to another block to pass the output along.",
-    attachTo: { element: '[data-handlepos="right"]', on: "right" },
-    buttons: [
-      {
-        text: "Back",
-        action: tour.back,
-      },
-      {
-        text: "Next",
-        action: tour.next,
-      },
-    ],
-  });
-
-  tour.addStep({
-    id: "select-operation-and-input",
-    title: "Select Operation and Input Numbers",
-    text: "Select any mathematical operation you'd like to perform, and enter numbers in both input fields.",
-    attachTo: { element: '[data-id="input-handles"]', on: "right" },
-    buttons: [
-      {
-        text: "Back",
-        action: tour.back,
-      },
-      {
-        text: "Next",
-        action: tour.next,
-      },
-    ],
-  });
-
-  tour.addStep({
-    id: "press-initial-save-button",
-    title: "Press Save",
-    text: "First we need to save the flow before we can run it!",
-    attachTo: {
-      element: '[data-id="save-control-popover-trigger"]',
-      on: "left",
-    },
-    advanceOn: {
-      selector: '[data-id="save-control-popover-trigger"]',
-      event: "click",
-    },
-    buttons: [
-      {
-        text: "Back",
-        action: tour.back,
-      },
-    ],
-    when: {
-      hide: () => setPinSavePopover(true),
-    },
-  });
-
-  tour.addStep({
-    id: "save-agent-details",
-    title: "Save the Agent",
-    text: "Enter a name for your agent, add an optional description, and then click 'Save agent' to save your flow.",
-    attachTo: {
-      element: '[data-id="save-control-popover-content"]',
-      on: "top",
-    },
-    buttons: [],
-    beforeShowPromise: () =>
-      waitForElement('[data-id="save-control-popover-content"]'),
-    advanceOn: {
-      selector: '[data-id="save-control-save-agent"]',
-      event: "click",
-    },
-    when: {
-      hide: () => setPinSavePopover(false),
-    },
-  });
-
-  tour.addStep({
-    id: "press-run",
-    title: "Press Run",
-    text: "Start your first flow by pressing the Run button!",
-    attachTo: {
-      element: '[data-tutorial-id="primary-action-run-agent"]',
-      on: "top",
-    },
-    advanceOn: {
-      selector: '[data-tutorial-id="primary-action-run-agent"]',
-      event: "click",
-    },
-    buttons: [],
-    beforeShowPromise: () =>
-      waitForElement('[data-tutorial-id="primary-action-run-agent"]'),
-    when: {
-      hide: () => {
-        setTimeout(() => {
-          fitViewToScreen();
-        }, 500);
-      },
-    },
-  });
-
-  tour.addStep({
-    id: "wait-for-processing",
-    title: "Processing",
-    text: "Let's wait for the block to finish being processed...",
-    attachTo: {
-      element: '[data-id^="badge-"][data-id$="-QUEUED"]',
-      on: "bottom",
-    },
-    buttons: [],
-    beforeShowPromise: () =>
-      waitForElement('[data-id^="badge-"][data-id$="-QUEUED"]').then(
-        fitViewToScreen,
-      ),
-    when: {
-      show: () => {
-        waitForElement('[data-id^="badge-"][data-id$="-COMPLETED"]').then(
-          () => {
-            tour.next();
-          },
-        );
-      },
-    },
-  });
-
-  tour.addStep({
-    id: "check-output",
-    title: "Check the Output",
-    text: "Check here to see the output of the block after running the flow.",
-    attachTo: { element: '[data-id="latest-output"]', on: "top" },
-    beforeShowPromise: () =>
-      new Promise((resolve) => {
-        setTimeout(() => {
-          waitForElement('[data-id="latest-output"]').then(resolve);
-        }, 100);
-      }),
-    buttons: [
-      {
-        text: "Next",
-        action: tour.next,
-      },
-    ],
-    when: {
-      show: () => {
-        fitViewToScreen();
-      },
-    },
-  });
-
-  tour.addStep({
-    id: "copy-paste-block",
-    title: "Copy and Paste the Block",
-    text: "Let’s duplicate this block. Click and hold the block with your mouse, then press Ctrl+C (Cmd+C on Mac) to copy and Ctrl+V (Cmd+V on Mac) to paste.",
-    attachTo: { element: '[data-testid^="rf__node-"]', on: "top" },
-    buttons: [
-      {
-        text: "Back",
-        action: tour.back,
-      },
-    ],
-    when: {
-      show: () => {
-        fitViewToScreen();
-        waitForElement('[data-testid^="rf__node-"]:nth-child(2)').then(() => {
-          tour.next();
-        });
-      },
-    },
-  });
-
-  tour.addStep({
-    id: "focus-second-block",
-    title: "Focus on the New Block",
-    text: "This is your copied Calculator Block. Now, let’s move it to the side of the first block.",
-    attachTo: { element: '[data-testid^="rf__node-"]:nth-child(2)', on: "top" },
-    beforeShowPromise: () =>
-      waitForElement('[data-testid^="rf__node-"]:nth-child(2)'),
-    buttons: [
-      {
-        text: "Next",
-        action: tour.next,
-      },
-    ],
-  });
-
-  tour.addStep({
-    id: "connect-blocks-output",
-    title: "Connect the Blocks: Output",
-    text: "Now, let's connect the output of the first Calculator Block to the input of the second Calculator Block. Drag from the output pin of the first block to the input pin (A) of the second block.",
-    attachTo: {
-      element:
-        '[data-testid^="rf__node-"]:first-child [data-id$="-result-source"]',
-      on: "bottom",
-    },
-
-    buttons: [
-      {
-        text: "Back",
-        action: tour.back,
-      },
-    ],
-    beforeShowPromise: () => {
-      return waitForElement(
-        '[data-testid^="rf__node-"]:first-child [data-id$="-result-source"]',
-      );
-    },
-    when: {
-      show: () => {
-        fitViewToScreen();
-        resetConnectionState(); // Reset state when revisiting this step
-        tour.modal.show();
-        const outputPin = document.querySelector(
-          '[data-testid^="rf__node-"]:first-child [data-id$="-result-source"]',
-        );
-        if (outputPin) {
-          outputPin.addEventListener("mousedown", handleMouseDown);
-        }
-      },
-      hide: () => {
-        const outputPin = document.querySelector(
-          '[data-testid^="rf__node-"]:first-child [data-id$="-result-source"]',
-        );
-        if (outputPin) {
-          outputPin.removeEventListener("mousedown", handleMouseDown);
-        }
-      },
-    },
-  });
-
-  tour.addStep({
-    id: "connect-blocks-input",
-    title: "Connect the Blocks: Input",
-    text: "Now, connect the output to the input pin of the second block (A).",
-    attachTo: {
-      element: '[data-testid^="rf__node-"]:nth-child(2) [data-id$="-a-target"]',
-      on: "top",
-    },
-    buttons: [],
-    beforeShowPromise: () => {
-      return waitForElement(
-        '[data-testid^="rf__node-"]:nth-child(2) [data-id$="-a-target"]',
-      ).then(() => {
-        detectConnection();
-      });
-    },
-    when: {
-      show: () => {
-        tour.modal.show();
-        document.addEventListener("mouseup", handleMouseUp, true);
-      },
-      hide: () => {
-        tour.modal.hide();
-        document.removeEventListener("mouseup", handleMouseUp, true);
-      },
-    },
-  });
-
-  tour.addStep({
-    id: "press-run-again",
-    title: "Press Run Again",
-    text: "Now, press the Run button again to execute the flow with the new Calculator Block added!",
-    attachTo: {
-      element: '[data-tutorial-id="primary-action-run-agent"]',
-      on: "top",
-    },
-    advanceOn: {
-      selector: '[data-tutorial-id="primary-action-run-agent"]',
-      event: "click",
-    },
-    buttons: [],
-    beforeShowPromise: () =>
-      waitForElement('[data-tutorial-id="primary-action-run-agent"]'),
-    when: {
-      hide: () => {
-        setTimeout(() => {
-          fitViewToScreen();
-        }, 500);
-      },
-    },
-  });
-
-  tour.addStep({
-    id: "congratulations",
-    title: "Congratulations!",
-    text: "You have successfully created your first flow. Watch for the outputs in the blocks!",
-    beforeShowPromise: () => waitForElement('[data-id="latest-output"]'),
-    when: {
-      show: () => tour.modal.hide(),
-    },
-    buttons: [
-      {
-        text: "Finish",
-        action: tour.complete,
-      },
-    ],
-  });
-
-  // Unpin blocks and save menu when the tour is completed or canceled
-  tour.on("complete", () => {
-    setPinBlocksPopover(false);
-    setPinSavePopover(false);
-    storage.set(Key.SHEPHERD_TOUR, "completed"); // Optionally mark the tutorial as completed
-  });
-
-  for (const step of tour.steps) {
-    step.on("show", () => {
-      "use client";
-      console.debug("sendTutorialStep");
-
-      analytics.sendGAEvent("event", "tutorial_step_shown", { value: step.id });
-    });
-  }
-
-  tour.on("cancel", () => {
-    setPinBlocksPopover(false);
-    setPinSavePopover(false);
-    storage.set(Key.SHEPHERD_TOUR, "canceled"); // Optionally mark the tutorial as canceled
-  });
-
-  tour.start();
-};

autogpt_platform/frontend/src/app/(platform)/build/components/legacy-builder/useCopyPaste.ts

@@ -1,142 +0,0 @@
-import { useCallback } from "react";
-import { Node, Edge, useReactFlow } from "@xyflow/react";
-import { Key, storage } from "@/services/storage/local-storage";
-import { ConnectedEdge } from "./CustomNode/CustomNode";
-
-interface CopyableData {
-  nodes: Node[];
-  edges: Edge[];
-}
-
-export function useCopyPaste(getNextNodeId: () => string) {
-  const { setNodes, addEdges, getNodes, getEdges, getViewport } =
-    useReactFlow();
-
-  const handleCopyPaste = useCallback(
-    (event: KeyboardEvent) => {
-      if (event.ctrlKey || event.metaKey) {
-        if (event.key === "c" || event.key === "C") {
-          const selectedNodes = getNodes().filter((node) => node.selected);
-          const selectedNodeIds = new Set(selectedNodes.map((node) => node.id));
-
-          // Only copy edges where both source and target nodes are selected
-          const selectedEdges = getEdges().filter(
-            (edge) =>
-              edge.selected &&
-              selectedNodeIds.has(edge.source) &&
-              selectedNodeIds.has(edge.target),
-          );
-
-          const copiedData: CopyableData = {
-            nodes: selectedNodes.map((node) => ({
-              ...node,
-              data: {
-                ...node.data,
-                connections: node.data.connections || [], // Preserve connections
-              },
-            })),
-            edges: selectedEdges,
-          };
-
-          storage.set(Key.COPIED_FLOW_DATA, JSON.stringify(copiedData));
-        }
-        if (event.key === "v" || event.key === "V") {
-          const copiedDataString = storage.get(Key.COPIED_FLOW_DATA);
-          if (copiedDataString) {
-            const copiedData = JSON.parse(copiedDataString) as CopyableData;
-            const oldToNewIdMap: Record<string, string> = {};
-
-            // Get fresh viewport values at paste time to ensure correct positioning
-            const { x, y, zoom } = getViewport();
-            const viewportCenter = {
-              x: (window.innerWidth / 2 - x) / zoom,
-              y: (window.innerHeight / 2 - y) / zoom,
-            };
-
-            let minX = Infinity,
-              minY = Infinity,
-              maxX = -Infinity,
-              maxY = -Infinity;
-            copiedData.nodes.forEach((node: Node) => {
-              minX = Math.min(minX, node.position.x);
-              minY = Math.min(minY, node.position.y);
-              maxX = Math.max(maxX, node.position.x);
-              maxY = Math.max(maxY, node.position.y);
-            });
-
-            const offsetX = viewportCenter.x - (minX + maxX) / 2;
-            const offsetY = viewportCenter.y - (minY + maxY) / 2;
-
-            const pastedNodes = copiedData.nodes.map((node: Node) => {
-              const newNodeId = getNextNodeId();
-              oldToNewIdMap[node.id] = newNodeId;
-              return {
-                ...node,
-                id: newNodeId, // Generate unique ID for the pasted node
-                selected: true, // Select the pasted nodes so they're visible
-                position: {
-                  x: node.position.x + offsetX,
-                  y: node.position.y + offsetY,
-                },
-                data: {
-                  ...node.data,
-                  backend_id: undefined, // Clear backend_id so the new node.id is used when saving
-                  connections: node.data.connections || [], // Preserve connections
-                  status: undefined,
-                  executionResults: undefined,
-                },
-              };
-            });
-
-            const pastedEdges = copiedData.edges.map((edge) => {
-              const newSourceId = oldToNewIdMap[edge.source] ?? edge.source;
-              const newTargetId = oldToNewIdMap[edge.target] ?? edge.target;
-              return {
-                ...edge,
-                id: `${newSourceId}_${edge.sourceHandle}_${newTargetId}_${edge.targetHandle}_${Date.now()}`,
-                source: newSourceId,
-                target: newTargetId,
-              };
-            });
-
-            setNodes((existingNodes) => [
-              ...existingNodes.map((node) => ({ ...node, selected: false })),
-              ...pastedNodes,
-            ]);
-            addEdges(pastedEdges);
-
-            setNodes((nodes) => {
-              return nodes.map((node) => {
-                const nodeConnections = getEdges()
-                  .filter(
-                    (edge: Edge) =>
-                      edge.source === node.id || edge.target === node.id,
-                  )
-                  .map(
-                    (edge: Edge): ConnectedEdge => ({
-                      id: edge.id,
-                      source: edge.source,
-                      target: edge.target,
-                      sourceHandle: edge.sourceHandle!,
-                      targetHandle: edge.targetHandle!,
-                    }),
-                  );
-
-                return {
-                  ...node,
-                  data: {
-                    ...node.data,
-                    connections: nodeConnections,
-                  },
-                };
-              });
-            });
-          }
-        }
-      }
-    },
-    [setNodes, addEdges, getNodes, getEdges, getNextNodeId, getViewport],
-  );
-
-  return handleCopyPaste;
-}

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

@@ -1,64 +1,13 @@
 "use client";
-
-import FlowEditor from "@/app/(platform)/build/components/legacy-builder/Flow/Flow";
-import { useOnboarding } from "@/providers/onboarding/onboarding-provider";
-// import LoadingBox from "@/components/__legacy__/ui/loading";
-import { GraphID } from "@/lib/autogpt-server-api/types";
 import { ReactFlowProvider } from "@xyflow/react";
-import { useSearchParams } from "next/navigation";
-import { useEffect } from "react";
-import { BuilderViewTabs } from "./components/BuilderViewTabs/BuilderViewTabs";
 import { Flow } from "./components/FlowEditor/Flow/Flow";
-import { useBuilderView } from "./useBuilderView";
-
-function BuilderContent() {
-  const query = useSearchParams();
-  const { completeStep } = useOnboarding();
-
-  useEffect(() => {
-    completeStep("BUILDER_OPEN");
-  }, [completeStep]);
-
-  const _graphVersion = query.get("flowVersion");
-  const graphVersion = _graphVersion ? parseInt(_graphVersion) : undefined;
-  return (
-    <FlowEditor
-      className="flex h-full w-full"
-      flowID={(query.get("flowID") as GraphID | null) ?? undefined}
-      flowVersion={graphVersion}
-    />
-  );
-}
 
 export default function BuilderPage() {
-  const {
-    isSwitchEnabled,
-    selectedView,
-    setSelectedView,
-    isNewFlowEditorEnabled,
-  } = useBuilderView();
-
-  // Switch is temporary, we will remove it once our new flow editor is ready
-  if (isSwitchEnabled) {
-    return (
-      <div className="relative h-full w-full">
-        <BuilderViewTabs value={selectedView} onChange={setSelectedView} />
-        {selectedView === "new" ? (
-          <ReactFlowProvider>
-            <Flow />
-          </ReactFlowProvider>
-        ) : (
-          <BuilderContent />
-        )}
-      </div>
-    );
-  }
-
-  return isNewFlowEditorEnabled ? (
-    <ReactFlowProvider>
-      <Flow />
-    </ReactFlowProvider>
-  ) : (
-    <BuilderContent />
+  return (
+    <div className="relative h-full w-full">
+      <ReactFlowProvider>
+        <Flow />
+      </ReactFlowProvider>
+    </div>
   );
 }

autogpt_platform/frontend/src/app/(platform)/build/useBuilderView.ts

@@ -1,44 +0,0 @@
-import { Flag, useGetFlag } from "@/services/feature-flags/use-get-flag";
-import { usePathname, useRouter, useSearchParams } from "next/navigation";
-import { useEffect, useMemo } from "react";
-import { BuilderView } from "./components/BuilderViewTabs/BuilderViewTabs";
-
-export function useBuilderView() {
-  const isNewFlowEditorEnabled = useGetFlag(Flag.NEW_FLOW_EDITOR);
-  const isBuilderViewSwitchEnabled = useGetFlag(Flag.BUILDER_VIEW_SWITCH);
-
-  const router = useRouter();
-  const pathname = usePathname();
-  const searchParams = useSearchParams();
-
-  const currentView = searchParams.get("view");
-  const defaultView = "old";
-  const selectedView = useMemo<BuilderView>(() => {
-    if (currentView === "new" || currentView === "old") return currentView;
-    return defaultView;
-  }, [currentView, defaultView]);
-
-  useEffect(() => {
-    if (isBuilderViewSwitchEnabled === true) {
-      if (currentView !== "new" && currentView !== "old") {
-        const params = new URLSearchParams(searchParams);
-        params.set("view", defaultView);
-        router.replace(`${pathname}?${params.toString()}`);
-      }
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isBuilderViewSwitchEnabled, defaultView, pathname, router, searchParams]);
-
-  const setSelectedView = (value: BuilderView) => {
-    const params = new URLSearchParams(searchParams);
-    params.set("view", value);
-    router.push(`${pathname}?${params.toString()}`);
-  };
-
-  return {
-    isSwitchEnabled: isBuilderViewSwitchEnabled === true,
-    selectedView,
-    setSelectedView,
-    isNewFlowEditorEnabled: Boolean(isNewFlowEditorEnabled),
-  } as const;
-}

autogpt_platform/frontend/src/app/(platform)/monitoring/components/AgentFlowList.tsx

@@ -1,180 +0,0 @@
-import { GraphExecutionMeta, LibraryAgent } from "@/lib/autogpt-server-api";
-import React from "react";
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from "@/components/__legacy__/ui/card";
-import { Button } from "@/components/__legacy__/ui/button";
-import { TextRenderer } from "@/components/__legacy__/ui/render";
-import Link from "next/link";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTrigger,
-} from "@/components/__legacy__/ui/dialog";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/__legacy__/ui/dropdown-menu";
-import { ChevronDownIcon, EnterIcon } from "@radix-ui/react-icons";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/__legacy__/ui/table";
-import { formatDistanceToNow } from "date-fns";
-import { DialogTitle } from "@/components/__legacy__/ui/dialog";
-import { AgentImportForm } from "./AgentImportForm";
-
-export const AgentFlowList = ({
-  flows,
-  executions,
-  selectedFlow,
-  onSelectFlow,
-  className,
-}: {
-  flows: LibraryAgent[];
-  executions?: GraphExecutionMeta[];
-  selectedFlow: LibraryAgent | null;
-  onSelectFlow: (f: LibraryAgent) => void;
-  className?: string;
-}) => {
-  return (
-    <Card className={className}>
-      <CardHeader className="flex-row items-center justify-between space-x-3 space-y-0">
-        <CardTitle>Agents</CardTitle>
-
-        <div className="flex items-center">
-          {/* Split "Create" button */}
-          <Button variant="outline" className="rounded-r-none">
-            <Link href="/build">Create</Link>
-          </Button>
-          <Dialog>
-            {/* https://ui.shadcn.com/docs/components/dialog#notes */}
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Button
-                  variant="outline"
-                  className={"rounded-l-none border-l-0 px-2"}
-                  data-testid="create-agent-dropdown"
-                >
-                  <ChevronDownIcon />
-                </Button>
-              </DropdownMenuTrigger>
-
-              <DropdownMenuContent>
-                <DialogTrigger asChild>
-                  <DropdownMenuItem data-testid="import-agent-from-file">
-                    <EnterIcon className="mr-2" /> Import from file
-                  </DropdownMenuItem>
-                </DialogTrigger>
-              </DropdownMenuContent>
-            </DropdownMenu>
-
-            <DialogContent>
-              <DialogHeader>
-                <DialogTitle className="sr-only">Import Agent</DialogTitle>
-                <h2 className="text-lg font-semibold">
-                  Import an Agent from a file
-                </h2>
-              </DialogHeader>
-              <AgentImportForm />
-            </DialogContent>
-          </Dialog>
-        </div>
-      </CardHeader>
-
-      <CardContent>
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead>Name</TableHead>
-              {/* <TableHead>Status</TableHead> */}
-              {/* <TableHead>Last updated</TableHead> */}
-              {executions && (
-                <TableHead className="md:hidden lg:table-cell">
-                  # of runs
-                </TableHead>
-              )}
-              {executions && <TableHead>Last run</TableHead>}
-            </TableRow>
-          </TableHeader>
-          <TableBody data-testid="agent-flow-list-body">
-            {flows
-              .map((flow) => {
-                let runCount = 0,
-                  lastRun: GraphExecutionMeta | null = null;
-                if (executions) {
-                  const _flowRuns = executions.filter(
-                    (r) => r.graph_id == flow.graph_id,
-                  );
-                  runCount = _flowRuns.length;
-                  lastRun =
-                    runCount == 0
-                      ? null
-                      : _flowRuns.reduce((a, c) => {
-                          const aTime = a.started_at?.getTime() ?? 0;
-                          const cTime = c.started_at?.getTime() ?? 0;
-                          return aTime > cTime ? a : c;
-                        });
-                }
-                return { flow, runCount, lastRun };
-              })
-              .sort((a, b) => {
-                if (!a.lastRun && !b.lastRun) return 0;
-                if (!a.lastRun) return 1;
-                if (!b.lastRun) return -1;
-                const bTime = b.lastRun.started_at?.getTime() ?? 0;
-                const aTime = a.lastRun.started_at?.getTime() ?? 0;
-                return bTime - aTime;
-              })
-              .map(({ flow, runCount, lastRun }) => (
-                <TableRow
-                  key={flow.id}
-                  data-testid={flow.id}
-                  data-name={flow.name}
-                  className="cursor-pointer"
-                  onClick={() => onSelectFlow(flow)}
-                  data-state={selectedFlow?.id == flow.id ? "selected" : null}
-                >
-                  <TableCell>
-                    <TextRenderer value={flow.name} truncateLengthLimit={30} />
-                  </TableCell>
-                  {/* <TableCell><FlowStatusBadge status={flow.status ?? "active"} /></TableCell> */}
-                  {/* <TableCell>
-                  {flow.updatedAt ?? "???"}
-                </TableCell> */}
-                  {executions && (
-                    <TableCell className="md:hidden lg:table-cell">
-                      {runCount}
-                    </TableCell>
-                  )}
-                  {executions &&
-                    (!lastRun ? (
-                      <TableCell />
-                    ) : (
-                      <TableCell title={lastRun.started_at?.toString() ?? ""}>
-                        {lastRun.started_at
-                          ? formatDistanceToNow(lastRun.started_at, {
-                              addSuffix: true,
-                            })
-                          : "—"}
-                      </TableCell>
-                    ))}
-                </TableRow>
-              ))}
-          </TableBody>
-        </Table>
-      </CardContent>
-    </Card>
-  );
-};
-export default AgentFlowList;

autogpt_platform/frontend/src/app/(platform)/monitoring/components/AgentImportForm.tsx

@@ -1,175 +0,0 @@
-import { z } from "zod";
-import { cn } from "@/lib/utils";
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import React, { useState } from "react";
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from "@/components/__legacy__/ui/form";
-import { Input } from "@/components/__legacy__/ui/input";
-import { Button } from "@/components/__legacy__/ui/button";
-import { Textarea } from "@/components/__legacy__/ui/textarea";
-import { EnterIcon } from "@radix-ui/react-icons";
-import { useBackendAPI } from "@/lib/autogpt-server-api/context";
-import {
-  Graph,
-  GraphCreatable,
-  sanitizeImportedGraph,
-} from "@/lib/autogpt-server-api";
-
-// Add this custom schema for File type
-const fileSchema = z.custom<File>((val) => val instanceof File, {
-  message: "Must be a File object",
-});
-
-const formSchema = z.object({
-  agentFile: fileSchema,
-  agentName: z.string().min(1, "Agent name is required"),
-  agentDescription: z.string(),
-  importAsTemplate: z.boolean(),
-});
-
-export const AgentImportForm: React.FC<
-  React.FormHTMLAttributes<HTMLFormElement>
-> = ({ className, ...props }) => {
-  const [agentObject, setAgentObject] = useState<GraphCreatable | null>(null);
-  const api = useBackendAPI();
-
-  const form = useForm<z.infer<typeof formSchema>>({
-    resolver: zodResolver(formSchema),
-    defaultValues: {
-      agentName: "",
-      agentDescription: "",
-      importAsTemplate: false,
-    },
-  });
-
-  function onSubmit(values: z.infer<typeof formSchema>) {
-    if (!agentObject) {
-      form.setError("root", { message: "No Agent object to save" });
-      return;
-    }
-    const payload: GraphCreatable = {
-      ...agentObject,
-      name: values.agentName,
-      description: values.agentDescription,
-      is_active: !values.importAsTemplate,
-    };
-
-    api
-      .createGraph(payload, "upload")
-      .then((response) => {
-        const qID = "flowID";
-        window.location.href = `/build?${qID}=${response.id}`;
-      })
-      .catch((error) => {
-        const entity_type = "agent";
-        form.setError("root", {
-          message: `Could not create ${entity_type}: ${error}`,
-        });
-      });
-  }
-
-  return (
-    <Form {...form}>
-      <form
-        onSubmit={form.handleSubmit(onSubmit)}
-        className={cn("space-y-4", className)}
-        {...props}
-      >
-        <FormField
-          control={form.control}
-          name="agentFile"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Agent file</FormLabel>
-              <FormControl className="cursor-pointer">
-                <Input
-                  type="file"
-                  accept="application/json"
-                  data-testid="import-agent-file-input"
-                  onChange={(e) => {
-                    const file = e.target.files?.[0];
-                    if (file) {
-                      field.onChange(file);
-                      const reader = new FileReader();
-                      // Attach parser to file reader
-                      reader.onload = (event) => {
-                        try {
-                          const obj = JSON.parse(
-                            event.target?.result as string,
-                          );
-                          if (
-                            !["name", "description", "nodes", "links"].every(
-                              (key) => key in obj && obj[key] != null,
-                            )
-                          ) {
-                            throw new Error(
-                              "Invalid agent object in file: " +
-                                JSON.stringify(obj, null, 2),
-                            );
-                          }
-                          const graph = obj as Graph;
-                          sanitizeImportedGraph(graph);
-                          setAgentObject(graph);
-                          form.setValue("agentName", graph.name);
-                          form.setValue("agentDescription", graph.description);
-                        } catch (error) {
-                          console.error("Error loading agent file:", error);
-                        }
-                      };
-                      // Load file
-                      reader.readAsText(file);
-                    }
-                  }}
-                />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <FormField
-          control={form.control}
-          name="agentName"
-          disabled={!agentObject}
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Agent name</FormLabel>
-              <FormControl>
-                <Input {...field} data-testid="agent-name-input" />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <FormField
-          control={form.control}
-          name="agentDescription"
-          disabled={!agentObject}
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Agent description</FormLabel>
-              <FormControl>
-                <Textarea {...field} data-testid="agent-description-input" />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <Button
-          type="submit"
-          className="w-full"
-          disabled={!agentObject}
-          data-testid="import-agent-submit"
-        >
-          <EnterIcon className="mr-2" /> Import & Edit
-        </Button>
-      </form>
-    </Form>
-  );
-};

autogpt_platform/frontend/src/app/(platform)/monitoring/components/FlowInfo.tsx

@@ -1,243 +0,0 @@
-import React, { useEffect, useState } from "react";
-import {
-  Graph,
-  GraphExecutionMeta,
-  LibraryAgent,
-} from "@/lib/autogpt-server-api";
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from "@/components/__legacy__/ui/card";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuLabel,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/__legacy__/ui/dropdown-menu";
-import { Button, buttonVariants } from "@/components/__legacy__/ui/button";
-import {
-  ClockIcon,
-  ExitIcon,
-  Pencil2Icon,
-  PlayIcon,
-  TrashIcon,
-} from "@radix-ui/react-icons";
-import Link from "next/link";
-import { exportAsJSONFile } from "@/lib/utils";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogDescription,
-  DialogFooter,
-} from "@/components/__legacy__/ui/dialog";
-import useAgentGraph from "@/hooks/useAgentGraph";
-import { useBackendAPI } from "@/lib/autogpt-server-api/context";
-import { FlowRunsStatus } from "./FlowRunsStatus";
-import { RunnerInputDialog } from "../../build/components/legacy-builder/RunnerInputUI";
-
-export const FlowInfo: React.FC<
-  React.HTMLAttributes<HTMLDivElement> & {
-    flow: LibraryAgent;
-    executions: GraphExecutionMeta[];
-    flowVersion?: number | "all";
-    refresh: () => void;
-  }
-> = ({ flow, executions, flowVersion, refresh, ...props }) => {
-  const { savedAgent, saveAndRun, stopRun, isRunning } = useAgentGraph(
-    flow.graph_id,
-    flow.graph_version,
-    undefined,
-    false,
-  );
-
-  const api = useBackendAPI();
-
-  const [flowVersions, setFlowVersions] = useState<Graph[] | null>(null);
-  const [selectedVersion, setSelectedFlowVersion] = useState(
-    flowVersion ?? "all",
-  );
-  const selectedFlowVersion: Graph | undefined = flowVersions?.find(
-    (v) =>
-      v.version ==
-      (selectedVersion == "all" ? flow.graph_version : selectedVersion),
-  );
-
-  const hasInputs = Object.keys(flow.input_schema.properties).length > 0;
-  const hasCredentialsInputs =
-    Object.keys(flow.credentials_input_schema.properties).length > 0;
-
-  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
-  const [isRunDialogOpen, setIsRunDialogOpen] = useState(false);
-  const isDisabled = !selectedFlowVersion;
-
-  useEffect(() => {
-    api
-      .getGraphAllVersions(flow.graph_id)
-      .then((result) => setFlowVersions(result));
-  }, [flow.graph_id, api]);
-
-  const openRunDialog = () => setIsRunDialogOpen(true);
-
-  const runOrOpenInput = () => {
-    if (hasInputs || hasCredentialsInputs) {
-      openRunDialog();
-    } else {
-      saveAndRun({}, {});
-    }
-  };
-
-  return (
-    <Card {...props}>
-      <CardHeader className="">
-        <CardTitle>
-          {flow.name} <span className="font-light">v{flow.graph_version}</span>
-        </CardTitle>
-        <div className="flex flex-col space-y-2 py-6">
-          {(flowVersions?.length ?? 0) > 1 && (
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Button variant="outline">
-                  <ClockIcon className="mr-2" />
-                  {selectedVersion == "all"
-                    ? "All versions"
-                    : `Version ${selectedVersion}`}
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent className="w-56">
-                <DropdownMenuLabel>Choose a version</DropdownMenuLabel>
-                <DropdownMenuSeparator />
-                <DropdownMenuRadioGroup
-                  value={String(selectedVersion)}
-                  onValueChange={(choice: string) =>
-                    setSelectedFlowVersion(
-                      choice == "all" ? choice : Number(choice),
-                    )
-                  }
-                >
-                  <DropdownMenuRadioItem value="all">
-                    All versions
-                  </DropdownMenuRadioItem>
-                  {flowVersions?.map((v) => (
-                    <DropdownMenuRadioItem
-                      key={v.version}
-                      value={v.version.toString()}
-                    >
-                      Version {v.version}
-                      {v.is_active ? " (active)" : ""}
-                    </DropdownMenuRadioItem>
-                  ))}
-                </DropdownMenuRadioGroup>
-              </DropdownMenuContent>
-            </DropdownMenu>
-          )}
-          {flow.can_access_graph && (
-            <Link
-              className={buttonVariants({ variant: "default" })}
-              href={`/build?flowID=${flow.graph_id}&flowVersion=${flow.graph_version}`}
-            >
-              <Pencil2Icon className="mr-2" />
-              Open in Builder
-            </Link>
-          )}
-          {flow.can_access_graph && (
-            <Button
-              variant="outline"
-              className="px-2.5"
-              title="Export to a JSON-file"
-              data-testid="export-button"
-              onClick={() =>
-                api
-                  .getGraph(flow.graph_id, selectedFlowVersion!.version, true)
-                  .then((graph) =>
-                    exportAsJSONFile(
-                      graph,
-                      `${flow.name}_v${selectedFlowVersion!.version}.json`,
-                    ),
-                  )
-              }
-            >
-              <ExitIcon className="mr-2" /> Export
-            </Button>
-          )}
-          <Button
-            variant="secondary"
-            className="bg-purple-500 text-white hover:bg-purple-700"
-            onClick={!isRunning ? runOrOpenInput : stopRun}
-            disabled={isDisabled}
-            title={!isRunning ? "Run Agent" : "Stop Agent"}
-          >
-            <PlayIcon className="mr-2" />
-            {isRunning ? "Stop Agent" : "Run Agent"}
-          </Button>
-          {flow.can_access_graph && (
-            <Button
-              variant="destructive"
-              onClick={() => setIsDeleteModalOpen(true)}
-              data-testid="delete-button"
-            >
-              <TrashIcon className="mr-2" />
-              Delete Agent
-            </Button>
-          )}
-        </div>
-      </CardHeader>
-      <CardContent>
-        <FlowRunsStatus
-          flows={[flow]}
-          executions={executions.filter(
-            (execution) =>
-              execution.graph_id == flow.graph_id &&
-              (selectedVersion == "all" ||
-                execution.graph_version == selectedVersion),
-          )}
-        />
-      </CardContent>
-      <Dialog open={isDeleteModalOpen} onOpenChange={setIsDeleteModalOpen}>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>Delete Agent</DialogTitle>
-            <DialogDescription>
-              Are you sure you want to delete this agent? <br />
-              This action cannot be undone.
-            </DialogDescription>
-          </DialogHeader>
-          <DialogFooter>
-            <Button
-              variant="outline"
-              onClick={() => setIsDeleteModalOpen(false)}
-            >
-              Cancel
-            </Button>
-            <Button
-              variant="destructive"
-              onClick={() => {
-                api.deleteLibraryAgent(flow.id).then(() => {
-                  setIsDeleteModalOpen(false);
-                  refresh();
-                });
-              }}
-            >
-              Delete
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-      {savedAgent && (
-        <RunnerInputDialog
-          isOpen={isRunDialogOpen}
-          doClose={() => setIsRunDialogOpen(false)}
-          graph={savedAgent}
-          doRun={saveAndRun}
-        />
-      )}
-    </Card>
-  );
-};
-export default FlowInfo;

autogpt_platform/frontend/src/app/(platform)/monitoring/components/FlowRunInfo.tsx

@@ -1,142 +0,0 @@
-import React, { useCallback, useEffect, useState } from "react";
-import { GraphExecutionMeta, LibraryAgent } from "@/lib/autogpt-server-api";
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from "@/components/__legacy__/ui/card";
-import Link from "next/link";
-import { Button, buttonVariants } from "@/components/__legacy__/ui/button";
-import { IconSquare } from "@/components/__legacy__/ui/icons";
-import { ExitIcon, Pencil2Icon } from "@radix-ui/react-icons";
-import { format } from "date-fns";
-import { FlowRunStatusBadge } from "@/app/(platform)/monitoring/components/FlowRunStatusBadge";
-import { useBackendAPI } from "@/lib/autogpt-server-api/context";
-import RunnerOutputUI, {
-  OutputNodeInfo,
-} from "../../build/components/legacy-builder/RunnerOutputUI";
-
-export const FlowRunInfo: React.FC<
-  React.HTMLAttributes<HTMLDivElement> & {
-    agent: LibraryAgent;
-    execution: GraphExecutionMeta;
-  }
-> = ({ agent, execution, ...props }) => {
-  const [isOutputOpen, setIsOutputOpen] = useState(false);
-  const [blockOutputs, setBlockOutputs] = useState<OutputNodeInfo[]>([]);
-  const api = useBackendAPI();
-
-  const fetchBlockResults = useCallback(async () => {
-    const graph = await api.getGraph(agent.graph_id, agent.graph_version);
-    const graphExecution = await api.getGraphExecutionInfo(
-      agent.graph_id,
-      execution.id,
-    );
-
-    // Transform results to BlockOutput format
-    setBlockOutputs(
-      Object.entries(graphExecution.outputs).flatMap(([key, values]) =>
-        values.map(
-          (value) =>
-            ({
-              metadata: {
-                name: graph.output_schema.properties[key].title || "Output",
-                description:
-                  graph.output_schema.properties[key].description ||
-                  "Output from the agent",
-              },
-              result: value,
-            }) satisfies OutputNodeInfo,
-        ),
-      ),
-    );
-  }, [api, agent.graph_id, agent.graph_version, execution.id]);
-
-  // Fetch graph and execution data
-  useEffect(() => {
-    if (!isOutputOpen) return;
-    fetchBlockResults();
-  }, [isOutputOpen, fetchBlockResults]);
-
-  if (execution.graph_id != agent.graph_id) {
-    throw new Error(
-      `FlowRunInfo can't be used with non-matching execution.graph_id and flow.id`,
-    );
-  }
-
-  const handleStopRun = useCallback(() => {
-    api.stopGraphExecution(agent.graph_id, execution.id);
-  }, [api, agent.graph_id, execution.id]);
-
-  return (
-    <>
-      <Card {...props}>
-        <CardHeader className="flex-row items-center justify-between space-x-3 space-y-0">
-          <div>
-            <CardTitle>
-              {agent.name}{" "}
-              <span className="font-light">v{execution.graph_version}</span>
-            </CardTitle>
-          </div>
-          <div className="flex space-x-2">
-            {execution.status === "RUNNING" && (
-              <Button onClick={handleStopRun} variant="destructive">
-                <IconSquare className="mr-2" /> Stop Run
-              </Button>
-            )}
-            <Button onClick={() => setIsOutputOpen(true)} variant="outline">
-              <ExitIcon className="mr-2" /> View Outputs
-            </Button>
-            {agent.can_access_graph && (
-              <Link
-                className={buttonVariants({ variant: "default" })}
-                href={`/build?flowID=${execution.graph_id}&flowVersion=${execution.graph_version}&flowExecutionID=${execution.id}`}
-              >
-                <Pencil2Icon className="mr-2" /> Open in Builder
-              </Link>
-            )}
-          </div>
-        </CardHeader>
-        <CardContent>
-          <p className="hidden">
-            <strong>Agent ID:</strong> <code>{agent.graph_id}</code>
-          </p>
-          <p className="hidden">
-            <strong>Run ID:</strong> <code>{execution.id}</code>
-          </p>
-          <div>
-            <strong>Status:</strong>{" "}
-            <FlowRunStatusBadge status={execution.status} />
-          </div>
-          <p>
-            <strong>Started:</strong>{" "}
-            {execution.started_at
-              ? format(execution.started_at, "yyyy-MM-dd HH:mm:ss")
-              : "—"}
-          </p>
-          <p>
-            <strong>Finished:</strong>{" "}
-            {execution.ended_at
-              ? format(execution.ended_at, "yyyy-MM-dd HH:mm:ss")
-              : "—"}
-          </p>
-          {execution.stats && (
-            <p>
-              <strong>Duration (run time):</strong>{" "}
-              {execution.stats.duration.toFixed(1)} (
-              {execution.stats.node_exec_time.toFixed(1)}) seconds
-            </p>
-          )}
-        </CardContent>
-      </Card>
-      <RunnerOutputUI
-        isOpen={isOutputOpen}
-        doClose={() => setIsOutputOpen(false)}
-        outputs={blockOutputs}
-      />
-    </>
-  );
-};
-
-export default FlowRunInfo;

autogpt_platform/frontend/src/app/(platform)/monitoring/components/FlowRunStatusBadge.tsx

@@ -1,25 +0,0 @@
-import React from "react";
-import { Badge } from "@/components/__legacy__/ui/badge";
-import { cn } from "@/lib/utils";
-import { GraphExecutionMeta } from "@/lib/autogpt-server-api";
-
-export const FlowRunStatusBadge: React.FC<{
-  status: GraphExecutionMeta["status"];
-  className?: string;
-}> = ({ status, className }) => (
-  <Badge
-    variant="default"
-    className={cn(
-      status === "RUNNING"
-        ? "bg-blue-500 dark:bg-blue-700"
-        : status === "QUEUED"
-          ? "bg-yellow-500 dark:bg-yellow-600"
-          : status === "COMPLETED"
-            ? "bg-green-500 dark:bg-green-600"
-            : "bg-red-500 dark:bg-red-700",
-      className,
-    )}
-  >
-    {status}
-  </Badge>
-);

autogpt_platform/frontend/src/app/(platform)/monitoring/components/FlowRunsList.tsx

@@ -1,92 +0,0 @@
-import React from "react";
-import { GraphExecutionMeta, LibraryAgent } from "@/lib/autogpt-server-api";
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from "@/components/__legacy__/ui/card";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/__legacy__/ui/table";
-import { format } from "date-fns";
-import { FlowRunStatusBadge } from "@/app/(platform)/monitoring/components/FlowRunStatusBadge";
-import { TextRenderer } from "../../../../components/__legacy__/ui/render";
-
-export const FlowRunsList: React.FC<{
-  flows: LibraryAgent[];
-  executions: GraphExecutionMeta[];
-  className?: string;
-  selectedRun?: GraphExecutionMeta | null;
-  onSelectRun: (r: GraphExecutionMeta) => void;
-}> = ({ flows, executions, selectedRun, onSelectRun, className }) => (
-  <Card className={className}>
-    <CardHeader>
-      <CardTitle>Runs</CardTitle>
-    </CardHeader>
-    <CardContent>
-      <Table>
-        <TableHeader>
-          <TableRow>
-            <TableHead>Agent</TableHead>
-            <TableHead>Started</TableHead>
-            <TableHead>Status</TableHead>
-            <TableHead>Duration</TableHead>
-          </TableRow>
-        </TableHeader>
-        <TableBody data-testid="flow-runs-list-body">
-          {executions.map((execution) => (
-            <TableRow
-              key={execution.id}
-              data-testid={`flow-run-${execution.id}-graph-${execution.graph_id}`}
-              data-runid={execution.id}
-              data-graphid={execution.graph_id}
-              className="cursor-pointer"
-              onClick={() => onSelectRun(execution)}
-              data-state={selectedRun?.id == execution.id ? "selected" : null}
-            >
-              <TableCell>
-                <TextRenderer
-                  value={
-                    flows.find((f) => f.graph_id == execution.graph_id)?.name
-                  }
-                  truncateLengthLimit={30}
-                />
-              </TableCell>
-              <TableCell>
-                {execution.started_at
-                  ? format(execution.started_at, "HH:mm")
-                  : "—"}
-              </TableCell>
-              <TableCell>
-                <FlowRunStatusBadge
-                  status={execution.status}
-                  className="w-full justify-center"
-                />
-              </TableCell>
-              <TableCell>
-                {execution.stats
-                  ? formatDuration(execution.stats.duration)
-                  : ""}
-              </TableCell>
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
-    </CardContent>
-  </Card>
-);
-
-function formatDuration(seconds: number): string {
-  return (
-    (seconds < 100 ? seconds.toPrecision(2) : Math.round(seconds)).toString() +
-    "s"
-  );
-}
-
-export default FlowRunsList;

autogpt_platform/frontend/src/app/(platform)/monitoring/components/FlowRunsStatus.tsx

@@ -1,131 +0,0 @@
-import React, { useState } from "react";
-import { GraphExecutionMeta, LibraryAgent } from "@/lib/autogpt-server-api";
-import { CardTitle } from "@/components/__legacy__/ui/card";
-import { Button } from "@/components/__legacy__/ui/button";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/__legacy__/ui/popover";
-import { Calendar } from "@/components/__legacy__/ui/calendar";
-import { FlowRunsTimeline } from "@/app/(platform)/monitoring/components/FlowRunsTimeline";
-
-export const FlowRunsStatus: React.FC<{
-  flows: LibraryAgent[];
-  executions: GraphExecutionMeta[];
-  title?: string;
-  className?: string;
-}> = ({ flows, executions: executions, title, className }) => {
-  /* "dateMin": since the first flow in the dataset
-   * number > 0: custom date (unix timestamp)
-   * number < 0: offset relative to Date.now() (in seconds) */
-  const [selected, setSelected] = useState<Date>();
-  const [statsSince, setStatsSince] = useState<number | "dataMin">(-24 * 3600);
-  const statsSinceTimestamp = // unix timestamp or null
-    typeof statsSince == "string"
-      ? null
-      : statsSince < 0
-        ? Date.now() + statsSince * 1000
-        : statsSince;
-  const filteredFlowRuns =
-    statsSinceTimestamp != null
-      ? executions.filter(
-          (fr) =>
-            fr.started_at && fr.started_at.getTime() > statsSinceTimestamp,
-        )
-      : executions;
-
-  return (
-    <div className={className}>
-      <div className="flex flex-row items-center justify-between">
-        <CardTitle>{title || "Stats"}</CardTitle>
-        <div className="flex flex-wrap space-x-2">
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => setStatsSince(-2 * 3600)}
-          >
-            2h
-          </Button>
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => setStatsSince(-8 * 3600)}
-          >
-            8h
-          </Button>
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => setStatsSince(-24 * 3600)}
-          >
-            24h
-          </Button>
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => setStatsSince(-7 * 24 * 3600)}
-          >
-            7d
-          </Button>
-          <Popover>
-            <PopoverTrigger asChild>
-              <Button variant={"outline"} size="sm">
-                Custom
-              </Button>
-            </PopoverTrigger>
-            <PopoverContent className="w-auto p-0" align="start">
-              <Calendar
-                mode="single"
-                selected={selected}
-                onSelect={(_, selectedDay) => {
-                  setSelected(selectedDay);
-                  setStatsSince(selectedDay.getTime());
-                }}
-              />
-            </PopoverContent>
-          </Popover>
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => setStatsSince("dataMin")}
-          >
-            All
-          </Button>
-        </div>
-      </div>
-      <FlowRunsTimeline
-        flows={flows}
-        executions={executions}
-        dataMin={statsSince}
-        className="mt-3"
-      />
-      <hr className="my-4" />
-      <div>
-        <p>
-          <strong>Total runs:</strong> {filteredFlowRuns.length}
-        </p>
-        <p>
-          <strong>Total run time:</strong>{" "}
-          {filteredFlowRuns.reduce(
-            (total, run) => total + (run.stats?.node_exec_time ?? 0),
-            0,
-          )}{" "}
-          seconds
-        </p>
-        {filteredFlowRuns.some((r) => r.stats) && (
-          <p>
-            <strong>Total cost:</strong> $
-            {(
-              filteredFlowRuns.reduce(
-                (total, run) => total + (run.stats?.cost ?? 0),
-                0,
-              ) / 100
-            ).toFixed(2)}
-          </p>
-        )}
-      </div>
-    </div>
-  );
-};
-export default FlowRunsStatus;

autogpt_platform/frontend/src/app/(platform)/monitoring/components/FlowRunsTimeline.tsx

@@ -1,189 +0,0 @@
-import { GraphExecutionMeta, LibraryAgent } from "@/lib/autogpt-server-api";
-import {
-  ComposedChart,
-  DefaultLegendContentProps,
-  Legend,
-  Line,
-  ResponsiveContainer,
-  Scatter,
-  Tooltip,
-  XAxis,
-  YAxis,
-} from "recharts";
-import { differenceInHours, format } from "date-fns";
-import { Card } from "@/components/__legacy__/ui/card";
-import { cn, hashString } from "@/lib/utils";
-import React from "react";
-import { FlowRunStatusBadge } from "@/app/(platform)/monitoring/components/FlowRunStatusBadge";
-
-export const FlowRunsTimeline = ({
-  flows,
-  executions,
-  dataMin,
-  className,
-}: {
-  flows: LibraryAgent[];
-  executions: GraphExecutionMeta[];
-  dataMin: "dataMin" | number;
-  className?: string;
-}) => (
-  /* TODO: make logarithmic? */
-  <ResponsiveContainer width="100%" height={120} className={className}>
-    <ComposedChart>
-      <XAxis
-        dataKey="time"
-        type="number"
-        domain={[
-          typeof dataMin == "string"
-            ? dataMin
-            : dataMin < 0
-              ? Date.now() + dataMin * 1000
-              : dataMin,
-          Date.now(),
-        ]}
-        allowDataOverflow={true}
-        tickFormatter={(unixTime) => {
-          const now = new Date();
-          const time = new Date(unixTime);
-          return differenceInHours(now, time) < 24
-            ? format(time, "HH:mm")
-            : format(time, "yyyy-MM-dd HH:mm");
-        }}
-        name="Time"
-        scale="time"
-      />
-      <YAxis
-        dataKey="_duration"
-        name="Duration (s)"
-        tickFormatter={(s) => (s > 90 ? `${Math.round(s / 60)}m` : `${s}s`)}
-      />
-      <Tooltip
-        content={({ payload }) => {
-          if (payload && payload.length) {
-            const data: GraphExecutionMeta & {
-              time: number;
-              _duration: number;
-            } = payload[0].payload;
-            const flow = flows.find((f) => f.graph_id === data.graph_id);
-            return (
-              <Card className="p-2 text-xs leading-normal">
-                <p>
-                  <strong>Agent:</strong> {flow ? flow.name : "Unknown"}
-                </p>
-                <div>
-                  <strong>Status:</strong>&nbsp;
-                  <FlowRunStatusBadge
-                    status={data.status}
-                    className="px-1.5 py-0"
-                  />
-                </div>
-                <p>
-                  <strong>Started:</strong>{" "}
-                  {data.started_at
-                    ? format(data.started_at, "yyyy-MM-dd HH:mm:ss")
-                    : "—"}
-                </p>
-                {data.stats && (
-                  <p>
-                    <strong>Duration / run time:</strong>{" "}
-                    {formatDuration(data.stats.duration)} /{" "}
-                    {formatDuration(data.stats.node_exec_time)}
-                  </p>
-                )}
-              </Card>
-            );
-          }
-          return null;
-        }}
-      />
-      {flows.map((flow) => (
-        <Scatter
-          key={flow.id}
-          data={executions
-            .filter((e) => e.graph_id == flow.graph_id && e.started_at)
-            .map((e) => ({
-              ...e,
-              time:
-                (e.started_at?.getTime() ?? 0) +
-                (e.stats?.node_exec_time ?? 0) * 1000,
-              _duration: e.stats?.node_exec_time ?? 0,
-            }))}
-          name={flow.name}
-          fill={`hsl(${(hashString(flow.id) * 137.5) % 360}, 70%, 50%)`}
-        />
-      ))}
-      {executions
-        .filter((e) => e.started_at && e.ended_at)
-        .map((execution) => (
-          <Line
-            key={execution.id}
-            type="linear"
-            dataKey="_duration"
-            data={[
-              {
-                ...execution,
-                time: execution.started_at!.getTime(),
-                _duration: 0,
-              },
-              {
-                ...execution,
-                time: execution.ended_at!.getTime(),
-                _duration: execution.stats?.node_exec_time ?? 0,
-              },
-            ]}
-            stroke={`hsl(${(hashString(execution.graph_id) * 137.5) % 360}, 70%, 50%)`}
-            strokeWidth={2}
-            dot={false}
-            legendType="none"
-          />
-        ))}
-      <Legend
-        content={<ScrollableLegend />}
-        wrapperStyle={{
-          bottom: 0,
-          left: 0,
-          right: 0,
-          width: "100%",
-          display: "flex",
-          justifyContent: "center",
-        }}
-      />
-    </ComposedChart>
-  </ResponsiveContainer>
-);
-
-export default FlowRunsTimeline;
-
-const ScrollableLegend: React.FC<
-  DefaultLegendContentProps & { className?: string }
-> = ({ payload, className }) => {
-  return (
-    <div
-      className={cn(
-        "space-x-3 overflow-x-auto whitespace-nowrap px-4 text-sm",
-        className,
-      )}
-      style={{ scrollbarWidth: "none" }}
-    >
-      {payload?.map((entry, index) => {
-        if (entry.type == "none") return;
-        return (
-          <span key={`item-${index}`} className="inline-flex items-center">
-            <span
-              className="mr-1 inline-block size-2.5 rounded-full"
-              style={{ backgroundColor: entry.color }}
-            />
-            <span>{entry.value}</span>
-          </span>
-        );
-      })}
-    </div>
-  );
-};
-
-function formatDuration(seconds: number): string {
-  return (
-    (seconds < 100 ? seconds.toPrecision(2) : Math.round(seconds)).toString() +
-    "s"
-  );
-}

autogpt_platform/frontend/src/app/(platform)/monitoring/components/SchedulesTable.tsx

@@ -1,285 +0,0 @@
-import { LibraryAgent } from "@/lib/autogpt-server-api";
-import { GraphExecutionJobInfo } from "@/app/api/__generated__/models/graphExecutionJobInfo";
-import { Button } from "@/components/__legacy__/ui/button";
-import { Card } from "@/components/__legacy__/ui/card";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/__legacy__/ui/table";
-import { Badge } from "@/components/__legacy__/ui/badge";
-import { ScrollArea } from "@/components/__legacy__/ui/scroll-area";
-import { ClockIcon, Loader2 } from "lucide-react";
-import { useToast } from "@/components/molecules/Toast/use-toast";
-import { humanizeCronExpression } from "@/lib/cron-expression-utils";
-import { useUserTimezone } from "@/lib/hooks/useUserTimezone";
-import {
-  formatScheduleTime,
-  getTimezoneAbbreviation,
-} from "@/lib/timezone-utils";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/__legacy__/ui/select";
-import { useRouter } from "next/navigation";
-import { useState } from "react";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/__legacy__/ui/dialog";
-import { TextRenderer } from "../../../../components/__legacy__/ui/render";
-import { Input } from "../../../../components/__legacy__/ui/input";
-import { Label } from "../../../../components/__legacy__/ui/label";
-
-interface SchedulesTableProps {
-  schedules: GraphExecutionJobInfo[];
-  agents: LibraryAgent[];
-  onRemoveSchedule: (scheduleId: string, enabled: boolean) => void;
-  sortColumn: keyof GraphExecutionJobInfo;
-  sortDirection: "asc" | "desc";
-  onSort: (column: keyof GraphExecutionJobInfo) => void;
-}
-
-export const SchedulesTable = ({
-  schedules,
-  agents,
-  onRemoveSchedule,
-  sortColumn,
-  sortDirection,
-  onSort,
-}: SchedulesTableProps) => {
-  const { toast } = useToast();
-  const router = useRouter();
-  const [selectedAgent, setSelectedAgent] = useState<string>(""); // Library Agent ID
-  const [selectedVersion, setSelectedVersion] = useState<number>(0); // Graph version
-  const [maxVersion, setMaxVersion] = useState<number>(0);
-  const [isDialogOpen, setIsDialogOpen] = useState(false);
-  const [isLoading, setIsLoading] = useState(false);
-  const [selectedFilter, setSelectedFilter] = useState<string>(""); // Graph ID
-
-  // Get user's timezone for displaying schedule times
-  const userTimezone = useUserTimezone() ?? "UTC";
-
-  const filteredAndSortedSchedules = [...schedules]
-    .filter(
-      (schedule) => !selectedFilter || schedule.graph_id === selectedFilter,
-    )
-    .sort((a, b) => {
-      const aValue = a[sortColumn];
-      const bValue = b[sortColumn];
-      if (sortDirection === "asc") {
-        return String(aValue).localeCompare(String(bValue));
-      }
-      return String(bValue).localeCompare(String(aValue));
-    });
-
-  const handleToggleSchedule = (scheduleId: string, enabled: boolean) => {
-    onRemoveSchedule(scheduleId, enabled);
-    if (!enabled) {
-      toast({
-        title: "Schedule Disabled",
-        description: "The schedule has been successfully disabled.",
-      });
-    }
-  };
-
-  const handleNewSchedule = () => {
-    setIsDialogOpen(true);
-  };
-
-  const handleAgentSelect = (agentId: string) => {
-    setSelectedAgent(agentId);
-    const agent = agents.find((a) => a.id === agentId);
-    setMaxVersion(agent!.graph_version);
-    setSelectedVersion(agent!.graph_version);
-  };
-
-  const handleVersionSelect = (version: string) => {
-    setSelectedVersion(parseInt(version));
-  };
-
-  const handleSchedule = async () => {
-    if (!selectedAgent || !selectedVersion) {
-      toast({
-        title: "Invalid Input",
-        description: "Please select an agent and a version.",
-        variant: "destructive",
-      });
-      return;
-    }
-    if (selectedVersion < 1 || selectedVersion > maxVersion) {
-      toast({
-        title: "Invalid Version",
-        description: `Please select a version between 1 and ${maxVersion}.`,
-        variant: "destructive",
-      });
-      return;
-    }
-    setIsLoading(true);
-    const agent = agents.find((a) => a.id == selectedAgent)!;
-    try {
-      await new Promise((resolve) => setTimeout(resolve, 100));
-      router.push(
-        `/build?flowID=${agent.graph_id}&flowVersion=${agent.graph_version}&open_scheduling=true`,
-      );
-    } catch (error) {
-      console.error("Navigation error:", error);
-    }
-  };
-
-  return (
-    <Card className="h-fit p-4">
-      <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>Select Agent for New Schedule</DialogTitle>
-          </DialogHeader>
-          <Select onValueChange={handleAgentSelect}>
-            <SelectTrigger className="w-full">
-              <SelectValue placeholder="Select an agent" />
-            </SelectTrigger>
-            <SelectContent>
-              {agents.map((agent, i) => (
-                <SelectItem key={agent.id + i} value={agent.id}>
-                  <TextRenderer value={agent.name} truncateLengthLimit={30} />
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-          <Label className="mt-4">
-            Select version between 1 and {maxVersion}
-          </Label>
-          <Input
-            type="number"
-            min={1}
-            max={selectedAgent ? maxVersion : 0}
-            value={selectedVersion}
-            onChange={(e) => handleVersionSelect(e.target.value)}
-            placeholder="Select version"
-            className="w-full"
-          />
-          <Button
-            onClick={handleSchedule}
-            disabled={isLoading || !selectedAgent}
-            className="mt-4"
-          >
-            {isLoading ? (
-              <>
-                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                Loading...
-              </>
-            ) : (
-              "Schedule"
-            )}
-          </Button>
-        </DialogContent>
-      </Dialog>
-
-      <div className="mb-4 flex items-center justify-between">
-        <h3 className="text-lg font-semibold">Schedules</h3>
-        <div className="flex flex-wrap gap-2">
-          <Select onValueChange={setSelectedFilter}>
-            <SelectTrigger className="h-8 w-[180px] rounded-md px-3 text-xs">
-              <SelectValue placeholder="Filter by graph" />
-            </SelectTrigger>
-            <SelectContent className="text-xs">
-              {agents.map((agent) => (
-                <SelectItem key={agent.id} value={agent.graph_id}>
-                  {agent.name}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-          <Button size="sm" variant="outline" onClick={handleNewSchedule}>
-            <ClockIcon className="mr-2 h-4 w-4" />
-            New Schedule
-          </Button>
-        </div>
-      </div>
-      <ScrollArea className="max-h-[400px]">
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead
-                onClick={() => onSort("graph_id")}
-                className="cursor-pointer"
-              >
-                Graph Name
-              </TableHead>
-              <TableHead className="cursor-pointer">Graph Version</TableHead>
-              <TableHead
-                onClick={() => onSort("next_run_time")}
-                className="cursor-pointer"
-              >
-                Next Execution
-              </TableHead>
-              <TableHead
-                onClick={() => onSort("cron")}
-                className="cursor-pointer"
-              >
-                Schedule
-              </TableHead>
-              <TableHead>Timezone</TableHead>
-              <TableHead>Actions</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {filteredAndSortedSchedules.length === 0 ? (
-              <TableRow>
-                <TableCell
-                  colSpan={6}
-                  className="py-8 text-center text-lg text-gray-400"
-                >
-                  No schedules are available
-                </TableCell>
-              </TableRow>
-            ) : (
-              filteredAndSortedSchedules.map((schedule) => (
-                <TableRow key={schedule.id}>
-                  <TableCell className="font-medium">
-                    {agents.find((a) => a.graph_id === schedule.graph_id)
-                      ?.name || schedule.graph_id}
-                  </TableCell>
-                  <TableCell>{schedule.graph_version}</TableCell>
-                  <TableCell>
-                    {formatScheduleTime(schedule.next_run_time, userTimezone)}
-                  </TableCell>
-                  <TableCell>
-                    <Badge variant="secondary">
-                      {humanizeCronExpression(schedule.cron)}
-                    </Badge>
-                  </TableCell>
-                  <TableCell>
-                    <span className="text-sm text-muted-foreground">
-                      {schedule.timezone
-                        ? getTimezoneAbbreviation(schedule.timezone)
-                        : userTimezone && getTimezoneAbbreviation(userTimezone)}
-                    </span>
-                  </TableCell>
-                  <TableCell>
-                    <div className="flex space-x-2">
-                      <Button
-                        variant={"destructive"}
-                        onClick={() => handleToggleSchedule(schedule.id, false)}
-                      >
-                        Remove
-                      </Button>
-                    </div>
-                  </TableCell>
-                </TableRow>
-              ))
-            )}
-          </TableBody>
-        </Table>
-      </ScrollArea>
-    </Card>
-  );
-};

autogpt_platform/frontend/src/app/(platform)/monitoring/components/skeletons/AgentFlowListSkeleton.tsx

@@ -1,24 +0,0 @@
-export default function AgentsFlowListSkeleton() {
-  return (
-    <div className="mx-auto max-w-4xl p-4">
-      <div className="mb-4 flex items-center justify-between">
-        <h1 className="text-2xl font-bold">Agents</h1>
-        <div className="h-10 w-24 animate-pulse rounded bg-gray-200"></div>
-      </div>
-      <div className="rounded-lg bg-white p-4 shadow">
-        <div className="mb-4 grid grid-cols-3 gap-4 font-medium text-gray-500">
-          <div>Name</div>
-          <div># of runs</div>
-          <div>Last run</div>
-        </div>
-        {[...Array(3)].map((_, index) => (
-          <div key={index} className="mb-4 grid grid-cols-3 gap-4">
-            <div className="h-6 animate-pulse rounded bg-gray-200"></div>
-            <div className="h-6 animate-pulse rounded bg-gray-200"></div>
-            <div className="h-6 animate-pulse rounded bg-gray-200"></div>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}

autogpt_platform/frontend/src/app/(platform)/monitoring/components/skeletons/FlowRunsListSkeleton.tsx

@@ -1,23 +0,0 @@
-export default function FlowRunsListSkeleton() {
-  return (
-    <div className="mx-auto max-w-4xl p-4">
-      <div className="rounded-lg bg-white p-4 shadow">
-        <h2 className="mb-4 text-xl font-semibold">Runs</h2>
-        <div className="mb-4 grid grid-cols-4 gap-4 text-sm font-medium text-gray-500">
-          <div>Agent</div>
-          <div>Started</div>
-          <div>Status</div>
-          <div>Duration</div>
-        </div>
-        {[...Array(4)].map((_, index) => (
-          <div key={index} className="mb-4 grid grid-cols-4 gap-4">
-            <div className="h-5 animate-pulse rounded bg-gray-200"></div>
-            <div className="h-5 animate-pulse rounded bg-gray-200"></div>
-            <div className="h-5 animate-pulse rounded bg-gray-200"></div>
-            <div className="h-5 animate-pulse rounded bg-gray-200"></div>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}

autogpt_platform/frontend/src/app/(platform)/monitoring/components/skeletons/FlowRunsStatusSkeleton.tsx

@@ -1,28 +0,0 @@
-export default function FlowRunsStatusSkeleton() {
-  return (
-    <div className="mx-auto max-w-4xl p-4">
-      <div className="rounded-lg bg-white p-4 shadow">
-        <div className="mb-6 flex items-center justify-between">
-          <h2 className="text-xl font-semibold">Stats</h2>
-          <div className="flex space-x-2">
-            {["2h", "8h", "24h", "7d", "Custom", "All"].map((btn) => (
-              <div
-                key={btn}
-                className="h-8 w-16 animate-pulse rounded bg-gray-200"
-              ></div>
-            ))}
-          </div>
-        </div>
-
-        {/* Placeholder for the line chart */}
-        <div className="mb-6 h-64 w-full animate-pulse rounded bg-gray-200"></div>
-
-        {/* Placeholders for total runs and total run time */}
-        <div className="space-y-2">
-          <div className="h-6 w-1/3 animate-pulse rounded bg-gray-200"></div>
-          <div className="h-6 w-1/2 animate-pulse rounded bg-gray-200"></div>
-        </div>
-      </div>
-    </div>
-  );
-}

autogpt_platform/frontend/src/app/(platform)/monitoring/loading.tsx

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

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

@@ -1,151 +0,0 @@
-"use client";
-import React, { useCallback, useEffect, useState } from "react";
-
-import { GraphExecutionMeta, LibraryAgent } from "@/lib/autogpt-server-api";
-import { GraphExecutionJobInfo } from "@/app/api/__generated__/models/graphExecutionJobInfo";
-import {
-  useGetV1ListExecutionSchedulesForAUser,
-  useDeleteV1DeleteExecutionSchedule,
-} from "@/app/api/__generated__/endpoints/schedules/schedules";
-import { okData } from "@/app/api/helpers";
-
-import { Card } from "@/components/__legacy__/ui/card";
-import { SchedulesTable } from "@/app/(platform)/monitoring/components/SchedulesTable";
-import { useBackendAPI } from "@/lib/autogpt-server-api/context";
-import AgentFlowList from "./components/AgentFlowList";
-import FlowRunsList from "./components/FlowRunsList";
-import FlowRunInfo from "./components/FlowRunInfo";
-import FlowInfo from "./components/FlowInfo";
-import FlowRunsStatus from "./components/FlowRunsStatus";
-
-const Monitor = () => {
-  const [flows, setFlows] = useState<LibraryAgent[]>([]);
-  const [executions, setExecutions] = useState<GraphExecutionMeta[]>([]);
-  const [selectedFlow, setSelectedFlow] = useState<LibraryAgent | null>(null);
-  const [selectedRun, setSelectedRun] = useState<GraphExecutionMeta | null>(
-    null,
-  );
-  const [sortColumn, setSortColumn] =
-    useState<keyof GraphExecutionJobInfo>("id");
-  const [sortDirection, setSortDirection] = useState<"asc" | "desc">("asc");
-  const api = useBackendAPI();
-
-  // Use generated API hooks for schedules
-  const { data: schedulesResponse, refetch: refetchSchedules } =
-    useGetV1ListExecutionSchedulesForAUser();
-  const deleteScheduleMutation = useDeleteV1DeleteExecutionSchedule();
-
-  const schedules = okData(schedulesResponse) ?? [];
-
-  const removeSchedule = useCallback(
-    async (scheduleId: string) => {
-      await deleteScheduleMutation.mutateAsync({ scheduleId });
-      refetchSchedules();
-    },
-    [deleteScheduleMutation, refetchSchedules],
-  );
-
-  const fetchAgents = useCallback(() => {
-    api.listLibraryAgents().then((response) => {
-      setFlows(response.agents);
-    });
-    api.getExecutions().then((executions) => {
-      setExecutions(executions);
-    });
-  }, [api]);
-
-  useEffect(() => {
-    fetchAgents();
-  }, [fetchAgents]);
-
-  useEffect(() => {
-    const intervalId = setInterval(() => fetchAgents(), 5000);
-    return () => clearInterval(intervalId);
-  }, [fetchAgents, flows]);
-
-  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";
-  const column3 = "col-span-full xl:col-span-4 xxl:col-span-5";
-
-  const handleSort = (column: keyof GraphExecutionJobInfo) => {
-    if (sortColumn === column) {
-      setSortDirection(sortDirection === "asc" ? "desc" : "asc");
-    } else {
-      setSortColumn(column);
-      setSortDirection("asc");
-    }
-  };
-
-  return (
-    <div
-      className="grid grid-cols-1 gap-4 p-4 md:grid-cols-5 lg:grid-cols-4 xl:grid-cols-10"
-      data-testid="monitor-page"
-    >
-      <AgentFlowList
-        className={column1}
-        flows={flows}
-        executions={executions}
-        selectedFlow={selectedFlow}
-        onSelectFlow={(f) => {
-          setSelectedRun(null);
-          setSelectedFlow(f.id == selectedFlow?.id ? null : f);
-        }}
-      />
-      <FlowRunsList
-        className={column2}
-        flows={flows}
-        executions={[
-          ...(selectedFlow
-            ? executions.filter((v) => v.graph_id == selectedFlow.graph_id)
-            : executions),
-        ].sort((a, b) => {
-          const aTime = a.started_at?.getTime() ?? 0;
-          const bTime = b.started_at?.getTime() ?? 0;
-          return bTime - aTime;
-        })}
-        selectedRun={selectedRun}
-        onSelectRun={(r) => setSelectedRun(r.id == selectedRun?.id ? null : r)}
-      />
-      {(selectedRun && (
-        <FlowRunInfo
-          agent={
-            selectedFlow ||
-            flows.find((f) => f.graph_id == selectedRun.graph_id)!
-          }
-          execution={selectedRun}
-          className={column3}
-        />
-      )) ||
-        (selectedFlow && (
-          <FlowInfo
-            flow={selectedFlow}
-            executions={executions.filter(
-              (e) => e.graph_id == selectedFlow.graph_id,
-            )}
-            className={column3}
-            refresh={() => {
-              fetchAgents();
-              setSelectedFlow(null);
-              setSelectedRun(null);
-            }}
-          />
-        )) || (
-          <Card className={`p-6 ${column3}`}>
-            <FlowRunsStatus flows={flows} executions={executions} />
-          </Card>
-        )}
-      <div className="col-span-full xl:col-span-6">
-        <SchedulesTable
-          schedules={schedules} // all schedules
-          agents={flows} // for filtering purpose
-          onRemoveSchedule={removeSchedule}
-          sortColumn={sortColumn}
-          sortDirection={sortDirection}
-          onSort={handleSort}
-        />
-      </div>
-    </div>
-  );
-};
-
-export default Monitor;

autogpt_platform/frontend/src/lib/supabase/helpers.ts

@@ -12,7 +12,6 @@ export const PROTECTED_PAGES = [
   "/onboarding",
   "/profile",
   "/library",
-  "/monitoring",
 ] as const;
 
 export const ADMIN_PAGES = ["/admin"] as const;

autogpt_platform/frontend/src/lib/utils.ts

@@ -2,7 +2,6 @@ import { type ClassValue, clsx } from "clsx";
 import _isEmpty from "lodash/isEmpty";
 import { twMerge } from "tailwind-merge";
 
-import { NodeDimension } from "@/app/(platform)/build/components/legacy-builder/Flow/Flow";
 import {
   BlockIOObjectSubSchema,
   BlockIORootSchema,
@@ -332,81 +331,6 @@ export function getPrimaryCategoryColor(categories: Category[]): string {
   );
 }
 
-function rectanglesOverlap(
-  rect1: { x: number; y: number; width: number; height?: number },
-  rect2: { x: number; y: number; width: number; height?: number },
-): boolean {
-  const x1 = rect1.x,
-    y1 = rect1.y,
-    w1 = rect1.width,
-    h1 = rect1.height ?? 100;
-  const x2 = rect2.x,
-    y2 = rect2.y,
-    w2 = rect2.width,
-    h2 = rect2.height ?? 100;
-
-  // Check if the rectangles do not overlap
-  return !(x1 + w1 <= x2 || x1 >= x2 + w2 || y1 + h1 <= y2 || y1 >= y2 + h2);
-}
-
-export function findNewlyAddedBlockCoordinates(
-  nodeDimensions: NodeDimension,
-  newWidth: number,
-  margin: number,
-  zoom: number,
-) {
-  const nodeDimensionArray = Object.values(nodeDimensions);
-
-  for (let i = nodeDimensionArray.length - 1; i >= 0; i--) {
-    const lastNode = nodeDimensionArray[i];
-    const lastNodeHeight = lastNode.height ?? 100;
-
-    // Right of the last node
-    let newX = lastNode.x + lastNode.width + margin;
-    let newY = lastNode.y;
-    let newRect = { x: newX, y: newY, width: newWidth, height: 100 / zoom };
-
-    const collisionRight = nodeDimensionArray.some((node) =>
-      rectanglesOverlap(newRect, node),
-    );
-
-    if (!collisionRight) {
-      return { x: newX, y: newY };
-    }
-
-    // Left of the last node
-    newX = lastNode.x - newWidth - margin;
-    newRect = { x: newX, y: newY, width: newWidth, height: 100 / zoom };
-
-    const collisionLeft = nodeDimensionArray.some((node) =>
-      rectanglesOverlap(newRect, node),
-    );
-
-    if (!collisionLeft) {
-      return { x: newX, y: newY };
-    }
-
-    // Below the last node
-    newX = lastNode.x;
-    newY = lastNode.y + lastNodeHeight + margin;
-    newRect = { x: newX, y: newY, width: newWidth, height: 100 / zoom };
-
-    const collisionBelow = nodeDimensionArray.some((node) =>
-      rectanglesOverlap(newRect, node),
-    );
-
-    if (!collisionBelow) {
-      return { x: newX, y: newY };
-    }
-  }
-
-  // Default position if no space is found
-  return {
-    x: 0,
-    y: 0,
-  };
-}
-
 export function hasNonNullNonObjectValue(obj: any): boolean {
   if (obj !== null && typeof obj === "object") {
     return Object.values(obj).some((value) => hasNonNullNonObjectValue(value));

autogpt_platform/frontend/src/services/feature-flags/use-get-flag.ts

@@ -10,8 +10,6 @@ export enum Flag {
   NEW_AGENT_RUNS = "new-agent-runs",
   GRAPH_SEARCH = "graph-search",
   ENABLE_ENHANCED_OUTPUT_HANDLING = "enable-enhanced-output-handling",
-  NEW_FLOW_EDITOR = "new-flow-editor",
-  BUILDER_VIEW_SWITCH = "builder-view-switch",
   SHARE_EXECUTION_RESULTS = "share-execution-results",
   AGENT_FAVORITING = "agent-favoriting",
   MARKETPLACE_SEARCH_TERMS = "marketplace-search-terms",
@@ -27,8 +25,6 @@ const defaultFlags = {
   [Flag.NEW_AGENT_RUNS]: false,
   [Flag.GRAPH_SEARCH]: false,
   [Flag.ENABLE_ENHANCED_OUTPUT_HANDLING]: false,
-  [Flag.NEW_FLOW_EDITOR]: false,
-  [Flag.BUILDER_VIEW_SWITCH]: false,
   [Flag.SHARE_EXECUTION_RESULTS]: false,
   [Flag.AGENT_FAVORITING]: false,
   [Flag.MARKETPLACE_SEARCH_TERMS]: DEFAULT_SEARCH_TERMS,

autogpt_platform/frontend/src/tests/agent-activity.spec.ts

@@ -11,24 +11,18 @@ test.beforeEach(async ({ page }) => {
   const buildPage = new BuildPage(page);
   const testUser = await getTestUser();
 
-  const { getId } = getSelectors(page);
-
   await page.goto("/login");
   await loginPage.login(testUser.email, testUser.password);
   await hasUrl(page, "/marketplace");
 
   await page.goto("/build");
   await buildPage.closeTutorial();
-  await buildPage.openBlocksPanel();
 
   const [dictionaryBlock] = await buildPage.getFilteredBlocksFromAPI(
     (block) => block.name === "AddToDictionaryBlock",
   );
 
-  const blockCard = getId(`block-name-${dictionaryBlock.id}`);
-  await blockCard.click();
-  const blockInEditor = getId(dictionaryBlock.id).first();
-  expect(blockInEditor).toBeAttached();
+  await buildPage.addBlock(dictionaryBlock);
 
   await buildPage.saveAgent("Test Agent", "Test Description");
   await test

autogpt_platform/frontend/src/tests/build.spec.ts

@@ -1,3 +1,6 @@
+// TODO: These tests were written for the old (legacy) builder.
+// They need to be updated to work with the new flow editor.
+
 // Note: all the comments with //(number)! are for the docs
 //ignore them when reading the code, but if you change something,
 //make sure to update the docs! Your autoformmater will break this page,
@@ -12,7 +15,7 @@ import { getTestUser } from "./utils/auth";
 
 // Reason Ignore: admonishment is in the wrong place visually with correct prettier rules
 // prettier-ignore
-test.describe("Build", () => { //(1)!
+test.describe.skip("Build", () => { //(1)!
   let buildPage: BuildPage; //(2)!
 
   // Reason Ignore: admonishment is in the wrong place visually with correct prettier rules

autogpt_platform/frontend/src/tests/monitor.spec.ts

@@ -1,140 +0,0 @@
-import test, { expect, TestInfo } from "@playwright/test";
-
-import { BuildPage } from "./pages/build.page";
-import { MonitorPage } from "./pages/monitor.page";
-import { v4 as uuidv4 } from "uuid";
-import * as fs from "fs/promises";
-import path from "path";
-import { LoginPage } from "./pages/login.page";
-import { getTestUser } from "./utils/auth";
-import { hasUrl } from "./utils/assertion";
-import {
-  navigateToLibrary,
-  clickFirstAgent,
-  runAgent,
-  waitForAgentPageLoad,
-} from "./pages/library.page";
-
-test.describe.configure({
-  mode: "parallel",
-  timeout: 30000,
-});
-// --8<-- [start:AttachAgentId]
-test.beforeEach(async ({ page }, testInfo: TestInfo) => {
-  const loginPage = new LoginPage(page);
-  const testUser = await getTestUser();
-  const monitorPage = new MonitorPage(page);
-
-  // Start each test with login using worker auth
-  await page.goto("/login");
-  await loginPage.login(testUser.email, testUser.password);
-  await hasUrl(page, "/marketplace");
-
-  // Navigate to library and run the first agent
-  await navigateToLibrary(page);
-  await clickFirstAgent(page);
-  await waitForAgentPageLoad(page);
-  await runAgent(page);
-
-  // Navigate to monitoring page
-  await page.goto("/monitoring");
-  await test.expect(monitorPage.isLoaded()).resolves.toBeTruthy();
-
-  // Generate a test ID for tracking
-  const id = uuidv4();
-  testInfo.attach("agent-id", { body: id });
-});
-// --8<-- [end:AttachAgentId]
-
-test.afterAll(async () => {
-  // clear out the downloads folder
-  const downloadsFolder = process.cwd() + "/downloads";
-  console.log(`clearing out the downloads folder ${downloadsFolder}/monitor`);
-
-  await fs.rm(`${downloadsFolder}/monitor`, {
-    recursive: true,
-    force: true,
-  });
-});
-
-test.skip("user can export and import agents", async ({
-  page,
-}, testInfo: TestInfo) => {
-  const monitorPage = new MonitorPage(page);
-  const buildPage = new BuildPage(page);
-
-  // --8<-- [start:ReadAgentId]
-  if (testInfo.attachments.length === 0 || !testInfo.attachments[0].body) {
-    throw new Error("No agent id attached to the test");
-  }
-
-  const testAttachName = testInfo.attachments[0].body.toString();
-  // --8<-- [end:ReadAgentId]
-  const agents = await monitorPage.listAgents();
-
-  const downloadPromise = page.waitForEvent("download");
-
-  const agent = agents.find(
-    (a: any) => a.name === `test-agent-${testAttachName}`,
-  );
-
-  if (!agent) throw new Error(`Agent ${testAttachName} not found`);
-
-  await monitorPage.exportToFile(agent);
-  const download = await downloadPromise;
-
-  // Wait for the download process to complete and save the downloaded file somewhere.
-  await download.saveAs(
-    `${monitorPage.downloadsFolder}/monitor/${download.suggestedFilename()}`,
-  );
-
-  console.log(`downloaded file to ${download.suggestedFilename()}`);
-
-  expect(download.suggestedFilename()).toBeDefined();
-  expect(download.suggestedFilename()).toContain("test-agent-");
-  expect(download.suggestedFilename()).toContain("v1.json");
-
-  // import the agent
-  const preImportAgents = await monitorPage.listAgents();
-
-  const filesInFolder = await fs.readdir(
-    `${monitorPage.downloadsFolder}/monitor`,
-  );
-
-  const importFile = filesInFolder.find((f) => f.includes(testAttachName));
-  if (!importFile) {
-    throw new Error(`No import file found for agent ${testAttachName}`);
-  }
-
-  const baseName = importFile.split(".")[0];
-
-  await monitorPage.importFromFile(
-    path.resolve(monitorPage.downloadsFolder, "monitor"),
-    importFile,
-    baseName + "-imported",
-  );
-
-  // You'll be dropped at the build page, so hit run and then go back to monitor
-  await buildPage.runAgent();
-  await monitorPage.navbar.clickMonitorLink();
-
-  const postImportAgents = await monitorPage.listAgents();
-
-  expect(postImportAgents.length).toBeGreaterThan(preImportAgents.length);
-
-  console.log(`postImportAgents: ${JSON.stringify(postImportAgents)}`);
-
-  const importedAgent = postImportAgents.find(
-    (a: any) => a.name === `${baseName}-imported`,
-  );
-
-  expect(importedAgent).toBeDefined();
-});
-
-test.skip("user can view runs and agents", async ({ page }) => {
-  const monitorPage = new MonitorPage(page);
-  // const runs = await monitorPage.listRuns();
-  const agents = await monitorPage.listAgents();
-
-  expect(agents.length).toBeGreaterThan(0);
-});

autogpt_platform/frontend/src/tests/pages/build.page.ts

@@ -1,7 +1,6 @@
-import { expect, Locator, Page } from "@playwright/test";
+import { Locator, Page } from "@playwright/test";
 import { Block as APIBlock } from "../../lib/autogpt-server-api/types";
 import { beautifyString } from "../../lib/utils";
-import { isVisible } from "../utils/assertion";
 import { BasePage } from "./base.page";
 
 export interface Block {
@@ -27,32 +26,39 @@ export class BuildPage extends BasePage {
     try {
       await this.page
         .getByRole("button", { name: "Skip Tutorial", exact: true })
-        .click();
-    } catch (error) {
-      console.info("Error closing tutorial:", error);
+        .click({ timeout: 3000 });
+    } catch (_error) {
+      console.info("Tutorial not shown or already dismissed");
     }
   }
 
   async openBlocksPanel(): Promise<void> {
-    const isPanelOpen = await this.page
-      .getByTestId("blocks-control-blocks-label")
-      .isVisible();
+    const popoverContent = this.page.locator(
+      '[data-id="blocks-control-popover-content"]',
+    );
+    const isPanelOpen = await popoverContent.isVisible();
 
     if (!isPanelOpen) {
       await this.page.getByTestId("blocks-control-blocks-button").click();
+      await popoverContent.waitFor({ state: "visible", timeout: 5000 });
     }
   }
 
   async closeBlocksPanel(): Promise<void> {
-    await this.page.getByTestId("profile-popout-menu-trigger").click();
+    const popoverContent = this.page.locator(
+      '[data-id="blocks-control-popover-content"]',
+    );
+    if (await popoverContent.isVisible()) {
+      await this.page.getByTestId("blocks-control-blocks-button").click();
+    }
   }
 
   async saveAgent(
     name: string = "Test Agent",
     description: string = "",
   ): Promise<void> {
-    console.log(`💾 Saving agent '${name}' with description '${description}'`);
-    await this.page.getByTestId("blocks-control-save-button").click();
+    console.log(`Saving agent '${name}' with description '${description}'`);
+    await this.page.getByTestId("save-control-save-button").click();
     await this.page.getByTestId("save-control-name-input").fill(name);
     await this.page
       .getByTestId("save-control-description-input")
@@ -107,32 +113,34 @@ export class BuildPage extends BasePage {
     await this.openBlocksPanel();
 
     const searchInput = this.page.locator(
-      '[data-id="blocks-control-search-input"]',
+      '[data-id="blocks-control-search-bar"] input[type="text"]',
     );
 
     const displayName = this.getDisplayName(block.name);
     await searchInput.clear();
     await searchInput.fill(displayName);
 
-    const blockCard = this.page.getByTestId(`block-name-${block.id}`);
+    const blockCardId = block.id.replace(/[^a-zA-Z0-9]/g, "");
+    const blockCard = this.page.locator(
+      `[data-id="block-card-${blockCardId}"]`,
+    );
 
     try {
       // Wait for the block card to be visible with a reasonable timeout
       await blockCard.waitFor({ state: "visible", timeout: 10000 });
       await blockCard.click();
-      const blockInEditor = this.page.getByTestId(block.id).first();
-      expect(blockInEditor).toBeAttached();
     } catch (error) {
       console.log(
-        `❌ ❌  Block ${block.name} (display: ${displayName}) returned from the API but not found in block list`,
+        `Block ${block.name} (display: ${displayName}) returned from the API but not found in block list`,
       );
       console.log(`Error: ${error}`);
     }
   }
 
-  async hasBlock(block: Block) {
-    const blockInEditor = this.page.getByTestId(block.id).first();
-    await blockInEditor.isVisible();
+  async hasBlock(_block: Block) {
+    // In the new flow editor, verify a node exists on the canvas
+    const node = this.page.locator('[data-id^="custom-node-"]').first();
+    await node.isVisible();
   }
 
   async getBlockInputs(blockId: string): Promise<string[]> {
@@ -159,7 +167,7 @@ export class BuildPage extends BasePage {
 
     // Clear any existing search to ensure we see all blocks in the category
     const searchInput = this.page.locator(
-      '[data-id="blocks-control-search-input"]',
+      '[data-id="blocks-control-search-bar"] input[type="text"]',
     );
     await searchInput.clear();
 
@@ -391,13 +399,13 @@ export class BuildPage extends BasePage {
 
   async isRunButtonEnabled(): Promise<boolean> {
     console.log(`checking if run button is enabled`);
-    const runButton = this.page.getByTestId("primary-action-run-agent");
+    const runButton = this.page.locator('[data-id="run-graph-button"]');
     return await runButton.isEnabled();
   }
 
   async runAgent(): Promise<void> {
     console.log(`clicking run button`);
-    const runButton = this.page.getByTestId("primary-action-run-agent");
+    const runButton = this.page.locator('[data-id="run-graph-button"]');
     await runButton.click();
     await this.page.waitForTimeout(1000);
     await runButton.click();
@@ -424,7 +432,7 @@ export class BuildPage extends BasePage {
   async waitForSaveButton(): Promise<void> {
     console.log(`waiting for save button`);
     await this.page.waitForSelector(
-      '[data-testid="blocks-control-save-button"]:not([disabled])',
+      '[data-testid="save-control-save-button"]:not([disabled])',
     );
   }
 
@@ -526,27 +534,22 @@ export class BuildPage extends BasePage {
   async createDummyAgent() {
     await this.closeTutorial();
     await this.openBlocksPanel();
-    const dictionaryBlock = await this.getDictionaryBlockDetails();
 
     const searchInput = this.page.locator(
-      '[data-id="blocks-control-search-input"]',
+      '[data-id="blocks-control-search-bar"] input[type="text"]',
     );
 
-    const displayName = this.getDisplayName(dictionaryBlock.name);
     await searchInput.clear();
+    await searchInput.fill("Add to Dictionary");
 
-    await isVisible(this.page.getByText("Output"));
-
-    await searchInput.fill(displayName);
-
-    const blockCard = this.page.getByTestId(`block-name-${dictionaryBlock.id}`);
-    if (await blockCard.isVisible()) {
+    const blockCard = this.page.locator('[data-id^="block-card-"]').first();
+    try {
+      await blockCard.waitFor({ state: "visible", timeout: 10000 });
       await blockCard.click();
-      const blockInEditor = this.page.getByTestId(dictionaryBlock.id).first();
-      expect(blockInEditor).toBeAttached();
+    } catch (error) {
+      console.log("Could not find Add to Dictionary block:", error);
     }
 
     await this.saveAgent("Test Agent", "Test Description");
-    await expect(this.isRunButtonEnabled()).resolves.toBeTruthy();
   }
 }

autogpt_platform/frontend/src/tests/pages/library.page.ts

@@ -252,21 +252,6 @@ export class LibraryPage extends BasePage {
     ]);
   }
 
-  async clickMonitoringLink(): Promise<void> {
-    console.log(`clicking monitoring link in alert`);
-    await this.page.getByRole("link", { name: "here" }).click();
-  }
-
-  async isMonitoringAlertVisible(): Promise<boolean> {
-    console.log(`checking if monitoring alert is visible`);
-    try {
-      const alertText = this.page.locator("text=/Prefer the old experience/");
-      return await alertText.isVisible();
-    } catch {
-      return false;
-    }
-  }
-
   async getSearchValue(): Promise<string> {
     console.log(`getting search input value`);
     try {

autogpt_platform/frontend/src/tests/pages/monitor.page.ts

@@ -1,237 +0,0 @@
-import { Page } from "@playwright/test";
-import { BasePage } from "./base.page";
-import path from "path";
-
-interface Agent {
-  id: string;
-  name: string;
-  runCount: number;
-  lastRun: string;
-}
-
-interface Run {
-  id: string;
-  agentId: string;
-  agentName: string;
-  started: string;
-  duration: number;
-  status: string;
-}
-
-interface Schedule {
-  id: string;
-  graphName: string;
-  nextExecution: string;
-  schedule: string;
-  actions: string[];
-}
-
-enum ImportType {
-  AGENT = "agent",
-  TEMPLATE = "template",
-}
-
-export class MonitorPage extends BasePage {
-  constructor(page: Page) {
-    super(page);
-  }
-
-  async isLoaded(): Promise<boolean> {
-    console.log(`checking if monitor page is loaded`);
-    try {
-      // Wait for the monitor page
-      await this.page.getByTestId("monitor-page").waitFor({
-        state: "visible",
-        timeout: 10_000,
-      });
-
-      // Wait for table headers to be visible (indicates table structure is ready)
-      await this.page.locator("thead th").first().waitFor({
-        state: "visible",
-        timeout: 15_000,
-      });
-
-      // Wait for either a table row or an empty tbody to be present
-      await Promise.race([
-        // Wait for at least one row
-        this.page.locator("tbody tr[data-testid]").first().waitFor({
-          state: "visible",
-          timeout: 15_000,
-        }),
-        // OR wait for an empty tbody (indicating no agents but table is loaded)
-        this.page
-          .locator("tbody[data-testid='agent-flow-list-body']:empty")
-          .waitFor({
-            state: "visible",
-            timeout: 15_000,
-          }),
-      ]);
-
-      return true;
-    } catch {
-      return false;
-    }
-  }
-
-  async listAgents(): Promise<Agent[]> {
-    console.log(`listing agents`);
-    // Wait for table rows to be available
-    const rows = await this.page.locator("tbody tr[data-testid]").all();
-
-    const agents: Agent[] = [];
-
-    for (const row of rows) {
-      // Get the id from data-testid attribute
-      const id = (await row.getAttribute("data-testid")) || "";
-
-      // Get columns - there are 3 cells per row (name, run count, last run)
-      const cells = await row.locator("td").all();
-
-      // Extract name from first cell
-      const name = (await row.getAttribute("data-name")) || "";
-
-      // Extract run count from second cell
-      const runCountText = (await cells[1].textContent()) || "0";
-      const runCount = parseInt(runCountText, 10);
-
-      // Extract last run from third cell's title attribute (contains full timestamp)
-      // If no title, the cell will be empty indicating no last run
-      const lastRunCell = cells[2];
-      const lastRun = (await lastRunCell.getAttribute("title")) || "";
-
-      agents.push({
-        id,
-        name,
-        runCount,
-        lastRun,
-      });
-    }
-
-    agents.reduce((acc, agent) => {
-      if (!agent.id.includes("flow-run")) {
-        acc.push(agent);
-      }
-      return acc;
-    }, [] as Agent[]);
-
-    return agents;
-  }
-
-  async listRuns(filter?: Agent): Promise<Run[]> {
-    console.log(`listing runs`);
-    // Wait for the runs table to be loaded - look for table header "Agent"
-    await this.page.locator("[data-testid='flow-runs-list-body']").waitFor({
-      timeout: 10000,
-    });
-
-    // Get all run rows
-    const rows = await this.page
-      .locator('tbody tr[data-testid^="flow-run-"]')
-      .all();
-
-    const runs: Run[] = [];
-
-    for (const row of rows) {
-      const runId = (await row.getAttribute("data-runid")) || "";
-      const agentId = (await row.getAttribute("data-graphid")) || "";
-
-      // Get columns
-      const cells = await row.locator("td").all();
-
-      // Parse data from cells
-      const agentName = (await cells[0].textContent()) || "";
-      const started = (await cells[1].textContent()) || "";
-      const status = (await cells[2].locator("div").textContent()) || "";
-      const duration = (await cells[3].textContent()) || "";
-
-      // Only add if no filter or if matches filter
-      if (!filter || filter.id === agentId) {
-        runs.push({
-          id: runId,
-          agentId: agentId,
-          agentName: agentName.trim(),
-          started: started.trim(),
-          duration: parseFloat(duration.replace("s", "")),
-          status: status.toLowerCase().trim(),
-        });
-      }
-    }
-
-    return runs;
-  }
-  async listSchedules(): Promise<Schedule[]> {
-    console.log(`listing schedules`);
-    return [];
-  }
-
-  async clickAgent(id: string) {
-    console.log(`selecting agent ${id}`);
-    await this.page.getByTestId(id).click();
-  }
-
-  async clickCreateAgent(): Promise<void> {
-    console.log(`clicking create agent`);
-    await this.page.getByRole("link", { name: "Create" }).click();
-  }
-
-  async importFromFile(
-    directory: string,
-    file: string,
-    name?: string,
-    description?: string,
-    importType: ImportType = ImportType.AGENT,
-  ) {
-    console.log(
-      `importing from directory: ${directory} file: ${file} name: ${name} description: ${description} importType: ${importType}`,
-    );
-    await this.page.getByTestId("create-agent-dropdown").click();
-    await this.page.getByTestId("import-agent-from-file").click();
-
-    await this.page
-      .getByTestId("import-agent-file-input")
-      .setInputFiles(path.join(directory, file));
-    if (name) {
-      console.log(`filling agent name: ${name}`);
-      await this.page.getByTestId("agent-name-input").fill(name);
-    }
-    if (description) {
-      console.log(`filling agent description: ${description}`);
-      await this.page.getByTestId("agent-description-input").fill(description);
-    }
-    if (importType === ImportType.TEMPLATE) {
-      console.log(`clicking import as template switch`);
-      await this.page.getByTestId("import-as-template-switch").click();
-    }
-    console.log(`clicking import agent submit`);
-    await this.page.getByTestId("import-agent-submit").click();
-  }
-
-  async deleteAgent(agent: Agent) {
-    console.log(`deleting agent ${agent.id} ${agent.name}`);
-  }
-
-  async clickAllVersions(agent: Agent) {
-    console.log(`clicking all versions for agent ${agent.id} ${agent.name}`);
-  }
-
-  async openInBuilder(agent: Agent) {
-    console.log(`opening agent ${agent.id} ${agent.name} in builder`);
-  }
-
-  async exportToFile(agent: Agent) {
-    await this.clickAgent(agent.id);
-
-    console.log(`exporting agent id: ${agent.id} name: ${agent.name} to file`);
-    await this.page.getByTestId("export-button").click();
-  }
-
-  async selectRun(agent: Agent, run: Run) {
-    console.log(`selecting run ${run.id} for agent ${agent.id} ${agent.name}`);
-  }
-
-  async openOutputs(agent: Agent, run: Run) {
-    console.log(
-      `opening outputs for run ${run.id} of agent ${agent.id} ${agent.name}`,
-    );
-  }
-}

autogpt_platform/frontend/src/tests/pages/navbar.page.ts

@@ -8,10 +8,6 @@ export class NavBar {
     await this.page.getByRole("link", { name: "Edit profile" }).click();
   }
 
-  async clickMonitorLink() {
-    await this.page.getByTestId("navbar-link-library").click();
-  }
-
   async clickBuildLink() {
     const link = this.page.getByTestId("navbar-link-build");
     await link.waitFor({ state: "visible", timeout: 15000 });

classic/.flake8

@@ -1,15 +1,12 @@
 [flake8]
 max-line-length = 88
-extend-ignore = E203
 exclude =
     .tox,
     __pycache__,
     *.pyc,
-    .env,
-    venv*,
-    .venv,
-    reports,
-    dist,
-    data,
-    .benchmark_workspaces,
-    .autogpt,
+    .env
+    venv*/*,
+    .venv/*,
+    reports/*,
+    dist/*,
+    data/*,

classic/CLAUDE.md

@@ -1,291 +0,0 @@
-# CLAUDE.md
-
-This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
-
-## Project Overview
-
-AutoGPT Classic is an experimental, **unsupported** project demonstrating autonomous GPT-4 operation. Dependencies will not be updated, and the codebase contains known vulnerabilities. This is preserved for educational/historical purposes.
-
-## Repository Structure
-
-```
-classic/
-├── pyproject.toml          # Single consolidated Poetry project
-├── poetry.lock             # Single lock file
-├── forge/
-│   └── forge/              # Core agent framework package
-├── original_autogpt/
-│   └── autogpt/            # AutoGPT agent package
-├── direct_benchmark/
-│   └── direct_benchmark/   # Benchmark harness package
-└── benchmark/              # Challenge definitions (data, not code)
-```
-
-All packages are managed by a single `pyproject.toml` at the classic/ root.
-
-## Common Commands
-
-### Setup & Install
-```bash
-# Install everything from classic/ directory
-cd classic
-poetry install
-```
-
-### Running Agents
-```bash
-# Run forge agent
-poetry run python -m forge
-
-# Run original autogpt server
-poetry run serve --debug
-
-# Run autogpt CLI
-poetry run autogpt
-```
-
-Agents run on `http://localhost:8000` by default.
-
-### Benchmarking
-```bash
-# Run benchmarks
-poetry run direct-benchmark run
-
-# Run specific strategies and models
-poetry run direct-benchmark run \
-    --strategies one_shot,rewoo \
-    --models claude \
-    --parallel 4
-
-# Run a single test
-poetry run direct-benchmark run --tests ReadFile
-
-# List available commands
-poetry run direct-benchmark --help
-```
-
-### Testing
-```bash
-poetry run pytest                              # All tests
-poetry run pytest forge/tests/                 # Forge tests only
-poetry run pytest original_autogpt/tests/      # AutoGPT tests only
-poetry run pytest -k test_name                 # Single test by name
-poetry run pytest path/to/test.py              # Specific test file
-poetry run pytest --cov                        # With coverage
-```
-
-### Linting & Formatting
-
-Run from the classic/ directory:
-
-```bash
-# Format everything (recommended to run together)
-poetry run black . && poetry run isort .
-
-# Check formatting (CI-style, no changes)
-poetry run black --check . && poetry run isort --check-only .
-
-# Lint
-poetry run flake8        # Style linting
-
-# Type check
-poetry run pyright       # Type checking (some errors are expected in infrastructure code)
-```
-
-Note: Always run linters over the entire directory, not specific files, for best results.
-
-## Architecture
-
-### Forge (Core Framework)
-The `forge` package is the foundation that other components depend on:
-- `forge/agent/` - Agent implementation and protocols
-- `forge/llm/` - Multi-provider LLM integrations (OpenAI, Anthropic, Groq, LiteLLM)
-- `forge/components/` - Reusable agent components
-- `forge/file_storage/` - File system abstraction
-- `forge/config/` - Configuration management
-
-### Original AutoGPT
-- `original_autogpt/autogpt/app/` - CLI application entry points
-- `original_autogpt/autogpt/agents/` - Agent implementations
-- `original_autogpt/autogpt/agent_factory/` - Agent creation logic
-
-### Direct Benchmark
-Benchmark harness for testing agent performance:
-- `direct_benchmark/direct_benchmark/` - CLI and harness code
-- `benchmark/agbenchmark/challenges/` - Test cases organized by category (code, retrieval, data, etc.)
-- Reports generated in `direct_benchmark/reports/`
-
-### Package Structure
-All three packages are included in a single Poetry project. Imports are fully qualified:
-- `from forge.agent.base import BaseAgent`
-- `from autogpt.agents.agent import Agent`
-- `from direct_benchmark.harness import BenchmarkHarness`
-
-## Code Style
-
-- Python 3.12 target
-- Line length: 88 characters (Black default)
-- Black for formatting, isort for imports (profile="black")
-- Type hints with Pyright checking
-
-## Testing Patterns
-
-- Async support via pytest-asyncio
-- Fixtures defined in `conftest.py` files provide: `tmp_project_root`, `storage`, `config`, `llm_provider`, `agent`
-- Tests requiring API keys (OPENAI_API_KEY, ANTHROPIC_API_KEY) will skip if not set
-
-## Environment Setup
-
-Copy `.env.example` to `.env` in the relevant directory and add your API keys:
-```bash
-cp .env.example .env
-# Edit .env with your OPENAI_API_KEY, etc.
-```
-
-## Workspaces
-
-Agents operate within a **workspace** - a directory containing all agent data and files. The workspace root defaults to the current working directory.
-
-### Workspace Structure
-
-```
-{workspace}/
-├── .autogpt/
-│   ├── autogpt.yaml              # Workspace-level permissions
-│   ├── ap_server.db              # Agent Protocol database (server mode)
-│   └── agents/
-│       └── AutoGPT-{agent_id}/
-│           ├── state.json        # Agent profile, directives, action history
-│           ├── permissions.yaml  # Agent-specific permission overrides
-│           └── workspace/        # Agent's sandboxed working directory
-```
-
-### Key Concepts
-
-- **Multiple agents** can coexist in the same workspace (each gets its own subdirectory)
-- **File access** is sandboxed to the agent's `workspace/` directory by default
-- **State persistence** - agent state saves to `state.json` and survives across sessions
-- **Storage backends** - supports local filesystem, S3, and GCS (via `FILE_STORAGE_BACKEND` env var)
-
-### Specifying a Workspace
-
-```bash
-# Default: uses current directory
-cd /path/to/my/project && poetry run autogpt
-
-# Or specify explicitly via CLI (if supported)
-poetry run autogpt --workspace /path/to/workspace
-```
-
-## Settings Location
-
-Configuration uses a **layered system** with three levels (in order of precedence):
-
-### 1. Environment Variables (Global)
-
-Loaded from `.env` file in the working directory:
-
-```bash
-# Required
-OPENAI_API_KEY=sk-...
-
-# Optional LLM settings
-SMART_LLM=gpt-4o                    # Model for complex reasoning
-FAST_LLM=gpt-4o-mini                # Model for simple tasks
-EMBEDDING_MODEL=text-embedding-3-small
-
-# Optional search providers (for web search component)
-TAVILY_API_KEY=tvly-...
-SERPER_API_KEY=...
-GOOGLE_API_KEY=...
-GOOGLE_CUSTOM_SEARCH_ENGINE_ID=...
-
-# Optional infrastructure
-LOG_LEVEL=DEBUG                     # DEBUG, INFO, WARNING, ERROR
-DATABASE_STRING=sqlite:///agent.db  # Agent Protocol database
-PORT=8000                           # Server port
-FILE_STORAGE_BACKEND=local          # local, s3, or gcs
-```
-
-### 2. Workspace Settings (`{workspace}/.autogpt/autogpt.yaml`)
-
-Workspace-wide permissions that apply to **all agents** in this workspace:
-
-```yaml
-allow:
-  - read_file({workspace}/**)
-  - write_to_file({workspace}/**)
-  - list_folder({workspace}/**)
-  - web_search(*)
-
-deny:
-  - read_file(**.env)
-  - read_file(**.env.*)
-  - read_file(**.key)
-  - read_file(**.pem)
-  - execute_shell(rm -rf:*)
-  - execute_shell(sudo:*)
-```
-
-Auto-generated with sensible defaults if missing.
-
-### 3. Agent Settings (`{workspace}/.autogpt/agents/{id}/permissions.yaml`)
-
-Agent-specific permission overrides:
-
-```yaml
-allow:
-  - execute_python(*)
-  - web_search(*)
-
-deny:
-  - execute_shell(*)
-```
-
-## Permissions
-
-The permission system uses **pattern matching** with a **first-match-wins** evaluation order.
-
-### Permission Check Order
-
-1. Agent deny list → **Block**
-2. Workspace deny list → **Block**
-3. Agent allow list → **Allow**
-4. Workspace allow list → **Allow**
-5. Session denied list → **Block** (commands denied during this session)
-6. **Prompt user** → Interactive approval (if in interactive mode)
-
-### Pattern Syntax
-
-Format: `command_name(glob_pattern)`
-
-| Pattern | Description |
-|---------|-------------|
-| `read_file({workspace}/**)` | Read any file in workspace (recursive) |
-| `write_to_file({workspace}/*.txt)` | Write only .txt files in workspace root |
-| `execute_shell(python:**)` | Execute Python commands only |
-| `execute_shell(git:*)` | Execute any git command |
-| `web_search(*)` | Allow all web searches |
-
-Special tokens:
-- `{workspace}` - Replaced with actual workspace path
-- `**` - Matches any path including `/`
-- `*` - Matches any characters except `/`
-
-### Interactive Approval Scopes
-
-When prompted for permission, users can choose:
-
-| Scope | Effect |
-|-------|--------|
-| **Once** | Allow this one time only (not saved) |
-| **Agent** | Always allow for this agent (saves to agent `permissions.yaml`) |
-| **Workspace** | Always allow for all agents (saves to `autogpt.yaml`) |
-| **Deny** | Deny this command (saves to appropriate deny list) |
-
-### Default Security
-
-Out of the box, the following are **denied by default**:
-- Reading sensitive files (`.env`, `.key`, `.pem`)
-- Destructive shell commands (`rm -rf`, `sudo`)
-- Operations outside the workspace directory

classic/CLI-USAGE.md

@@ -0,0 +1,182 @@
+## CLI Documentation
+
+This document describes how to interact with the project's CLI (Command Line Interface). It includes the types of outputs you can expect from each command. Note that the `agents stop` command will terminate any process running on port 8000.
+
+### 1. Entry Point for the CLI
+
+Running the `./run` command without any parameters will display the help message, which provides a list of available commands and options. Additionally, you can append `--help` to any command to view help information specific to that command.
+
+```sh
+./run
+```
+
+**Output**:
+
+```
+Usage: cli.py [OPTIONS] COMMAND [ARGS]...
+
+Options:
+  --help  Show this message and exit.
+
+Commands:
+  agent     Commands to create, start and stop agents
+  benchmark  Commands to start the benchmark and list tests and categories
+  setup      Installs dependencies needed for your system.
+```
+
+If you need assistance with any command, simply add the `--help` parameter to the end of your command, like so:
+
+```sh
+./run COMMAND --help
+```
+
+This will display a detailed help message regarding that specific command, including a list of any additional options and arguments it accepts.
+
+### 2. Setup Command
+
+```sh
+./run setup
+```
+
+**Output**:
+
+```
+Setup initiated
+Installation has been completed.
+```
+
+This command initializes the setup of the project.
+
+### 3. Agents Commands
+
+**a. List All Agents**
+
+```sh
+./run agent list
+```
+
+**Output**:
+
+```
+Available agents: 🤖
+        🐙 forge
+        🐙 autogpt
+```
+
+Lists all the available agents.
+
+**b. Create a New Agent**
+
+```sh
+./run agent create my_agent
+```
+
+**Output**:
+
+```
+🎉 New agent 'my_agent' created and switched to the new directory in agents folder.
+```
+
+Creates a new agent named 'my_agent'.
+
+**c. Start an Agent**
+
+```sh
+./run agent start my_agent
+```
+
+**Output**:
+
+```
+... (ASCII Art representing the agent startup)
+[Date and Time] [forge.sdk.db] [DEBUG] 🐛  Initializing AgentDB with database_string: sqlite:///agent.db
+[Date and Time] [forge.sdk.agent] [INFO] 📝  Agent server starting on http://0.0.0.0:8000
+```
+
+Starts the 'my_agent' and displays startup ASCII art and logs.
+
+**d. Stop an Agent**
+
+```sh
+./run agent stop
+```
+
+**Output**:
+
+```
+Agent stopped
+```
+
+Stops the running agent.
+
+### 4. Benchmark Commands
+
+**a. List Benchmark Categories**
+
+```sh
+./run benchmark categories list
+```
+
+**Output**:
+
+```
+Available categories: 📚
+        📖 code
+        📖 safety
+        📖 memory
+        ... (and so on)
+```
+
+Lists all available benchmark categories.
+
+**b. List Benchmark Tests**
+
+```sh
+./run benchmark tests list
+```
+
+**Output**:
+
+```
+Available tests: 📚
+        📖 interface
+                🔬 Search - TestSearch
+                🔬 Write File - TestWriteFile
+        ... (and so on)
+```
+
+Lists all available benchmark tests.
+
+**c. Show Details of a Benchmark Test**
+
+```sh
+./run benchmark tests details TestWriteFile
+```
+
+**Output**:
+
+```
+TestWriteFile
+-------------
+
+        Category:  interface
+        Task:  Write the word 'Washington' to a .txt file
+        ... (and other details)
+```
+
+Displays the details of the 'TestWriteFile' benchmark test.
+
+**d. Start Benchmark for the Agent**
+
+```sh
+./run benchmark start my_agent
+```
+
+**Output**:
+
+```
+(more details about the testing process shown whilst the test are running)
+============= 13 failed, 1 passed in 0.97s ============...
+```
+
+Displays the results of the benchmark tests on 'my_agent'.

classic/Dockerfile.autogpt

@@ -2,7 +2,7 @@
 ARG BUILD_TYPE=dev
 
 # Use an official Python base image from the Docker Hub
-FROM python:3.12-slim AS autogpt-base
+FROM python:3.10-slim AS autogpt-base
 
 # Install browsers
 RUN apt-get update && apt-get install -y \
@@ -34,6 +34,9 @@ COPY original_autogpt/pyproject.toml original_autogpt/poetry.lock ./
 # Include forge so it can be used as a path dependency
 COPY forge/ ../forge
 
+# Include frontend
+COPY frontend/ ../frontend
+
 # Set the entrypoint
 ENTRYPOINT ["poetry", "run", "autogpt"]
 CMD []

classic/FORGE-QUICKSTART.md

@@ -0,0 +1,173 @@
+# Quickstart Guide
+
+> For the complete getting started [tutorial series](https://aiedge.medium.com/autogpt-forge-e3de53cc58ec) <- click here
+
+Welcome to the Quickstart Guide! This guide will walk you through setting up, building, and running your own AutoGPT agent. Whether you're a seasoned AI developer or just starting out, this guide will provide you with the steps to jumpstart your journey in AI development with AutoGPT.
+
+## System Requirements
+
+This project supports Linux (Debian-based), Mac, and Windows Subsystem for Linux (WSL). If you use a Windows system, you must install WSL. You can find the installation instructions for WSL [here](https://learn.microsoft.com/en-us/windows/wsl/).
+
+
+## Getting Setup
+1. **Fork the Repository**
+   To fork the repository, follow these steps:
+   - Navigate to the main page of the repository.
+
+   ![Repository](../docs/content/imgs/quickstart/001_repo.png)
+   - In the top-right corner of the page, click Fork.
+
+   ![Create Fork UI](../docs/content/imgs/quickstart/002_fork.png)
+   - On the next page, select your GitHub account to create the fork.
+   - Wait for the forking process to complete. You now have a copy of the repository in your GitHub account.
+
+2. **Clone the Repository**
+   To clone the repository, you need to have Git installed on your system. If you don't have Git installed, download it from [here](https://git-scm.com/downloads). Once you have Git installed, follow these steps:
+   - Open your terminal.
+   - Navigate to the directory where you want to clone the repository.
+   - Run the git clone command for the fork you just created
+
+   ![Clone the Repository](../docs/content/imgs/quickstart/003_clone.png)
+
+   - Then open your project in your ide
+
+   ![Open the Project in your IDE](../docs/content/imgs/quickstart/004_ide.png)
+
+4. **Setup the Project**
+    Next, we need to set up the required dependencies. We have a tool to help you perform all the tasks on the repo.
+    It can be accessed by running the `run` command by typing `./run` in the terminal.
+
+    The first command you need to use is `./run setup.` This will guide you through setting up your system.
+    Initially, you will get instructions for installing Flutter and Chrome and setting up your GitHub access token like the following image:
+    
+    ![Setup the Project](../docs/content/imgs/quickstart/005_setup.png)
+
+### For Windows Users
+
+If you're a Windows user and experience issues after installing WSL, follow the steps below to resolve them. 
+
+#### Update WSL 
+Run the following command in Powershell or Command Prompt:
+1. Enable the optional WSL and Virtual Machine Platform components.
+2. Download and install the latest Linux kernel.
+3. Set WSL 2 as the default.
+4. Download and install the Ubuntu Linux distribution (a reboot may be required).
+
+```shell
+wsl --install
+```
+
+For more detailed information and additional steps, refer to [Microsoft's WSL Setup Environment Documentation](https://learn.microsoft.com/en-us/windows/wsl/setup/environment).
+
+#### Resolve FileNotFoundError or "No such file or directory" Errors
+When you run `./run setup`, if you encounter errors like `No such file or directory` or `FileNotFoundError`, it might be because Windows-style line endings (CRLF - Carriage Return Line Feed) are not compatible with Unix/Linux style line endings (LF - Line Feed).
+
+To resolve this, you can use the `dos2unix` utility to convert the line endings in your script from CRLF to LF. Here’s how to install and run `dos2unix` on the script:
+
+```shell
+sudo apt update
+sudo apt install dos2unix
+dos2unix ./run
+```
+
+After executing the above commands, running `./run setup` should work successfully. 
+
+#### Store Project Files within the WSL File System
+If you continue to experience issues, consider storing your project files within the WSL file system instead of the Windows file system. This method avoids path translations and permissions issues and provides a more consistent development environment.
+
+You can keep running the command to get feedback on where you are up to with your setup. 
+When setup has been completed, the command will return an output like this:
+
+![Setup Complete](../docs/content/imgs/quickstart/006_setup_complete.png)
+
+## Creating Your Agent
+
+After completing the setup, the next step is to create your agent template.
+Execute the command `./run agent create YOUR_AGENT_NAME`, where `YOUR_AGENT_NAME` should be replaced with your chosen name.
+
+Tips for naming your agent:
+* Give it its own unique name, or name it after yourself
+* Include an important aspect of your agent in the name, such as its purpose
+
+Examples: `SwiftyosAssistant`, `PwutsPRAgent`, `MySuperAgent`
+
+![Create an Agent](../docs/content/imgs/quickstart/007_create_agent.png)
+
+## Running your Agent
+
+Your agent can be started using the command: `./run agent start YOUR_AGENT_NAME`
+
+This starts the agent on the URL: `http://localhost:8000/`
+
+![Start the Agent](../docs/content/imgs/quickstart/009_start_agent.png)
+
+The front end can be accessed from `http://localhost:8000/`; first, you must log in using either a Google account or your GitHub account.
+
+![Login](../docs/content/imgs/quickstart/010_login.png)
+
+Upon logging in, you will get a page that looks something like this: your task history down the left-hand side of the page, and the 'chat' window to send tasks to your agent.
+
+![Login](../docs/content/imgs/quickstart/011_home.png)
+
+When you have finished with your agent or just need to restart it, use Ctl-C to end the session. Then, you can re-run the start command.
+
+If you are having issues and want to ensure the agent has been stopped, there is a `./run agent stop` command, which will kill the process using port 8000, which should be the agent. 
+
+## Benchmarking your Agent
+
+The benchmarking system can also be accessed using the CLI too:
+
+```bash
+agpt % ./run benchmark
+Usage: cli.py benchmark [OPTIONS] COMMAND [ARGS]...
+
+  Commands to start the benchmark and list tests and categories
+
+Options:
+  --help  Show this message and exit.
+
+Commands:
+  categories  Benchmark categories group command
+  start       Starts the benchmark command
+  tests       Benchmark tests group command
+agpt % ./run benchmark categories     
+Usage: cli.py benchmark categories [OPTIONS] COMMAND [ARGS]...
+
+  Benchmark categories group command
+
+Options:
+  --help  Show this message and exit.
+
+Commands:
+  list  List benchmark categories command
+agpt % ./run benchmark tests      
+Usage: cli.py benchmark tests [OPTIONS] COMMAND [ARGS]...
+
+  Benchmark tests group command
+
+Options:
+  --help  Show this message and exit.
+
+Commands:
+  details  Benchmark test details command
+  list     List benchmark tests command
+```
+
+The benchmark has been split into different categories of skills you can test your agent on. You can see what categories are available with
+```bash
+./run benchmark categories list
+# And what tests are available with
+./run benchmark tests list
+```
+
+![Login](../docs/content/imgs/quickstart/012_tests.png)
+
+
+Finally, you can run the benchmark with
+
+```bash
+./run benchmark start YOUR_AGENT_NAME
+
+```
+
+>

classic/README.md

@@ -4,7 +4,7 @@ AutoGPT Classic was an experimental project to demonstrate autonomous GPT-4 oper
 
 ## Project Status
 
-**This project is unsupported, and dependencies will not be updated.** It was an experiment that has concluded its initial research phase. If you want to use AutoGPT, you should use the [AutoGPT Platform](/autogpt_platform).
+⚠️ **This project is unsupported, and dependencies will not be updated. It was an experiment that has concluded its initial research phase. If you want to use AutoGPT, you should use the [AutoGPT Platform](/autogpt_platform)**
 
 For those interested in autonomous AI agents, we recommend exploring more actively maintained alternatives or referring to this codebase for educational purposes only.
 
@@ -16,171 +16,37 @@ AutoGPT Classic was one of the first implementations of autonomous AI agents - A
 - Learn from the results and adjust its approach
 - Chain multiple actions together to achieve an objective
 
+## Key Features
+
+- 🔄 Autonomous task chaining
+- 🛠 Tool and API integration capabilities
+- 💾 Memory management for context retention
+- 🔍 Web browsing and information gathering
+- 📝 File operations and content creation
+- 🔄 Self-prompting and task breakdown
+
 ## Structure
 
-```
-classic/
-├── pyproject.toml          # Single consolidated Poetry project
-├── poetry.lock             # Single lock file
-├── forge/                  # Core autonomous agent framework
-├── original_autogpt/       # Original implementation
-├── direct_benchmark/       # Benchmark harness
-└── benchmark/              # Challenge definitions (data)
-```
+The project is organized into several key components:
+- `/benchmark` - Performance testing tools
+- `/forge` - Core autonomous agent framework
+- `/frontend` - User interface components
+- `/original_autogpt` - Original implementation
 
 ## Getting Started
 
-### Prerequisites
-
-- Python 3.12+
-- [Poetry](https://python-poetry.org/docs/#installation)
-
-### Installation
+While this project is no longer actively maintained, you can still explore the codebase:
 
+1. Clone the repository:
 ```bash
-# Clone the repository
 git clone https://github.com/Significant-Gravitas/AutoGPT.git
 cd classic
-
-# Install everything
-poetry install
 ```
 
-### Configuration
-
-Configuration uses a layered system:
-
-1. **Environment variables** (`.env` file)
-2. **Workspace settings** (`.autogpt/autogpt.yaml`)
-3. **Agent settings** (`.autogpt/agents/{id}/permissions.yaml`)
-
-Copy the example environment file and add your API keys:
-
-```bash
-cp .env.example .env
-```
-
-Key environment variables:
-```bash
-# Required
-OPENAI_API_KEY=sk-...
-
-# Optional LLM settings
-SMART_LLM=gpt-4o                    # Model for complex reasoning
-FAST_LLM=gpt-4o-mini                # Model for simple tasks
-
-# Optional search providers
-TAVILY_API_KEY=tvly-...
-SERPER_API_KEY=...
-
-# Optional infrastructure
-LOG_LEVEL=DEBUG
-PORT=8000
-FILE_STORAGE_BACKEND=local          # local, s3, or gcs
-```
-
-### Running
-
-All commands run from the `classic/` directory:
-
-```bash
-# Run forge agent
-poetry run python -m forge
-
-# Run original autogpt server
-poetry run serve --debug
-
-# Run autogpt CLI
-poetry run autogpt
-```
-
-Agents run on `http://localhost:8000` by default.
-
-### Benchmarking
-
-```bash
-poetry run direct-benchmark run
-```
-
-### Testing
-
-```bash
-poetry run pytest                        # All tests
-poetry run pytest forge/tests/           # Forge tests only
-poetry run pytest original_autogpt/tests/ # AutoGPT tests only
-```
-
-## Workspaces
-
-Agents operate within a **workspace** directory that contains all agent data and files:
-
-```
-{workspace}/
-├── .autogpt/
-│   ├── autogpt.yaml              # Workspace-level permissions
-│   ├── ap_server.db              # Agent Protocol database (server mode)
-│   └── agents/
-│       └── AutoGPT-{agent_id}/
-│           ├── state.json        # Agent profile, directives, history
-│           ├── permissions.yaml  # Agent-specific permissions
-│           └── workspace/        # Agent's sandboxed working directory
-```
-
-- The workspace defaults to the current working directory
-- Multiple agents can coexist in the same workspace
-- Agent file access is sandboxed to their `workspace/` subdirectory
-- State persists across sessions via `state.json`
-
-## Permissions
-
-AutoGPT uses a **layered permission system** with pattern matching:
-
-### Permission Files
-
-| File | Scope | Location |
-|------|-------|----------|
-| `autogpt.yaml` | All agents in workspace | `.autogpt/autogpt.yaml` |
-| `permissions.yaml` | Single agent | `.autogpt/agents/{id}/permissions.yaml` |
-
-### Permission Format
-
-```yaml
-allow:
-  - read_file({workspace}/**)     # Read any file in workspace
-  - write_to_file({workspace}/**) # Write any file in workspace
-  - web_search(*)                 # All web searches
-
-deny:
-  - read_file(**.env)             # Block .env files
-  - execute_shell(sudo:*)         # Block sudo commands
-```
-
-### Check Order (First Match Wins)
-
-1. Agent deny → Block
-2. Workspace deny → Block
-3. Agent allow → Allow
-4. Workspace allow → Allow
-5. Prompt user → Interactive approval
-
-### Interactive Approval
-
-When prompted, users can approve commands with different scopes:
-- **Once** - Allow this one time only
-- **Agent** - Always allow for this agent
-- **Workspace** - Always allow for all agents
-- **Deny** - Block this command
-
-### Default Security
-
-Denied by default:
-- Sensitive files (`.env`, `.key`, `.pem`)
-- Destructive commands (`rm -rf`, `sudo`)
-- Operations outside the workspace
-
-## Security Notice
-
-This codebase has **known vulnerabilities** and issues with its dependencies. It will not be updated to new dependencies. Use for educational purposes only.
+2. Review the documentation:
+- For reference, see the [documentation](https://docs.agpt.co). You can browse at the same point in time as this commit so the docs don't change.
+- Check `CLI-USAGE.md` for command-line interface details
+- Refer to `TROUBLESHOOTING.md` for common issues
 
 ## License
 
@@ -189,3 +55,27 @@ This project segment is licensed under the MIT License - see the [LICENSE](LICEN
 ## Documentation
 
 Please refer to the [documentation](https://docs.agpt.co) for more detailed information about the project's architecture and concepts.
+You can browse at the same point in time as this commit so the docs don't change.
+
+## Historical Impact
+
+AutoGPT Classic played a significant role in advancing the field of autonomous AI agents:
+- Demonstrated practical implementation of AI autonomy
+- Inspired numerous derivative projects and research
+- Contributed to the development of AI agent architectures
+- Helped identify key challenges in AI autonomy
+
+## Security Notice
+
+If you're studying this codebase, please understand this has KNOWN vulnerabilities and issues with its dependencies. It will not be updated to new dependencies.
+
+## Community & Support
+
+While active development has concluded:
+- The codebase remains available for study and reference
+- Historical discussions can be found in project issues
+- Related research and developments continue in the broader AI agent community
+
+## Acknowledgments
+
+Thanks to all contributors who participated in this experimental project and helped advance the field of autonomous AI agents.

classic/benchmark/.env.example

@@ -0,0 +1,4 @@
+AGENT_NAME=mini-agi
+REPORTS_FOLDER="reports/mini-agi"
+OPENAI_API_KEY="sk-" # for LLM eval
+BUILD_SKILL_TREE=false # set to true to build the skill tree.

classic/benchmark/.flake8

@@ -0,0 +1,12 @@
+[flake8]
+max-line-length = 88
+# Ignore rules that conflict with Black code style
+extend-ignore = E203, W503
+exclude =
+    __pycache__/,
+    *.pyc,
+    .pytest_cache/,
+    venv*/,
+    .venv/,
+    reports/,
+    agbenchmark/reports/,

classic/benchmark/.gitignore

@@ -0,0 +1,174 @@
+agbenchmark_config/workspace/
+backend/backend_stdout.txt
+reports/df*.pkl
+reports/raw*
+
+# Byte-compiled / optimized / DLL files
+__pycache__/
+*.py[cod]
+*$py.class
+
+# C extensions
+*.so
+
+# Distribution / packaging
+.Python
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+share/python-wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+MANIFEST
+
+# PyInstaller
+#  Usually these files are written by a python script from a template
+#  before PyInstaller builds the exe, so as to inject date/other infos into it.
+*.manifest
+*.spec
+
+# Installer logs
+pip-log.txt
+pip-delete-this-directory.txt
+
+# Unit test / coverage reports
+htmlcov/
+.tox/
+.nox/
+.coverage
+.coverage.*
+.cache
+nosetests.xml
+coverage.xml
+*.cover
+*.py,cover
+.hypothesis/
+.pytest_cache/
+cover/
+
+# Translations
+*.mo
+*.pot
+
+# Django stuff:
+*.log
+local_settings.py
+db.sqlite3
+db.sqlite3-journal
+
+# Flask stuff:
+instance/
+.webassets-cache
+
+# Scrapy stuff:
+.scrapy
+
+# Sphinx documentation
+docs/_build/
+
+# PyBuilder
+.pybuilder/
+target/
+
+# Jupyter Notebook
+.ipynb_checkpoints
+
+# IPython
+profile_default/
+ipython_config.py
+
+# pyenv
+#   For a library or package, you might want to ignore these files since the code is
+#   intended to run in multiple environments; otherwise, check them in:
+# .python-version
+
+# pipenv
+#   According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control.
+#   However, in case of collaboration, if having platform-specific dependencies or dependencies
+#   having no cross-platform support, pipenv may install dependencies that don't work, or not
+#   install all needed dependencies.
+#Pipfile.lock
+
+# poetry
+#   Similar to Pipfile.lock, it is generally recommended to include poetry.lock in version control.
+#   This is especially recommended for binary packages to ensure reproducibility, and is more
+#   commonly ignored for libraries.
+#   https://python-poetry.org/docs/basic-usage/#commit-your-poetrylock-file-to-version-control
+#poetry.lock
+
+# pdm
+#   Similar to Pipfile.lock, it is generally recommended to include pdm.lock in version control.
+#pdm.lock
+#   pdm stores project-wide configurations in .pdm.toml, but it is recommended to not include it
+#   in version control.
+#   https://pdm.fming.dev/#use-with-ide
+.pdm.toml
+
+# PEP 582; used by e.g. github.com/David-OConnor/pyflow and github.com/pdm-project/pdm
+__pypackages__/
+
+# Celery stuff
+celerybeat-schedule
+celerybeat.pid
+
+# SageMath parsed files
+*.sage.py
+
+# Environments
+.env
+.venv
+env/
+venv/
+ENV/
+env.bak/
+venv.bak/
+
+# Spyder project settings
+.spyderproject
+.spyproject
+
+# Rope project settings
+.ropeproject
+
+# mkdocs documentation
+/site
+
+# mypy
+.mypy_cache/
+.dmypy.json
+dmypy.json
+
+# Pyre type checker
+.pyre/
+
+# pytype static type analyzer
+.pytype/
+
+# Cython debug symbols
+cython_debug/
+
+# PyCharm
+#  JetBrains specific template is maintained in a separate JetBrains.gitignore that can
+#  be found at https://github.com/github/gitignore/blob/main/Global/JetBrains.gitignore
+#  and can be added to the global gitignore or merged into this file.  For a more nuclear
+#  option (not recommended) you can uncomment the following to ignore the entire idea folder.
+.idea/
+.DS_Store
+```
+secrets.json
+agbenchmark_config/challenges_already_beaten.json
+agbenchmark_config/challenges/pri_*
+agbenchmark_config/updates.json
+agbenchmark_config/reports/*
+agbenchmark_config/reports/success_rate.json
+agbenchmark_config/reports/regression_tests.json

classic/benchmark/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 AutoGPT
+
+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
+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
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

classic/benchmark/README.md

@@ -0,0 +1,25 @@
+# Auto-GPT Benchmarks
+
+Built for the purpose of benchmarking the performance of agents regardless of how they work.
+
+Objectively know how well your agent is performing in categories like code, retrieval, memory, and safety.
+
+Save time and money while doing it through smart dependencies. The best part? It's all automated.
+
+## Scores:
+
+<img width="733" alt="Screenshot 2023-07-25 at 10 35 01 AM" src="https://github.com/Significant-Gravitas/Auto-GPT-Benchmarks/assets/9652976/98963e0b-18b9-4b17-9a6a-4d3e4418af70">
+
+## Ranking overall:
+
+- 1- [Beebot](https://github.com/AutoPackAI/beebot)
+- 2- [mini-agi](https://github.com/muellerberndt/mini-agi)
+- 3- [Auto-GPT](https://github.com/Significant-Gravitas/AutoGPT)
+
+## Detailed results:
+
+<img width="733" alt="Screenshot 2023-07-25 at 10 42 15 AM" src="https://github.com/Significant-Gravitas/Auto-GPT-Benchmarks/assets/9652976/39be464c-c842-4437-b28a-07d878542a83">
+
+[Click here to see the results and the raw data!](https://docs.google.com/spreadsheets/d/1WXm16P2AHNbKpkOI0LYBpcsGG0O7D8HYTG5Uj0PaJjA/edit#gid=203558751)!
+
+More agents coming soon !

classic/benchmark/agbenchmark/README.md

@@ -0,0 +1,69 @@
+## As a user
+
+1. `pip install auto-gpt-benchmarks`
+2. Add boilerplate code to run and kill agent
+3. `agbenchmark`
+   - `--category challenge_category` to run tests in a specific category
+   - `--mock` to only run mock tests if they exists for each test
+   - `--noreg` to skip any tests that have passed in the past. When you run without this flag and a previous challenge that passed fails, it will now not be regression tests
+4. We call boilerplate code for your agent
+5. Show pass rate of tests, logs, and any other metrics
+
+## Contributing
+
+##### Diagrams: https://whimsical.com/agbenchmark-5n4hXBq1ZGzBwRsK4TVY7x
+
+### To run the existing mocks
+
+1. clone the repo `auto-gpt-benchmarks`
+2. `pip install poetry`
+3. `poetry shell`
+4. `poetry install`
+5. `cp .env_example .env`
+6. `git submodule update --init --remote --recursive`
+7. `uvicorn server:app --reload`
+8. `agbenchmark --mock`
+   Keep config the same and watch the logs :)
+
+### To run with mini-agi
+
+1. Navigate to `auto-gpt-benchmarks/agent/mini-agi`
+2. `pip install -r requirements.txt`
+3. `cp .env_example .env`, set `PROMPT_USER=false` and add your `OPENAI_API_KEY=`. Sset `MODEL="gpt-3.5-turbo"` if you don't have access to `gpt-4` yet. Also make sure you have Python 3.10^ installed
+4. set `AGENT_NAME=mini-agi` in `.env` file and where you want your `REPORTS_FOLDER` to be
+5. Make sure to follow the commands above, and remove mock flag `agbenchmark`
+
+- To add requirements `poetry add requirement`.
+
+Feel free to create prs to merge with `main` at will (but also feel free to ask for review) - if you can't send msg in R&D chat for access.
+
+If you push at any point and break things - it'll happen to everyone - fix it asap. Step 1 is to revert `master` to last working commit
+
+Let people know what beautiful code you write does, document everything well
+
+Share your progress :)
+
+#### Dataset
+
+Manually created, existing challenges within Auto-Gpt, https://osu-nlp-group.github.io/Mind2Web/
+
+## How do I add new agents to agbenchmark ?
+
+Example with smol developer.
+
+1- Create a github branch with your agent following the same pattern as this example:
+
+https://github.com/smol-ai/developer/pull/114/files
+
+2- Create the submodule and the github workflow by following the same pattern as this example:
+
+https://github.com/Significant-Gravitas/Auto-GPT-Benchmarks/pull/48/files
+
+## How do I run agent in different environments?
+
+**To just use as the benchmark for your agent**. `pip install` the package and run `agbenchmark`
+
+**For internal Auto-GPT ci runs**, specify the `AGENT_NAME` you want you use and set the `HOME_ENV`.
+Ex. `AGENT_NAME=mini-agi`
+
+**To develop agent alongside benchmark**, you can specify the `AGENT_NAME` you want you use and add as a submodule to the repo

classic/benchmark/agbenchmark/__main__.py

@@ -0,0 +1,352 @@
+import logging
+import os
+import sys
+from datetime import datetime, timezone
+from pathlib import Path
+from typing import Any, Optional
+
+import click
+from click_default_group import DefaultGroup
+from dotenv import load_dotenv
+
+from agbenchmark.config import AgentBenchmarkConfig
+from agbenchmark.utils.logging import configure_logging
+
+load_dotenv()
+
+# try:
+#     if os.getenv("HELICONE_API_KEY"):
+#         import helicone  # noqa
+
+#         helicone_enabled = True
+#     else:
+#         helicone_enabled = False
+# except ImportError:
+#     helicone_enabled = False
+
+
+class InvalidInvocationError(ValueError):
+    pass
+
+
+logger = logging.getLogger(__name__)
+
+BENCHMARK_START_TIME_DT = datetime.now(timezone.utc)
+BENCHMARK_START_TIME = BENCHMARK_START_TIME_DT.strftime("%Y-%m-%dT%H:%M:%S+00:00")
+
+
+# if helicone_enabled:
+#     from helicone.lock import HeliconeLockManager
+
+#     HeliconeLockManager.write_custom_property(
+#         "benchmark_start_time", BENCHMARK_START_TIME
+#     )
+
+
+@click.group(cls=DefaultGroup, default_if_no_args=True)
+@click.option("--debug", is_flag=True, help="Enable debug output")
+def cli(
+    debug: bool,
+) -> Any:
+    configure_logging(logging.DEBUG if debug else logging.INFO)
+
+
+@cli.command(hidden=True)
+def start():
+    raise DeprecationWarning(
+        "`agbenchmark start` is deprecated. Use `agbenchmark run` instead."
+    )
+
+
+@cli.command(default=True)
+@click.option(
+    "-N", "--attempts", default=1, help="Number of times to run each challenge."
+)
+@click.option(
+    "-c",
+    "--category",
+    multiple=True,
+    help="(+) Select a category to run.",
+)
+@click.option(
+    "-s",
+    "--skip-category",
+    multiple=True,
+    help="(+) Exclude a category from running.",
+)
+@click.option("--test", multiple=True, help="(+) Select a test to run.")
+@click.option("--maintain", is_flag=True, help="Run only regression tests.")
+@click.option("--improve", is_flag=True, help="Run only non-regression tests.")
+@click.option(
+    "--explore",
+    is_flag=True,
+    help="Run only challenges that have never been beaten.",
+)
+@click.option(
+    "--no-dep",
+    is_flag=True,
+    help="Run all (selected) challenges, regardless of dependency success/failure.",
+)
+@click.option("--cutoff", type=int, help="Override the challenge time limit (seconds).")
+@click.option("--nc", is_flag=True, help="Disable the challenge time limit.")
+@click.option("--mock", is_flag=True, help="Run with mock")
+@click.option("--keep-answers", is_flag=True, help="Keep answers")
+@click.option(
+    "--backend",
+    is_flag=True,
+    help="Write log output to a file instead of the terminal.",
+)
+# @click.argument(
+#     "agent_path",
+#     type=click.Path(exists=True, file_okay=False, path_type=Path),
+#     required=False,
+# )
+def run(
+    maintain: bool,
+    improve: bool,
+    explore: bool,
+    mock: bool,
+    no_dep: bool,
+    nc: bool,
+    keep_answers: bool,
+    test: tuple[str],
+    category: tuple[str],
+    skip_category: tuple[str],
+    attempts: int,
+    cutoff: Optional[int] = None,
+    backend: Optional[bool] = False,
+    # agent_path: Optional[Path] = None,
+) -> None:
+    """
+    Run the benchmark on the agent in the current directory.
+
+    Options marked with (+) can be specified multiple times, to select multiple items.
+    """
+    from agbenchmark.main import run_benchmark, validate_args
+
+    agbenchmark_config = AgentBenchmarkConfig.load()
+    logger.debug(f"agbenchmark_config: {agbenchmark_config.agbenchmark_config_dir}")
+    try:
+        validate_args(
+            maintain=maintain,
+            improve=improve,
+            explore=explore,
+            tests=test,
+            categories=category,
+            skip_categories=skip_category,
+            no_cutoff=nc,
+            cutoff=cutoff,
+        )
+    except InvalidInvocationError as e:
+        logger.error("Error: " + "\n".join(e.args))
+        sys.exit(1)
+
+    original_stdout = sys.stdout  # Save the original standard output
+    exit_code = None
+
+    if backend:
+        with open("backend/backend_stdout.txt", "w") as f:
+            sys.stdout = f
+            exit_code = run_benchmark(
+                config=agbenchmark_config,
+                maintain=maintain,
+                improve=improve,
+                explore=explore,
+                mock=mock,
+                no_dep=no_dep,
+                no_cutoff=nc,
+                keep_answers=keep_answers,
+                tests=test,
+                categories=category,
+                skip_categories=skip_category,
+                attempts_per_challenge=attempts,
+                cutoff=cutoff,
+            )
+
+        sys.stdout = original_stdout
+
+    else:
+        exit_code = run_benchmark(
+            config=agbenchmark_config,
+            maintain=maintain,
+            improve=improve,
+            explore=explore,
+            mock=mock,
+            no_dep=no_dep,
+            no_cutoff=nc,
+            keep_answers=keep_answers,
+            tests=test,
+            categories=category,
+            skip_categories=skip_category,
+            attempts_per_challenge=attempts,
+            cutoff=cutoff,
+        )
+
+        sys.exit(exit_code)
+
+
+@cli.command()
+@click.option("--port", type=int, help="Port to run the API on.")
+def serve(port: Optional[int] = None):
+    """Serve the benchmark frontend and API on port 8080."""
+    import uvicorn
+
+    from agbenchmark.app import setup_fastapi_app
+
+    config = AgentBenchmarkConfig.load()
+    app = setup_fastapi_app(config)
+
+    # Run the FastAPI application using uvicorn
+    port = port or int(os.getenv("PORT", 8080))
+    uvicorn.run(app, host="0.0.0.0", port=port)
+
+
+@cli.command()
+def config():
+    """Displays info regarding the present AGBenchmark config."""
+    from .utils.utils import pretty_print_model
+
+    try:
+        config = AgentBenchmarkConfig.load()
+    except FileNotFoundError as e:
+        click.echo(e, err=True)
+        return 1
+
+    pretty_print_model(config, include_header=False)
+
+
+@cli.group()
+def challenge():
+    logging.getLogger().setLevel(logging.WARNING)
+
+
+@challenge.command("list")
+@click.option(
+    "--all", "include_unavailable", is_flag=True, help="Include unavailable challenges."
+)
+@click.option(
+    "--names", "only_names", is_flag=True, help="List only the challenge names."
+)
+@click.option("--json", "output_json", is_flag=True)
+def list_challenges(include_unavailable: bool, only_names: bool, output_json: bool):
+    """Lists [available|all] challenges."""
+    import json
+
+    from tabulate import tabulate
+
+    from .challenges.builtin import load_builtin_challenges
+    from .challenges.webarena import load_webarena_challenges
+    from .utils.data_types import Category, DifficultyLevel
+    from .utils.utils import sorted_by_enum_index
+
+    DIFFICULTY_COLORS = {
+        difficulty: color
+        for difficulty, color in zip(
+            DifficultyLevel,
+            ["black", "blue", "cyan", "green", "yellow", "red", "magenta", "white"],
+        )
+    }
+    CATEGORY_COLORS = {
+        category: f"bright_{color}"
+        for category, color in zip(
+            Category,
+            ["blue", "cyan", "green", "yellow", "magenta", "red", "white", "black"],
+        )
+    }
+
+    # Load challenges
+    challenges = filter(
+        lambda c: c.info.available or include_unavailable,
+        [
+            *load_builtin_challenges(),
+            *load_webarena_challenges(skip_unavailable=False),
+        ],
+    )
+    challenges = sorted_by_enum_index(
+        challenges, DifficultyLevel, key=lambda c: c.info.difficulty
+    )
+
+    if only_names:
+        if output_json:
+            click.echo(json.dumps([c.info.name for c in challenges]))
+            return
+
+        for c in challenges:
+            click.echo(
+                click.style(c.info.name, fg=None if c.info.available else "black")
+            )
+        return
+
+    if output_json:
+        click.echo(
+            json.dumps([json.loads(c.info.model_dump_json()) for c in challenges])
+        )
+        return
+
+    headers = tuple(
+        click.style(h, bold=True) for h in ("Name", "Difficulty", "Categories")
+    )
+    table = [
+        tuple(
+            v if challenge.info.available else click.style(v, fg="black")
+            for v in (
+                challenge.info.name,
+                (
+                    click.style(
+                        challenge.info.difficulty.value,
+                        fg=DIFFICULTY_COLORS[challenge.info.difficulty],
+                    )
+                    if challenge.info.difficulty
+                    else click.style("-", fg="black")
+                ),
+                " ".join(
+                    click.style(cat.value, fg=CATEGORY_COLORS[cat])
+                    for cat in sorted_by_enum_index(challenge.info.category, Category)
+                ),
+            )
+        )
+        for challenge in challenges
+    ]
+    click.echo(tabulate(table, headers=headers))
+
+
+@challenge.command()
+@click.option("--json", is_flag=True)
+@click.argument("name")
+def info(name: str, json: bool):
+    from itertools import chain
+
+    from .challenges.builtin import load_builtin_challenges
+    from .challenges.webarena import load_webarena_challenges
+    from .utils.utils import pretty_print_model
+
+    for challenge in chain(
+        load_builtin_challenges(),
+        load_webarena_challenges(skip_unavailable=False),
+    ):
+        if challenge.info.name != name:
+            continue
+
+        if json:
+            click.echo(challenge.info.model_dump_json())
+            break
+
+        pretty_print_model(challenge.info)
+        break
+    else:
+        click.echo(click.style(f"Unknown challenge '{name}'", fg="red"), err=True)
+
+
+@cli.command()
+def version():
+    """Print version info for the AGBenchmark application."""
+    import toml
+
+    package_root = Path(__file__).resolve().parent.parent
+    pyproject = toml.load(package_root / "pyproject.toml")
+    version = pyproject["tool"]["poetry"]["version"]
+    click.echo(f"AGBenchmark version {version}")
+
+
+if __name__ == "__main__":
+    cli()

classic/benchmark/agbenchmark/agent_api_interface.py

@@ -0,0 +1,111 @@
+import logging
+import time
+from pathlib import Path
+from typing import AsyncIterator, Optional
+
+from agent_protocol_client import (
+    AgentApi,
+    ApiClient,
+    Configuration,
+    Step,
+    TaskRequestBody,
+)
+
+from agbenchmark.agent_interface import get_list_of_file_paths
+from agbenchmark.config import AgentBenchmarkConfig
+
+logger = logging.getLogger(__name__)
+
+
+async def run_api_agent(
+    task: str,
+    config: AgentBenchmarkConfig,
+    timeout: int,
+    artifacts_location: Optional[Path] = None,
+    *,
+    mock: bool = False,
+) -> AsyncIterator[Step]:
+    configuration = Configuration(host=config.host)
+    async with ApiClient(configuration) as api_client:
+        api_instance = AgentApi(api_client)
+        task_request_body = TaskRequestBody(input=task, additional_input=None)
+
+        start_time = time.time()
+        response = await api_instance.create_agent_task(
+            task_request_body=task_request_body
+        )
+        task_id = response.task_id
+
+        if artifacts_location:
+            logger.debug("Uploading task input artifacts to agent...")
+            await upload_artifacts(
+                api_instance, artifacts_location, task_id, "artifacts_in"
+            )
+
+        logger.debug("Running agent until finished or timeout...")
+        while True:
+            step = await api_instance.execute_agent_task_step(task_id=task_id)
+            yield step
+
+            if time.time() - start_time > timeout:
+                raise TimeoutError("Time limit exceeded")
+            if step and mock:
+                step.is_last = True
+            if not step or step.is_last:
+                break
+
+        if artifacts_location:
+            # In "mock" mode, we cheat by giving the correct artifacts to pass the test
+            if mock:
+                logger.debug("Uploading mock artifacts to agent...")
+                await upload_artifacts(
+                    api_instance, artifacts_location, task_id, "artifacts_out"
+                )
+
+            logger.debug("Downloading agent artifacts...")
+            await download_agent_artifacts_into_folder(
+                api_instance, task_id, config.temp_folder
+            )
+
+
+async def download_agent_artifacts_into_folder(
+    api_instance: AgentApi, task_id: str, folder: Path
+):
+    artifacts = await api_instance.list_agent_task_artifacts(task_id=task_id)
+
+    for artifact in artifacts.artifacts:
+        # current absolute path of the directory of the file
+        if artifact.relative_path:
+            path: str = (
+                artifact.relative_path
+                if not artifact.relative_path.startswith("/")
+                else artifact.relative_path[1:]
+            )
+            folder = (folder / path).parent
+
+        if not folder.exists():
+            folder.mkdir(parents=True)
+
+        file_path = folder / artifact.file_name
+        logger.debug(f"Downloading agent artifact {artifact.file_name} to {folder}")
+        with open(file_path, "wb") as f:
+            content = await api_instance.download_agent_task_artifact(
+                task_id=task_id, artifact_id=artifact.artifact_id
+            )
+
+            f.write(content)
+
+
+async def upload_artifacts(
+    api_instance: AgentApi, artifacts_location: Path, task_id: str, type: str
+) -> None:
+    for file_path in get_list_of_file_paths(artifacts_location, type):
+        relative_path: Optional[str] = "/".join(
+            str(file_path).split(f"{type}/", 1)[-1].split("/")[:-1]
+        )
+        if not relative_path:
+            relative_path = None
+
+        await api_instance.upload_agent_task_artifacts(
+            task_id=task_id, file=str(file_path), relative_path=relative_path
+        )

classic/benchmark/agbenchmark/agent_interface.py

@@ -0,0 +1,27 @@
+import os
+import shutil
+from pathlib import Path
+
+from dotenv import load_dotenv
+
+load_dotenv()
+
+HELICONE_GRAPHQL_LOGS = os.getenv("HELICONE_GRAPHQL_LOGS", "").lower() == "true"
+
+
+def get_list_of_file_paths(
+    challenge_dir_path: str | Path, artifact_folder_name: str
+) -> list[Path]:
+    source_dir = Path(challenge_dir_path) / artifact_folder_name
+    if not source_dir.exists():
+        return []
+    return list(source_dir.iterdir())
+
+
+def copy_challenge_artifacts_into_workspace(
+    challenge_dir_path: str | Path, artifact_folder_name: str, workspace: str | Path
+) -> None:
+    file_paths = get_list_of_file_paths(challenge_dir_path, artifact_folder_name)
+    for file_path in file_paths:
+        if file_path.is_file():
+            shutil.copy(file_path, workspace)

classic/benchmark/agbenchmark/app.py

@@ -0,0 +1,339 @@
+import datetime
+import glob
+import json
+import logging
+import sys
+import time
+import uuid
+from collections import deque
+from multiprocessing import Process
+from pathlib import Path
+from typing import Optional
+
+import httpx
+import psutil
+from agent_protocol_client import AgentApi, ApiClient, ApiException, Configuration
+from agent_protocol_client.models import Task, TaskRequestBody
+from fastapi import APIRouter, FastAPI, HTTPException, Request, Response
+from fastapi.middleware.cors import CORSMiddleware
+from pydantic import BaseModel, ConfigDict, ValidationError
+
+from agbenchmark.challenges import ChallengeInfo
+from agbenchmark.config import AgentBenchmarkConfig
+from agbenchmark.reports.processing.report_types_v2 import (
+    BenchmarkRun,
+    Metrics,
+    RepositoryInfo,
+    RunDetails,
+    TaskInfo,
+)
+from agbenchmark.schema import TaskEvalRequestBody
+from agbenchmark.utils.utils import write_pretty_json
+
+sys.path.append(str(Path(__file__).parent.parent))
+
+logger = logging.getLogger(__name__)
+
+CHALLENGES: dict[str, ChallengeInfo] = {}
+challenges_path = Path(__file__).parent / "challenges"
+challenge_spec_files = deque(
+    glob.glob(
+        f"{challenges_path}/**/data.json",
+        recursive=True,
+    )
+)
+
+logger.debug("Loading challenges...")
+while challenge_spec_files:
+    challenge_spec_file = Path(challenge_spec_files.popleft())
+    challenge_relpath = challenge_spec_file.relative_to(challenges_path.parent)
+    if challenge_relpath.is_relative_to("challenges/deprecated"):
+        continue
+
+    logger.debug(f"Loading {challenge_relpath}...")
+    try:
+        challenge_info = ChallengeInfo.model_validate_json(
+            challenge_spec_file.read_text()
+        )
+    except ValidationError as e:
+        if logging.getLogger().level == logging.DEBUG:
+            logger.warning(f"Spec file {challenge_relpath} failed to load:\n{e}")
+        logger.debug(f"Invalid challenge spec: {challenge_spec_file.read_text()}")
+        continue
+
+    if not challenge_info.eval_id:
+        challenge_info.eval_id = str(uuid.uuid4())
+        # this will sort all the keys of the JSON systematically
+        # so that the order is always the same
+        write_pretty_json(challenge_info.model_dump(), challenge_spec_file)
+
+    CHALLENGES[challenge_info.eval_id] = challenge_info
+
+
+class BenchmarkTaskInfo(BaseModel):
+    task_id: str
+    start_time: datetime.datetime
+    challenge_info: ChallengeInfo
+
+
+task_informations: dict[str, BenchmarkTaskInfo] = {}
+
+
+def find_agbenchmark_without_uvicorn():
+    pids = []
+    for process in psutil.process_iter(
+        attrs=[
+            "pid",
+            "cmdline",
+            "name",
+            "username",
+            "status",
+            "cpu_percent",
+            "memory_info",
+            "create_time",
+            "cwd",
+            "connections",
+        ]
+    ):
+        try:
+            # Convert the process.info dictionary values to strings and concatenate them
+            full_info = " ".join([str(v) for k, v in process.as_dict().items()])
+
+            if "agbenchmark" in full_info and "uvicorn" not in full_info:
+                pids.append(process.pid)
+        except (psutil.NoSuchProcess, psutil.AccessDenied, psutil.ZombieProcess):
+            pass
+    return pids
+
+
+class CreateReportRequest(BaseModel):
+    test: str
+    test_run_id: str
+    # category: Optional[str] = []
+    mock: Optional[bool] = False
+
+    model_config = ConfigDict(extra="forbid")
+
+
+updates_list = []
+
+origins = [
+    "http://localhost:8000",
+    "http://localhost:8080",
+    "http://127.0.0.1:5000",
+    "http://localhost:5000",
+]
+
+
+def stream_output(pipe):
+    for line in pipe:
+        print(line, end="")
+
+
+def setup_fastapi_app(agbenchmark_config: AgentBenchmarkConfig) -> FastAPI:
+    from agbenchmark.agent_api_interface import upload_artifacts
+    from agbenchmark.challenges import get_challenge_from_source_uri
+    from agbenchmark.main import run_benchmark
+
+    configuration = Configuration(
+        host=agbenchmark_config.host or "http://localhost:8000"
+    )
+    app = FastAPI()
+    app.add_middleware(
+        CORSMiddleware,
+        allow_origins=origins,
+        allow_credentials=True,
+        allow_methods=["*"],
+        allow_headers=["*"],
+    )
+    router = APIRouter()
+
+    @router.post("/reports")
+    def run_single_test(body: CreateReportRequest) -> dict:
+        pids = find_agbenchmark_without_uvicorn()
+        logger.info(f"pids already running with agbenchmark: {pids}")
+
+        logger.debug(f"Request to /reports: {body.model_dump()}")
+
+        # Start the benchmark in a separate thread
+        benchmark_process = Process(
+            target=lambda: run_benchmark(
+                config=agbenchmark_config,
+                tests=(body.test,),
+                mock=body.mock or False,
+            )
+        )
+        benchmark_process.start()
+
+        # Wait for the benchmark to finish, with a timeout of 200 seconds
+        timeout = 200
+        start_time = time.time()
+        while benchmark_process.is_alive():
+            if time.time() - start_time > timeout:
+                logger.warning(f"Benchmark run timed out after {timeout} seconds")
+                benchmark_process.terminate()
+                break
+            time.sleep(1)
+        else:
+            logger.debug(f"Benchmark finished running in {time.time() - start_time} s")
+
+        # List all folders in the current working directory
+        reports_folder = agbenchmark_config.reports_folder
+        folders = [folder for folder in reports_folder.iterdir() if folder.is_dir()]
+
+        # Sort the folders based on their names
+        sorted_folders = sorted(folders, key=lambda x: x.name)
+
+        # Get the last folder
+        latest_folder = sorted_folders[-1] if sorted_folders else None
+
+        # Read report.json from this folder
+        if latest_folder:
+            report_path = latest_folder / "report.json"
+            logger.debug(f"Getting latest report from {report_path}")
+            if report_path.exists():
+                with report_path.open() as file:
+                    data = json.load(file)
+                logger.debug(f"Report data: {data}")
+            else:
+                raise HTTPException(
+                    502,
+                    "Could not get result after running benchmark: "
+                    f"'report.json' does not exist in '{latest_folder}'",
+                )
+        else:
+            raise HTTPException(
+                504, "Could not get result after running benchmark: no reports found"
+            )
+
+        return data
+
+    @router.post("/agent/tasks", tags=["agent"])
+    async def create_agent_task(task_eval_request: TaskEvalRequestBody) -> Task:
+        """
+        Creates a new task using the provided TaskEvalRequestBody and returns a Task.
+
+        Args:
+            task_eval_request: `TaskRequestBody` including an eval_id.
+
+        Returns:
+            Task: A new task with task_id, input, additional_input,
+                and empty lists for artifacts and steps.
+
+        Example:
+            Request (TaskEvalRequestBody defined in schema.py):
+                {
+                    ...,
+                    "eval_id": "50da533e-3904-4401-8a07-c49adf88b5eb"
+                }
+
+            Response (Task defined in `agent_protocol_client.models`):
+                {
+                    "task_id": "50da533e-3904-4401-8a07-c49adf88b5eb",
+                    "input": "Write the word 'Washington' to a .txt file",
+                    "artifacts": []
+                }
+        """
+        try:
+            challenge_info = CHALLENGES[task_eval_request.eval_id]
+            async with ApiClient(configuration) as api_client:
+                api_instance = AgentApi(api_client)
+                task_input = challenge_info.task
+
+                task_request_body = TaskRequestBody(
+                    input=task_input, additional_input=None
+                )
+                task_response = await api_instance.create_agent_task(
+                    task_request_body=task_request_body
+                )
+                task_info = BenchmarkTaskInfo(
+                    task_id=task_response.task_id,
+                    start_time=datetime.datetime.now(datetime.timezone.utc),
+                    challenge_info=challenge_info,
+                )
+                task_informations[task_info.task_id] = task_info
+
+                if input_artifacts_dir := challenge_info.task_artifacts_dir:
+                    await upload_artifacts(
+                        api_instance,
+                        input_artifacts_dir,
+                        task_response.task_id,
+                        "artifacts_in",
+                    )
+                return task_response
+        except ApiException as e:
+            logger.error(f"Error whilst trying to create a task:\n{e}")
+            logger.error(
+                "The above error was caused while processing request: "
+                f"{task_eval_request}"
+            )
+            raise HTTPException(500)
+
+    @router.post("/agent/tasks/{task_id}/steps")
+    async def proxy(request: Request, task_id: str):
+        timeout = httpx.Timeout(300.0, read=300.0)  # 5 minutes
+        async with httpx.AsyncClient(timeout=timeout) as client:
+            # Construct the new URL
+            new_url = f"{configuration.host}/ap/v1/agent/tasks/{task_id}/steps"
+
+            # Forward the request
+            response = await client.post(
+                new_url,
+                content=await request.body(),
+                headers=dict(request.headers),
+            )
+
+            # Return the response from the forwarded request
+            return Response(content=response.content, status_code=response.status_code)
+
+    @router.post("/agent/tasks/{task_id}/evaluations")
+    async def create_evaluation(task_id: str) -> BenchmarkRun:
+        task_info = task_informations[task_id]
+        challenge = get_challenge_from_source_uri(task_info.challenge_info.source_uri)
+        try:
+            async with ApiClient(configuration) as api_client:
+                api_instance = AgentApi(api_client)
+                eval_results = await challenge.evaluate_task_state(
+                    api_instance, task_id
+                )
+
+            eval_info = BenchmarkRun(
+                repository_info=RepositoryInfo(),
+                run_details=RunDetails(
+                    command=f"agbenchmark --test={challenge.info.name}",
+                    benchmark_start_time=(
+                        task_info.start_time.strftime("%Y-%m-%dT%H:%M:%S+00:00")
+                    ),
+                    test_name=challenge.info.name,
+                ),
+                task_info=TaskInfo(
+                    data_path=challenge.info.source_uri,
+                    is_regression=None,
+                    category=[c.value for c in challenge.info.category],
+                    task=challenge.info.task,
+                    answer=challenge.info.reference_answer or "",
+                    description=challenge.info.description or "",
+                ),
+                metrics=Metrics(
+                    success=all(e.passed for e in eval_results),
+                    success_percentage=(
+                        100 * sum(e.score for e in eval_results) / len(eval_results)
+                        if eval_results  # avoid division by 0
+                        else 0
+                    ),
+                    attempted=True,
+                ),
+                config={},
+            )
+
+            logger.debug(
+                f"Returning evaluation data:\n{eval_info.model_dump_json(indent=4)}"
+            )
+            return eval_info
+        except ApiException as e:
+            logger.error(f"Error {e} whilst trying to evaluate task: {task_id}")
+            raise HTTPException(500)
+
+    app.include_router(router, prefix="/ap/v1")
+
+    return app