fix typo

* update pr template wording

* add what and how

* Update .github/PULL_REQUEST_TEMPLATE.md

---------

Co-authored-by: Toran Bruce Richards <toran.richards@gmail.com>

.dockerignore

@@ -34,5 +34,7 @@ rnd/autogpt_builder/.next/
 rnd/autogpt_builder/node_modules
 rnd/autogpt_builder/.env.example
 rnd/autogpt_builder/.env.local
+rnd/autogpt_server/.env
+rnd/autogpt_server/.venv/
 
-
+rnd/market/.env

.gitattributes

@@ -6,3 +6,5 @@ docs/_javascript/** linguist-vendored
 
 # Exclude VCR cassettes from stats
 forge/tests/vcr_cassettes/**/**.y*ml linguist-generated
+
+* text=auto

.github/PULL_REQUEST_TEMPLATE.md

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

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

@@ -17,6 +17,7 @@ defaults:
     working-directory: rnd/autogpt_builder
 
 jobs:
+
   lint:
     runs-on: ubuntu-latest
 
@@ -31,6 +32,10 @@ jobs:
       run: |
         npm install
 
+    - name: Check formatting with Prettier
+      run: |
+        npx prettier --check .
+
     - name: Run lint
       run: |
         npm run lint

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

@@ -31,16 +31,14 @@ jobs:
       matrix:
         python-version: ["3.10"]
         platform-os: [ubuntu, macos, macos-arm64, windows]
-        db-platform: [postgres, sqlite]
     runs-on: ${{ matrix.platform-os != 'macos-arm64' && format('{0}-latest', matrix.platform-os) || 'macos-14' }}
 
     steps:
       - name: Setup PostgreSQL
-        if: matrix.db-platform == 'postgres'
         uses: ikalnytskyi/action-setup-postgres@v6
         with:
-          username: ${{ secrets.DB_USER }}
-          password: ${{ secrets.DB_PASS }}
+          username: ${{ secrets.DB_USER || 'postgres' }}
+          password: ${{ secrets.DB_PASS || 'postgres' }}
           database: postgres
           port: 5432
         id: postgres
@@ -116,42 +114,39 @@ jobs:
       - name: Install Python dependencies
         run: poetry install
 
-      - name: Generate Prisma Client (Postgres)
-        if: matrix.db-platform == 'postgres'
-        run: poetry run prisma generate --schema postgres/schema.prisma
+      - name: Generate Prisma Client
+        run: poetry run prisma generate
 
-      - name: Run Database Migrations (Postgres)
-        if: matrix.db-platform == 'postgres'
-        run: poetry run prisma migrate dev --schema postgres/schema.prisma --name updates
+      - name: Run Database Migrations
+        run: poetry run prisma migrate dev --name updates
         env:
           CONNECTION_STR: ${{ steps.postgres.outputs.connection-uri }}
 
-      - name: Generate Prisma Client (SQLite)
-        if: matrix.db-platform == 'sqlite'
-        run: poetry run prisma generate
-
-      - name: Run Database Migrations (SQLite)
-        if: matrix.db-platform == 'sqlite'
-        run: poetry run prisma migrate dev --name updates
-
-      - name: Run Linter
+      - id: lint
+        name: Run Linter
         run: poetry run lint
 
       - name: Run pytest with coverage
         run: |
-          poetry run pytest -vv \
-            test
+          if [[ "${{ runner.debug }}" == "1" ]]; then
+            poetry run pytest -vv -o log_cli=true -o log_cli_level=DEBUG test
+          else
+            poetry run pytest -vv test
+          fi
+        if: success() || (failure() && steps.lint.outcome == 'failure')
+        env:
+          LOG_LEVEL: ${{ runner.debug && 'DEBUG' || 'INFO' }}
     env:
       CI: true
       PLAIN_OUTPUT: True
       OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
-      DB_USER: ${{ secrets.DB_USER }}
-      DB_PASS: ${{ secrets.DB_PASS }}
+      DB_USER: ${{ secrets.DB_USER || 'postgres' }}
+      DB_PASS: ${{ secrets.DB_PASS || 'postgres' }}
       DB_NAME: postgres
       DB_PORT: 5432
       RUN_ENV: local
       PORT: 8080
-      DATABASE_URL: postgresql://${{ secrets.DB_USER }}:${{ secrets.DB_PASS }}@localhost:5432/${{ secrets.DB_NAME }}
+      DATABASE_URL: postgresql://${{ secrets.DB_USER || 'postgres' }}:${{ secrets.DB_PASS || 'postgres' }}@localhost:5432/${{ secrets.DB_NAME || 'postgres'}}
 
       # - name: Upload coverage reports to Codecov
       #   uses: codecov/codecov-action@v4

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

@@ -0,0 +1,41 @@
+name: AutoGPT Server Docker Build & Push
+
+on:
+  push:
+    branches: [ updated-docker-ci ]
+    paths:
+      - '**'
+
+defaults:
+  run:
+    shell: bash
+    working-directory: AutoGPT
+
+env:
+  PROJECT_ID: agpt-dev
+  IMAGE_NAME: agpt-server-dev
+  REGION: us-central1
+
+jobs:
+  build-and-push:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+
+      - name: Set up Cloud SDK
+        uses: google-github-actions/setup-gcloud@v0.2.1
+        with:
+          project_id: ${{ env.PROJECT_ID }}
+          service_account_key: ${{ secrets.GCP_SA_KEY }}
+          export_default_credentials: true
+
+      - name: Configure Docker
+        run: gcloud auth configure-docker ${{ env.REGION }}-docker.pkg.dev
+
+      - name: Build Docker image
+        run: docker build -t ${{ env.REGION }}-docker.pkg.dev/${{ env.PROJECT_ID }}/${{ env.IMAGE_NAME }}:${{ github.sha }} -f rnd/autogpt_server/Dockerfile .
+
+      - name: Push Docker image
+        run: docker push ${{ env.REGION }}-docker.pkg.dev/${{ env.PROJECT_ID }}/${{ env.IMAGE_NAME }}:${{ github.sha }}

.github/workflows/scripts/check_actions_status.py

@@ -1,55 +0,0 @@
-import os
-import requests
-import sys
-
-# GitHub API endpoint
-api_url = os.environ["GITHUB_API_URL"]
-repo = os.environ["GITHUB_REPOSITORY"]
-sha = os.environ["GITHUB_SHA"]
-
-# GitHub token for authentication
-github_token = os.environ["GITHUB_TOKEN"]
-
-# API endpoint for check runs for the specific SHA
-endpoint = f"{api_url}/repos/{repo}/commits/{sha}/check-runs"
-
-# Set up headers for authentication
-headers = {
-    "Authorization": f"token {github_token}",
-    "Accept": "application/vnd.github.v3+json"
-}
-
-# Make the API request
-response = requests.get(endpoint, headers=headers)
-
-if response.status_code != 200:
-    print(f"Error: Unable to fetch check runs data. Status code: {response.status_code}")
-    sys.exit(1)
-
-check_runs = response.json()["check_runs"]
-
-# Flag to track if all other check runs have passed
-all_others_passed = True
-
-# Current run id
-current_run_id = os.environ["GITHUB_RUN_ID"]
-
-for run in check_runs:
-    if str(run["id"]) != current_run_id:
-        status = run["status"]
-        conclusion = run["conclusion"]
-        
-        if status == "completed":
-            if conclusion not in ["success", "skipped", "neutral"]:
-                all_others_passed = False
-                print(f"Check run {run['name']} (ID: {run['id']}) has conclusion: {conclusion}")
-        else:
-            print(f"Check run {run['name']} (ID: {run['id']}) is still {status}.")
-            all_others_passed = False
-
-if all_others_passed:
-    print("All other completed check runs have passed. This check passes.")
-    sys.exit(0)
-else:
-    print("Some check runs have failed or have not completed. This check fails.")
-    sys.exit(1)

.github/workflows/workflow-checker.yml

@@ -1,51 +1,31 @@
 name: PR Status Checker
 on:
-  workflow_run:
-    workflows: ["*"]
-    types:
-      - completed
+  pull_request:
+    types: [opened, synchronize, reopened]
 
 jobs:
   status-check:
-    name: Check Actions Status
+    name: Check PR Status
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v4
-    - name: Set up Python
-      uses: actions/setup-python@v5
-      with:
-        python-version: "3.10"
-    - name: Install dependencies
-      run: |
-        python -m pip install --upgrade pip
-        pip install requests
-    - name: Debug Information
-      run: |
-        echo "Event name: ${{ github.event_name }}"
-        echo "Workflow: ${{ github.workflow }}"
-        echo "Action: ${{ github.action }}"
-        echo "Actor: ${{ github.actor }}"
-        echo "Repository: ${{ github.repository }}"
-        echo "Ref: ${{ github.ref }}"
-        echo "Head ref: ${{ github.head_ref }}"
-        echo "Base ref: ${{ github.base_ref }}"
-        echo "Event payload:"
-        cat $GITHUB_EVENT_PATH
-    - name: Debug File Structure
-      run: |
-        echo "Current directory:"
-        pwd
-        echo "Directory contents:"
-        ls -R
-        echo "GitHub workspace:"
-        echo $GITHUB_WORKSPACE
-        echo "GitHub workspace contents:"
-        ls -R $GITHUB_WORKSPACE
-    - name: Check Actions Status
-      run: |
-        echo "Current directory before running Python script:"
-        pwd
-        echo "Attempting to run Python script:"
-        python .github/scripts/check_actions_status.py
-      env:
-        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      # - name: Wait some time for all actions to start
+      #   run: sleep 30
+      - uses: actions/checkout@v4
+        # with:
+          # fetch-depth: 0
+      - name: Set up Python
+        uses: actions/setup-python@v5
+        with:
+          python-version: "3.10"
+      - name: Install dependencies
+        run: |
+          python -m pip install --upgrade pip
+          pip install requests
+      - name: Check PR Status
+        run: |
+          echo "Current directory before running Python script:"
+          pwd
+          echo "Attempting to run Python script:"
+          python check_actions_status.py
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.gitmodules

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

.vscode/all-projects.code-workspace

@@ -28,13 +28,25 @@
       "name": "autogpt_builder",
       "path": "../rnd/autogpt_builder"
     },
+    {
+      "name": "market",
+      "path": "../rnd/market"
+    },
+    {
+      "name": "lib",
+      "path": "../rnd/autogpt_libs"
+    },
+    {
+      "name": "infra",
+      "path": "../rnd/infra"
+    },
     {
       "name": "[root]",
       "path": ".."
     }
   ],
   "settings": {
-    "python.analysis.typeCheckingMode": "basic",
+    "python.analysis.typeCheckingMode": "basic"
   },
   "extensions": {
     "recommendations": [

check_actions_status.py

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

docs/content/AutoGPT/setup/index.md

@@ -185,7 +185,7 @@ If you don't know which to choose, you can safely go with OpenAI*.
 1. Get your Groq API key from [Settings > API keys][groq/api-keys]
 2. Open `.env`
 3. Find the line that says `GROQ_API_KEY=`
-4. Insert your Anthropic API Key directly after = without quotes or spaces:
+4. Insert your Groq API Key directly after = without quotes or spaces:
     ```ini
     GROQ_API_KEY=gsk_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
     ```

docs/content/forge/components/built-in-components.md

@@ -69,6 +69,8 @@ Lets the agent execute non-interactive Shell commands and Python code. Python ex
 | `shell_denylist`         | List of prohibited shell commands                    | `List[str]`                 | `[]`              |
 | `docker_container_name`  | Name of the Docker container used for code execution | `str`                       | `"agent_sandbox"` |
 
+All shell command configurations are expected to be for convience only. This component is not secure and should not be used in production environments. It is recommended to use more appropriate sandboxing.
+
 ### CommandProvider
 
 - `execute_shell` execute shell command

docs/content/server/d_id.md

@@ -0,0 +1,17 @@
+# Find available voices for D-ID
+
+1. **ElevenLabs**
+   - Select any voice from the voice list: https://api.elevenlabs.io/v1/voices
+   - Copy the voice_id
+   - Use it as a string in the voice_id field in the CreateTalkingAvatarClip Block
+
+2. **Microsoft Azure Voices**
+    - Select any voice from the voice gallery: https://speech.microsoft.com/portal/voicegallery
+    - Click on the "Sample code" tab on the right
+    - Copy the voice name, for example: config.SpeechSynthesisVoiceName ="en-GB-AbbiNeural"
+    - Use this string en-GB-AbbiNeural in the voice_id field in the CreateTalkingAvatarClip Block
+
+3. **Amazon Polly Voices**
+    - Select any voice from the voice list: https://docs.aws.amazon.com/polly/latest/dg/available-voices.html
+    - Copy the voice name / ID
+    - Use it as string in the voice_id field in the CreateTalkingAvatarClip Block

docs/content/server/new_blocks.md

@@ -215,4 +215,10 @@ If you would like to implement one of these blocks, open a pull request and we w
 - Read / Get most read books in a given month, year, etc from GoodReads or Amazon Books, etc
 - Get dates for specific shows across all streaming services
   - Suggest/Recommend/Get most watched shows in a given month, year, etc across all streaming platforms
+- Data analysis from xlsx data set
+   - Gather via Excel or Google Sheets data > Sample the data randomly (sample block takes top X, bottom X, randomly, etc) > pass that to LLM Block to generate a script for analysis of the full data > Python block to run the script> making a loop back through LLM Fix Block on error > create chart/visualization (potentially in the code block?) > show the image as output (this may require frontend changes to show)
+- Tiktok video search and download
 
+### Marketing 
+
+- Portfolio site design and enhancements

docs/content/server/setup.md

@@ -56,6 +56,16 @@ Poetry is a package manager for Python. You can install it by running the follow
 ```bash
 pip install poetry
 ```
+- Installing Docker and Docker Compose
+
+Docker containerizes applications, while Docker Compose orchestrates multi-container Docker applications.
+
+You can follow the steps here:
+
+If you need assistance installing docker:
+https://docs.docker.com/desktop/
+If you need assistance installing docker compose: 
+https://docs.docker.com/compose/install/
 
 ### Installing the dependencies
 
@@ -63,6 +73,7 @@ Once you have installed Yarn and Poetry, you can run the following command to in
 
 ```bash
 cd rnd/autogpt_server
+cp .env.example .env
 poetry install
 ```
 
@@ -77,21 +88,31 @@ Once you have installed the dependencies, you can proceed to the next step.
 
 ### Setting up the database
 
-In order to setup the database, you need to run the following command, in the same terminal you ran the `poetry install` command:
+In order to setup the database, you need to run the following commands, in the same terminal you ran the `poetry install` command:
+
+   ```sh
+   docker compose up postgres redis -d
+   poetry run prisma migrate dev
+   ```
+After deploying the migration, to ensure that the database schema is correctly mapped to your codebase, allowing the application to interact with the database properly, you need to generate the Prisma database model:
 
 ```bash
-poetry run prisma migrate deploy
+poetry run prisma generate
 ```
 
-### Running the server
+Without running this command, the necessary Python modules (prisma.models) won't be available, leading to a `ModuleNotFoundError`.
 
-To run the server, you can run the following command in the same terminal you ran the `poetry install` command:
+### Running the server 
+
+To run the server, you can run the following commands in the same terminal you ran the `poetry install` command:
 
 ```bash
-poetry run app
+cp supabase/docker/.env.example .env
+docker compose -f docker-compose.combined.yml build
+docker compose -f docker-compose.combined.yml up -d
 ```
 
-In the other terminal, you can run the following command to start the frontend:
+In the other terminal from autogpt_builder, you can run the following command to start the frontend:
 
 ```bash
 yarn dev
@@ -100,3 +121,10 @@ yarn dev
 ### Checking if the server is running
 
 You can check if the server is running by visiting [http://localhost:3000](http://localhost:3000) in your browser.
+
+### Notes: 
+By default the daemons for different services run on the following ports: 
+
+Execution Manager Daemon: 8002
+Execution Scheduler Daemon: 8003
+Rest Server Daemon: 8004

docs/mkdocs.yml

@@ -10,6 +10,7 @@ nav:
     - Setup: server/setup.md
     - Advanced Setup: server/advanced_setup.md
     - Using Ollama: server/ollama.md
+    - Using D-ID: serveer/d_id.md
 
   - AutoGPT Agent:
       - Introduction: AutoGPT/index.md

rnd/README.md

@@ -1,36 +1,133 @@
-This is a guide to setting up and running the AutoGPT Server and Builder. This tutorial will cover downloading the necessary files, setting up the server, and testing the system.
+# AutoGPT Platform
 
-https://github.com/user-attachments/assets/fd0d0f35-3155-4263-b575-ba3efb126cb4
+Welcome to the AutoGPT Platform - a powerful system for creating and running AI agents to solve business problems. This platform enables you to harness the power of artificial intelligence to automate tasks, analyze data, and generate insights for your organization.
 
-1. Navigate to the AutoGPT GitHub repository.
-2. Click the "Code" button, then select "Download ZIP".
-3. Once downloaded, extract the ZIP file to a folder of your choice.
+## Getting Started
 
-4. Open the extracted folder and navigate to the "rnd" directory.
-5. Enter the "AutoGPT server" folder.
-6. Open a terminal window in this directory.
-7. Locate and open the README file in the AutoGPT server folder: [doc](./autogpt_server/README.md#setup).
-8. Copy and paste each command from the setup section in the README into your terminal.
-   - Important: Wait for each command to finish before running the next one.
-9. If all commands run without errors, enter the final command: `poetry run app`
-10. You should now see the server running in your terminal.
+### Prerequisites
+
+- Docker
+- Docker Compose V2 (comes with Docker Desktop, or can be installed separately)
+
+### Running the System
+
+To run the AutoGPT Platform, follow these steps:
+
+1. Clone this repository to your local machine.
+2. Navigate to rnd/supabase
+3. Run the following command:
+   ```
+      git submodule update --init --recursive
+   ```
+4. Navigate back to rnd (cd ..)
+5. Run the following command:
+   ```
+      cp supabase/docker/.env.example .env
+   ```
+6. Run the following command:
+
+   ```
+   docker compose -f docker-compose.combined.yml up -d
+
+   ```
+
+   This command will start all the necessary backend services defined in the `docker-compose.combined.yml` file in detached mode.
+7. Navigate to rnd/autogpt_builder.
+8. Run the following command: 
+   ```
+      cp .env.example .env.local
+   ```
+9. Run the following command: 
+   ```
+      yarn dev
+   ```
+
+### Docker Compose Commands
+
+Here are some useful Docker Compose commands for managing your AutoGPT Platform:
+
+- `docker compose -f docker-compose.combined.yml up -d`: Start the services in detached mode.
+- `docker compose -f docker-compose.combined.yml stop`: Stop the running services without removing them.
+- `docker compose rm`: Remove stopped service containers.
+- `docker compose build`: Build or rebuild services.
+- `docker compose down`: Stop and remove containers, networks, and volumes.
+- `docker compose watch`: Watch for changes in your services and automatically update them.
+
+
+### Sample Scenarios
+
+Here are some common scenarios where you might use multiple Docker Compose commands:
+
+1. Updating and restarting a specific service:
+   ```
+   docker compose build api_srv
+   docker compose up -d --no-deps api_srv
+   ```
+   This rebuilds the `api_srv` service and restarts it without affecting other services.
+
+2. Viewing logs for troubleshooting:
+   ```
+   docker compose logs -f api_srv ws_srv
+   ```
+   This shows and follows the logs for both `api_srv` and `ws_srv` services.
+
+3. Scaling a service for increased load:
+   ```
+   docker compose up -d --scale executor=3
+   ```
+   This scales the `executor` service to 3 instances to handle increased load.
+
+4. Stopping the entire system for maintenance:
+   ```
+   docker compose stop
+   docker compose rm -f
+   docker compose pull
+   docker compose up -d
+   ```
+   This stops all services, removes containers, pulls the latest images, and restarts the system.
+
+5. Developing with live updates:
+   ```
+   docker compose watch
+   ```
+   This watches for changes in your code and automatically updates the relevant services.
+
+6. Checking the status of services:
+   ```
+   docker compose ps
+   ```
+   This shows the current status of all services defined in your docker-compose.yml file.
+
+These scenarios demonstrate how to use Docker Compose commands in combination to manage your AutoGPT Platform effectively.
+
+
+### Persisting Data
+
+To persist data for PostgreSQL and Redis, you can modify the `docker-compose.yml` file to add volumes. Here's how:
+
+1. Open the `docker-compose.yml` file in a text editor.
+2. Add volume configurations for PostgreSQL and Redis services:
+
+   ```yaml
+   services:
+     postgres:
+       # ... other configurations ...
+       volumes:
+         - postgres_data:/var/lib/postgresql/data
+
+     redis:
+       # ... other configurations ...
+       volumes:
+         - redis_data:/data
+
+   volumes:
+     postgres_data:
+     redis_data:
+   ```
+
+3. Save the file and run `docker compose up -d` to apply the changes.
+
+This configuration will create named volumes for PostgreSQL and Redis, ensuring that your data persists across container restarts.
 
-11. Navigate back to the "rnd" folder.
-12. Open the "AutoGPT builder" folder.
-13. Open the README file in this folder: [doc](./autogpt_builder/README.md#getting-started).
-14. In your terminal, run the following commands:
-    ```
-    npm install
-    ```
-    ```
-    npm run dev
-    ```
 
-15. Once the front-end is running, click the link to navigate to `localhost:3000`.
-16. Click on the "Build" option.
-17. Add a few blocks to test the functionality.
-18. Connect the blocks together.
-19. Click "Run".
-20. Check your terminal window - you should see that the server has received the request, is processing it, and has executed it.
 
-And there you have it! You've successfully set up and tested AutoGPT.

rnd/autogpt_builder/.env.example

@@ -1,12 +1,15 @@
-AGPT_SERVER_URL=http://localhost:8000/api
+NEXT_PUBLIC_AUTH_CALLBACK_URL=http://localhost:8006/auth/callback
+NEXT_PUBLIC_AGPT_SERVER_URL=http://localhost:8006/api
+NEXT_PUBLIC_AGPT_WS_SERVER_URL=ws://localhost:8001/ws
+NEXT_PUBLIC_AGPT_MARKETPLACE_URL=http://localhost:8015/api/v1/market
 
 ## Supabase credentials
-## YOU ONLY NEED THEM IF YOU WANT TO USE SUPABASE USER AUTHENTICATION
-## If you're using self-hosted version then you most likely don't need to set this
-# NEXT_PUBLIC_SUPABASE_URL=your-project-url
-# NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
+
+NEXT_PUBLIC_SUPABASE_URL=http://localhost:8000
+NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyAgCiAgICAicm9sZSI6ICJhbm9uIiwKICAgICJpc3MiOiAic3VwYWJhc2UtZGVtbyIsCiAgICAiaWF0IjogMTY0MTc2OTIwMCwKICAgICJleHAiOiAxNzk5NTM1NjAwCn0.dc_X5iR_VP_qT0zsiyj_I_OZ2T9FtRU2BBNWN8Bu4GE
 
 ## OAuth Callback URL
 ## This should be {domain}/auth/callback
 ## Only used if you're using Supabase and OAuth
 AUTH_CALLBACK_URL=http://localhost:3000/auth/callback
+GA_MEASUREMENT_ID=G-FH2XK2W4GN

rnd/autogpt_builder/.gitignore

@@ -34,3 +34,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# Sentry Config File
+.env.sentry-build-plugin

rnd/autogpt_builder/.prettierignore

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

rnd/autogpt_builder/.prettierrc

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

rnd/autogpt_builder/.vscode/launch.json

@@ -1,7 +1,6 @@
 {
   "version": "0.2.0",
   "configurations": [
-
     {
       "name": "Next.js: debug server-side",
       "type": "node-terminal",
@@ -24,7 +23,6 @@
         "uriFormat": "%s",
         "action": "debugWithEdge"
       }
-    },
-
+    }
   ]
 }

rnd/autogpt_builder/Dockerfile

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

rnd/autogpt_builder/README.md

@@ -36,6 +36,6 @@ If the project is updated via git, you will need to `npm install` after each upd
 
 This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
 
-## Deploy 
+## Deploy
 
 TODO

rnd/autogpt_builder/components.json

@@ -14,4 +14,4 @@
     "components": "@/components",
     "utils": "@/lib/utils"
   }
-}
+}

rnd/autogpt_builder/next.config.mjs

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

rnd/autogpt_builder/package.json

@@ -6,11 +6,14 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "format": "prettier --write ."
   },
   "dependencies": {
     "@hookform/resolvers": "^3.9.0",
+    "@next/third-parties": "^14.2.5",
     "@radix-ui/react-avatar": "^1.1.0",
+    "@radix-ui/react-checkbox": "^1.1.1",
     "@radix-ui/react-collapsible": "^1.1.0",
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
@@ -18,15 +21,21 @@
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-popover": "^1.1.1",
     "@radix-ui/react-scroll-area": "^1.1.0",
+    "@radix-ui/react-select": "^2.1.1",
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-switch": "^1.1.0",
+    "@radix-ui/react-toast": "^1.2.1",
     "@radix-ui/react-tooltip": "^1.1.2",
+    "@sentry/nextjs": "^8",
     "@supabase/ssr": "^0.4.0",
     "@supabase/supabase-js": "^2.45.0",
+    "@tanstack/react-table": "^8.20.5",
+    "@xyflow/react": "^12.1.0",
     "ajv": "^8.17.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "cmdk": "1.0.0",
     "date-fns": "^3.6.0",
     "dotenv": "^16.4.5",
     "lucide-react": "^0.407.0",
@@ -40,10 +49,11 @@
     "react-icons": "^5.2.1",
     "react-markdown": "^9.0.1",
     "react-modal": "^3.16.1",
-    "reactflow": "^11.11.4",
+    "react-shepherd": "^6.1.1",
     "recharts": "^2.12.7",
     "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7",
+    "uuid": "^10.0.0",
     "zod": "^3.23.8"
   },
   "devDependencies": {
@@ -54,6 +64,8 @@
     "eslint": "^8",
     "eslint-config-next": "14.2.4",
     "postcss": "^8",
+    "prettier": "^3.3.3",
+    "prettier-plugin-tailwindcss": "^0.6.6",
     "tailwindcss": "^3.4.1",
     "typescript": "^5"
   }

rnd/autogpt_builder/sentry.client.config.ts

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

rnd/autogpt_builder/sentry.edge.config.ts

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

rnd/autogpt_builder/sentry.server.config.ts

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState } from 'react';
+import { useEffect, useState } from "react";
 
 export default function AuthErrorPage() {
   const [errorType, setErrorType] = useState<string | null>(null);
@@ -9,13 +9,15 @@ export default function AuthErrorPage() {
 
   useEffect(() => {
     // This code only runs on the client side
-    if (typeof window !== 'undefined') {
+    if (typeof window !== "undefined") {
       const hash = window.location.hash.substring(1); // Remove the leading '#'
       const params = new URLSearchParams(hash);
-      
-      setErrorType(params.get('error'));
-      setErrorCode(params.get('error_code'));
-      setErrorDescription(params.get('error_description')?.replace(/\+/g, ' ') ?? null); // Replace '+' with space
+
+      setErrorType(params.get("error"));
+      setErrorCode(params.get("error_code"));
+      setErrorDescription(
+        params.get("error_description")?.replace(/\+/g, " ") ?? null,
+      ); // Replace '+' with space
     }
   }, []);
 

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

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

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

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

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

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

rnd/autogpt_builder/src/app/error.tsx

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

rnd/autogpt_builder/src/app/error/page.tsx

@@ -1,3 +0,0 @@
-export default function ErrorPage() {
-  return <p>Sorry, something went wrong</p>
-}

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

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

rnd/autogpt_builder/src/app/globals.css

@@ -8,8 +8,6 @@
   }
 }
 
-
-
 @layer base {
   :root {
     --background: 0 0% 100%;
@@ -67,7 +65,6 @@
   }
 }
 
-
 @layer base {
   * {
     @apply border-border;

rnd/autogpt_builder/src/app/layout.tsx

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

rnd/autogpt_builder/src/app/loading.tsx

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,408 @@
+"use client";
+
+import React, { useState, useEffect, useMemo } from "react";
+import { useRouter } from "next/navigation";
+import { useForm, Controller } from "react-hook-form";
+import MarketplaceAPI from "@/lib/marketplace-api";
+import AutoGPTServerAPI from "@/lib/autogpt-server-api";
+import { Card } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  MultiSelector,
+  MultiSelectorContent,
+  MultiSelectorInput,
+  MultiSelectorItem,
+  MultiSelectorList,
+  MultiSelectorTrigger,
+} from "@/components/ui/multiselect";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+type FormData = {
+  name: string;
+  description: string;
+  author: string;
+  keywords: string[];
+  categories: string[];
+  agreeToTerms: boolean;
+  selectedAgentId: string;
+};
+
+const SubmitPage: React.FC = () => {
+  const router = useRouter();
+  const {
+    control,
+    handleSubmit,
+    watch,
+    setValue,
+    formState: { errors },
+  } = useForm<FormData>({
+    defaultValues: {
+      selectedAgentId: "", // Initialize with an empty string
+      name: "",
+      description: "",
+      author: "",
+      keywords: [],
+      categories: [],
+      agreeToTerms: false,
+    },
+  });
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [submitError, setSubmitError] = useState<string | null>(null);
+  const [userAgents, setUserAgents] = useState<
+    Array<{ id: string; name: string; version: number }>
+  >([]);
+  const [selectedAgentGraph, setSelectedAgentGraph] = useState<any>(null);
+
+  const selectedAgentId = watch("selectedAgentId");
+
+  useEffect(() => {
+    const fetchUserAgents = async () => {
+      const api = new AutoGPTServerAPI();
+      const agents = await api.listGraphs();
+      console.log(agents);
+      setUserAgents(
+        agents.map((agent) => ({
+          id: agent.id,
+          name: agent.name || `Agent (${agent.id})`,
+          version: agent.version,
+        })),
+      );
+    };
+
+    fetchUserAgents();
+  }, []);
+
+  useEffect(() => {
+    const fetchAgentGraph = async () => {
+      if (selectedAgentId) {
+        const api = new AutoGPTServerAPI();
+        const graph = await api.getGraph(selectedAgentId);
+        setSelectedAgentGraph(graph);
+        setValue("name", graph.name);
+        setValue("description", graph.description);
+      }
+    };
+
+    fetchAgentGraph();
+  }, [selectedAgentId, setValue]);
+
+  const onSubmit = async (data: FormData) => {
+    setIsSubmitting(true);
+    setSubmitError(null);
+
+    if (!data.agreeToTerms) {
+      throw new Error("You must agree to the terms of service");
+    }
+
+    try {
+      if (!selectedAgentGraph) {
+        throw new Error("Please select an agent");
+      }
+
+      const api = new MarketplaceAPI();
+      await api.submitAgent(
+        {
+          ...selectedAgentGraph,
+          name: data.name,
+          description: data.description,
+        },
+        data.author,
+        data.keywords,
+        data.categories,
+      );
+
+      router.push("/marketplace?submission=success");
+    } catch (error) {
+      console.error("Submission error:", error);
+      setSubmitError(
+        error instanceof Error ? error.message : "An unknown error occurred",
+      );
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <h1 className="mb-6 text-3xl font-bold">Submit Your Agent</h1>
+      <Card className="p-6">
+        <form onSubmit={handleSubmit(onSubmit)}>
+          <div className="space-y-4">
+            <Controller
+              name="selectedAgentId"
+              control={control}
+              rules={{ required: "Please select an agent" }}
+              render={({ field }) => (
+                <div>
+                  <label
+                    htmlFor={field.name}
+                    className="block text-sm font-medium text-gray-700"
+                  >
+                    Select Agent
+                  </label>
+                  <Select
+                    onValueChange={field.onChange}
+                    value={field.value || ""}
+                  >
+                    <SelectTrigger className="w-full">
+                      <SelectValue placeholder="Select an agent" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {userAgents.map((agent) => (
+                        <SelectItem key={agent.id} value={agent.id}>
+                          {agent.name} (v{agent.version})
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                  {errors.selectedAgentId && (
+                    <p className="mt-1 text-sm text-red-600">
+                      {errors.selectedAgentId.message}
+                    </p>
+                  )}
+                </div>
+              )}
+            />
+
+            {/* {selectedAgentGraph && (
+              <div className="mt-4" style={{ height: "600px" }}>
+                <ReactFlow
+                  nodes={nodes}
+                  edges={edges}
+                  fitView
+                  attributionPosition="bottom-left"
+                  nodesConnectable={false}
+                  nodesDraggable={false}
+                  zoomOnScroll={false}
+                  panOnScroll={false}
+                  elementsSelectable={false}
+                >
+                  <Controls showInteractive={false} />
+                  <Background />
+                </ReactFlow>
+              </div>
+            )} */}
+
+            <Controller
+              name="name"
+              control={control}
+              rules={{ required: "Name is required" }}
+              render={({ field }) => (
+                <div>
+                  <label
+                    htmlFor={field.name}
+                    className="block text-sm font-medium text-gray-700"
+                  >
+                    Agent Name
+                  </label>
+                  <Input
+                    id={field.name}
+                    placeholder="Enter your agent's name"
+                    {...field}
+                  />
+                  {errors.name && (
+                    <p className="mt-1 text-sm text-red-600">
+                      {errors.name.message}
+                    </p>
+                  )}
+                </div>
+              )}
+            />
+
+            <Controller
+              name="description"
+              control={control}
+              rules={{ required: "Description is required" }}
+              render={({ field }) => (
+                <div>
+                  <label
+                    htmlFor={field.name}
+                    className="block text-sm font-medium text-gray-700"
+                  >
+                    Description
+                  </label>
+                  <Textarea
+                    id={field.name}
+                    placeholder="Describe your agent"
+                    {...field}
+                  />
+                  {errors.description && (
+                    <p className="mt-1 text-sm text-red-600">
+                      {errors.description.message}
+                    </p>
+                  )}
+                </div>
+              )}
+            />
+
+            <Controller
+              name="author"
+              control={control}
+              rules={{ required: "Author is required" }}
+              render={({ field }) => (
+                <div>
+                  <label
+                    htmlFor={field.name}
+                    className="block text-sm font-medium text-gray-700"
+                  >
+                    Author
+                  </label>
+                  <Input
+                    id={field.name}
+                    placeholder="Your name or username"
+                    {...field}
+                  />
+                  {errors.author && (
+                    <p className="mt-1 text-sm text-red-600">
+                      {errors.author.message}
+                    </p>
+                  )}
+                </div>
+              )}
+            />
+
+            <Controller
+              name="keywords"
+              control={control}
+              rules={{ required: "At least one keyword is required" }}
+              render={({ field }) => (
+                <div>
+                  <label
+                    htmlFor={field.name}
+                    className="block text-sm font-medium text-gray-700"
+                  >
+                    Keywords
+                  </label>
+                  <MultiSelector
+                    values={field.value || []}
+                    onValuesChange={field.onChange}
+                  >
+                    <MultiSelectorTrigger>
+                      <MultiSelectorInput placeholder="Add keywords" />
+                    </MultiSelectorTrigger>
+                    <MultiSelectorContent>
+                      <MultiSelectorList>
+                        <MultiSelectorItem value="keyword1">
+                          Keyword 1
+                        </MultiSelectorItem>
+                        <MultiSelectorItem value="keyword2">
+                          Keyword 2
+                        </MultiSelectorItem>
+                        {/* Add more predefined keywords as needed */}
+                      </MultiSelectorList>
+                    </MultiSelectorContent>
+                  </MultiSelector>
+                  {errors.keywords && (
+                    <p className="mt-1 text-sm text-red-600">
+                      {errors.keywords.message}
+                    </p>
+                  )}
+                </div>
+              )}
+            />
+
+            <Controller
+              name="categories"
+              control={control}
+              rules={{ required: "At least one category is required" }}
+              render={({ field }) => (
+                <div>
+                  <label
+                    htmlFor={field.name}
+                    className="block text-sm font-medium text-gray-700"
+                  >
+                    Categories
+                  </label>
+                  <MultiSelector
+                    values={field.value || []}
+                    onValuesChange={field.onChange}
+                  >
+                    <MultiSelectorTrigger>
+                      <MultiSelectorInput placeholder="Select categories" />
+                    </MultiSelectorTrigger>
+                    <MultiSelectorContent>
+                      <MultiSelectorList>
+                        <MultiSelectorItem value="productivity">
+                          Productivity
+                        </MultiSelectorItem>
+                        <MultiSelectorItem value="entertainment">
+                          Entertainment
+                        </MultiSelectorItem>
+                        <MultiSelectorItem value="education">
+                          Education
+                        </MultiSelectorItem>
+                        <MultiSelectorItem value="business">
+                          Business
+                        </MultiSelectorItem>
+                        <MultiSelectorItem value="other">
+                          Other
+                        </MultiSelectorItem>
+                      </MultiSelectorList>
+                    </MultiSelectorContent>
+                  </MultiSelector>
+                  {errors.categories && (
+                    <p className="mt-1 text-sm text-red-600">
+                      {errors.categories.message}
+                    </p>
+                  )}
+                </div>
+              )}
+            />
+
+            <Controller
+              name="agreeToTerms"
+              control={control}
+              rules={{ required: "You must agree to the terms of service" }}
+              render={({ field }) => (
+                <div className="flex items-center space-x-2">
+                  <Checkbox
+                    id="agreeToTerms"
+                    checked={field.value}
+                    onCheckedChange={field.onChange}
+                  />
+                  <label
+                    htmlFor="agreeToTerms"
+                    className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                  >
+                    I agree to the{" "}
+                    <a href="/terms" className="text-blue-500 hover:underline">
+                      terms of service
+                    </a>
+                  </label>
+                </div>
+              )}
+            />
+            {errors.agreeToTerms && (
+              <p className="mt-1 text-sm text-red-600">
+                {errors.agreeToTerms.message}
+              </p>
+            )}
+
+            {submitError && (
+              <Alert variant="destructive">
+                <AlertTitle>Submission Failed</AlertTitle>
+                <AlertDescription>{submitError}</AlertDescription>
+              </Alert>
+            )}
+
+            <Button type="submit" className="w-full" disabled={isSubmitting}>
+              {isSubmitting ? "Submitting..." : "Submit Agent"}
+            </Button>
+          </div>
+        </form>
+      </Card>
+    </div>
+  );
+};
+
+export default SubmitPage;

rnd/autogpt_builder/src/app/monitor/page.tsx

@@ -1,712 +0,0 @@
-"use client";
-import React, { useEffect, useState } from 'react';
-import Link from 'next/link';
-import moment from 'moment';
-import {
-  ComposedChart,
-  DefaultLegendContentProps,
-  Legend,
-  Line,
-  ResponsiveContainer,
-  Scatter,
-  Tooltip,
-  XAxis,
-  YAxis,
-} from 'recharts';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-import AutoGPTServerAPI, {
-  Graph,
-  GraphMeta,
-  NodeExecutionResult,
-  safeCopyGraph,
-} from '@/lib/autogpt-server-api';
-import { ChevronDownIcon, ClockIcon, EnterIcon, ExitIcon, Pencil2Icon } from '@radix-ui/react-icons';
-import { cn, exportAsJSONFile, hashString } from '@/lib/utils';
-import { Badge } from "@/components/ui/badge";
-import { Button, buttonVariants } from "@/components/ui/button";
-import { Calendar } from "@/components/ui/calendar";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-import { Dialog, DialogContent, DialogHeader, DialogTrigger } from '@/components/ui/dialog';
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
-import { AgentImportForm } from '@/components/agent-import-form';
-
-const Monitor = () => {
-  const [flows, setFlows] = useState<GraphMeta[]>([]);
-  const [flowRuns, setFlowRuns] = useState<FlowRun[]>([]);
-  const [selectedFlow, setSelectedFlow] = useState<GraphMeta | null>(null);
-  const [selectedRun, setSelectedRun] = useState<FlowRun | null>(null);
-
-  const api = new AutoGPTServerAPI();
-
-  useEffect(() => fetchFlowsAndRuns(), []);
-  useEffect(() => {
-    const intervalId = setInterval(() => flows.map(f => refreshFlowRuns(f.id)), 5000);
-    return () => clearInterval(intervalId);
-  }, []);
-
-  function fetchFlowsAndRuns() {
-    api.listGraphs()
-    .then(flows => {
-      setFlows(flows);
-      flows.map(flow => refreshFlowRuns(flow.id));
-    });
-  }
-
-  function refreshFlowRuns(flowID: string) {
-    // Fetch flow run IDs
-    api.listGraphRunIDs(flowID)
-    .then(runIDs => runIDs.map(runID => {
-      let run;
-      if (
-        (run = flowRuns.find(fr => fr.id == runID))
-        && !["waiting", "running"].includes(run.status)
-      ) {
-        return
-      }
-
-      // Fetch flow run
-      api.getGraphExecutionInfo(flowID, runID)
-      .then(execInfo => setFlowRuns(flowRuns => {
-        if (execInfo.length == 0) return flowRuns;
-
-        const flowRunIndex = flowRuns.findIndex(fr => fr.id == runID);
-        const flowRun = flowRunFromNodeExecutionResults(execInfo);
-        if (flowRunIndex > -1) {
-          flowRuns.splice(flowRunIndex, 1, flowRun)
-        }
-        else {
-          flowRuns.push(flowRun)
-        }
-        return [...flowRuns]
-      }));
-    }));
-  }
-
-  const column1 = "md:col-span-2 xl:col-span-3 xxl:col-span-2";
-  const column2 = "md:col-span-3 lg:col-span-2 xl:col-span-3 space-y-4";
-  const column3 = "col-span-full xl:col-span-4 xxl:col-span-5";
-
-  return (
-    <div className="grid grid-cols-1 md:grid-cols-5 lg:grid-cols-4 xl:grid-cols-10 gap-4">
-      <AgentFlowList
-        className={column1}
-        flows={flows}
-        flowRuns={flowRuns}
-        selectedFlow={selectedFlow}
-        onSelectFlow={f => {
-          setSelectedRun(null);
-          setSelectedFlow(f.id == selectedFlow?.id ? null : f);
-        }}
-      />
-      <FlowRunsList
-        className={column2}
-        flows={flows}
-        runs={
-          (
-            selectedFlow
-              ? flowRuns.filter(v => v.graphID == selectedFlow.id)
-              : flowRuns
-          )
-          .toSorted((a, b) => Number(a.startTime) - Number(b.startTime))
-        }
-        selectedRun={selectedRun}
-        onSelectRun={r => setSelectedRun(r.id == selectedRun?.id ? null : r)}
-      />
-      {selectedRun && (
-        <FlowRunInfo
-          flow={selectedFlow || flows.find(f => f.id == selectedRun.graphID)!}
-          flowRun={selectedRun}
-          className={column3}
-        />
-      ) || selectedFlow && (
-        <FlowInfo
-          flow={selectedFlow}
-          flowRuns={flowRuns.filter(r => r.graphID == selectedFlow.id)}
-          className={column3}
-        />
-      ) || (
-        <Card className={`p-6 ${column3}`}>
-          <FlowRunsStats flows={flows} flowRuns={flowRuns} />
-        </Card>
-      )}
-    </div>
-  );
-};
-
-type FlowRun = {
-  id: string
-  graphID: string
-  graphVersion: number
-  status: 'running' | 'waiting' | 'success' | 'failed'
-  startTime: number // unix timestamp (ms)
-  endTime: number // unix timestamp (ms)
-  duration: number // seconds
-  totalRunTime: number // seconds
-
-  nodeExecutionResults: NodeExecutionResult[]
-};
-
-function flowRunFromNodeExecutionResults(
-  nodeExecutionResults: NodeExecutionResult[]
-): FlowRun {
-  // Determine overall status
-  let status: 'running' | 'waiting' | 'success' | 'failed' = 'success';
-  for (const execution of nodeExecutionResults) {
-    if (execution.status === 'FAILED') {
-      status = 'failed';
-      break;
-    } else if (['QUEUED', 'RUNNING'].includes(execution.status)) {
-      status = 'running';
-      break;
-    } else if (execution.status === 'INCOMPLETE') {
-      status = 'waiting';
-    }
-  }
-
-  // Determine aggregate startTime, endTime, and totalRunTime
-  const now = Date.now();
-  const startTime = Math.min(
-    ...nodeExecutionResults.map(ner => ner.add_time.getTime()), now
-  );
-  const endTime = (
-    ['success', 'failed'].includes(status)
-      ? Math.max(
-        ...nodeExecutionResults.map(ner => ner.end_time?.getTime() || 0), startTime
-      )
-      : now
-  );
-  const duration = (endTime - startTime) / 1000;  // Convert to seconds
-  const totalRunTime = nodeExecutionResults.reduce((cum, node) => (
-    cum + ((node.end_time?.getTime() ?? now) - (node.start_time?.getTime() ?? now))
-  ), 0) / 1000;
-
-  return {
-    id: nodeExecutionResults[0].graph_exec_id,
-    graphID: nodeExecutionResults[0].graph_id,
-    graphVersion: nodeExecutionResults[0].graph_version,
-    status,
-    startTime,
-    endTime,
-    duration,
-    totalRunTime,
-    nodeExecutionResults: nodeExecutionResults,
-  };
-}
-
-const AgentFlowList = (
-  { flows, flowRuns, selectedFlow, onSelectFlow, className }: {
-    flows: GraphMeta[],
-    flowRuns?: FlowRun[],
-    selectedFlow: GraphMeta | null,
-    onSelectFlow: (f: GraphMeta) => void,
-    className?: string,
-  }
-) => {
-  const [templates, setTemplates] = useState<GraphMeta[]>([]);
-  const api = new AutoGPTServerAPI();
-  useEffect(() => {
-    api.listTemplates().then(templates => setTemplates(templates))
-  }, []);
-
-  return <Card className={className}>
-    <CardHeader className="flex-row justify-between items-center space-x-3 space-y-0">
-      <CardTitle>Agents</CardTitle>
-
-      <div className="flex items-center">{/* Split "Create" button */}
-        <Button variant="outline" className="rounded-r-none" asChild>
-          <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"}>
-                <ChevronDownIcon />
-              </Button>
-            </DropdownMenuTrigger>
-
-            <DropdownMenuContent>
-              <DialogTrigger asChild>
-                <DropdownMenuItem>
-                  <EnterIcon className="mr-2" /> Import from file
-                </DropdownMenuItem>
-              </DialogTrigger>
-              {templates.length > 0 && <>{/* List of templates */}
-                <DropdownMenuSeparator />
-                <DropdownMenuLabel>Use a template</DropdownMenuLabel>
-                {templates.map(template => (
-                  <DropdownMenuItem
-                    key={template.id}
-                    onClick={() => {
-                      api.createGraph(template.id, template.version)
-                        .then(newGraph => {
-                          window.location.href = `/build?flowID=${newGraph.id}`;
-                        });
-                    }}
-                  >
-                    {template.name}
-                  </DropdownMenuItem>
-                ))}
-              </>}
-            </DropdownMenuContent>
-          </DropdownMenu>
-
-          <DialogContent>
-            <DialogHeader className="text-lg">
-              Import an Agent (template) from a file
-            </DialogHeader>
-            <AgentImportForm />
-          </DialogContent>
-        </Dialog>
-      </div>
-    </CardHeader>
-
-    <CardContent>
-      <Table>
-        <TableHeader>
-          <TableRow>
-            <TableHead>Name</TableHead>
-            {/* <TableHead>Status</TableHead> */}
-            {/* <TableHead>Last updated</TableHead> */}
-            {flowRuns && <TableHead className="md:hidden lg:table-cell"># of runs</TableHead>}
-            {flowRuns && <TableHead>Last run</TableHead>}
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          {flows
-            .map((flow) => {
-              let runCount = 0, lastRun: FlowRun | null = null;
-              if (flowRuns) {
-                const _flowRuns = flowRuns.filter(r => r.graphID == flow.id);
-                runCount = _flowRuns.length;
-                lastRun = runCount == 0 ? null : _flowRuns.reduce(
-                  (a, c) => a.startTime > c.startTime ? 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;
-              return b.lastRun.startTime - a.lastRun.startTime;
-            })
-            .map(({ flow, runCount, lastRun }) => (
-              <TableRow
-                key={flow.id}
-                className="cursor-pointer"
-                onClick={() => onSelectFlow(flow)}
-                data-state={selectedFlow?.id == flow.id ? "selected" : null}
-              >
-                <TableCell>{flow.name}</TableCell>
-                {/* <TableCell><FlowStatusBadge status={flow.status ?? "active"} /></TableCell> */}
-                {/* <TableCell>
-                  {flow.updatedAt ?? "???"}
-                </TableCell> */}
-                {flowRuns && <TableCell className="md:hidden lg:table-cell">{runCount}</TableCell>}
-                {flowRuns && (!lastRun ? <TableCell /> :
-                <TableCell title={moment(lastRun.startTime).toString()}>
-                  {moment(lastRun.startTime).fromNow()}
-                </TableCell>)}
-              </TableRow>
-            ))
-          }
-        </TableBody>
-      </Table>
-    </CardContent>
-  </Card>
-};
-
-const FlowStatusBadge = ({ status }: { status: "active" | "disabled" | "failing" }) => (
-  <Badge
-    variant="default"
-    className={
-      status === 'active' ? 'bg-green-500 dark:bg-green-600' :
-      status === 'failing' ? 'bg-red-500 dark:bg-red-700' :
-      'bg-gray-500 dark:bg-gray-600'
-    }
-  >
-    {status}
-  </Badge>
-);
-
-const FlowRunsList: React.FC<{
-  flows: GraphMeta[];
-  runs: FlowRun[];
-  className?: string;
-  selectedRun?: FlowRun | null;
-  onSelectRun: (r: FlowRun) => void;
-}> = ({ flows, runs, 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>
-          {runs.map((run) => (
-            <TableRow
-              key={run.id}
-              className="cursor-pointer"
-              onClick={() => onSelectRun(run)}
-              data-state={selectedRun?.id == run.id ? "selected" : null}
-            >
-              <TableCell>{flows.find(f => f.id == run.graphID)!.name}</TableCell>
-              <TableCell>{moment(run.startTime).format("HH:mm")}</TableCell>
-              <TableCell><FlowRunStatusBadge status={run.status} /></TableCell>
-              <TableCell>{formatDuration(run.duration)}</TableCell>
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
-    </CardContent>
-  </Card>
-);
-
-const FlowRunStatusBadge: React.FC<{
-  status: FlowRun['status'];
-  className?: string;
-}> = ({ status, className }) => (
-  <Badge
-    variant="default"
-    className={cn(
-      status === 'running' ? 'bg-blue-500 dark:bg-blue-700' :
-      status === 'waiting' ? 'bg-yellow-500 dark:bg-yellow-600' :
-      status === 'success' ? 'bg-green-500 dark:bg-green-600' :
-      'bg-red-500 dark:bg-red-700',
-      className,
-    )}
-  >
-    {status}
-  </Badge>
-);
-
-const FlowInfo: React.FC<React.HTMLAttributes<HTMLDivElement> & {
-  flow: GraphMeta;
-  flowRuns: FlowRun[];
-  flowVersion?: number | "all";
-}> = ({ flow, flowRuns, flowVersion, ...props }) => {
-  const api = new AutoGPTServerAPI();
-
-  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.version : selectedVersion)
-  ));
-
-  useEffect(() => {
-    api.getGraphAllVersions(flow.id).then(result => setFlowVersions(result));
-  }, [flow.id]);
-
-  return <Card {...props}>
-    <CardHeader className="flex-row justify-between space-y-0 space-x-3">
-      <div>
-        <CardTitle>
-          {flow.name} <span className="font-light">v{flow.version}</span>
-        </CardTitle>
-        <p className="mt-2">Agent ID: <code>{flow.id}</code></p>
-      </div>
-      <div className="flex items-start space-x-2">
-        {(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 => 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>}
-        <Link className={buttonVariants({ variant: "outline" })} href={`/build?flowID=${flow.id}`}>
-          <Pencil2Icon className="mr-2" /> Edit
-        </Link>
-        <Button
-          variant="outline"
-          className="px-2.5"
-          title="Export to a JSON-file"
-          onClick={async () => exportAsJSONFile(
-            safeCopyGraph(
-              flowVersions!.find(v => v.version == selectedFlowVersion!.version)!,
-              await api.getBlocks(),
-            ),
-            `${flow.name}_v${selectedFlowVersion!.version}.json`
-          )}
-        >
-          <ExitIcon />
-        </Button>
-      </div>
-    </CardHeader>
-    <CardContent>
-      <FlowRunsStats
-        flows={[selectedFlowVersion ?? flow]}
-        flowRuns={flowRuns.filter(r =>
-          r.graphID == flow.id
-          && (selectedVersion == "all" || r.graphVersion == selectedVersion)
-        )}
-      />
-    </CardContent>
-  </Card>;
-};
-
-const FlowRunInfo: React.FC<React.HTMLAttributes<HTMLDivElement> & {
-  flow: GraphMeta;
-  flowRun: FlowRun;
-}> = ({ flow, flowRun, ...props }) => {
-  if (flowRun.graphID != flow.id) {
-    throw new Error(`FlowRunInfo can't be used with non-matching flowRun.flowID and flow.id`)
-  }
-
-  return <Card {...props}>
-    <CardHeader className="flex-row items-center justify-between space-y-0 space-x-3">
-      <div>
-        <CardTitle>
-          {flow.name} <span className="font-light">v{flow.version}</span>
-        </CardTitle>
-        <p className="mt-2">Agent ID: <code>{flow.id}</code></p>
-        <p className="mt-1">Run ID: <code>{flowRun.id}</code></p>
-      </div>
-      <Link className={buttonVariants({ variant: "outline" })} href={`/build?flowID=${flow.id}`}>
-        <Pencil2Icon className="mr-2" /> Edit Agent
-      </Link>
-    </CardHeader>
-    <CardContent>
-      <p><strong>Status:</strong> <FlowRunStatusBadge status={flowRun.status} /></p>
-      <p><strong>Started:</strong> {moment(flowRun.startTime).format('YYYY-MM-DD HH:mm:ss')}</p>
-      <p><strong>Finished:</strong> {moment(flowRun.endTime).format('YYYY-MM-DD HH:mm:ss')}</p>
-      <p><strong>Duration (run time):</strong> {flowRun.duration} ({flowRun.totalRunTime}) seconds</p>
-      {/* <p><strong>Total cost:</strong> €1,23</p> */}
-    </CardContent>
-  </Card>;
-};
-
-const FlowRunsStats: React.FC<{
-  flows: GraphMeta[],
-  flowRuns: FlowRun[],
-  title?: string,
-  className?: string,
-}> = ({ flows, flowRuns, 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 [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
-    ? flowRuns.filter(fr => fr.startTime > statsSinceTimestamp)
-    : flowRuns;
-
-  return (
-    <div className={className}>
-      <div className="flex flex-row items-center justify-between">
-        <CardTitle>{ title || "Stats" }</CardTitle>
-        <div className="flex 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"
-                onSelect={(_, selectedDay) => setStatsSince(selectedDay.getTime())}
-                initialFocus
-              />
-            </PopoverContent>
-          </Popover>
-          <Button variant="outline" size="sm" onClick={() => setStatsSince("dataMin")}>All</Button>
-        </div>
-      </div>
-      <FlowRunsTimeline flows={flows} flowRuns={flowRuns} 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.totalRunTime, 0)
-          } seconds
-        </p>
-        {/* <p><strong>Total cost:</strong> €1,23</p> */}
-      </div>
-    </div>
-  )
-}
-
-const FlowRunsTimeline = (
-  { flows, flowRuns, dataMin, className }: {
-    flows: GraphMeta[],
-    flowRuns: FlowRun[],
-    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 = moment();
-          const time = moment(unixTime);
-          return now.diff(time, 'hours') < 24
-            ? time.format('HH:mm')
-            : time.format('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, label }) => {
-          if (payload && payload.length) {
-            const data: FlowRun & { time: number, _duration: number } = payload[0].payload;
-            const flow = flows.find(f => f.id === data.graphID);
-            return (
-              <Card className="p-2 text-xs leading-normal">
-                <p><strong>Agent:</strong> {flow ? flow.name : 'Unknown'}</p>
-                <p>
-                  <strong>Status:</strong>&nbsp;
-                  <FlowRunStatusBadge status={data.status} className="px-1.5 py-0" />
-                </p>
-                <p><strong>Started:</strong> {moment(data.startTime).format('YYYY-MM-DD HH:mm:ss')}</p>
-                <p><strong>Duration / run time:</strong> {
-                  formatDuration(data.duration)} / {formatDuration(data.totalRunTime)
-                }</p>
-              </Card>
-            );
-          }
-          return null;
-        }}
-      />
-      {flows.map((flow) => (
-        <Scatter
-          key={flow.id}
-          data={flowRuns.filter(fr => fr.graphID == flow.id).map(fr => ({
-            ...fr,
-            time: fr.startTime + (fr.totalRunTime * 1000),
-            _duration: fr.totalRunTime,
-          }))}
-          name={flow.name}
-          fill={`hsl(${hashString(flow.id) * 137.5 % 360}, 70%, 50%)`}
-        />
-      ))}
-      {flowRuns.map((run) => (
-        <Line
-          key={run.id}
-          type="linear"
-          dataKey="_duration"
-          data={[
-            { ...run, time: run.startTime, _duration: 0 },
-            { ...run, time: run.endTime, _duration: run.totalRunTime }
-          ]}
-          stroke={`hsl(${hashString(run.graphID) * 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>
-);
-
-const ScrollableLegend: React.FC<DefaultLegendContentProps & { className?: string }> = (
-  { payload, className }
-) => {
-  return (
-    <div
-      className={cn(
-        "whitespace-nowrap px-4 text-sm overflow-x-auto space-x-3",
-        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="size-2.5 inline-block mr-1 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";
-}
-
-export default Monitor;

rnd/autogpt_builder/src/app/page.tsx

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

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

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

rnd/autogpt_builder/src/app/providers.tsx

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

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

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

rnd/autogpt_builder/src/components/ConnectionLine.tsx

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

rnd/autogpt_builder/src/components/CreditButton.tsx

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

rnd/autogpt_builder/src/components/CustomEdge.tsx

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

rnd/autogpt_builder/src/components/CustomNode.tsx

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

rnd/autogpt_builder/src/components/DataTable.tsx

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

rnd/autogpt_builder/src/components/InputModalComponent.tsx

@@ -1,53 +1,107 @@
-import React, { FC, useEffect, useRef } from 'react';
-import { Button } from './ui/button';
-import { Textarea } from './ui/textarea';
+import React, { FC, useEffect, useState } from "react";
+import { Button } from "./ui/button";
+import { Textarea } from "./ui/textarea";
+import { Maximize2, Minimize2, Clipboard } from "lucide-react";
+import { createPortal } from "react-dom";
+import { toast } from "./ui/use-toast";
 
 interface ModalProps {
   isOpen: boolean;
   onClose: () => void;
   onSave: (value: string) => void;
-  value: string;
+  title?: string;
+  defaultValue: string;
 }
 
-const InputModalComponent: FC<ModalProps> = ({ isOpen, onClose, onSave, value }) => {
-  const [tempValue, setTempValue] = React.useState(value);
-  const textAreaRef = useRef<HTMLTextAreaElement>(null);
+const InputModalComponent: FC<ModalProps> = ({
+  isOpen,
+  onClose,
+  onSave,
+  title,
+  defaultValue,
+}) => {
+  const [tempValue, setTempValue] = useState(defaultValue);
+  const [isMaximized, setIsMaximized] = useState(false);
 
   useEffect(() => {
     if (isOpen) {
-      setTempValue(value);
-      if (textAreaRef.current) {
-        textAreaRef.current.select();
-      }
+      setTempValue(defaultValue);
+      setIsMaximized(false);
     }
-  }, [isOpen, value]);
+  }, [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;
   }
 
-  return (
-    <div className="nodrag fixed inset-0 bg-white bg-opacity-60 flex justify-center items-center">
-      <div className="bg-white p-5 rounded-lg w-[500px] max-w-[90%]">
-        <center><h1>Enter input text</h1></center>
+  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
-          ref={textAreaRef}
-          className="w-full h-[200px] p-2.5 rounded border border-[#dfdfdf] text-black bg-[#dfdfdf]"
+          className="h-full min-h-[200px] w-full resize-none"
           value={tempValue}
           onChange={(e) => setTempValue(e.target.value)}
         />
-        <div className="flex justify-end gap-2.5 mt-2.5">
-          <Button onClick={onClose}>Cancel</Button>
-          <Button onClick={handleSave}>Save</Button>
+        <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;

rnd/autogpt_builder/src/components/NavBar.tsx

@@ -1,28 +1,31 @@
-import {
-  DropdownMenu,
-  DropdownMenuContent, DropdownMenuItem,
-  DropdownMenuTrigger
-} from "@/components/ui/dropdown-menu";
 import Link from "next/link";
-import { CircleUser, Menu, SquareActivity, Workflow } from "lucide-react";
-import { Button, buttonVariants } from "@/components/ui/button";
+import { Button } from "@/components/ui/button";
 import React from "react";
 import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
-import { Pencil1Icon, TimerIcon } from "@radix-ui/react-icons";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import Image from "next/image";
 import getServerUser from "@/hooks/getServerUser";
 import ProfileDropdown from "./ProfileDropdown";
+import {
+  IconCircleUser,
+  IconMenu,
+  IconPackage2,
+  IconRefresh,
+  IconSquareActivity,
+  IconWorkFlow,
+} from "@/components/ui/icons";
+import AutoGPTServerAPI from "@/lib/autogpt-server-api";
+import CreditButton from "@/components/CreditButton";
 
 export async function NavBar() {
   const isAvailable = Boolean(
-    process.env.NEXT_PUBLIC_SUPABASE_URL && process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY
+    process.env.NEXT_PUBLIC_SUPABASE_URL &&
+      process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY,
   );
   const { user } = await getServerUser();
-  
+
   return (
-    <header className="sticky top-0 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6">
-      <div className="flex items-center gap-4 flex-1">
+    <header className="sticky top-0 z-50 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6">
+      <div className="flex flex-1 items-center gap-4">
         <Sheet>
           <SheetTrigger asChild>
             <Button
@@ -30,43 +33,55 @@ export async function NavBar() {
               size="icon"
               className="shrink-0 md:hidden"
             >
-              <Menu className="size-5" />
+              <IconMenu />
               <span className="sr-only">Toggle navigation menu</span>
             </Button>
           </SheetTrigger>
           <SheetContent side="left">
             <nav className="grid gap-6 text-lg font-medium">
               <Link
-                href="/monitor"
-                className="text-muted-foreground hover:text-foreground flex flex-row gap-2 "
+                href="/"
+                className="flex flex-row gap-2 text-muted-foreground hover:text-foreground"
               >
-                <SquareActivity className="size-6" /> Monitor
+                <IconSquareActivity /> Monitor
               </Link>
               <Link
                 href="/build"
-                className="text-muted-foreground hover:text-foreground flex flex-row gap-2"
+                className="flex flex-row gap-2 text-muted-foreground hover:text-foreground"
               >
-                <Workflow className="size-6" /> Build
+                <IconWorkFlow /> Build
+              </Link>
+              <Link
+                href="/marketplace"
+                className="flex flex-row gap-2 text-muted-foreground hover:text-foreground"
+              >
+                <IconPackage2 /> Marketplace
               </Link>
             </nav>
           </SheetContent>
         </Sheet>
         <nav className="hidden md:flex md:flex-row md:items-center md:gap-5 lg:gap-6">
           <Link
-            href="/monitor"
-            className="text-muted-foreground hover:text-foreground flex flex-row gap-2 items-center"
+            href="/"
+            className="flex flex-row items-center gap-2 text-muted-foreground hover:text-foreground"
           >
-            <SquareActivity className="size-4" /> Monitor
+            <IconSquareActivity /> Monitor
           </Link>
           <Link
             href="/build"
-            className="text-muted-foreground hover:text-foreground flex flex-row gap-2 items-center"
+            className="flex flex-row items-center gap-2 text-muted-foreground hover:text-foreground"
           >
-            <Workflow className="size-4" /> Build
+            <IconWorkFlow /> Build
+          </Link>
+          <Link
+            href="/marketplace"
+            className="flex flex-row items-center gap-2 text-muted-foreground hover:text-foreground"
+          >
+            <IconPackage2 /> Marketplace
           </Link>
         </nav>
       </div>
-      <div className="flex-1 flex justify-center relative">
+      <div className="relative flex flex-1 justify-center">
         <a
           className="pointer-events-auto flex place-items-center gap-2"
           href="https://news.agpt.co/"
@@ -83,14 +98,18 @@ export async function NavBar() {
           />
         </a>
       </div>
-      <div className="flex items-center gap-4 flex-1 justify-end">
-        {isAvailable && !user &&
+      <div className="flex flex-1 items-center justify-end gap-4">
+        {isAvailable && user && <CreditButton />}
+
+        {isAvailable && !user && (
           <Link
             href="/login"
-            className="text-muted-foreground hover:text-foreground flex flex-row gap-2 items-center"
+            className="flex flex-row items-center gap-2 text-muted-foreground hover:text-foreground"
           >
-            Log In<CircleUser className="size-5" />
-          </Link>}
+            Log In
+            <IconCircleUser />
+          </Link>
+        )}
         {isAvailable && user && <ProfileDropdown />}
       </div>
     </header>

rnd/autogpt_builder/src/components/NodeHandle.tsx

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

rnd/autogpt_builder/src/components/NodeInputField.tsx

@@ -1,294 +0,0 @@
-import { Cross2Icon, PlusIcon } from "@radix-ui/react-icons";
-import { beautifyString } from "@/lib/utils";
-import { BlockIOSchema } from "@/lib/autogpt-server-api/types";
-import { FC, useState } from "react";
-import { Button } from "./ui/button";
-import { Input } from "./ui/input";
-
-type BlockInputFieldProps = {
-  keyName: string
-  schema: BlockIOSchema
-  parentKey?: string
-  value: string | Array<string> | { [key: string]: string }
-  handleInputClick: (key: string) => void
-  handleInputChange: (key: string, value: any) => void
-  errors?: { [key: string]: string } | string | null
-}
-
-const NodeInputField: FC<BlockInputFieldProps> = ({
-  keyName: key,
-  schema,
-  parentKey = '',
-  value,
-  handleInputClick,
-  handleInputChange,
-  errors
-}) => {
-  const fullKey = parentKey ? `${parentKey}.${key}` : key;
-  const error = typeof errors === 'string' ? errors : errors?.[key] ?? "";
-  const displayKey = schema.title || beautifyString(key);
-
-  const [keyValuePairs, _setKeyValuePairs] = useState<{ key: string, value: string }[]>(
-    "additionalProperties" in schema && value
-      ? Object.entries(value).map(([key, value]) => ({ key: key, value: value }))
-      : []
-  );
-
-  function setKeyValuePairs(newKVPairs: typeof keyValuePairs): void {
-    _setKeyValuePairs(newKVPairs);
-    handleInputChange(
-      fullKey,
-      newKVPairs.reduce((obj, { key, value }) => ({ ...obj, [key]: value }), {})
-    );
-  }
-
-  const renderClickableInput = (value: string | null = null, placeholder: string = "", secret: boolean = false) => {
-    const className = `clickable-input ${error ? 'border-error' : ''}`;
-
-    return secret ? (
-      <div className={className} onClick={() => handleInputClick(fullKey)}>
-        {value ? <span>********</span> : <i className="text-gray-500">{placeholder}</i>}
-      </div>
-    ) : (
-      <div className={className} onClick={() => handleInputClick(fullKey)}>
-        {value || <i className="text-gray-500">{placeholder}</i>}
-      </div>
-    );
-  };
-
-  if ("properties" in schema) {
-    return (
-      <div key={fullKey} className="object-input">
-        <strong>{displayKey}:</strong>
-        {Object.entries(schema.properties).map(([propKey, propSchema]) => (
-          <div key={`${fullKey}.${propKey}`} className="nested-input">
-            <NodeInputField
-              keyName={propKey}
-              schema={propSchema}
-              parentKey={fullKey}
-              value={(value as { [key: string]: string })[propKey]}
-              handleInputClick={handleInputClick}
-              handleInputChange={handleInputChange}
-              errors={errors}
-            />
-          </div>
-        ))}
-      </div>
-    );
-  }
-
-  if (schema.type === 'object' && schema.additionalProperties) {
-    return (
-      <div key={fullKey}>
-        <div>
-          {keyValuePairs.map(({ key, value }, index) => (
-            <div key={index} className="flex items-center w-[325px] space-x-2 mb-2">
-              <Input
-                type="text"
-                placeholder="Key"
-                value={key}
-                onChange={(e) => setKeyValuePairs(
-                  keyValuePairs.toSpliced(index, 1, {
-                    key: e.target.value, value: value
-                  })
-                )}
-              />
-              <Input
-                type="text"
-                placeholder="Value"
-                value={value}
-                onChange={(e) => setKeyValuePairs(
-                  keyValuePairs.toSpliced(index, 1, {
-                    key: key, value: e.target.value
-                  })
-                )}
-              />
-              <Button variant="ghost" className="px-2"
-                onClick={() => setKeyValuePairs(keyValuePairs.toSpliced(index, 1))}
-              >
-                <Cross2Icon />
-              </Button>
-            </div>
-          ))}
-          <Button className="w-full"
-            onClick={() => setKeyValuePairs(
-              keyValuePairs.concat({ key: "", value: "" })
-            )}
-          >
-            <PlusIcon className="mr-2" /> Add Property
-          </Button>
-        </div>
-        {error && <span className="error-message">{error}</span>}
-      </div>
-    );
-  }
-
-  if ("anyOf" in schema) {
-    const types = schema.anyOf.map(s => "type" in s ? s.type : undefined);
-    if (types.includes('string') && types.includes('null')) {
-      return (
-        <div key={fullKey} className="input-container">
-          {renderClickableInput(value as string, schema.placeholder || `Enter ${displayKey} (optional)`)}
-          {error && <span className="error-message">{error}</span>}
-        </div>
-      );
-    }
-  }
-
-  if ("allOf" in schema) {
-    return (
-      <div key={fullKey} className="object-input">
-        <strong>{displayKey}:</strong>
-        {"properties" in schema.allOf[0] &&
-          Object.entries(schema.allOf[0].properties).map(([propKey, propSchema]) => (
-            <div key={`${fullKey}.${propKey}`} className="nested-input">
-              <NodeInputField
-                keyName={propKey}
-                schema={propSchema}
-                parentKey={fullKey}
-                value={(value as { [key: string]: string })[propKey]}
-                handleInputClick={handleInputClick}
-                handleInputChange={handleInputChange}
-                errors={errors}
-              />
-            </div>
-          ))}
-      </div>
-    );
-  }
-
-  if ("oneOf" in schema) {
-    return (
-      <div key={fullKey} className="object-input">
-        <strong>{displayKey}:</strong>
-        {"properties" in schema.oneOf[0] &&
-          Object.entries(schema.oneOf[0].properties).map(([propKey, propSchema]) => (
-            <div key={`${fullKey}.${propKey}`} className="nested-input">
-              <NodeInputField
-                keyName={propKey}
-                schema={propSchema}
-                parentKey={fullKey}
-                value={(value as { [key: string]: string })[propKey]}
-                handleInputClick={handleInputClick}
-                handleInputChange={handleInputChange}
-                errors={errors}
-              />
-            </div>
-          ))}
-      </div>
-    );
-  }
-
-  if (!("type" in schema)) {
-    console.warn(`Schema for input ${key} does not specify a type:`, schema);
-    return (
-      <div key={fullKey} className="input-container">
-        {renderClickableInput(value as string, schema.placeholder || `Enter ${beautifyString(displayKey)} (Complex)`)}
-        {error && <span className="error-message">{error}</span>}
-      </div>
-    );
-  }
-
-  switch (schema.type) {
-    case 'string':
-      if (schema.enum) {
-        return (
-          <div key={fullKey} className="input-container">
-            <select
-              value={value as string || ''}
-              onChange={(e) => handleInputChange(fullKey, e.target.value)}
-              className="select-input"
-            >
-              <option value="">Select {displayKey}</option>
-              {schema.enum.map((option: string) => (
-                <option key={option} value={option}>
-                  {beautifyString(option)}
-                </option>
-              ))}
-            </select>
-            {error && <span className="error-message">{error}</span>}
-          </div>
-        );
-      }
-
-      if (schema.secret) {
-        return (
-          <div key={fullKey} className="input-container">
-            {renderClickableInput(value as string, schema.placeholder || `Enter ${displayKey}`, true)}
-            {error && <span className="error-message">{error}</span>}
-          </div>
-        );
-      }
-
-      return (
-        <div key={fullKey} className="input-container">
-          {renderClickableInput(value as string, schema.placeholder || `Enter ${displayKey}`)}
-          {error && <span className="error-message">{error}</span>}
-        </div>
-      );
-    case 'boolean':
-      return (
-        <div key={fullKey} className="input-container">
-          <select
-            value={value === undefined ? '' : value.toString()}
-            onChange={(e) => handleInputChange(fullKey, e.target.value === 'true')}
-            className="select-input"
-          >
-            <option value="">Select {displayKey}</option>
-            <option value="true">True</option>
-            <option value="false">False</option>
-          </select>
-          {error && <span className="error-message">{error}</span>}
-        </div>
-      );
-    case 'number':
-    case 'integer':
-      return (
-        <div key={fullKey} className="input-container">
-          <Input
-            type="number"
-            value={value as string || ''}
-            onChange={(e) => handleInputChange(fullKey, parseFloat(e.target.value))}
-            className={`number-input ${error ? 'border-error' : ''}`}
-          />
-          {error && <span className="error-message">{error}</span>}
-        </div>
-      );
-    case 'array':
-      if (schema.items && schema.items.type === 'string') {
-        const arrayValues = value as Array<string> || [];
-        return (
-          <div key={fullKey} className="input-container">
-            {arrayValues.map((item: string, index: number) => (
-              <div key={`${fullKey}.${index}`} className="array-item-container">
-                <Input
-                  type="text"
-                  value={item}
-                  onChange={(e) => handleInputChange(`${fullKey}.${index}`, e.target.value)}
-                  className="array-item-input"
-                />
-                <Button onClick={() => handleInputChange(`${fullKey}.${index}`, '')} className="array-item-remove">
-                  &times;
-                </Button>
-              </div>
-            ))}
-            <Button onClick={() => handleInputChange(fullKey, [...arrayValues, ''])} className="array-item-add">
-              Add Item
-            </Button>
-            {error && <span className="error-message ml-2">{error}</span>}
-          </div>
-        );
-      }
-      return null;
-    default:
-      console.warn(`Schema for input ${key} specifies unknown type:`, schema);
-      return (
-        <div key={fullKey} className="input-container">
-          {renderClickableInput(value as string, schema.placeholder || `Enter ${beautifyString(displayKey)} (Complex)`)}
-          {error && <span className="error-message">{error}</span>}
-        </div>
-      );
-  }
-};
-
-export default NodeInputField;

rnd/autogpt_builder/src/components/OutputModalComponent.tsx

@@ -1,42 +1,44 @@
-import React, { FC, useEffect } from 'react';
-import { createPortal } from 'react-dom';
-import { Button } from './ui/button';
-import { Textarea } from './ui/textarea';
+import React, { FC } from "react";
+import { Button } from "./ui/button";
+import { NodeExecutionResult } from "@/lib/autogpt-server-api/types";
+import DataTable from "./DataTable";
+import { Separator } from "@/components/ui/separator";
 
 interface OutputModalProps {
   isOpen: boolean;
   onClose: () => void;
-  value: string;
+  executionResults: {
+    execId: string;
+    data: NodeExecutionResult["output_data"];
+  }[];
 }
 
-const OutputModalComponent: FC<OutputModalProps> = ({ isOpen, onClose, value }) => {
-  const [tempValue, setTempValue] = React.useState(value);
-
-  useEffect(() => {
-    if (isOpen) {
-      setTempValue(value);
-    }
-  }, [isOpen, value]);
-
+const OutputModalComponent: FC<OutputModalProps> = ({
+  isOpen,
+  onClose,
+  executionResults,
+}) => {
   if (!isOpen) {
     return null;
   }
 
-  return createPortal(
-    <div className="fixed inset-0 bg-white bg-opacity-60 flex justify-center items-center z-50">
-      <div className="bg-white p-5 rounded-lg w-[1000px] max-w-[100%]">
-        <center><h1 style={{ color: 'black' }}>Full Output</h1></center>
-        <Textarea
-          className="w-full h-[400px] p-2.5 rounded border border-[#dfdfdf] text-black bg-[#dfdfdf]"
-          value={tempValue}
-          readOnly
-        />
-        <div className="flex justify-end gap-2.5 mt-2.5">
+  return (
+    <div className="nodrag nowheel fixed inset-0 flex items-center justify-center bg-white bg-opacity-60">
+      <div className="w-[500px] max-w-[90%] rounded-lg border-[1.5px] bg-white p-5">
+        <strong>Output Data History</strong>
+        <div className="my-2 max-h-[384px] flex-grow overflow-y-auto rounded-md border-[1.5px] p-2">
+          {executionResults.map((data, i) => (
+            <>
+              <DataTable key={i} title={data.execId} data={data.data} />
+              <Separator />
+            </>
+          ))}
+        </div>
+        <div className="mt-2.5 flex justify-end gap-2.5">
           <Button onClick={onClose}>Close</Button>
         </div>
       </div>
-    </div>,
-    document.body
+    </div>
   );
 };
 

rnd/autogpt_builder/src/components/PasswordInput.tsx

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

rnd/autogpt_builder/src/components/ProfileDropdown.tsx

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

rnd/autogpt_builder/src/components/RoleBasedAccess.tsx

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

rnd/autogpt_builder/src/components/RunnerUIWrapper.tsx

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

rnd/autogpt_builder/src/components/SchemaTooltip.tsx

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

rnd/autogpt_builder/src/components/SupabaseProvider.tsx

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

rnd/autogpt_builder/src/components/TallyPopup.tsx

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

rnd/autogpt_builder/src/components/customedge.css

@@ -16,7 +16,9 @@
   padding: 0;
   color: #555;
   opacity: 0;
-  transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out;
+  transition:
+    opacity 0.2s ease-in-out,
+    background-color 0.2s ease-in-out;
 }
 
 .edge-label-button.visible {
@@ -35,4 +37,8 @@
 
 .react-flow__edge-interaction {
   cursor: pointer;
-}
+}
+
+.react-flow__edges > svg:has(> g.selected) {
+  z-index: 10 !important;
+}

rnd/autogpt_builder/src/components/customnode.css

@@ -1,21 +1,9 @@
 .custom-node {
-  padding: 15px;
-  border: 3px solid #4b5563;
-  border-radius: 12px;
-  background: #ffffff;
   color: #000000;
-  width: 500px;
   box-sizing: border-box;
   transition: border-color 0.3s ease-in-out;
 }
 
-.node-content {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: 1px;
-}
-
 .custom-node .mb-2 {
   display: flex;
   justify-content: space-between;
@@ -30,45 +18,6 @@
   margin-right: 10px;
 }
 
-.node-actions {
-  display: flex;
-  gap: 5px;
-}
-
-.node-action-button {
-  width: 32px;
-  /* Increased size */
-  height: 32px;
-  /* Increased size */
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: #f3f4f6;
-  /* Light gray background */
-  border: 1px solid #d1d5db;
-  /* Light border */
-  border-radius: 6px;
-  color: #4b5563;
-  transition: all 0.2s ease-in-out;
-  cursor: pointer;
-}
-
-.node-action-button:hover {
-  background-color: #e5e7eb;
-  color: #1f2937;
-}
-
-.node-action-button:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
-}
-
-.node-action-button svg {
-  width: 18px;
-  /* Increased icon size */
-  height: 18px;
-  /* Increased icon size */
-}
 /* Existing styles */
 .handle-container {
   display: flex;
@@ -76,7 +25,6 @@
   margin-bottom: 0px;
   padding: 5px;
   min-height: 44px;
-  width: 100%;
   height: 100%;
 }
 
@@ -89,38 +37,10 @@
   transform: none;
 }
 
-.input-container {
-  margin-bottom: 5px;
-}
-
-.clickable-input {
-  padding: 5px;
-  width: 325px;
-  border-radius: 4px;
-  background: #ffffff;
-  border: 1px solid #d1d1d1;
-  color: #000000;
-  cursor: pointer;
-  word-break: break-all;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  position: relative;
-}
-
 .border-error {
   border: 1px solid #d9534f;
 }
 
-.clickable-input span {
-  display: inline-block;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: calc(100% - 100px);
-  vertical-align: middle;
-}
-
 .select-input {
   width: 100%;
   padding: 5px;
@@ -179,41 +99,11 @@
   margin-top: 5px;
 }
 
-.node-output {
-  margin-top: 5px;
-  margin-bottom: 5px;
-  background: #fff;
-  border: 1px solid #000; /* Border for output section */
-  padding: 10px;
-  border-radius: 10px;
-  width: 100%;
-}
-
 .error-message {
   color: #d9534f;
-  font-size: 12px;
+  font-size: 13px;
   margin-top: 5px;
-}
-
-.object-input {
-  margin-left: 10px;
-  border-left: 1px solid #000; /* Border for nested inputs */
-  padding-left: 10px;
-}
-
-.nested-input {
-  margin-top: 5px;
-}
-
-.key-value-input {
-  display: flex;
-  gap: 5px;
-  align-items: center;
-  margin-bottom: 5px;
-}
-
-.key-value-input input {
-  flex-grow: 1;
+  margin-left: 5px;
 }
 
 /* Styles for node states */
@@ -234,9 +124,19 @@
 }
 
 .queued {
-  border-color: #25e6e6; /* Cyanic border for failed nodes */
+  border-color: #25e6e6; /* Cyan border for queued nodes */
 }
 
 .custom-switch {
   padding-left: 2px;
 }
+
+input[type="number"]::-webkit-outer-spin-button,
+input[type="number"]::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+input[type="number"] {
+  -moz-appearance: textfield;
+}

rnd/autogpt_builder/src/components/edit/ControlPanel.tsx

@@ -1,61 +0,0 @@
-import {Card, CardContent} from "@/components/ui/card";
-import {Tooltip, TooltipContent, TooltipTrigger} from "@/components/ui/tooltip";
-import {Button} from "@/components/ui/button";
-import {Separator} from "@/components/ui/separator";
-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;
-    onClick: () => void;
-}
-
-interface ControlPanelProps {
-    controls: Control[];
-    children?: React.ReactNode;
-}
-
-/**
- * ControlPanel component displays a panel with controls as icons 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.
- * @returns The rendered control panel component.
- */
-export const ControlPanel= ( {controls, children}: ControlPanelProps) => {
-    return (
-        <aside className="hidden w-14 flex-col sm:flex">
-            <Card>
-                <CardContent className="p-0">
-                    <div className="flex flex-col items-center gap-4 px-2 sm:py-5 rounded-radius">
-                        {controls.map((control, index) => (
-                            <Tooltip key={index} delayDuration={500}>
-                                <TooltipTrigger asChild>
-                                    <Button
-                                        variant="ghost"
-                                        size="icon"
-                                        onClick={() => control.onClick()}
-                                    >
-                                        {control.icon}
-                                        <span className="sr-only">{control.label}</span>
-                                    </Button>
-                                </TooltipTrigger>
-                                <TooltipContent side="right">{control.label}</TooltipContent>
-                            </Tooltip>
-                        ))}
-                        <Separator />
-                        {children}
-                    </div>
-                </CardContent>
-            </Card>
-        </aside>
-    );
-}
-export default ControlPanel;

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

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

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

@@ -1,7 +1,12 @@
-import {Card, CardContent} from "@/components/ui/card";
-import {Tooltip, TooltipContent, TooltipTrigger} from "@/components/ui/tooltip";
-import {Button} from "@/components/ui/button";
-import {Separator} from "@/components/ui/separator";
+import { Card, CardContent } from "@/components/ui/card";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
 import React from "react";
 
 /**
@@ -12,50 +17,59 @@ import React from "react";
  * @property {onclick} onClick - The function to be executed when the control is clicked.
  */
 export type Control = {
-    icon: React.ReactNode;
-    label: string;
-    onClick: () => void;
-}
+  icon: React.ReactNode;
+  label: string;
+  disabled?: boolean;
+  onClick: () => void;
+};
 
 interface ControlPanelProps {
-    controls: Control[];
-    children?: React.ReactNode;
+  controls: Control[];
+  children?: React.ReactNode;
+  className?: string;
 }
 
 /**
- * ControlPanel component displays a panel with controls as icons with the ability to take in children.
+ * 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, children}: ControlPanelProps) => {
-    return (
-        <aside className="hidden w-14 flex-col sm:flex">
-            <Card>
-                <CardContent className="p-0">
-                    <div className="flex flex-col items-center gap-4 px-2 sm:py-5 rounded-radius">
-                        {children}
-                        <Separator />
-                        {controls.map((control, index) => (
-                            <Tooltip key={index} delayDuration={500}>
-                                <TooltipTrigger asChild>
-                                    <Button
-                                        variant="ghost"
-                                        size="icon"
-                                        onClick={() => control.onClick()}
-                                    >
-                                        {control.icon}
-                                        <span className="sr-only">{control.label}</span>
-                                    </Button>
-                                </TooltipTrigger>
-                                <TooltipContent side="right">{control.label}</TooltipContent>
-                            </Tooltip>
-                        ))}
-                    </div>
-                </CardContent>
-            </Card>
-        </aside>
-    );
-}
-export default ControlPanel;
+export const ControlPanel = ({
+  controls,
+  children,
+  className,
+}: ControlPanelProps) => {
+  return (
+    <Card className={cn("w-14", className)}>
+      <CardContent className="p-0">
+        <div className="rounded-radius flex flex-col items-center gap-8 px-2 sm:py-5">
+          {children}
+          <Separator />
+          {controls.map((control, index) => (
+            <Tooltip key={index} delayDuration={500}>
+              <TooltipTrigger asChild>
+                <div>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    onClick={() => control.onClick()}
+                    data-id={`control-button-${index}`}
+                    disabled={control.disabled || false}
+                  >
+                    {control.icon}
+                    <span className="sr-only">{control.label}</span>
+                  </Button>
+                </div>
+              </TooltipTrigger>
+              <TooltipContent side="right">{control.label}</TooltipContent>
+            </Tooltip>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+export default ControlPanel;

rnd/autogpt_builder/src/components/edit/control/SaveControl.tsx

@@ -1,17 +1,28 @@
 import React from "react";
-import {Popover, PopoverContent, PopoverTrigger} from "@/components/ui/popover";
-import {Card, CardContent, CardFooter} from "@/components/ui/card";
-import {Input} from "@/components/ui/input";
-import {Button} from "@/components/ui/button";
-import {GraphMeta} from "@/lib/autogpt-server-api";
-import {Label} from "@/components/ui/label";
-import {Save} from "lucide-react";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Card, CardContent, CardFooter } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { GraphMeta } from "@/lib/autogpt-server-api";
+import { Label } from "@/components/ui/label";
+import { IconSave } from "@/components/ui/icons";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 
 interface SaveControlProps {
-    agentMeta: GraphMeta | null;
-    onSave: (isTemplate: boolean | undefined) => void;
-    onNameChange: (name: string) => void;
-    onDescriptionChange: (description: string) => void;
+  agentMeta: GraphMeta | null;
+  agentName: string;
+  agentDescription: string;
+  onSave: (isTemplate: boolean | undefined) => void;
+  onNameChange: (name: string) => void;
+  onDescriptionChange: (description: string) => void;
 }
 
 /**
@@ -23,77 +34,95 @@ interface SaveControlProps {
  * @param {(description: string) => void} SaveControlProps.onDescriptionChange - Function to handle description changes.
  * @returns The SaveControl component.
  */
-export const SaveControl= ({
-        agentMeta,
-        onSave,
-        onNameChange,
-        onDescriptionChange
-}:  SaveControlProps) => {
+export const SaveControl = ({
+  agentMeta,
+  onSave,
+  agentName,
+  onNameChange,
+  agentDescription,
+  onDescriptionChange,
+}: 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.
+   */
 
-    /**
-     * 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.
-    */
+  // Determines if we're saving a template or an agent
+  let isTemplate = agentMeta?.is_template ? true : undefined;
+  const handleSave = () => {
+    onSave(isTemplate);
+  };
 
-    // Determines if we're saving a template or an agent
-    let isTemplate = agentMeta?.is_template ? true : undefined;
-    const handleSave = () => {
-        onSave(isTemplate);
-    };
+  const getType = () => {
+    return agentMeta?.is_template ? "template" : "agent";
+  };
 
-    const getType = () => {
-        return agentMeta?.is_template ? 'template' : 'agent';
-    }
-
-    return (
-        <Popover >
-            <PopoverTrigger
-                className="hover:bg-gray-100 hover:text-gray-900 dark:hover:bg-gray-800 dark:hover:text-gray-50 dark:text-white"
-            >
-                <Save className="size-4"/>
-            </PopoverTrigger>
-            <PopoverContent side="right" sideOffset={15} align="start">
-                <Card className="border-none shadow-none">
-                    <CardContent className="p-4">
-                        <div className="grid gap-3">
-                            <Label htmlFor="name">
-                                Name
-                            </Label>
-                            <Input
-                                id="name"
-                                placeholder="Enter your agent name"
-                                className="col-span-3"
-                                defaultValue={agentMeta?.name || ''}
-                                onChange={(e) => onNameChange(e.target.value)}
-                            />
-                            <Label htmlFor="description">
-                                Description
-                            </Label>
-                            <Input
-                                id="description"
-                                placeholder="Your agent description"
-                                className="col-span-3"
-                                defaultValue={agentMeta?.description || ''}
-                                onChange={(e) => onDescriptionChange(e.target.value)}
-                            />
-                        </div>
-                    </CardContent>
-                    <CardFooter className="flex flex-col items-stretch gap-2 ">
-                        <Button className="w-full" onClick={handleSave}>
-                            Save {getType()}
-                        </Button>
-                        {!agentMeta && (
-                            <Button variant="secondary" className="w-full" onClick={() => {
-                                isTemplate = true;
-                                handleSave();
-                            }}>
-                                Save as Template
-                            </Button>
-                        )}
-                    </CardFooter>
-                </Card>
-            </PopoverContent>
-        </Popover>
-    );
-}
+  return (
+    <Popover>
+      <Tooltip delayDuration={500}>
+        <TooltipTrigger asChild>
+          <PopoverTrigger asChild>
+            <Button variant="ghost" size="icon">
+              <IconSave />
+            </Button>
+          </PopoverTrigger>
+        </TooltipTrigger>
+        <TooltipContent side="right">Save</TooltipContent>
+      </Tooltip>
+      <PopoverContent side="right" sideOffset={15} align="start">
+        <Card className="border-none shadow-none">
+          <CardContent className="p-4">
+            <div className="grid gap-3">
+              <Label htmlFor="name">Name</Label>
+              <Input
+                id="name"
+                placeholder="Enter your agent name"
+                className="col-span-3"
+                value={agentName}
+                onChange={(e) => onNameChange(e.target.value)}
+              />
+              <Label htmlFor="description">Description</Label>
+              <Input
+                id="description"
+                placeholder="Your agent description"
+                className="col-span-3"
+                value={agentDescription}
+                onChange={(e) => onDescriptionChange(e.target.value)}
+              />
+              {agentMeta?.version && (
+                <>
+                  <Label htmlFor="version">Version</Label>
+                  <Input
+                    id="version"
+                    placeholder="Version"
+                    className="col-span-3"
+                    value={agentMeta?.version || "-"}
+                    disabled
+                  />
+                </>
+              )}
+            </div>
+          </CardContent>
+          <CardFooter className="flex flex-col items-stretch gap-2">
+            <Button className="w-full" onClick={handleSave}>
+              Save {getType()}
+            </Button>
+            {!agentMeta && (
+              <Button
+                variant="secondary"
+                className="w-full"
+                onClick={() => {
+                  isTemplate = true;
+                  handleSave();
+                }}
+              >
+                Save as Template
+              </Button>
+            )}
+          </CardFooter>
+        </Card>
+      </PopoverContent>
+    </Popover>
+  );
+};

rnd/autogpt_builder/src/components/flow.css

@@ -1,31 +1,18 @@
 /* flow.css or index.css */
 
 body {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+  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',
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
 
-button {
-  background-color: #ffffff;
-  color: #000000;
-  padding: 10px;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  transition: background-color 0.3s ease;
-}
-
-button:hover {
-  background-color: #666;
-}
-
-input, textarea {
+input,
+textarea {
   background-color: #ffffff;
   color: #000000;
   border: 1px solid #555;
@@ -35,7 +22,8 @@ input, textarea {
   box-sizing: border-box;
 }
 
-input::placeholder, textarea::placeholder {
+input::placeholder,
+textarea::placeholder {
   color: #aaa;
 }
 
@@ -126,24 +114,3 @@ input::placeholder, textarea::placeholder {
   width: 100%;
   height: 600px; /* Adjust this height as needed */
 }
-
-.flow-wrapper {
-  height: 100%;
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.flow-controls {
-  position: absolute;
-  left: -80px;
-  z-index: 1001;
-  display: flex;
-  gap: 10px;
-  transition: transform 0.3s ease;
-}
-
-.flow-controls.open {
-  transform: translateX(350px);
-}

rnd/autogpt_builder/src/components/history.ts

@@ -1,17 +1,17 @@
 // history.ts
-import { CustomNodeData } from './CustomNode';
-import { CustomEdgeData } from './CustomEdge';
-import { Edge } from 'reactflow';
+import { CustomNodeData } from "./CustomNode";
+import { CustomEdgeData } from "./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 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 };
@@ -19,8 +19,16 @@ 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 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
@@ -40,50 +48,49 @@ type Action = {
 };
 
 class History {
-    private past: Action[] = [];
-    private future: Action[] = [];
+  private past: Action[] = [];
+  private future: Action[] = [];
 
-    push(action: 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);
-      this.future = [];
     }
+  }
 
-    undo() {
-      const action = this.past.pop();
-      if (action) {
-        action.undo();
-        this.future.push(action);
-      }
-    }
+  canUndo(): boolean {
+    return this.past.length > 0;
+  }
 
-    redo() {
-      const action = this.future.pop();
-      if (action) {
-        action.redo();
-        this.past.push(action);
-      }
-    }
+  canRedo(): boolean {
+    return this.future.length > 0;
+  }
 
-    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],
-      };
-    }
+  clear() {
+    this.past = [];
+    this.future = [];
+  }
 
+  getHistoryState() {
+    return {
+      past: [...this.past],
+      future: [...this.future],
+    };
+  }
 }
 
-export const history = new History();
+export const history = new History();

rnd/autogpt_builder/src/components/marketplace/AgentDetailContent.tsx

@@ -0,0 +1,175 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import {
+  ArrowLeft,
+  Download,
+  Calendar,
+  Tag,
+  ChevronDown,
+  ChevronUp,
+} from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  AgentDetailResponse,
+  InstallationLocation,
+} from "@/lib/marketplace-api";
+import dynamic from "next/dynamic";
+import { Node, Edge } from "@xyflow/react";
+import MarketplaceAPI from "@/lib/marketplace-api";
+import AutoGPTServerAPI, { GraphCreatable } from "@/lib/autogpt-server-api";
+
+const ReactFlow = dynamic(
+  () => import("@xyflow/react").then((mod) => mod.ReactFlow),
+  { ssr: false },
+);
+const Controls = dynamic(
+  () => import("@xyflow/react").then((mod) => mod.Controls),
+  { ssr: false },
+);
+const Background = dynamic(
+  () => import("@xyflow/react").then((mod) => mod.Background),
+  { ssr: false },
+);
+
+import "@xyflow/react/dist/style.css";
+import { beautifyString } from "@/lib/utils";
+import { makeAnalyticsEvent } from "./actions";
+
+function convertGraphToReactFlow(graph: any): { nodes: Node[]; edges: Edge[] } {
+  const nodes: Node[] = graph.nodes.map((node: any) => {
+    let label = node.block_id || "Unknown";
+    try {
+      label = beautifyString(label);
+    } catch (error) {
+      console.error("Error beautifying node label:", error);
+    }
+
+    return {
+      id: node.id,
+      position: node.metadata.position || { x: 0, y: 0 },
+      data: {
+        label,
+        blockId: node.block_id,
+        inputDefault: node.input_default || {},
+        ...node, // Include all other node data
+      },
+      type: "custom",
+    };
+  });
+
+  const edges: Edge[] = graph.links.map((link: any) => ({
+    id: `${link.source_id}-${link.sink_id}`,
+    source: link.source_id,
+    target: link.sink_id,
+    sourceHandle: link.source_name,
+    targetHandle: link.sink_name,
+    type: "custom",
+    data: {
+      sourceId: link.source_id,
+      targetId: link.sink_id,
+      sourceName: link.source_name,
+      targetName: link.sink_name,
+      isStatic: link.is_static,
+    },
+  }));
+
+  return { nodes, edges };
+}
+
+async function installGraph(id: string): Promise<void> {
+  const apiUrl =
+    process.env.NEXT_PUBLIC_AGPT_MARKETPLACE_URL ||
+    "http://localhost:8015/api/v1/market";
+  const api = new MarketplaceAPI(apiUrl);
+
+  const serverAPIUrl = process.env.AGPT_SERVER_API_URL;
+  const serverAPI = new AutoGPTServerAPI(serverAPIUrl);
+  try {
+    console.log(`Installing agent with id: ${id}`);
+    let agent = await api.downloadAgent(id);
+    console.log(`Agent downloaded:`, agent);
+    const data: GraphCreatable = {
+      id: agent.id,
+      version: agent.version,
+      is_active: true,
+      is_template: false,
+      name: agent.name,
+      description: agent.description,
+      nodes: agent.graph.nodes,
+      links: agent.graph.links,
+    };
+    const result = await serverAPI.createTemplate(data);
+    makeAnalyticsEvent({
+      event_name: "agent_installed_from_marketplace",
+      event_data: {
+        marketplace_agent_id: id,
+        installed_agent_id: result.id,
+        installation_location: InstallationLocation.CLOUD,
+      },
+    });
+    console.log(`Agent installed successfully`, result);
+  } catch (error) {
+    console.error(`Error installing agent:`, error);
+    throw error;
+  }
+}
+
+function AgentDetailContent({ agent }: { agent: AgentDetailResponse }) {
+  const [isGraphExpanded, setIsGraphExpanded] = useState(false);
+  const { nodes, edges } = convertGraphToReactFlow(agent.graph);
+
+  return (
+    <div className="mx-auto max-w-7xl px-4 py-4 sm:px-6 lg:px-8">
+      <div className="mb-4 flex items-center justify-between">
+        <Link
+          href="/marketplace"
+          className="inline-flex items-center text-indigo-600 hover:text-indigo-500"
+        >
+          <ArrowLeft className="mr-2" size={20} />
+          Back to Marketplace
+        </Link>
+        <Button
+          onClick={() => installGraph(agent.id)}
+          className="inline-flex items-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+        >
+          <Download className="mr-2" size={16} />
+          Download Agent
+        </Button>
+      </div>
+      <div className="overflow-hidden bg-white shadow sm:rounded-lg">
+        <div className="px-4 py-5 sm:px-6">
+          <h1 className="text-3xl font-bold text-gray-900">{agent.name}</h1>
+          <p className="mt-1 max-w-2xl text-sm text-gray-500">
+            {agent.description}
+          </p>
+        </div>
+        <div className="border-t border-gray-200 px-4 py-5 sm:p-0">
+          <dl className="sm:divide-y sm:divide-gray-200">
+            <div className="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:py-5">
+              <dt className="flex items-center text-sm font-medium text-gray-500">
+                <Calendar className="mr-2" size={16} />
+                Last Updated
+              </dt>
+              <dd className="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
+                {new Date(agent.updatedAt).toLocaleDateString()}
+              </dd>
+            </div>
+            <div className="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:py-5">
+              <dt className="flex items-center text-sm font-medium text-gray-500">
+                <Tag className="mr-2" size={16} />
+                Categories
+              </dt>
+              <dd className="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
+                {agent.categories.join(", ")}
+              </dd>
+            </div>
+          </dl>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default AgentDetailContent;

rnd/autogpt_builder/src/components/marketplace/actions.ts

@@ -0,0 +1,16 @@
+"use server";
+
+import * as Sentry from "@sentry/nextjs";
+import MarketplaceAPI, { AnalyticsEvent } from "@/lib/marketplace-api";
+
+export async function makeAnalyticsEvent(event: AnalyticsEvent) {
+  return await Sentry.withServerActionInstrumentation(
+    "makeAnalyticsEvent",
+    {},
+    async () => {
+      const apiUrl = process.env.AGPT_SERVER_API_URL;
+      const api = new MarketplaceAPI();
+      await api.makeAnalyticsEvent(event);
+    },
+  );
+}

rnd/autogpt_builder/src/components/monitor/AgentFlowList.tsx

@@ -0,0 +1,191 @@
+import AutoGPTServerAPI, { GraphMeta } from "@/lib/autogpt-server-api";
+import React, { useEffect, useMemo, useState } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import Link from "next/link";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { ChevronDownIcon, EnterIcon } from "@radix-ui/react-icons";
+import { AgentImportForm } from "@/components/agent-import-form";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import moment from "moment/moment";
+import { FlowRun } from "@/lib/types";
+import { DialogTitle } from "@/components/ui/dialog";
+
+export const AgentFlowList = ({
+  flows,
+  flowRuns,
+  selectedFlow,
+  onSelectFlow,
+  className,
+}: {
+  flows: GraphMeta[];
+  flowRuns?: FlowRun[];
+  selectedFlow: GraphMeta | null;
+  onSelectFlow: (f: GraphMeta) => void;
+  className?: string;
+}) => {
+  const [templates, setTemplates] = useState<GraphMeta[]>([]);
+  const api = useMemo(() => new AutoGPTServerAPI(), []);
+  useEffect(() => {
+    api.listTemplates().then((templates) => setTemplates(templates));
+  }, [api]);
+
+  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" asChild>
+            <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"}
+                >
+                  <ChevronDownIcon />
+                </Button>
+              </DropdownMenuTrigger>
+
+              <DropdownMenuContent>
+                <DialogTrigger asChild>
+                  <DropdownMenuItem>
+                    <EnterIcon className="mr-2" /> Import from file
+                  </DropdownMenuItem>
+                </DialogTrigger>
+                {templates.length > 0 && (
+                  <>
+                    {/* List of templates */}
+                    <DropdownMenuSeparator />
+                    <DropdownMenuLabel>Use a template</DropdownMenuLabel>
+                    {templates.map((template) => (
+                      <DropdownMenuItem
+                        key={template.id}
+                        onClick={() => {
+                          api
+                            .createGraph(template.id, template.version)
+                            .then((newGraph) => {
+                              window.location.href = `/build?flowID=${newGraph.id}`;
+                            });
+                        }}
+                      >
+                        {template.name}
+                      </DropdownMenuItem>
+                    ))}
+                  </>
+                )}
+              </DropdownMenuContent>
+            </DropdownMenu>
+
+            <DialogContent>
+              <DialogHeader>
+                <DialogTitle className="sr-only">Import Agent</DialogTitle>
+                <h2 className="text-lg font-semibold">
+                  Import an Agent (template) from a file
+                </h2>
+              </DialogHeader>
+              <AgentImportForm />
+            </DialogContent>
+          </Dialog>
+        </div>
+      </CardHeader>
+
+      <CardContent>
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Name</TableHead>
+              {/* <TableHead>Status</TableHead> */}
+              {/* <TableHead>Last updated</TableHead> */}
+              {flowRuns && (
+                <TableHead className="md:hidden lg:table-cell">
+                  # of runs
+                </TableHead>
+              )}
+              {flowRuns && <TableHead>Last run</TableHead>}
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {flows
+              .map((flow) => {
+                let runCount = 0,
+                  lastRun: FlowRun | null = null;
+                if (flowRuns) {
+                  const _flowRuns = flowRuns.filter(
+                    (r) => r.graphID == flow.id,
+                  );
+                  runCount = _flowRuns.length;
+                  lastRun =
+                    runCount == 0
+                      ? null
+                      : _flowRuns.reduce((a, c) =>
+                          a.startTime > c.startTime ? 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;
+                return b.lastRun.startTime - a.lastRun.startTime;
+              })
+              .map(({ flow, runCount, lastRun }) => (
+                <TableRow
+                  key={flow.id}
+                  className="cursor-pointer"
+                  onClick={() => onSelectFlow(flow)}
+                  data-state={selectedFlow?.id == flow.id ? "selected" : null}
+                >
+                  <TableCell>{flow.name}</TableCell>
+                  {/* <TableCell><FlowStatusBadge status={flow.status ?? "active"} /></TableCell> */}
+                  {/* <TableCell>
+                  {flow.updatedAt ?? "???"}
+                </TableCell> */}
+                  {flowRuns && (
+                    <TableCell className="md:hidden lg:table-cell">
+                      {runCount}
+                    </TableCell>
+                  )}
+                  {flowRuns &&
+                    (!lastRun ? (
+                      <TableCell />
+                    ) : (
+                      <TableCell title={moment(lastRun.startTime).toString()}>
+                        {moment(lastRun.startTime).fromNow()}
+                      </TableCell>
+                    ))}
+                </TableRow>
+              ))}
+          </TableBody>
+        </Table>
+      </CardContent>
+    </Card>
+  );
+};
+export default AgentFlowList;

rnd/autogpt_builder/src/components/monitor/FlowInfo.tsx

@@ -0,0 +1,134 @@
+import React, { useEffect, useMemo, useState } from "react";
+import AutoGPTServerAPI, {
+  Graph,
+  GraphMeta,
+  safeCopyGraph,
+} from "@/lib/autogpt-server-api";
+import { FlowRun } from "@/lib/types";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Button, buttonVariants } from "@/components/ui/button";
+import { ClockIcon, ExitIcon, Pencil2Icon } from "@radix-ui/react-icons";
+import Link from "next/link";
+import { exportAsJSONFile } from "@/lib/utils";
+import { FlowRunsStats } from "@/components/monitor/index";
+
+export const FlowInfo: React.FC<
+  React.HTMLAttributes<HTMLDivElement> & {
+    flow: GraphMeta;
+    flowRuns: FlowRun[];
+    flowVersion?: number | "all";
+  }
+> = ({ flow, flowRuns, flowVersion, ...props }) => {
+  const api = useMemo(() => new AutoGPTServerAPI(), []);
+
+  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.version : selectedVersion),
+  );
+
+  useEffect(() => {
+    api.getGraphAllVersions(flow.id).then((result) => setFlowVersions(result));
+  }, [flow.id, api]);
+
+  return (
+    <Card {...props}>
+      <CardHeader className="flex-row justify-between space-x-3 space-y-0">
+        <div>
+          <CardTitle>
+            {flow.name} <span className="font-light">v{flow.version}</span>
+          </CardTitle>
+          <p className="mt-2">
+            Agent ID: <code>{flow.id}</code>
+          </p>
+        </div>
+        <div className="flex items-start space-x-2">
+          {(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) =>
+                    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>
+          )}
+          <Link
+            className={buttonVariants({ variant: "outline" })}
+            href={`/build?flowID=${flow.id}`}
+          >
+            <Pencil2Icon className="mr-2" /> Edit
+          </Link>
+          <Button
+            variant="outline"
+            className="px-2.5"
+            title="Export to a JSON-file"
+            onClick={async () =>
+              exportAsJSONFile(
+                safeCopyGraph(
+                  flowVersions!.find(
+                    (v) => v.version == selectedFlowVersion!.version,
+                  )!,
+                  await api.getBlocks(),
+                ),
+                `${flow.name}_v${selectedFlowVersion!.version}.json`,
+              )
+            }
+          >
+            <ExitIcon />
+          </Button>
+        </div>
+      </CardHeader>
+      <CardContent>
+        <FlowRunsStats
+          flows={[selectedFlowVersion ?? flow]}
+          flowRuns={flowRuns.filter(
+            (r) =>
+              r.graphID == flow.id &&
+              (selectedVersion == "all" || r.graphVersion == selectedVersion),
+          )}
+        />
+      </CardContent>
+    </Card>
+  );
+};
+export default FlowInfo;

rnd/autogpt_builder/src/components/monitor/FlowRunInfo.tsx

@@ -0,0 +1,79 @@
+import React, { useCallback } from "react";
+import AutoGPTServerAPI, { GraphMeta } from "@/lib/autogpt-server-api";
+import { FlowRun } from "@/lib/types";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import Link from "next/link";
+import { Button, buttonVariants } from "@/components/ui/button";
+import { IconSquare } from "@/components/ui/icons";
+import { Pencil2Icon } from "@radix-ui/react-icons";
+import moment from "moment/moment";
+import { FlowRunStatusBadge } from "@/components/monitor/FlowRunStatusBadge";
+
+export const FlowRunInfo: React.FC<
+  React.HTMLAttributes<HTMLDivElement> & {
+    flow: GraphMeta;
+    flowRun: FlowRun;
+  }
+> = ({ flow, flowRun, ...props }) => {
+  if (flowRun.graphID != flow.id) {
+    throw new Error(
+      `FlowRunInfo can't be used with non-matching flowRun.flowID and flow.id`,
+    );
+  }
+
+  const handleStopRun = useCallback(() => {
+    const api = new AutoGPTServerAPI();
+    api.stopGraphExecution(flow.id, flowRun.id);
+  }, [flow.id, flowRun.id]);
+
+  return (
+    <Card {...props}>
+      <CardHeader className="flex-row items-center justify-between space-x-3 space-y-0">
+        <div>
+          <CardTitle>
+            {flow.name} <span className="font-light">v{flow.version}</span>
+          </CardTitle>
+          <p className="mt-2">
+            Agent ID: <code>{flow.id}</code>
+          </p>
+          <p className="mt-1">
+            Run ID: <code>{flowRun.id}</code>
+          </p>
+        </div>
+        <div className="flex space-x-2">
+          {flowRun.status === "running" && (
+            <Button onClick={handleStopRun} variant="destructive">
+              <IconSquare className="mr-2" /> Stop Run
+            </Button>
+          )}
+          <Link
+            className={buttonVariants({ variant: "outline" })}
+            href={`/build?flowID=${flow.id}`}
+          >
+            <Pencil2Icon className="mr-2" /> Edit Agent
+          </Link>
+        </div>
+      </CardHeader>
+      <CardContent>
+        <p>
+          <strong>Status:</strong>{" "}
+          <FlowRunStatusBadge status={flowRun.status} />
+        </p>
+        <p>
+          <strong>Started:</strong>{" "}
+          {moment(flowRun.startTime).format("YYYY-MM-DD HH:mm:ss")}
+        </p>
+        <p>
+          <strong>Finished:</strong>{" "}
+          {moment(flowRun.endTime).format("YYYY-MM-DD HH:mm:ss")}
+        </p>
+        <p>
+          <strong>Duration (run time):</strong> {flowRun.duration} (
+          {flowRun.totalRunTime}) seconds
+        </p>
+        {/* <p><strong>Total cost:</strong> €1,23</p> */}
+      </CardContent>
+    </Card>
+  );
+};
+export default FlowRunInfo;

rnd/autogpt_builder/src/components/monitor/FlowRunStatusBadge.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { FlowRun } from "@/lib/types";
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+export const FlowRunStatusBadge: React.FC<{
+  status: FlowRun["status"];
+  className?: string;
+}> = ({ status, className }) => (
+  <Badge
+    variant="default"
+    className={cn(
+      status === "running"
+        ? "bg-blue-500 dark:bg-blue-700"
+        : status === "waiting"
+          ? "bg-yellow-500 dark:bg-yellow-600"
+          : status === "success"
+            ? "bg-green-500 dark:bg-green-600"
+            : "bg-red-500 dark:bg-red-700",
+      className,
+    )}
+  >
+    {status}
+  </Badge>
+);

rnd/autogpt_builder/src/components/monitor/FlowRunsList.tsx

@@ -0,0 +1,68 @@
+import React from "react";
+import { GraphMeta } from "@/lib/autogpt-server-api";
+import { FlowRun } from "@/lib/types";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import moment from "moment/moment";
+import { FlowRunStatusBadge } from "@/components/monitor/FlowRunStatusBadge";
+
+export const FlowRunsList: React.FC<{
+  flows: GraphMeta[];
+  runs: FlowRun[];
+  className?: string;
+  selectedRun?: FlowRun | null;
+  onSelectRun: (r: FlowRun) => void;
+}> = ({ flows, runs, 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>
+          {runs.map((run) => (
+            <TableRow
+              key={run.id}
+              className="cursor-pointer"
+              onClick={() => onSelectRun(run)}
+              data-state={selectedRun?.id == run.id ? "selected" : null}
+            >
+              <TableCell>
+                {flows.find((f) => f.id == run.graphID)!.name}
+              </TableCell>
+              <TableCell>{moment(run.startTime).format("HH:mm")}</TableCell>
+              <TableCell>
+                <FlowRunStatusBadge status={run.status} />
+              </TableCell>
+              <TableCell>{formatDuration(run.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;

rnd/autogpt_builder/src/components/monitor/FlowRunsStatus.tsx

@@ -0,0 +1,114 @@
+import React, { useState } from "react";
+import { GraphMeta } from "@/lib/autogpt-server-api";
+import { FlowRun } from "@/lib/types";
+import { CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Calendar } from "@/components/ui/calendar";
+import { FlowRunsTimeline } from "@/components/monitor/FlowRunsTimeline";
+
+export const FlowRunsStatus: React.FC<{
+  flows: GraphMeta[];
+  flowRuns: FlowRun[];
+  title?: string;
+  className?: string;
+}> = ({ flows, flowRuns, 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 [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
+      ? flowRuns.filter((fr) => fr.startTime > statsSinceTimestamp)
+      : flowRuns;
+
+  return (
+    <div className={className}>
+      <div className="flex flex-row items-center justify-between">
+        <CardTitle>{title || "Stats"}</CardTitle>
+        <div className="flex 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"
+                onSelect={(_, selectedDay) =>
+                  setStatsSince(selectedDay.getTime())
+                }
+                initialFocus
+              />
+            </PopoverContent>
+          </Popover>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => setStatsSince("dataMin")}
+          >
+            All
+          </Button>
+        </div>
+      </div>
+      <FlowRunsTimeline
+        flows={flows}
+        flowRuns={flowRuns}
+        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.totalRunTime, 0)}{" "}
+          seconds
+        </p>
+        {/* <p><strong>Total cost:</strong> €1,23</p> */}
+      </div>
+    </div>
+  );
+};
+export default FlowRunsStatus;

rnd/autogpt_builder/src/components/monitor/FlowRunsTimeline.tsx

@@ -0,0 +1,172 @@
+import { GraphMeta } from "@/lib/autogpt-server-api";
+import {
+  ComposedChart,
+  DefaultLegendContentProps,
+  Legend,
+  Line,
+  ResponsiveContainer,
+  Scatter,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from "recharts";
+import moment from "moment/moment";
+import { Card } from "@/components/ui/card";
+import { cn, hashString } from "@/lib/utils";
+import React from "react";
+import { FlowRun } from "@/lib/types";
+import { FlowRunStatusBadge } from "@/components/monitor/FlowRunStatusBadge";
+
+export const FlowRunsTimeline = ({
+  flows,
+  flowRuns,
+  dataMin,
+  className,
+}: {
+  flows: GraphMeta[];
+  flowRuns: FlowRun[];
+  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 = moment();
+          const time = moment(unixTime);
+          return now.diff(time, "hours") < 24
+            ? time.format("HH:mm")
+            : time.format("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, label }) => {
+          if (payload && payload.length) {
+            const data: FlowRun & { time: number; _duration: number } =
+              payload[0].payload;
+            const flow = flows.find((f) => f.id === data.graphID);
+            return (
+              <Card className="p-2 text-xs leading-normal">
+                <p>
+                  <strong>Agent:</strong> {flow ? flow.name : "Unknown"}
+                </p>
+                <p>
+                  <strong>Status:</strong>&nbsp;
+                  <FlowRunStatusBadge
+                    status={data.status}
+                    className="px-1.5 py-0"
+                  />
+                </p>
+                <p>
+                  <strong>Started:</strong>{" "}
+                  {moment(data.startTime).format("YYYY-MM-DD HH:mm:ss")}
+                </p>
+                <p>
+                  <strong>Duration / run time:</strong>{" "}
+                  {formatDuration(data.duration)} /{" "}
+                  {formatDuration(data.totalRunTime)}
+                </p>
+              </Card>
+            );
+          }
+          return null;
+        }}
+      />
+      {flows.map((flow) => (
+        <Scatter
+          key={flow.id}
+          data={flowRuns
+            .filter((fr) => fr.graphID == flow.id)
+            .map((fr) => ({
+              ...fr,
+              time: fr.startTime + fr.totalRunTime * 1000,
+              _duration: fr.totalRunTime,
+            }))}
+          name={flow.name}
+          fill={`hsl(${(hashString(flow.id) * 137.5) % 360}, 70%, 50%)`}
+        />
+      ))}
+      {flowRuns.map((run) => (
+        <Line
+          key={run.id}
+          type="linear"
+          dataKey="_duration"
+          data={[
+            { ...run, time: run.startTime, _duration: 0 },
+            { ...run, time: run.endTime, _duration: run.totalRunTime },
+          ]}
+          stroke={`hsl(${(hashString(run.graphID) * 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"
+  );
+}

rnd/autogpt_builder/src/components/monitor/index.ts

@@ -0,0 +1,6 @@
+export { default as AgentFlowList } from "./AgentFlowList";
+export { default as FlowRunsList } from "./FlowRunsList";
+export { default as FlowInfo } from "./FlowInfo";
+export { default as FlowRunInfo } from "./FlowRunInfo";
+export { default as FlowRunsStats } from "./FlowRunsStatus";
+export { default as FlowRunsTimeline } from "./FlowRunsTimeline";

rnd/autogpt_builder/src/components/monitor/skeletons/AgentFlowListSkeleton.tsx

@@ -0,0 +1,24 @@
+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>
+  );
+}