Repository: Significant-Gravitas/AutoGPT
Pull request: feat(builder): Addition of prettier for aligned of development styles
### **User description**
### Background

Resolves: [Implement Prettier for Code Formatting #7628](https://github.com/Significant-Gravitas/AutoGPT/issues/7628)

We currently do not have a formatter in action for our "Builder". This PR will help move PR's across the line faster and align our development styles.

### Changes 🏗️

- Addition of `.prettierignore`
      - Ignoring files that are not necessary for format
- Addition of `.prettierrc.json`
      - Configuration of the prettier implementation 
- Addition of a job in the `autogpt-builder-ci.yml` file
      - Addition of a job that will run the script of format leveraging prettier. 
-    The last change was to run "format" script on the repo.

### PR Quality Scorecard ✨
- [x] Have you used the PR description template? &ensp; `+2 pts`
- [x] Is your pull request atomic, focusing on a single change? &ensp; `+5 pts`
- [x] 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`


___

### **PR Type**
Enhancement, Other


___

### **Description**
- Added Prettier configuration and ignore files to standardize code formatting.
- Applied Prettier formatting to multiple files across the repository.
- Added a job in the CI workflow to run Prettier formatting.
- Updated `package.json` to include Prettier as a dependency and added a format script.



___



### **Changes walkthrough** 📝
<table><thead><tr><th></th><th align="left">Relevant files</th></tr></thead><tbody><tr><td><strong>Formatting</strong></td><td><table>
<tr>
  <td>
    <details>
      <summary><strong>page.tsx</strong><dd><code>Apply Prettier formatting to monitor page component.</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </dd></summary>
<hr>

rnd/autogpt_builder/src/app/monitor/page.tsx

<li>Applied Prettier formatting to the entire file.<br> <li> Adjusted import statements to use single quotes.<br> <li> Reformatted function calls and object properties for better <br>readability.<br>


</details>


  </td>
  <td><a href="https://github.com/Significant-Gravitas/AutoGPT/pull/7629/files#diff-c0277d8d99528e90bb8cb9c6dccd0e76576618553ef642d5cd55c584e692973d">+564/-383</a></td>

</tr>                    

<tr>
  <td>
    <details>
      <summary><strong>Flow.tsx</strong><dd><code>Apply Prettier formatting to Flow component.</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </dd></summary>
<hr>

rnd/autogpt_builder/src/components/Flow.tsx

<li>Applied Prettier formatting to the entire file.<br> <li> Adjusted import statements to use single quotes.<br> <li> Reformatted function calls and object properties for better <br>readability.<br>


</details>


  </td>
  <td><a href="https://github.com/Significant-Gravitas/AutoGPT/pull/7629/files#diff-31d9430263189bf5d64454c82b2151fe2b4198ea7c8b3beb36a99563c5dcc00d">+311/-203</a></td>

</tr>                    

<tr>
  <td>
    <details>
      <summary><strong>NodeInputField.tsx</strong><dd><code>Apply Prettier formatting to NodeInputField component.</code>&nbsp; &nbsp; &nbsp; </dd></summary>
<hr>

rnd/autogpt_builder/src/components/NodeInputField.tsx

<li>Applied Prettier formatting to the entire file.<br> <li> Adjusted import statements to use single quotes.<br> <li> Reformatted function calls and object properties for better <br>readability.<br>


</details>


  </td>
  <td><a href="https://github.com/Significant-Gravitas/AutoGPT/pull/7629/files#diff-f1514eb3655323ef33ef6827ca06951ea8fece147a903ccf45aa35ec2e7fa6d3">+304/-229</a></td>

</tr>                    

<tr>
  <td>
    <details>
      <summary><strong>dropdown-menu.tsx</strong><dd><code>Apply Prettier formatting to dropdown menu component.</code>&nbsp; &nbsp; &nbsp; &nbsp; </dd></summary>
<hr>

rnd/autogpt_builder/src/components/ui/dropdown-menu.tsx

<li>Applied Prettier formatting to the entire file.<br> <li> Adjusted import statements to use single quotes.<br> <li> Reformatted function calls and object properties for better <br>readability.<br>


</details>


  </td>
  <td><a href="https://github.com/Significant-Gravitas/AutoGPT/pull/7629/files#diff-ff0d2b0f1fcb99c9e65edf40ba230a32cd28f1f1b93a0b7323b0721d3da16e91">+50/-47</a>&nbsp; </td>

</tr>                    

<tr>
  <td>
    <details>
      <summary><strong>CustomNode.tsx</strong><dd><code>Apply Prettier formatting to CustomNode component.</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </dd></summary>
<hr>

rnd/autogpt_builder/src/components/CustomNode.tsx

<li>Applied Prettier formatting to the entire file.<br> <li> Adjusted import statements to use single quotes.<br> <li> Reformatted function calls and object properties for better <br>readability.<br>


</details>


  </td>
  <td><a href="https://github.com/Significant-Gravitas/AutoGPT/pull/7629/files#diff-ce37ba33e874cc42255fda0cd2a16758a94a6e68606d513b7018c1cc68193146">+106/-54</a></td>

</tr>                    

<tr>
  <td>
    <details>
      <summary><strong>client.ts</strong><dd><code>Apply Prettier formatting to AutoGPT server API client.</code>&nbsp; &nbsp; </dd></summary>
<hr>

rnd/autogpt_builder/src/lib/autogpt-server-api/client.ts

<li>Applied Prettier formatting to the entire file.<br> <li> Adjusted import statements to use single quotes.<br> <li> Reformatted function calls and object properties for better <br>readability.<br>


</details>


  </td>
  <td><a href="https://github.com/Significant-Gravitas/AutoGPT/pull/7629/files#diff-234c98a3eb2abb20de2a7e2c6ccd167015ef7a5c11844ef0300af364cf276b3c">+81/-58</a>&nbsp; </td>

</tr>                    

<tr>
  <td>
    <details>
      <summary><strong>index.ts</strong><dd><code>Apply Prettier formatting to AutoGPT server API index.</code>&nbsp; &nbsp; &nbsp; </dd></summary>
<hr>

rnd/autogpt_builder/src/lib/autogpt-server-api/index.ts

<li>Applied Prettier formatting to the entire file.<br> <li> Adjusted import statements to use single quotes.<br>


</details>


  </td>
  <td><a href="https://github.com/Significant-Gravitas/AutoGPT/pull/7629/files#diff-8ea2588cebd2490525462daea2bf11c69127967484b14bd0d813cce42b286352">+3/-3</a>&nbsp; &nbsp; &nbsp; </td>

</tr>                    

<tr>
  <td>
    <details>
      <summary><strong>components.json</strong><dd><code>Apply Prettier formatting to components.json.</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </dd></summary>
<hr>

rnd/autogpt_builder/components.json

- Applied Prettier formatting to the JSON file.



</details>


  </td>
  <td><a href="https://github.com/Significant-Gravitas/AutoGPT/pull/7629/files#diff-4ed51a810655ea652210f6e98354c55f7ce0052cb4ad16695550eb5269ffb05c">+1/-1</a>&nbsp; &nbsp; &nbsp; </td>

</tr>                    
</table></td></tr></tr></tbody></table>

___

> 💡 **PR-Agent usage**:
>Comment `/help` on the PR to get a list of all available PR-Agent tools and their descriptions



Problem statement:
[Builder]: Implement Prettier for Code Formatting
### Duplicates

- [X] I have searched the existing issues

### Summary 💡

Integration of Prettier, an opinionated code formatter, into the project to ensure consistent code formatting across all files.

Consistent code formatting is crucial for maintaining readability and reducing the likelihood of code review conflicts. Prettier automatically formats code to conform to a consistent style, making it easier for developers to focus on writing code rather than debating over stylistic preferences.

Prettier should be configured to automatically format code via Continuous Integration (CI) to ensure consistent formatting before code is merged into the main branch. Developers should also be able to run Prettier manually through their development environment or the command line.

### Examples 🌈

A developer writes a new feature and pushes their changes. The CI pipeline runs Prettier to format the code, ensuring consistency before merging into the main branch.

During a code review, the reviewer focuses on the logic and functionality of the code rather than pointing out stylistic inconsistencies, leading to more productive reviews.

### Motivation 🔦

The motivation for this feature stems from the need for consistent and readable code across the entire codebase. Without a standardized formatter, different developers might have varying styles, leading to a less cohesive and harder-to-maintain codebase. Prettier simplifies this by enforcing a single style, which helps new contributors understand the code faster and reduces the time spent on styling code reviews. This feature aligns with the goal of maintaining a clean, professional, and efficient development process.

Hints from issue discussion:

Commit message: feat(builder): Running script "format" and merging master

Patch to review:
diff --git a/.github/workflows/autogpt-builder-ci.yml b/.github/workflows/autogpt-builder-ci.yml
index c7ccb77bf409..47e887b58fa7 100644
--- a/.github/workflows/autogpt-builder-ci.yml
+++ b/.github/workflows/autogpt-builder-ci.yml
@@ -17,6 +17,24 @@ defaults:
     working-directory: rnd/autogpt_builder
 
 jobs:
+  format:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '21'
+
+      - name: Install dependencies
+        run: |
+          npm install
+
+      - name: Run format
+        run: |
+          npm run format
+
   lint:
     runs-on: ubuntu-latest
 
diff --git a/rnd/autogpt_builder/.prettierignore b/rnd/autogpt_builder/.prettierignore
new file mode 100644
index 000000000000..d13839185fdf
--- /dev/null
+++ b/rnd/autogpt_builder/.prettierignore
@@ -0,0 +1,4 @@
+node_modules
+.next
+build
+public
\ No newline at end of file
diff --git a/rnd/autogpt_builder/.prettierrc.json b/rnd/autogpt_builder/.prettierrc.json
new file mode 100644
index 000000000000..7fd3d2d46a3a
--- /dev/null
+++ b/rnd/autogpt_builder/.prettierrc.json
@@ -0,0 +1,15 @@
+{
+  "printWidth": 80,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "arrowParens": "always",
+  "proseWrap": "always",
+  "bracketSameLine": false,
+  "endOfLine": "lf",
+  "jsxSingleQuote": false
+}
diff --git a/rnd/autogpt_builder/.vscode/launch.json b/rnd/autogpt_builder/.vscode/launch.json
index cf58704184e1..5b13fb1fbd7b 100644
--- a/rnd/autogpt_builder/.vscode/launch.json
+++ b/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"
       }
-    },
-
+    }
   ]
 }
diff --git a/rnd/autogpt_builder/README.md b/rnd/autogpt_builder/README.md
index 5aa16c678118..7f9c51c34c9c 100644
--- a/rnd/autogpt_builder/README.md
+++ b/rnd/autogpt_builder/README.md
@@ -14,12 +14,16 @@ pnpm dev
 bun dev
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the
+result.
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+You can start editing the page by modifying `app/page.tsx`. The page
+auto-updates as you edit the file.
 
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+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
\ No newline at end of file
+TODO
diff --git a/rnd/autogpt_builder/components.json b/rnd/autogpt_builder/components.json
index cb30231b8407..1d586e3d7101 100644
--- a/rnd/autogpt_builder/components.json
+++ b/rnd/autogpt_builder/components.json
@@ -14,4 +14,4 @@
     "components": "@/components",
     "utils": "@/lib/utils"
   }
-}
\ No newline at end of file
+}
diff --git a/rnd/autogpt_builder/next.config.mjs b/rnd/autogpt_builder/next.config.mjs
index 977e8dfa0265..22bebb3bc08c 100644
--- a/rnd/autogpt_builder/next.config.mjs
+++ b/rnd/autogpt_builder/next.config.mjs
@@ -5,18 +5,18 @@ 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: {
+    AGPT_SERVER_URL: process.env.AGPT_SERVER_URL,
+  },
+  async redirects() {
+    return [
+      {
+        source: '/',
+        destination: '/build',
+        permanent: false,
+      },
+    ];
+  },
 };
 
 export default nextConfig;
diff --git a/rnd/autogpt_builder/package.json b/rnd/autogpt_builder/package.json
index 193237724c17..f88602d787b0 100644
--- a/rnd/autogpt_builder/package.json
+++ b/rnd/autogpt_builder/package.json
@@ -6,7 +6,8 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "format": "prettier --write ."
   },
   "dependencies": {
     "@hookform/resolvers": "^3.9.0",
@@ -47,6 +48,7 @@
     "eslint": "^8",
     "eslint-config-next": "14.2.4",
     "postcss": "^8",
+    "prettier": "^3.3.3",
     "tailwindcss": "^3.4.1",
     "typescript": "^5"
   }
diff --git a/rnd/autogpt_builder/src/app/globals.css b/rnd/autogpt_builder/src/app/globals.css
index d90551d168c8..21abe328618e 100644
--- a/rnd/autogpt_builder/src/app/globals.css
+++ b/rnd/autogpt_builder/src/app/globals.css
@@ -8,9 +8,7 @@
   }
 }
 
-
-
-:root  {
+:root {
   --background: 180 100% 95%;
   --foreground: 180 5% 0%;
   --card: 180 50% 90%;
@@ -32,7 +30,7 @@
   --ring: 180 76.5% 30%;
   --radius: 0.5rem;
 }
-.dark  {
+.dark {
   --background: 180 50% 5%;
   --foreground: 180 5% 90%;
   --card: 180 50% 0%;
@@ -55,7 +53,6 @@
   --radius: 0.5rem;
 }
 
-
 @layer base {
   * {
     @apply border-border;
diff --git a/rnd/autogpt_builder/src/app/layout.tsx b/rnd/autogpt_builder/src/app/layout.tsx
index f7b4dc8ddb72..c89aa8ca32d2 100644
--- a/rnd/autogpt_builder/src/app/layout.tsx
+++ b/rnd/autogpt_builder/src/app/layout.tsx
@@ -1,76 +1,77 @@
 import React from 'react';
-import type { Metadata } from "next";
-import { Inter } from "next/font/google";
-import Link from "next/link";
-import { Pencil1Icon, TimerIcon } from "@radix-ui/react-icons";
+import type { Metadata } from 'next';
+import { Inter } from 'next/font/google';
+import Link from 'next/link';
+import { Pencil1Icon, TimerIcon } from '@radix-ui/react-icons';
 
-import "./globals.css";
+import './globals.css';
 
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { Button, buttonVariants } from "@/components/ui/button";
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Button, buttonVariants } from '@/components/ui/button';
 import {
-  DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger
-} from "@/components/ui/dropdown-menu";
-import { Providers } from "@/app/providers";
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { Providers } from '@/app/providers';
 
-const inter = Inter({ subsets: ["latin"] });
+const inter = Inter({ subsets: ['latin'] });
 
 export const metadata: Metadata = {
-  title: "NextGen AutoGPT",
-  description: "Your one stop shop to creating AI Agents",
+  title: 'NextGen AutoGPT',
+  description: 'Your one stop shop to creating AI Agents',
 };
 
 const NavBar = () => (
-    <nav className="bg-white dark:bg-slate-800 p-4 flex justify-between items-center shadow">
-        <div className="flex space-x-4">
-            <Link href="/monitor" className={buttonVariants({ variant: "ghost" })}>
-                <TimerIcon className="mr-1" /> Monitor
-            </Link>
-            <Link href="/build" className={buttonVariants({ variant: "ghost" })}>
-                <Pencil1Icon className="mr-1" /> Build
-            </Link>
-        </div>
-        <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-                <Button variant="ghost" className="h-8 w-8 rounded-full">
-                    <Avatar>
-                        <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
-                        <AvatarFallback>CN</AvatarFallback>
-                    </Avatar>
-                </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
-                <DropdownMenuItem>Profile</DropdownMenuItem>
-                <DropdownMenuItem>Settings</DropdownMenuItem>
-                <DropdownMenuItem>Switch Workspace</DropdownMenuItem>
-                <DropdownMenuItem>Log out</DropdownMenuItem>
-            </DropdownMenuContent>
-        </DropdownMenu>
-    </nav>
+  <nav className="bg-white dark:bg-slate-800 p-4 flex justify-between items-center shadow">
+    <div className="flex space-x-4">
+      <Link href="/monitor" className={buttonVariants({ variant: 'ghost' })}>
+        <TimerIcon className="mr-1" /> Monitor
+      </Link>
+      <Link href="/build" className={buttonVariants({ variant: 'ghost' })}>
+        <Pencil1Icon className="mr-1" /> Build
+      </Link>
+    </div>
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" className="h-8 w-8 rounded-full">
+          <Avatar>
+            <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+            <AvatarFallback>CN</AvatarFallback>
+          </Avatar>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem>Profile</DropdownMenuItem>
+        <DropdownMenuItem>Settings</DropdownMenuItem>
+        <DropdownMenuItem>Switch Workspace</DropdownMenuItem>
+        <DropdownMenuItem>Log out</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  </nav>
 );
 export default function RootLayout({
- children,
+  children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
   return (
-      <html lang="en">
+    <html lang="en">
       <body className={inter.className}>
-      <Providers
+        <Providers
           attribute="class"
           defaultTheme="light"
           // Feel free to remove this line if you want to use the system theme by default
           // enableSystem
           disableTransitionOnChange
-      >
-        <div className="min-h-screen bg-gray-200 text-gray-900">
-          <NavBar />
-          <main className="mx-auto p-4">
-            {children}
-          </main>
-        </div>
-      </Providers>
+        >
+          <div className="min-h-screen bg-gray-200 text-gray-900">
+            <NavBar />
+            <main className="mx-auto p-4">{children}</main>
+          </div>
+        </Providers>
       </body>
-      </html>
+    </html>
   );
 }
diff --git a/rnd/autogpt_builder/src/app/monitor/page.tsx b/rnd/autogpt_builder/src/app/monitor/page.tsx
index 7aebc6e83103..4c17c04ec9e0 100644
--- a/rnd/autogpt_builder/src/app/monitor/page.tsx
+++ b/rnd/autogpt_builder/src/app/monitor/page.tsx
@@ -1,4 +1,4 @@
-"use client";
+'use client';
 import React, { useEffect, useState } from 'react';
 import Link from 'next/link';
 import moment from 'moment';
@@ -22,22 +22,44 @@ import {
   DropdownMenuRadioItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
+} 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 {
+  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 { 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 = () => {
@@ -50,51 +72,54 @@ const Monitor = () => {
 
   useEffect(() => fetchFlowsAndRuns(), []);
   useEffect(() => {
-    const intervalId = setInterval(() => flows.map(f => refreshFlowRuns(f.id)), 5000);
+    const intervalId = setInterval(
+      () => flows.map((f) => refreshFlowRuns(f.id)),
+      5000
+    );
     return () => clearInterval(intervalId);
   }, []);
 
   function fetchFlowsAndRuns() {
-    api.listGraphs()
-    .then(flows => {
+    api.listGraphs().then((flows) => {
       setFlows(flows);
-      flows.map(flow => refreshFlowRuns(flow.id));
+      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)
+    api.listGraphRunIDs(flowID).then((runIDs) =>
+      runIDs.map((runID) => {
+        let run;
+        if (
+          (run = flowRuns.find((fr) => fr.id == runID)) &&
+          !['waiting', 'running'].includes(run.status)
+        ) {
+          return;
         }
-        else {
-          flowRuns.push(flowRun)
-        }
-        return [...flowRuns]
-      }));
-    }));
+
+        // 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";
+  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">
@@ -103,7 +128,7 @@ const Monitor = () => {
         flows={flows}
         flowRuns={flowRuns}
         selectedFlow={selectedFlow}
-        onSelectFlow={f => {
+        onSelectFlow={(f) => {
           setSelectedRun(null);
           setSelectedFlow(f.id == selectedFlow?.id ? null : f);
         }}
@@ -111,49 +136,46 @@ const Monitor = () => {
       <FlowRunsList
         className={column2}
         flows={flows}
-        runs={
-          (
-            selectedFlow
-              ? flowRuns.filter(v => v.graphID == selectedFlow.id)
-              : flowRuns
-          )
-          .toSorted((a, b) => Number(a.startTime) - Number(b.startTime))
-        }
+        runs={(selectedFlow
+          ? flowRuns.filter((v) => v.graphID == selectedFlow.id)
+          : flowRuns
+        ).toSorted((a, b) => Number(a.startTime) - Number(b.startTime))}
         selectedRun={selectedRun}
-        onSelectRun={r => setSelectedRun(r.id == selectedRun?.id ? null : r)}
+        onSelectRun={(r) => setSelectedRun(r.id == selectedRun?.id ? null : r)}
       />
-      {selectedRun && (
+      {(selectedRun && (
         <FlowRunInfo
-          flow={selectedFlow || flows.find(f => f.id == selectedRun.graphID)!}
+          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>
-      )}
+      )) ||
+        (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[]
+  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(
@@ -176,19 +198,24 @@ function flowRunFromNodeExecutionResults(
   // Determine aggregate startTime, endTime, and totalRunTime
   const now = Date.now();
   const startTime = Math.min(
-    ...nodeExecutionResults.map(ner => ner.add_time.getTime()), now
+    ...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
+  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;
+    : 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,
@@ -203,136 +230,174 @@ function flowRunFromNodeExecutionResults(
   };
 }
 
-const AgentFlowList = (
-  { flows, flowRuns, selectedFlow, onSelectFlow, className }: {
-    flows: GraphMeta[],
-    flowRuns?: FlowRun[],
-    selectedFlow: GraphMeta | null,
-    onSelectFlow: (f: GraphMeta) => void,
-    className?: string,
-  }
-) => {
+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))
+    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}
+  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>
-                ))}
-              </>}
-            </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>
+                </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>
+                  {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" }) => (
+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 === '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}
@@ -366,11 +431,15 @@ const FlowRunsList: React.FC<{
               key={run.id}
               className="cursor-pointer"
               onClick={() => onSelectRun(run)}
-              data-state={selectedRun?.id == run.id ? "selected" : null}
+              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>
+                {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>
           ))}
@@ -387,199 +456,299 @@ const FlowRunStatusBadge: React.FC<{
   <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 === '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 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)
-  ));
+  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));
+    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`
+  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>
           )}
-        >
-          <ExitIcon />
-        </Button>
-      </div>
-    </CardHeader>
-    <CardContent>
-      <FlowRunsStats
-        flows={[selectedFlowVersion ?? flow]}
-        flowRuns={flowRuns.filter(r =>
-          r.graphID == flow.id
-          && (selectedVersion == "all" || r.graphVersion == selectedVersion)
-        )}
-      />
-    </CardContent>
-  </Card>;
+          <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 }) => {
+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`)
+    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>;
+  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: 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"
+  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;
+        ? 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>
+        <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>
+          <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>
+              <Button variant={'outline'} size="sm">
+                Custom
+              </Button>
             </PopoverTrigger>
             <PopoverContent className="w-auto p-0" align="start">
               <Calendar
                 mode="single"
-                onSelect={(_, selectedDay) => setStatsSince(selectedDay.getTime())}
+                onSelect={(_, selectedDay) =>
+                  setStatsSince(selectedDay.getTime())
+                }
                 initialFocus
               />
             </PopoverContent>
           </Popover>
-          <Button variant="outline" size="sm" onClick={() => setStatsSince("dataMin")}>All</Button>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => setStatsSince('dataMin')}
+          >
+            All
+          </Button>
         </div>
       </div>
-      <FlowRunsTimeline flows={flows} flowRuns={flowRuns} dataMin={statsSince} className="mt-3" />
+      <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
+          <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,
-  }
-) => (
+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>
@@ -587,12 +756,12 @@ const FlowRunsTimeline = (
         dataKey="time"
         type="number"
         domain={[
-          typeof(dataMin) == "string"
+          typeof dataMin == 'string'
             ? dataMin
             : dataMin < 0
-              ? Date.now() + (dataMin*1000)
+              ? Date.now() + dataMin * 1000
               : dataMin,
-          Date.now()
+          Date.now(),
         ]}
         allowDataOverflow={true}
         tickFormatter={(unixTime) => {
@@ -608,24 +777,35 @@ const FlowRunsTimeline = (
       <YAxis
         dataKey="_duration"
         name="Duration (s)"
-        tickFormatter={s => s > 90 ? `${Math.round(s / 60)}m` : `${s}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);
+            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>Agent:</strong> {flow ? flow.name : 'Unknown'}
+                </p>
                 <p>
                   <strong>Status:</strong>&nbsp;
-                  <FlowRunStatusBadge status={data.status} className="px-1.5 py-0" />
+                  <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>
-                <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>
             );
           }
@@ -635,13 +815,15 @@ const FlowRunsTimeline = (
       {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,
-          }))}
+          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%)`}
+          fill={`hsl(${(hashString(flow.id) * 137.5) % 360}, 70%, 50%)`}
         />
       ))}
       {flowRuns.map((run) => (
@@ -651,9 +833,9 @@ const FlowRunsTimeline = (
           dataKey="_duration"
           data={[
             { ...run, time: run.startTime, _duration: 0 },
-            { ...run, time: run.endTime, _duration: run.totalRunTime }
+            { ...run, time: run.endTime, _duration: run.totalRunTime },
           ]}
-          stroke={`hsl(${hashString(run.graphID) * 137.5 % 360}, 70%, 50%)`}
+          stroke={`hsl(${(hashString(run.graphID) * 137.5) % 360}, 70%, 50%)`}
           strokeWidth={2}
           dot={false}
           legendType="none"
@@ -665,37 +847,37 @@ const FlowRunsTimeline = (
           bottom: 0,
           left: 0,
           right: 0,
-          width: "100%",
-          display: "flex",
-          justifyContent: "center",
+          width: '100%',
+          display: 'flex',
+          justifyContent: 'center',
         }}
       />
     </ComposedChart>
   </ResponsiveContainer>
 );
 
-const ScrollableLegend: React.FC<DefaultLegendContentProps & { className?: string }> = (
-  { payload, className }
-) => {
+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,
+        'whitespace-nowrap px-4 text-sm overflow-x-auto space-x-3',
+        className
       )}
-      style={{ scrollbarWidth: "none" }}
+      style={{ scrollbarWidth: 'none' }}
     >
       {payload.map((entry, index) => {
-        if (entry.type == "none") return;
+        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}}
+              style={{ backgroundColor: entry.color }}
             />
             <span>{entry.value}</span>
           </span>
-        )
+        );
       })}
     </div>
   );
@@ -703,10 +885,9 @@ const ScrollableLegend: React.FC<DefaultLegendContentProps & { className?: strin
 
 function formatDuration(seconds: number): string {
   return (
-    seconds < 100
-      ? seconds.toPrecision(2)
-      : Math.round(seconds)
-  ).toString() + "s";
+    (seconds < 100 ? seconds.toPrecision(2) : Math.round(seconds)).toString() +
+    's'
+  );
 }
 
 export default Monitor;
diff --git a/rnd/autogpt_builder/src/app/providers.tsx b/rnd/autogpt_builder/src/app/providers.tsx
index b07beb96d00d..561dfb646f31 100644
--- a/rnd/autogpt_builder/src/app/providers.tsx
+++ b/rnd/autogpt_builder/src/app/providers.tsx
@@ -1,14 +1,14 @@
-'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 * as React from 'react';
+import { ThemeProvider as NextThemesProvider } from 'next-themes';
+import { ThemeProviderProps } from 'next-themes/dist/types';
+import { TooltipProvider } from '@/components/ui/tooltip';
 
 export function Providers({ children, ...props }: ThemeProviderProps) {
-    return (
-        <NextThemesProvider {...props}>
-            <TooltipProvider>{children}</TooltipProvider>
-        </NextThemesProvider>
-    )
-}
\ No newline at end of file
+  return (
+    <NextThemesProvider {...props}>
+      <TooltipProvider>{children}</TooltipProvider>
+    </NextThemesProvider>
+  );
+}
diff --git a/rnd/autogpt_builder/src/components/ConnectionLine.tsx b/rnd/autogpt_builder/src/components/ConnectionLine.tsx
index 988d2dd0b592..4330532f184c 100644
--- a/rnd/autogpt_builder/src/components/ConnectionLine.tsx
+++ b/rnd/autogpt_builder/src/components/ConnectionLine.tsx
@@ -1,9 +1,23 @@
-import { BaseEdge, ConnectionLineComponentProps, getBezierPath, Position } from "reactflow";
+import {
+  BaseEdge,
+  ConnectionLineComponentProps,
+  getBezierPath,
+  Position,
+} from 'reactflow';
 
-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;
diff --git a/rnd/autogpt_builder/src/components/CustomEdge.tsx b/rnd/autogpt_builder/src/components/CustomEdge.tsx
index 5a3b46403bef..616ab2904857 100644
--- a/rnd/autogpt_builder/src/components/CustomEdge.tsx
+++ b/rnd/autogpt_builder/src/components/CustomEdge.tsx
@@ -1,13 +1,24 @@
-import { FC, memo, useMemo } from "react";
-import { BaseEdge, EdgeProps, getBezierPath, XYPosition } from "reactflow";
+import { FC, memo, useMemo } from 'react';
+import { BaseEdge, EdgeProps, getBezierPath, XYPosition } from 'reactflow';
 
 export type CustomEdgeData = {
-  edgeColor: string
-  sourcePos: XYPosition
-}
-
-const CustomEdgeFC: FC<EdgeProps<CustomEdgeData>> = ({ data, selected, source, sourcePosition, sourceX, sourceY, target, targetPosition, targetX, targetY, markerEnd }) => {
+  edgeColor: string;
+  sourcePos: XYPosition;
+};
 
+const CustomEdgeFC: FC<EdgeProps<CustomEdgeData>> = ({
+  data,
+  selected,
+  source,
+  sourcePosition,
+  sourceX,
+  sourceY,
+  target,
+  targetPosition,
+  targetX,
+  targetY,
+  markerEnd,
+}) => {
   const [path] = getBezierPath({
     sourceX: sourceX - 5,
     sourceY,
@@ -18,20 +29,27 @@ const CustomEdgeFC: FC<EdgeProps<CustomEdgeData>> = ({ data, selected, source, s
   });
 
   // Calculate y difference between source and source node, to adjust self-loop edge
-  const yDifference = useMemo(() => sourceY - data!.sourcePos.y, [data!.sourcePos.y]);
+  const yDifference = useMemo(
+    () => sourceY - data!.sourcePos.y,
+    [data!.sourcePos.y]
+  );
 
   // 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 edgePath =
+    source === target
+      ? `M ${sourceX - 5} ${sourceY} C ${sourceX + 128} ${sourceY - yDifference - 128} ${targetX - 128} ${sourceY - yDifference - 128} ${targetX + 3}, ${targetY}`
+      : path;
 
   return (
     <BaseEdge
-      style={{ strokeWidth: 2, stroke: (data?.edgeColor ?? '#555555') + (selected ? '' : '80') }}
+      style={{
+        strokeWidth: 2,
+        stroke: (data?.edgeColor ?? '#555555') + (selected ? '' : '80'),
+      }}
       path={edgePath}
       markerEnd={markerEnd}
     />
-  )
+  );
 };
 
 export const CustomEdge = memo(CustomEdgeFC);
diff --git a/rnd/autogpt_builder/src/components/CustomNode.tsx b/rnd/autogpt_builder/src/components/CustomNode.tsx
index 5fbeea15db8a..9a9189223a58 100644
--- a/rnd/autogpt_builder/src/components/CustomNode.tsx
+++ b/rnd/autogpt_builder/src/components/CustomNode.tsx
@@ -6,7 +6,7 @@ import InputModalComponent from './InputModalComponent';
 import OutputModalComponent from './OutputModalComponent';
 import { BlockSchema } from '@/lib/types';
 import { beautifyString } from '@/lib/utils';
-import { Switch } from "@/components/ui/switch"
+import { Switch } from '@/components/ui/switch';
 import NodeHandle from './NodeHandle';
 import NodeInputField from './NodeInputField';
 
@@ -17,7 +17,12 @@ type CustomNodeData = {
   outputSchema: BlockSchema;
   hardcodedValues: { [key: string]: any };
   setHardcodedValues: (values: { [key: string]: any }) => void;
-  connections: Array<{ source: string; sourceHandle: string; target: string; targetHandle: string }>;
+  connections: Array<{
+    source: string;
+    sourceHandle: string;
+    target: string;
+    targetHandle: string;
+  }>;
   isOutputOpen: boolean;
   status?: string;
   output_data?: any;
@@ -52,9 +57,12 @@ const CustomNode: FC<NodeProps<CustomNodeData>> = ({ data, id }) => {
   };
 
   const hasOptionalFields = () => {
-    return data.inputSchema && Object.keys(data.inputSchema.properties).some((key) => {
-      return !(data.inputSchema.required?.includes(key));
-    });
+    return (
+      data.inputSchema &&
+      Object.keys(data.inputSchema.properties).some((key) => {
+        return !data.inputSchema.required?.includes(key);
+      })
+    );
   };
 
   const generateOutputHandles = (schema: BlockSchema) => {
@@ -62,7 +70,12 @@ const CustomNode: FC<NodeProps<CustomNodeData>> = ({ data, id }) => {
     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>
     ));
   };
@@ -86,26 +99,38 @@ const CustomNode: FC<NodeProps<CustomNodeData>> = ({ data, id }) => {
   const getValue = (key: string) => {
     console.log(`Getting value for key: ${key}`);
     const keys = key.split('.');
-    return keys.reduce((acc, k) => (acc && acc[k] !== undefined) ? acc[k] : '', data.hardcodedValues);
+    return keys.reduce(
+      (acc, k) => (acc && acc[k] !== undefined ? acc[k] : ''),
+      data.hardcodedValues
+    );
   };
 
   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);
+    setModalValue(
+      typeof value === 'object' ? JSON.stringify(value, null, 2) : value
+    );
     setIsModalOpen(true);
   };
 
@@ -125,18 +150,20 @@ const CustomNode: FC<NodeProps<CustomNodeData>> = ({ data, id }) => {
   const validateInputs = () => {
     const newErrors: { [key: string]: string | null } = {};
     const validateRecursive = (schema: any, parentKey: string = '') => {
-      Object.entries(schema.properties).forEach(([key, propSchema]: [string, any]) => {
-        const fullKey = parentKey ? `${parentKey}.${key}` : key;
-        const value = getValue(fullKey);
-
-        if (propSchema.type === 'object' && propSchema.properties) {
-          validateRecursive(propSchema, fullKey);
-        } else {
-          if (propSchema.required && !value) {
-            newErrors[fullKey] = `${fullKey} is required`;
+      Object.entries(schema.properties).forEach(
+        ([key, propSchema]: [string, any]) => {
+          const fullKey = parentKey ? `${parentKey}.${key}` : key;
+          const value = getValue(fullKey);
+
+          if (propSchema.type === 'object' && propSchema.properties) {
+            validateRecursive(propSchema, fullKey);
+          } else {
+            if (propSchema.required && !value) {
+              newErrors[fullKey] = `${fullKey} is required`;
+            }
           }
         }
-      });
+      );
     };
 
     validateRecursive(data.inputSchema);
@@ -146,37 +173,56 @@ const CustomNode: FC<NodeProps<CustomNodeData>> = ({ data, id }) => {
 
   const handleOutputClick = () => {
     setIsOutputModalOpen(true);
-    setModalValue(typeof data.output_data === 'object' ? JSON.stringify(data.output_data, null, 2) : data.output_data);
+    setModalValue(
+      typeof data.output_data === 'object'
+        ? JSON.stringify(data.output_data, null, 2)
+        : data.output_data
+    );
   };
 
   const isTextTruncated = (element: HTMLElement | null): boolean => {
     if (!element) return false;
-    return element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth;
+    return (
+      element.scrollHeight > element.clientHeight ||
+      element.scrollWidth > element.clientWidth
+    );
   };
 
   return (
-    <div className={`custom-node dark-theme ${data.status === 'RUNNING' ? 'running' : data.status === 'COMPLETED' ? 'completed' : data.status === 'FAILED' ? 'failed' : ''}`}>
+    <div
+      className={`custom-node dark-theme ${data.status === 'RUNNING' ? 'running' : data.status === 'COMPLETED' ? 'completed' : data.status === 'FAILED' ? 'failed' : ''}`}
+    >
       <div className="mb-2">
-        <div className="text-lg font-bold">{beautifyString(data.blockType?.replace(/Block$/, '') || data.title)}</div>
+        <div className="text-lg font-bold">
+          {beautifyString(data.blockType?.replace(/Block$/, '') || data.title)}
+        </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}>
-                  <NodeHandle keyName={key} isConnected={isHandleConnected(key)} schema={schema} side="left" />
-                  {!isHandleConnected(key) &&
-                  <NodeInputField
-                    keyName={key}
-                    schema={schema}
-                    value={getValue(key)}
-                    handleInputClick={handleInputClick}
-                    handleInputChange={handleInputChange}
-                    errors={errors}
-                  />}
-                </div>
+              return (
+                (isRequired || isAdvancedOpen) && (
+                  <div key={key}>
+                    <NodeHandle
+                      keyName={key}
+                      isConnected={isHandleConnected(key)}
+                      schema={schema}
+                      side="left"
+                    />
+                    {!isHandleConnected(key) && (
+                      <NodeInputField
+                        keyName={key}
+                        schema={schema}
+                        value={getValue(key)}
+                        handleInputClick={handleInputClick}
+                        handleInputChange={handleInputChange}
+                        errors={errors}
+                      />
+                    )}
+                  </div>
+                )
               );
             })}
         </div>
@@ -188,17 +234,20 @@ const CustomNode: FC<NodeProps<CustomNodeData>> = ({ data, id }) => {
         <div className="node-output" onClick={handleOutputClick}>
           <p>
             <strong>Status:</strong>{' '}
-            {typeof data.status === 'object' ? JSON.stringify(data.status) : data.status || 'N/A'}
+            {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;
-              
+              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;
@@ -207,12 +256,15 @@ const CustomNode: FC<NodeProps<CustomNodeData>> = ({ data, id }) => {
         </div>
       )}
       <div className="flex items-center mt-2.5">
-        <Switch onCheckedChange={toggleOutput} className='custom-switch' />
-        <span className='m-1 mr-4'>Output</span>
+        <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>
+            <Switch
+              onCheckedChange={toggleAdvancedSettings}
+              className="custom-switch"
+            />
+            <span className="m-1">Advanced</span>
           </>
         )}
       </div>
diff --git a/rnd/autogpt_builder/src/components/Flow.tsx b/rnd/autogpt_builder/src/components/Flow.tsx
index 95f792cca3dc..380ec551b85d 100644
--- a/rnd/autogpt_builder/src/components/Flow.tsx
+++ b/rnd/autogpt_builder/src/components/Flow.tsx
@@ -1,4 +1,4 @@
-"use client";
+'use client';
 import React, { useState, useCallback, useEffect, useMemo } from 'react';
 import ReactFlow, {
   addEdge,
@@ -15,16 +15,20 @@ import ReactFlow, {
 import 'reactflow/dist/style.css';
 import CustomNode from './CustomNode';
 import './flow.css';
-import AutoGPTServerAPI, { Block, Graph, NodeExecutionResult, ObjectSchema } from '@/lib/autogpt-server-api';
+import AutoGPTServerAPI, {
+  Block,
+  Graph,
+  NodeExecutionResult,
+  ObjectSchema,
+} from '@/lib/autogpt-server-api';
 import { Button } from './ui/button';
 import { Input } from './ui/input';
-import { ChevronRight, ChevronLeft } from "lucide-react";
+import { ChevronRight, ChevronLeft } from 'lucide-react';
 import { deepEquals, getTypeColor } from '@/lib/utils';
 import { beautifyString } from '@/lib/utils';
 import { CustomEdge, CustomEdgeData } from './CustomEdge';
 import ConnectionLine from './ConnectionLine';
 
-
 type CustomNodeData = {
   blockType: string;
   title: string;
@@ -32,7 +36,12 @@ type CustomNodeData = {
   outputSchema: ObjectSchema;
   hardcodedValues: { [key: string]: any };
   setHardcodedValues: (values: { [key: string]: any }) => void;
-  connections: Array<{ source: string; sourceHandle: string; target: string; targetHandle: string }>;
+  connections: Array<{
+    source: string;
+    sourceHandle: string;
+    target: string;
+    targetHandle: string;
+  }>;
   isOutputOpen: boolean;
   status?: string;
   output_data?: any;
@@ -40,34 +49,37 @@ type CustomNodeData = {
   backend_id?: string;
 };
 
-const Sidebar: React.FC<{ isOpen: boolean, availableNodes: Block[], addNode: (id: string, name: string) => void }> =
-  ({ isOpen, availableNodes, addNode }) => {
-    const [searchQuery, setSearchQuery] = useState('');
+const Sidebar: React.FC<{
+  isOpen: boolean;
+  availableNodes: Block[];
+  addNode: (id: string, name: string) => void;
+}> = ({ isOpen, availableNodes, addNode }) => {
+  const [searchQuery, setSearchQuery] = useState('');
 
-    if (!isOpen) return null;
+  if (!isOpen) return null;
 
-    const filteredNodes = availableNodes.filter(node =>
-      node.name.toLowerCase().includes(searchQuery.toLowerCase())
-    );
+  const filteredNodes = availableNodes.filter((node) =>
+    node.name.toLowerCase().includes(searchQuery.toLowerCase())
+  );
 
-    return (
-      <div className={`sidebar dark-theme ${isOpen ? 'open' : ''}`}>
-        <h3>Nodes</h3>
-        <Input
-          type="text"
-          placeholder="Search nodes..."
-          value={searchQuery}
-          onChange={(e) => setSearchQuery(e.target.value)}
-        />
-        {filteredNodes.map((node) => (
-          <div key={node.id} className="sidebarNodeRowStyle dark-theme">
-            <span>{beautifyString(node.name).replace(/Block$/, '')}</span>
-            <Button onClick={() => addNode(node.id, node.name)}>Add</Button>
-          </div>
-        ))}
-      </div>
-    );
-  };
+  return (
+    <div className={`sidebar dark-theme ${isOpen ? 'open' : ''}`}>
+      <h3>Nodes</h3>
+      <Input
+        type="text"
+        placeholder="Search nodes..."
+        value={searchQuery}
+        onChange={(e) => setSearchQuery(e.target.value)}
+      />
+      {filteredNodes.map((node) => (
+        <div key={node.id} className="sidebarNodeRowStyle dark-theme">
+          <span>{beautifyString(node.name).replace(/Block$/, '')}</span>
+          <Button onClick={() => addNode(node.id, node.name)}>Add</Button>
+        </div>
+      ))}
+    </div>
+  );
+};
 
 const FlowEditor: React.FC<{
   flowID?: string;
@@ -89,7 +101,8 @@ const FlowEditor: React.FC<{
   const api = useMemo(() => new AutoGPTServerAPI(apiUrl), [apiUrl]);
 
   useEffect(() => {
-    api.connectWebSocket()
+    api
+      .connectWebSocket()
       .then(() => {
         console.log('WebSocket connected');
         api.onWebSocketMessage('execution_event', (data) => {
@@ -106,8 +119,9 @@ const FlowEditor: React.FC<{
   }, [api]);
 
   useEffect(() => {
-    api.getBlocks()
-      .then(blocks => setAvailableNodes(blocks))
+    api
+      .getBlocks()
+      .then((blocks) => setAvailableNodes(blocks))
       .catch();
   }, []);
 
@@ -115,8 +129,9 @@ const FlowEditor: React.FC<{
   useEffect(() => {
     if (!flowID || availableNodes.length == 0) return;
 
-    (template ? api.getTemplate(flowID) : api.getGraph(flowID))
-      .then(graph => loadGraph(graph));
+    (template ? api.getTemplate(flowID) : api.getGraph(flowID)).then((graph) =>
+      loadGraph(graph)
+    );
   }, [flowID, template, availableNodes]);
 
   const nodeTypes: NodeTypes = useMemo(() => ({ custom: CustomNode }), []);
@@ -131,25 +146,36 @@ const FlowEditor: React.FC<{
 
     const outputType = outputSchema.properties[handleId].type;
     return outputType;
-  }
+  };
 
   const getNodePos = (id: string) => {
     const node = nodes.find((node) => node.id === id);
     if (!node) return 0;
 
     return node.position;
-  }
+  };
 
   const onConnect: OnConnect = (connection: Connection) => {
-    const edgeColor = getTypeColor(getOutputType(connection.source!, connection.sourceHandle!));
-    const sourcePos = getNodePos(connection.source!)
+    const edgeColor = getTypeColor(
+      getOutputType(connection.source!, connection.sourceHandle!)
+    );
+    const sourcePos = getNodePos(connection.source!);
     console.log('sourcePos', sourcePos);
-    setEdges((eds) => addEdge({
-      type: 'custom',
-      markerEnd: { type: MarkerType.ArrowClosed, strokeWidth: 2, color: edgeColor },
-      data: { edgeColor, sourcePos },
-      ...connection
-    }, eds));
+    setEdges((eds) =>
+      addEdge(
+        {
+          type: 'custom',
+          markerEnd: {
+            type: MarkerType.ArrowClosed,
+            strokeWidth: 2,
+            color: edgeColor,
+          },
+          data: { edgeColor, sourcePos },
+          ...connection,
+        },
+        eds
+      )
+    );
     setNodes((nds) =>
       nds.map((node) => {
         if (node.id === connection.target || node.id === connection.source) {
@@ -164,7 +190,12 @@ const FlowEditor: React.FC<{
                   sourceHandle: connection.sourceHandle,
                   target: connection.target,
                   targetHandle: connection.targetHandle,
-                } as { source: string; sourceHandle: string; target: string; targetHandle: string },
+                } as {
+                  source: string;
+                  sourceHandle: string;
+                  target: string;
+                  targetHandle: string;
+                },
               ],
             },
           };
@@ -172,7 +203,7 @@ const FlowEditor: React.FC<{
         return node;
       })
     );
-  }
+  };
 
   const onEdgesDelete = useCallback(
     (edgesToDelete: Edge<CustomEdgeData>[]) => {
@@ -199,7 +230,7 @@ const FlowEditor: React.FC<{
   );
 
   const addNode = (blockId: string, nodeType: string) => {
-    const nodeSchema = availableNodes.find(node => node.id === blockId);
+    const nodeSchema = availableNodes.find((node) => node.id === blockId);
     if (!nodeSchema) {
       console.error(`Schema not found for block ID: ${blockId}`);
       return;
@@ -216,11 +247,13 @@ const FlowEditor: React.FC<{
         outputSchema: nodeSchema.outputSchema,
         hardcodedValues: {},
         setHardcodedValues: (values: { [key: string]: any }) => {
-          setNodes((nds) => nds.map((node) =>
-            node.id === newNode.id
-              ? { ...node, data: { ...node.data, hardcodedValues: values } }
-              : node
-          ));
+          setNodes((nds) =>
+            nds.map((node) =>
+              node.id === newNode.id
+                ? { ...node, data: { ...node.data, hardcodedValues: values } }
+                : node
+            )
+          );
         },
         connections: [],
         isOutputOpen: false,
@@ -237,72 +270,110 @@ const FlowEditor: React.FC<{
     setAgentName(graph.name);
     setAgentDescription(graph.description);
 
-    setNodes(graph.nodes.map(node => {
-      const block = availableNodes.find(block => block.id === node.block_id)!;
-      const newNode: Node<CustomNodeData> = {
-        id: node.id,
-        type: 'custom',
-        position: { x: node.metadata.position.x, y: node.metadata.position.y },
-        data: {
-          block_id: block.id,
-          blockType: block.name,
-          title: `${block.name} ${node.id}`,
-          inputSchema: block.inputSchema,
-          outputSchema: block.outputSchema,
-          hardcodedValues: node.input_default,
-          setHardcodedValues: (values: { [key: string]: any; }) => {
-            setNodes((nds) => nds.map((node) => node.id === newNode.id
-              ? { ...node, data: { ...node.data, hardcodedValues: values } }
-              : node
-            ));
+    setNodes(
+      graph.nodes.map((node) => {
+        const block = availableNodes.find(
+          (block) => block.id === node.block_id
+        )!;
+        const newNode: Node<CustomNodeData> = {
+          id: node.id,
+          type: 'custom',
+          position: {
+            x: node.metadata.position.x,
+            y: node.metadata.position.y,
           },
-          connections: graph.links
-            .filter(l => [l.source_id, l.sink_id].includes(node.id))
-            .map(link => ({
-              source: link.source_id,
-              sourceHandle: link.source_name,
-              target: link.sink_id,
-              targetHandle: link.sink_name,
-            })),
-          isOutputOpen: false,
-        },
-      };
-      return newNode;
-    }));
+          data: {
+            block_id: block.id,
+            blockType: block.name,
+            title: `${block.name} ${node.id}`,
+            inputSchema: block.inputSchema,
+            outputSchema: block.outputSchema,
+            hardcodedValues: node.input_default,
+            setHardcodedValues: (values: { [key: string]: any }) => {
+              setNodes((nds) =>
+                nds.map((node) =>
+                  node.id === newNode.id
+                    ? {
+                        ...node,
+                        data: { ...node.data, hardcodedValues: values },
+                      }
+                    : node
+                )
+              );
+            },
+            connections: graph.links
+              .filter((l) => [l.source_id, l.sink_id].includes(node.id))
+              .map((link) => ({
+                source: link.source_id,
+                sourceHandle: link.source_name,
+                target: link.sink_id,
+                targetHandle: link.sink_name,
+              })),
+            isOutputOpen: false,
+          },
+        };
+        return newNode;
+      })
+    );
 
-    setEdges(graph.links.map(link => ({
-      id: `${link.source_id}_${link.source_name}_${link.sink_id}_${link.sink_name}`,
-      type: 'custom',
-      data: {
-        edgeColor: getTypeColor(getOutputType(link.source_id, link.source_name!)),
-        sourcePos: getNodePos(link.source_id)
-      },
-      markerEnd: { type: MarkerType.ArrowClosed, strokeWidth: 2, color: getTypeColor(getOutputType(link.source_id, link.source_name!)) },
-      source: link.source_id,
-      target: link.sink_id,
-      sourceHandle: link.source_name || undefined,
-      targetHandle: link.sink_name || undefined
-    }) as Edge<CustomEdgeData>));
+    setEdges(
+      graph.links.map(
+        (link) =>
+          ({
+            id: `${link.source_id}_${link.source_name}_${link.sink_id}_${link.sink_name}`,
+            type: 'custom',
+            data: {
+              edgeColor: getTypeColor(
+                getOutputType(link.source_id, link.source_name!)
+              ),
+              sourcePos: getNodePos(link.source_id),
+            },
+            markerEnd: {
+              type: MarkerType.ArrowClosed,
+              strokeWidth: 2,
+              color: getTypeColor(
+                getOutputType(link.source_id, link.source_name!)
+              ),
+            },
+            source: link.source_id,
+            target: link.sink_id,
+            sourceHandle: link.source_name || undefined,
+            targetHandle: link.sink_name || undefined,
+          }) as Edge<CustomEdgeData>
+      )
+    );
   }
 
-  const prepareNodeInputData = (node: Node<CustomNodeData>, allNodes: Node<CustomNodeData>[], allEdges: Edge<CustomEdgeData>[]) => {
-    console.log("Preparing input data for node:", node.id, node.data.blockType);
+  const prepareNodeInputData = (
+    node: Node<CustomNodeData>,
+    allNodes: Node<CustomNodeData>[],
+    allEdges: Edge<CustomEdgeData>[]
+  ) => {
+    console.log('Preparing input data for node:', node.id, node.data.blockType);
 
-    const blockSchema = availableNodes.find(n => n.id === node.data.block_id)?.inputSchema;
+    const blockSchema = availableNodes.find(
+      (n) => n.id === node.data.block_id
+    )?.inputSchema;
 
     if (!blockSchema) {
       console.error(`Schema not found for block ID: ${node.data.block_id}`);
       return {};
     }
 
-    const getNestedData = (schema: ObjectSchema, values: { [key: string]: any }): { [key: string]: any } => {
+    const getNestedData = (
+      schema: ObjectSchema,
+      values: { [key: string]: any }
+    ): { [key: string]: any } => {
       let inputData: { [key: string]: any } = {};
 
       if (schema.properties) {
         Object.keys(schema.properties).forEach((key) => {
           if (values[key] !== undefined) {
             if (schema.properties[key].type === 'object') {
-              inputData[key] = getNestedData(schema.properties[key], values[key]);
+              inputData[key] = getNestedData(
+                schema.properties[key],
+                values[key]
+              );
             } else {
               inputData[key] = values[key];
             }
@@ -319,11 +390,14 @@ const FlowEditor: React.FC<{
 
     let inputData = getNestedData(blockSchema, node.data.hardcodedValues);
 
-    console.log(`Final prepared input for ${node.data.blockType} (${node.id}):`, inputData);
+    console.log(
+      `Final prepared input for ${node.data.blockType} (${node.id}):`,
+      inputData
+    );
     return inputData;
   };
 
-  async function saveAgent (asTemplate: boolean = false) {
+  async function saveAgent(asTemplate: boolean = false) {
     setNodes((nds) =>
       nds.map((node) => ({
         ...node,
@@ -334,25 +408,25 @@ const FlowEditor: React.FC<{
       }))
     );
     await new Promise((resolve) => setTimeout(resolve, 100));
-    console.log("All nodes before formatting:", nodes);
+    console.log('All nodes before formatting:', nodes);
     const blockIdToNodeIdMap = {};
 
-    const formattedNodes = nodes.map(node => {
-      nodes.forEach(node => {
+    const formattedNodes = nodes.map((node) => {
+      nodes.forEach((node) => {
         const key = `${node.data.block_id}_${node.position.x}_${node.position.y}`;
         blockIdToNodeIdMap[key] = node.id;
       });
       const inputDefault = prepareNodeInputData(node, nodes, edges);
       const inputNodes = edges
-        .filter(edge => edge.target === node.id)
-        .map(edge => ({
+        .filter((edge) => edge.target === node.id)
+        .map((edge) => ({
           name: edge.targetHandle || '',
           node_id: edge.source,
         }));
 
       const outputNodes = edges
-        .filter(edge => edge.source === node.id)
-        .map(edge => ({
+        .filter((edge) => edge.source === node.id)
+        .map((edge) => ({
           name: edge.sourceHandle || '',
           node_id: edge.target,
         }));
@@ -363,15 +437,15 @@ const FlowEditor: React.FC<{
         input_default: inputDefault,
         input_nodes: inputNodes,
         output_nodes: outputNodes,
-        metadata: { position: node.position }
+        metadata: { position: node.position },
       };
     });
 
-    const links = edges.map(edge => ({
+    const links = edges.map((edge) => ({
       source_id: edge.source,
       sink_id: edge.target,
       source_name: edge.sourceHandle || '',
-      sink_name: edge.targetHandle || ''
+      sink_name: edge.targetHandle || '',
     }));
 
     const payload = {
@@ -379,48 +453,54 @@ const FlowEditor: React.FC<{
       name: agentName || 'Agent Name',
       description: agentDescription || 'Agent Description',
       nodes: formattedNodes,
-      links: links  // Ensure this field is included
+      links: links, // Ensure this field is included
     };
 
     if (savedAgent && deepEquals(payload, savedAgent)) {
-      console.debug("No need to save: Graph is the same as version on server");
+      console.debug('No need to save: Graph is the same as version on server');
       return;
     } else {
-      console.debug("Saving new Graph version; old vs new:", savedAgent, payload);
+      console.debug(
+        'Saving new Graph version; old vs new:',
+        savedAgent,
+        payload
+      );
     }
 
     const newSavedAgent = savedAgent
       ? await (savedAgent.is_template
-        ? api.updateTemplate(savedAgent.id, payload) 
-        : api.updateGraph(savedAgent.id, payload))
+          ? api.updateTemplate(savedAgent.id, payload)
+          : api.updateGraph(savedAgent.id, payload))
       : await (asTemplate
-        ? api.createTemplate(payload)
-        : api.createGraph(payload));
+          ? api.createTemplate(payload)
+          : api.createGraph(payload));
     console.debug('Response from the API:', newSavedAgent);
     setSavedAgent(newSavedAgent);
 
     // Update the node IDs in the frontend
-    const updatedNodes = newSavedAgent.nodes.map(backendNode => {
-      const key = `${backendNode.block_id}_${backendNode.metadata.position.x}_${backendNode.metadata.position.y}`;
-      const frontendNodeId = blockIdToNodeIdMap[key];
-      const frontendNode = nodes.find(node => node.id === frontendNodeId);
-
-      return frontendNode
-        ? {
-          ...frontendNode,
-          position: backendNode.metadata.position,
-          data: {
-            ...frontendNode.data,
-            backend_id: backendNode.id,
-          },
-        }
-        : null;
-    }).filter(node => node !== null);
+    const updatedNodes = newSavedAgent.nodes
+      .map((backendNode) => {
+        const key = `${backendNode.block_id}_${backendNode.metadata.position.x}_${backendNode.metadata.position.y}`;
+        const frontendNodeId = blockIdToNodeIdMap[key];
+        const frontendNode = nodes.find((node) => node.id === frontendNodeId);
+
+        return frontendNode
+          ? {
+              ...frontendNode,
+              position: backendNode.metadata.position,
+              data: {
+                ...frontendNode.data,
+                backend_id: backendNode.id,
+              },
+            }
+          : null;
+      })
+      .filter((node) => node !== null);
 
     setNodes(updatedNodes);
 
     return newSavedAgent.id;
-  };
+  }
 
   const runAgent = async () => {
     try {
@@ -432,18 +512,19 @@ const FlowEditor: React.FC<{
 
       api.subscribeToExecution(newAgentId);
       api.runGraph(newAgentId);
-
     } catch (error) {
       console.error('Error running agent:', error);
     }
   };
 
-
-
-  const updateNodesWithExecutionData = (executionData: NodeExecutionResult[]) => {
+  const updateNodesWithExecutionData = (
+    executionData: NodeExecutionResult[]
+  ) => {
     setNodes((nds) =>
       nds.map((node) => {
-        const nodeExecution = executionData.find((exec) => exec.node_id === node.data.backend_id);
+        const nodeExecution = executionData.find(
+          (exec) => exec.node_id === node.data.backend_id
+        );
         if (nodeExecution) {
           return {
             ...node,
@@ -462,60 +543,75 @@ const FlowEditor: React.FC<{
 
   const toggleSidebar = () => setIsSidebarOpen(!isSidebarOpen);
 
-  const handleKeyDown = useCallback((event: KeyboardEvent) => {
-    if (event.ctrlKey || event.metaKey) {
-      if (event.key === 'c' || event.key === 'C') {
-        // Copy selected nodes
-        const selectedNodes = nodes.filter(node => node.selected);
-        const selectedEdges = edges.filter(edge => edge.selected);
-        setCopiedNodes(selectedNodes);
-        setCopiedEdges(selectedEdges);
-      }
-      if (event.key === 'v' || event.key === 'V') {
-        // Paste copied nodes
-        if (copiedNodes.length > 0) {
-          const newNodes = copiedNodes.map((node, index) => {
-            const newNodeId = (nodeId + index).toString();
-            return {
-              ...node,
-              id: newNodeId,
-              position: {
-                x: node.position.x + 20, // Offset pasted nodes
-                y: node.position.y + 20,
-              },
-              data: {
-                ...node.data,
-                status: undefined, // Reset status
-                output_data: undefined, // Clear output data
-                setHardcodedValues: (values: { [key: string]: any }) => {
-                  setNodes((nds) => nds.map((n) =>
-                    n.id === newNodeId
-                      ? { ...n, data: { ...n.data, hardcodedValues: values } }
-                      : n
-                  ));
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent) => {
+      if (event.ctrlKey || event.metaKey) {
+        if (event.key === 'c' || event.key === 'C') {
+          // Copy selected nodes
+          const selectedNodes = nodes.filter((node) => node.selected);
+          const selectedEdges = edges.filter((edge) => edge.selected);
+          setCopiedNodes(selectedNodes);
+          setCopiedEdges(selectedEdges);
+        }
+        if (event.key === 'v' || event.key === 'V') {
+          // Paste copied nodes
+          if (copiedNodes.length > 0) {
+            const newNodes = copiedNodes.map((node, index) => {
+              const newNodeId = (nodeId + index).toString();
+              return {
+                ...node,
+                id: newNodeId,
+                position: {
+                  x: node.position.x + 20, // Offset pasted nodes
+                  y: node.position.y + 20,
                 },
-              },
-            };
-          });
-          const updatedNodes = nodes.map(node => ({ ...node, selected: false })); // Deselect old nodes
-          setNodes([...updatedNodes, ...newNodes]);
-          setNodeId(prevId => prevId + copiedNodes.length);
-
-          const newEdges = copiedEdges.map(edge => {
-            const newSourceId = newNodes.find(n => n.data.title === edge.source)?.id || edge.source;
-            const newTargetId = newNodes.find(n => n.data.title === edge.target)?.id || edge.target;
-            return {
-              ...edge,
-              id: `${newSourceId}_${edge.sourceHandle}_${newTargetId}_${edge.targetHandle}_${Date.now()}`,
-              source: newSourceId,
-              target: newTargetId,
-            };
-          });
-          setEdges([...edges, ...newEdges]);
+                data: {
+                  ...node.data,
+                  status: undefined, // Reset status
+                  output_data: undefined, // Clear output data
+                  setHardcodedValues: (values: { [key: string]: any }) => {
+                    setNodes((nds) =>
+                      nds.map((n) =>
+                        n.id === newNodeId
+                          ? {
+                              ...n,
+                              data: { ...n.data, hardcodedValues: values },
+                            }
+                          : n
+                      )
+                    );
+                  },
+                },
+              };
+            });
+            const updatedNodes = nodes.map((node) => ({
+              ...node,
+              selected: false,
+            })); // Deselect old nodes
+            setNodes([...updatedNodes, ...newNodes]);
+            setNodeId((prevId) => prevId + copiedNodes.length);
+
+            const newEdges = copiedEdges.map((edge) => {
+              const newSourceId =
+                newNodes.find((n) => n.data.title === edge.source)?.id ||
+                edge.source;
+              const newTargetId =
+                newNodes.find((n) => n.data.title === edge.target)?.id ||
+                edge.target;
+              return {
+                ...edge,
+                id: `${newSourceId}_${edge.sourceHandle}_${newTargetId}_${edge.targetHandle}_${Date.now()}`,
+                source: newSourceId,
+                target: newTargetId,
+              };
+            });
+            setEdges([...edges, ...newEdges]);
+          }
         }
       }
-    }
-  }, [nodes, edges, copiedNodes, copiedEdges, nodeId]);
+    },
+    [nodes, edges, copiedNodes, copiedEdges, nodeId]
+  );
 
   useEffect(() => {
     window.addEventListener('keydown', handleKeyDown);
@@ -538,9 +634,17 @@ const FlowEditor: React.FC<{
           color: 'white',
         }}
       >
-        {isSidebarOpen ? <ChevronLeft className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
+        {isSidebarOpen ? (
+          <ChevronLeft className="h-4 w-4" />
+        ) : (
+          <ChevronRight className="h-4 w-4" />
+        )}
       </Button>
-      <Sidebar isOpen={isSidebarOpen} availableNodes={availableNodes} addNode={addNode} />
+      <Sidebar
+        isOpen={isSidebarOpen}
+        availableNodes={availableNodes}
+        addNode={addNode}
+      />
       <ReactFlow
         nodes={nodes}
         edges={edges}
@@ -551,7 +655,7 @@ const FlowEditor: React.FC<{
         edgeTypes={edgeTypes}
         connectionLineComponent={ConnectionLine}
         onEdgesDelete={onEdgesDelete}
-        deleteKeyCode={["Backspace", "Delete"]}
+        deleteKeyCode={['Backspace', 'Delete']}
       >
         <div style={{ position: 'absolute', right: 10, zIndex: 4 }}>
           <Input
@@ -566,16 +670,20 @@ const FlowEditor: React.FC<{
             value={agentDescription}
             onChange={(e) => setAgentDescription(e.target.value)}
           />
-          <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>  {/* Added gap for spacing */}
+          <div
+            style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}
+          >
+            {' '}
+            {/* Added gap for spacing */}
             <Button onClick={() => saveAgent(savedAgent?.is_template)}>
-              Save {savedAgent?.is_template ? "Template" : "Agent"}
+              Save {savedAgent?.is_template ? 'Template' : 'Agent'}
             </Button>
-            {!savedAgent?.is_template &&
+            {!savedAgent?.is_template && (
               <Button onClick={runAgent}>Save & Run Agent</Button>
-            }
-            {!savedAgent &&
+            )}
+            {!savedAgent && (
               <Button onClick={() => saveAgent(true)}>Save as Template</Button>
-            }
+            )}
           </div>
         </div>
       </ReactFlow>
diff --git a/rnd/autogpt_builder/src/components/InputModalComponent.tsx b/rnd/autogpt_builder/src/components/InputModalComponent.tsx
index a80299758a83..409472f611d8 100644
--- a/rnd/autogpt_builder/src/components/InputModalComponent.tsx
+++ b/rnd/autogpt_builder/src/components/InputModalComponent.tsx
@@ -9,7 +9,12 @@ interface ModalProps {
   value: string;
 }
 
-const InputModalComponent: FC<ModalProps> = ({ isOpen, onClose, onSave, value }) => {
+const InputModalComponent: FC<ModalProps> = ({
+  isOpen,
+  onClose,
+  onSave,
+  value,
+}) => {
   const [tempValue, setTempValue] = React.useState(value);
   const textAreaRef = useRef<HTMLTextAreaElement>(null);
 
@@ -34,7 +39,9 @@ const InputModalComponent: FC<ModalProps> = ({ isOpen, onClose, onSave, value })
   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>
+        <center>
+          <h1>Enter input text</h1>
+        </center>
         <Textarea
           ref={textAreaRef}
           className="w-full h-[200px] p-2.5 rounded border border-[#dfdfdf] text-black bg-[#dfdfdf]"
diff --git a/rnd/autogpt_builder/src/components/NodeHandle.tsx b/rnd/autogpt_builder/src/components/NodeHandle.tsx
index 46516e763734..251802a10620 100644
--- a/rnd/autogpt_builder/src/components/NodeHandle.tsx
+++ b/rnd/autogpt_builder/src/components/NodeHandle.tsx
@@ -1,18 +1,22 @@
-import { BlockSchema } from "@/lib/types";
-import { beautifyString, getTypeBgColor, getTypeTextColor } from "@/lib/utils";
-import { FC } from "react";
-import { Handle, Position } from "reactflow";
-import SchemaTooltip from "./SchemaTooltip";
+import { BlockSchema } from '@/lib/types';
+import { beautifyString, getTypeBgColor, getTypeTextColor } from '@/lib/utils';
+import { FC } from 'react';
+import { Handle, Position } from 'reactflow';
+import SchemaTooltip from './SchemaTooltip';
 
 type HandleProps = {
-  keyName: string,
-  schema: BlockSchema,
-  isConnected: boolean,
-  side: 'left' | 'right'
-}
-
-const NodeHandle: FC<HandleProps> = ({ keyName, isConnected, schema, side }) => {
+  keyName: string;
+  schema: BlockSchema;
+  isConnected: boolean;
+  side: 'left' | 'right';
+};
 
+const NodeHandle: FC<HandleProps> = ({
+  keyName,
+  isConnected,
+  schema,
+  side,
+}) => {
   const typeName: Record<string, string> = {
     string: 'text',
     number: 'number',
@@ -26,13 +30,17 @@ const NodeHandle: FC<HandleProps> = ({ keyName, isConnected, schema, side }) =>
 
   const label = (
     <div className="flex flex-col flex-grow">
-      <span className="text-m text-gray-900 -mb-1 green">{schema.title || beautifyString(keyName)}</span>
+      <span className="text-m text-gray-900 -mb-1 green">
+        {schema.title || beautifyString(keyName)}
+      </span>
       <span className={typeClass}>{typeName[schema.type]}</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={`w-4 h-4 m-1 ${isConnected ? getTypeBgColor(schema.type) : 'bg-gray-600'} rounded-full transition-colors duration-100 group-hover:bg-gray-300`}
+    />
   );
 
   if (side === 'left') {
@@ -42,7 +50,7 @@ const NodeHandle: FC<HandleProps> = ({ keyName, isConnected, schema, side }) =>
           type="target"
           position={Position.Left}
           id={keyName}
-          className='group -ml-[29px]'
+          className="group -ml-[29px]"
         >
           <div className="pointer-events-none flex items-center">
             {dot}
@@ -51,7 +59,7 @@ const NodeHandle: FC<HandleProps> = ({ keyName, isConnected, schema, side }) =>
         </Handle>
         <SchemaTooltip schema={schema} />
       </div>
-    )
+    );
   } else {
     return (
       <div key={keyName} className="handle-container justify-end">
@@ -59,16 +67,16 @@ const NodeHandle: FC<HandleProps> = ({ keyName, isConnected, schema, side }) =>
           type="source"
           position={Position.Right}
           id={keyName}
-          className='group -mr-[29px]'
+          className="group -mr-[29px]"
         >
           <div className="pointer-events-none flex items-center">
             {label}
             {dot}
           </div>
         </Handle>
-      </div >
-    )
+      </div>
+    );
   }
-}
+};
 
 export default NodeHandle;
diff --git a/rnd/autogpt_builder/src/components/NodeInputField.tsx b/rnd/autogpt_builder/src/components/NodeInputField.tsx
index f2b81fda6aeb..e891500ad507 100644
--- a/rnd/autogpt_builder/src/components/NodeInputField.tsx
+++ b/rnd/autogpt_builder/src/components/NodeInputField.tsx
@@ -1,58 +1,84 @@
-import { beautifyString } from "@/lib/utils";
-import { FC, useState } from "react";
-import { Button } from "./ui/button";
-import { Input } from "./ui/input";
+import { beautifyString } from '@/lib/utils';
+import { FC, useState } from 'react';
+import { Button } from './ui/button';
+import { Input } from './ui/input';
 
 type BlockInputFieldProps = {
-  keyName: string
-  schema: any
-  parentKey?: string
-  value: string | Array<string> | { [key: string]: string }
-  handleInputClick: (key: string) => void
-  handleInputChange: (key: string, value: any) => void
-  errors: { [key: string]: string | null }
-}
+  keyName: string;
+  schema: any;
+  parentKey?: string;
+  value: string | Array<string> | { [key: string]: string };
+  handleInputClick: (key: string) => void;
+  handleInputChange: (key: string, value: any) => void;
+  errors: { [key: string]: string | null };
+};
 
-const NodeInputField: FC<BlockInputFieldProps> =
-  ({ keyName: key, schema, parentKey = '', value, handleInputClick, handleInputChange, errors }) => {
-    const [newKey, setNewKey] = useState<string>('');
-    const [newValue, setNewValue] = useState<string>('');
-    const [keyValuePairs, setKeyValuePairs] = useState<{ key: string, value: string }[]>([]);
+const NodeInputField: FC<BlockInputFieldProps> = ({
+  keyName: key,
+  schema,
+  parentKey = '',
+  value,
+  handleInputClick,
+  handleInputChange,
+  errors,
+}) => {
+  const [newKey, setNewKey] = useState<string>('');
+  const [newValue, setNewValue] = useState<string>('');
+  const [keyValuePairs, setKeyValuePairs] = useState<
+    { key: string; value: string }[]
+  >([]);
 
-    const fullKey = parentKey ? `${parentKey}.${key}` : key;
-    const error = errors[fullKey];
-    const displayKey = schema.title || beautifyString(key);
+  const fullKey = parentKey ? `${parentKey}.${key}` : key;
+  const error = errors[fullKey];
+  const displayKey = schema.title || beautifyString(key);
 
-    const handleAddProperty = () => {
-      if (newKey && newValue) {
-        const newPairs = [...keyValuePairs, { key: newKey, value: newValue }];
-        setKeyValuePairs(newPairs);
-        setNewKey('');
-        setNewValue('');
-        const expectedFormat = newPairs.reduce((acc, pair) => ({ ...acc, [pair.key]: pair.value }), {});
-        handleInputChange('expected_format', expectedFormat);
-      }
-    };
+  const handleAddProperty = () => {
+    if (newKey && newValue) {
+      const newPairs = [...keyValuePairs, { key: newKey, value: newValue }];
+      setKeyValuePairs(newPairs);
+      setNewKey('');
+      setNewValue('');
+      const expectedFormat = newPairs.reduce(
+        (acc, pair) => ({ ...acc, [pair.key]: pair.value }),
+        {}
+      );
+      handleInputChange('expected_format', expectedFormat);
+    }
+  };
 
-    const renderClickableInput = (value: string | null = null, placeholder: string = "", secret: boolean = false) => {
+  const renderClickableInput = (
+    value: string | null = null,
+    placeholder: string = '',
+    secret: boolean = false
+  ) => {
+    // if secret is true, then the input field will be a password field if the value is not null
+    return secret ? (
+      <div
+        className="clickable-input"
+        onClick={() => handleInputClick(fullKey)}
+      >
+        {value ? (
+          <i className="text-gray-500">********</i>
+        ) : (
+          <i className="text-gray-500">{placeholder}</i>
+        )}
+      </div>
+    ) : (
+      <div
+        className="clickable-input"
+        onClick={() => handleInputClick(fullKey)}
+      >
+        {value || <i className="text-gray-500">{placeholder}</i>}
+      </div>
+    );
+  };
 
-      // if secret is true, then the input field will be a password field if the value is not null
-      return secret ? (
-        <div className="clickable-input" onClick={() => handleInputClick(fullKey)}>
-          {value ? <i className="text-gray-500">********</i> : <i className="text-gray-500">{placeholder}</i>}
-        </div>
-      ) : (
-        <div className="clickable-input" onClick={() => handleInputClick(fullKey)}>
-          {value || <i className="text-gray-500">{placeholder}</i>}
-        </div>
-      )
-    };
-
-    if (schema.type === 'object' && schema.properties) {
-      return (
-        <div key={fullKey} className="object-input">
-          <strong>{displayKey}:</strong>
-          {Object.entries(schema.properties).map(([propKey, propSchema]: [string, any]) => (
+  if (schema.type === 'object' && schema.properties) {
+    return (
+      <div key={fullKey} className="object-input">
+        <strong>{displayKey}:</strong>
+        {Object.entries(schema.properties).map(
+          ([propKey, propSchema]: [string, any]) => (
             <div key={`${fullKey}.${propKey}`} className="nested-input">
               <NodeInputField
                 keyName={propKey}
@@ -64,232 +90,281 @@ const NodeInputField: FC<BlockInputFieldProps> =
                 errors={errors}
               />
             </div>
-          ))}
-        </div>
-      );
-    }
+          )
+        )}
+      </div>
+    );
+  }
 
-    if (schema.type === 'object' && schema.additionalProperties) {
-      const objectValue = value || {};
-      return (
-        <div key={fullKey} className="object-input">
-          <strong>{displayKey}:</strong>
-          {Object.entries(objectValue).map(([propKey, propValue]: [string, any]) => (
+  if (schema.type === 'object' && schema.additionalProperties) {
+    const objectValue = value || {};
+    return (
+      <div key={fullKey} className="object-input">
+        <strong>{displayKey}:</strong>
+        {Object.entries(objectValue).map(
+          ([propKey, propValue]: [string, any]) => (
             <div key={`${fullKey}.${propKey}`} className="nested-input">
-              <div className="clickable-input" onClick={() => handleInputClick(`${fullKey}.${propKey}`)}>
-                {beautifyString(propKey)}: {typeof propValue === 'object' ? JSON.stringify(propValue, null, 2) : propValue}
+              <div
+                className="clickable-input"
+                onClick={() => handleInputClick(`${fullKey}.${propKey}`)}
+              >
+                {beautifyString(propKey)}:{' '}
+                {typeof propValue === 'object'
+                  ? JSON.stringify(propValue, null, 2)
+                  : propValue}
               </div>
-              <Button onClick={() => handleInputChange(`${fullKey}.${propKey}`, undefined)} className="array-item-remove">
+              <Button
+                onClick={() =>
+                  handleInputChange(`${fullKey}.${propKey}`, undefined)
+                }
+                className="array-item-remove"
+              >
                 &times;
               </Button>
             </div>
-          ))}
-          {key === 'expected_format' && (
-            <div className="nested-input">
-              {keyValuePairs.map((pair, index) => (
-                <div key={index} className="key-value-input">
-                  <Input
-                    type="text"
-                    placeholder="Key"
-                    value={beautifyString(pair.key)}
-                    onChange={(e) => {
-                      const newPairs = [...keyValuePairs];
-                      newPairs[index].key = e.target.value;
-                      setKeyValuePairs(newPairs);
-                      const expectedFormat = newPairs.reduce((acc, pair) => ({ ...acc, [pair.key]: pair.value }), {});
-                      handleInputChange('expected_format', expectedFormat);
-                    }}
-                  />
-                  <Input
-                    type="text"
-                    placeholder="Value"
-                    value={beautifyString(pair.value)}
-                    onChange={(e) => {
-                      const newPairs = [...keyValuePairs];
-                      newPairs[index].value = e.target.value;
-                      setKeyValuePairs(newPairs);
-                      const expectedFormat = newPairs.reduce((acc, pair) => ({ ...acc, [pair.key]: pair.value }), {});
-                      handleInputChange('expected_format', expectedFormat);
-                    }}
-                  />
-                </div>
-              ))}
-              <div className="key-value-input">
+          )
+        )}
+        {key === 'expected_format' && (
+          <div className="nested-input">
+            {keyValuePairs.map((pair, index) => (
+              <div key={index} className="key-value-input">
                 <Input
                   type="text"
                   placeholder="Key"
-                  value={newKey}
-                  onChange={(e) => setNewKey(e.target.value)}
+                  value={beautifyString(pair.key)}
+                  onChange={(e) => {
+                    const newPairs = [...keyValuePairs];
+                    newPairs[index].key = e.target.value;
+                    setKeyValuePairs(newPairs);
+                    const expectedFormat = newPairs.reduce(
+                      (acc, pair) => ({ ...acc, [pair.key]: pair.value }),
+                      {}
+                    );
+                    handleInputChange('expected_format', expectedFormat);
+                  }}
                 />
                 <Input
                   type="text"
                   placeholder="Value"
-                  value={newValue}
-                  onChange={(e) => setNewValue(e.target.value)}
+                  value={beautifyString(pair.value)}
+                  onChange={(e) => {
+                    const newPairs = [...keyValuePairs];
+                    newPairs[index].value = e.target.value;
+                    setKeyValuePairs(newPairs);
+                    const expectedFormat = newPairs.reduce(
+                      (acc, pair) => ({ ...acc, [pair.key]: pair.value }),
+                      {}
+                    );
+                    handleInputChange('expected_format', expectedFormat);
+                  }}
                 />
               </div>
-              <Button onClick={handleAddProperty}>Add Property</Button>
-            </div>
-          )}
-          {error && <span className="error-message">{error}</span>}
-        </div>
-      );
-    }
-
-    if (schema.anyOf) {
-      const types = schema.anyOf.map((s: any) => s.type);
-      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 (schema.allOf) {
-      return (
-        <div key={fullKey} className="object-input">
-          <strong>{displayKey}:</strong>
-          {schema.allOf[0].properties && Object.entries(schema.allOf[0].properties).map(([propKey, propSchema]: [string, any]) => (
-            <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 className="key-value-input">
+              <Input
+                type="text"
+                placeholder="Key"
+                value={newKey}
+                onChange={(e) => setNewKey(e.target.value)}
+              />
+              <Input
+                type="text"
+                placeholder="Value"
+                value={newValue}
+                onChange={(e) => setNewValue(e.target.value)}
               />
             </div>
-          ))}
-        </div>
-      );
-    }
+            <Button onClick={handleAddProperty}>Add Property</Button>
+          </div>
+        )}
+        {error && <span className="error-message">{error}</span>}
+      </div>
+    );
+  }
 
-    if (schema.oneOf) {
+  if (schema.anyOf) {
+    const types = schema.anyOf.map((s: any) => s.type);
+    if (types.includes('string') && types.includes('null')) {
       return (
-        <div key={fullKey} className="object-input">
-          <strong>{displayKey}:</strong>
-          {schema.oneOf[0].properties && Object.entries(schema.oneOf[0].properties).map(([propKey, propSchema]: [string, any]) => (
-            <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 key={fullKey} className="input-container">
+          {renderClickableInput(
+            value as string,
+            schema.placeholder || `Enter ${displayKey} (optional)`
+          )}
+          {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.allOf) {
+    return (
+      <div key={fullKey} className="object-input">
+        <strong>{displayKey}:</strong>
+        {schema.allOf[0].properties &&
+          Object.entries(schema.allOf[0].properties).map(
+            ([propKey, propSchema]: [string, any]) => (
+              <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>
+    );
+  }
 
-        else 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>)
+  if (schema.oneOf) {
+    return (
+      <div key={fullKey} className="object-input">
+        <strong>{displayKey}:</strong>
+        {schema.oneOf[0].properties &&
+          Object.entries(schema.oneOf[0].properties).map(
+            ([propKey, propSchema]: [string, any]) => (
+              <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>
+    );
+  }
 
-        }
-        else {
-          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':
+  switch (schema.type) {
+    case 'string':
+      if (schema.enum) {
         return (
           <div key={fullKey} className="input-container">
             <select
-              value={value === undefined ? '' : value.toString()}
-              onChange={(e) => handleInputChange(fullKey, e.target.value === 'true')}
+              value={(value as string) || ''}
+              onChange={(e) => handleInputChange(fullKey, e.target.value)}
               className="select-input"
             >
               <option value="">Select {displayKey}</option>
-              <option value="true">True</option>
-              <option value="false">False</option>
+              {schema.enum.map((option: string) => (
+                <option key={option} value={option}>
+                  {beautifyString(option)}
+                </option>
+              ))}
             </select>
             {error && <span className="error-message">{error}</span>}
           </div>
         );
-      case 'number':
-      case 'integer':
+      } else if (schema.secret) {
         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"
-            />
+            {renderClickableInput(
+              value as string,
+              schema.placeholder || `Enter ${displayKey}`,
+              true
+            )}
             {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">{error}</span>}
-            </div>
-          );
-        }
-        return null;
-      default:
+      } else {
         return (
           <div key={fullKey} className="input-container">
-            {renderClickableInput(value as string, schema.placeholder || `Enter ${beautifyString(displayKey)} (Complex)`)}
+            {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 && <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">{error}</span>}
+          </div>
+        );
+      }
+      return null;
+    default:
+      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;
diff --git a/rnd/autogpt_builder/src/components/OutputModalComponent.tsx b/rnd/autogpt_builder/src/components/OutputModalComponent.tsx
index 3c6bcae4a57b..56f25bbd7ef2 100644
--- a/rnd/autogpt_builder/src/components/OutputModalComponent.tsx
+++ b/rnd/autogpt_builder/src/components/OutputModalComponent.tsx
@@ -9,7 +9,11 @@ interface OutputModalProps {
   value: string;
 }
 
-const OutputModalComponent: FC<OutputModalProps> = ({ isOpen, onClose, value }) => {
+const OutputModalComponent: FC<OutputModalProps> = ({
+  isOpen,
+  onClose,
+  value,
+}) => {
   const [tempValue, setTempValue] = React.useState(value);
 
   useEffect(() => {
@@ -25,7 +29,9 @@ const OutputModalComponent: FC<OutputModalProps> = ({ isOpen, onClose, value })
   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>
+        <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}
diff --git a/rnd/autogpt_builder/src/components/SchemaTooltip.tsx b/rnd/autogpt_builder/src/components/SchemaTooltip.tsx
index 87cd8c225d2d..6250368649c1 100644
--- a/rnd/autogpt_builder/src/components/SchemaTooltip.tsx
+++ b/rnd/autogpt_builder/src/components/SchemaTooltip.tsx
@@ -3,8 +3,8 @@ import {
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
-} from "@/components/ui/tooltip"
-import { BlockSchema } from "@/lib/types";
+} from '@/components/ui/tooltip';
+import { BlockSchema } from '@/lib/types';
 import { Info } from 'lucide-react';
 import ReactMarkdown from 'react-markdown';
 
@@ -18,13 +18,19 @@ const SchemaTooltip: React.FC<{ schema: BlockSchema }> = ({ schema }) => {
           <Info className="p-1 rounded-full 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>
+          <ReactMarkdown
+            components={{
+              a: ({ node, ...props }) => (
+                <a className="text-blue-400 underline" {...props} />
+              ),
+            }}
+          >
+            {schema.description}
+          </ReactMarkdown>
         </TooltipContent>
       </Tooltip>
     </TooltipProvider>
-  )
-}
+  );
+};
 
 export default SchemaTooltip;
diff --git a/rnd/autogpt_builder/src/components/agent-import-form.tsx b/rnd/autogpt_builder/src/components/agent-import-form.tsx
index 8e5c60221d9f..71b54e51cb65 100644
--- a/rnd/autogpt_builder/src/components/agent-import-form.tsx
+++ b/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,42 +9,44 @@ 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';
 
 const formSchema = z.object({
   agentFile: z.instanceof(File),
-  agentName: z.string().min(1, "Agent name is required"),
+  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),
     defaultValues: {
-      agentName: "",
-      agentDescription: "",
+      agentName: '',
+      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,22 +56,27 @@ 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";
+        const qID = values.importAsTemplate ? 'templateID' : 'flowID';
         window.location.href = `/build?${qID}=${response.id}`;
       })
-      .catch(error => {
+      .catch((error) => {
         const entity_type = values.importAsTemplate ? 'template' : 'agent';
-        form.setError("root", { message: `Could not create ${entity_type}: ${error}` });
-      })
+        form.setError('root', {
+          message: `Could not create ${entity_type}: ${error}`,
+        });
+      });
   }
 
   return (
     <Form {...form}>
       <form
         onSubmit={form.handleSubmit(onSubmit)}
-        className={cn("space-y-4", className)}
+        className={cn('space-y-4', className)}
         {...props}
       >
         <FormField
@@ -85,7 +92,7 @@ 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) => {
@@ -94,21 +101,22 @@ export const AgentImportForm: React.FC<React.FormHTMLAttributes<HTMLFormElement>
                             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;
                           setAgentObject(agent);
-                          form.setValue("agentName", agent.name);
-                          form.setValue("agentDescription", agent.description);
-                          form.setValue("importAsTemplate", agent.is_template);
+                          form.setValue('agentName', agent.name);
+                          form.setValue('agentDescription', agent.description);
+                          form.setValue('importAsTemplate', agent.is_template);
                         } catch (error) {
-                          console.error("Error loading agent file:", error);
+                          console.error('Error loading agent file:', error);
                         }
                       };
                       // Load file
@@ -158,13 +166,25 @@ export const AgentImportForm: React.FC<React.FormHTMLAttributes<HTMLFormElement>
               <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>
+                  <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 +196,5 @@ export const AgentImportForm: React.FC<React.FormHTMLAttributes<HTMLFormElement>
         </Button>
       </form>
     </Form>
-  )
-}
+  );
+};
diff --git a/rnd/autogpt_builder/src/components/flow.css b/rnd/autogpt_builder/src/components/flow.css
index de725f5f0abc..72f5b52f6db9 100644
--- a/rnd/autogpt_builder/src/components/flow.css
+++ b/rnd/autogpt_builder/src/components/flow.css
@@ -30,7 +30,8 @@ button:hover {
   background-color: #666;
 }
 
-input, textarea {
+input,
+textarea {
   background-color: #ffffff;
   color: #000000;
   border: 1px solid #555;
@@ -41,7 +42,8 @@ input, textarea {
   margin-top: 5px;
 }
 
-input::placeholder, textarea::placeholder {
+input::placeholder,
+textarea::placeholder {
   color: #aaa;
 }
 
diff --git a/rnd/autogpt_builder/src/components/ui/avatar.tsx b/rnd/autogpt_builder/src/components/ui/avatar.tsx
index 75a6e3f8e5ed..afb7c8a38f69 100644
--- a/rnd/autogpt_builder/src/components/ui/avatar.tsx
+++ b/rnd/autogpt_builder/src/components/ui/avatar.tsx
@@ -1,9 +1,9 @@
-"use client"
+'use client';
 
-import * as React from "react"
-import * as AvatarPrimitive from "@radix-ui/react-avatar"
+import * as React from 'react';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils';
 
 const Avatar = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Root>,
@@ -12,13 +12,13 @@ const Avatar = React.forwardRef<
   <AvatarPrimitive.Root
     ref={ref}
     className={cn(
-      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      'relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full',
       className
     )}
     {...props}
   />
-))
-Avatar.displayName = AvatarPrimitive.Root.displayName
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
 
 const AvatarImage = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Image>,
@@ -26,11 +26,11 @@ const AvatarImage = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AvatarPrimitive.Image
     ref={ref}
-    className={cn("aspect-square h-full w-full", className)}
+    className={cn('aspect-square h-full w-full', className)}
     {...props}
   />
-))
-AvatarImage.displayName = AvatarPrimitive.Image.displayName
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
 
 const AvatarFallback = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Fallback>,
@@ -39,12 +39,12 @@ const AvatarFallback = React.forwardRef<
   <AvatarPrimitive.Fallback
     ref={ref}
     className={cn(
-      "flex h-full w-full items-center justify-center rounded-full bg-neutral-100 dark:bg-neutral-800",
+      'flex h-full w-full items-center justify-center rounded-full bg-neutral-100 dark:bg-neutral-800',
       className
     )}
     {...props}
   />
-))
-AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
 
-export { Avatar, AvatarImage, AvatarFallback }
+export { Avatar, AvatarImage, AvatarFallback };
diff --git a/rnd/autogpt_builder/src/components/ui/badge.tsx b/rnd/autogpt_builder/src/components/ui/badge.tsx
index a73999b6ad9f..fa1e4f8e9157 100644
--- a/rnd/autogpt_builder/src/components/ui/badge.tsx
+++ b/rnd/autogpt_builder/src/components/ui/badge.tsx
@@ -1,27 +1,27 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils';
 
 const badgeVariants = cva(
-  "inline-flex items-center rounded-md border border-neutral-200 px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-neutral-950 focus:ring-offset-2 dark:border-neutral-800 dark:focus:ring-neutral-300 cursor-default",
+  'inline-flex items-center rounded-md border border-neutral-200 px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-neutral-950 focus:ring-offset-2 dark:border-neutral-800 dark:focus:ring-neutral-300 cursor-default',
   {
     variants: {
       variant: {
         default:
-          "border-transparent bg-neutral-900 text-neutral-50 shadow dark:bg-neutral-50 dark:text-neutral-900",
+          'border-transparent bg-neutral-900 text-neutral-50 shadow dark:bg-neutral-50 dark:text-neutral-900',
         secondary:
-          "border-transparent bg-neutral-100 text-neutral-900 dark:bg-neutral-800 dark:text-neutral-50",
+          'border-transparent bg-neutral-100 text-neutral-900 dark:bg-neutral-800 dark:text-neutral-50',
         destructive:
-          "border-transparent bg-red-500 text-neutral-50 shadow dark:bg-red-900 dark:text-neutral-50",
-        outline: "text-neutral-950 dark:text-neutral-50",
+          'border-transparent bg-red-500 text-neutral-50 shadow dark:bg-red-900 dark:text-neutral-50',
+        outline: 'text-neutral-950 dark:text-neutral-50',
       },
     },
     defaultVariants: {
-      variant: "default",
+      variant: 'default',
     },
   }
-)
+);
 
 export interface BadgeProps
   extends React.HTMLAttributes<HTMLDivElement>,
@@ -30,7 +30,7 @@ export interface BadgeProps
 function Badge({ className, variant, ...props }: BadgeProps) {
   return (
     <div className={cn(badgeVariants({ variant }), className)} {...props} />
-  )
+  );
 }
 
-export { Badge, badgeVariants }
+export { Badge, badgeVariants };
diff --git a/rnd/autogpt_builder/src/components/ui/button.tsx b/rnd/autogpt_builder/src/components/ui/button.tsx
index fd9027ababfd..80ffff3a7b2d 100644
--- a/rnd/autogpt_builder/src/components/ui/button.tsx
+++ b/rnd/autogpt_builder/src/components/ui/button.tsx
@@ -1,57 +1,58 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils';
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-gray-950 disabled:pointer-events-none disabled:opacity-50 dark:focus-visible:ring-gray-300",
+  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-gray-950 disabled:pointer-events-none disabled:opacity-50 dark:focus-visible:ring-gray-300',
   {
     variants: {
       variant: {
         default:
-          "bg-gray-900 text-gray-50 shadow hover:bg-gray-900/90 dark:bg-gray-50 dark:text-gray-900 dark:hover:bg-gray-50/90",
+          'bg-gray-900 text-gray-50 shadow hover:bg-gray-900/90 dark:bg-gray-50 dark:text-gray-900 dark:hover:bg-gray-50/90',
         destructive:
-          "bg-red-500 text-gray-50 shadow-sm hover:bg-red-500/90 dark:bg-red-900 dark:text-gray-50 dark:hover:bg-red-900/90",
+          'bg-red-500 text-gray-50 shadow-sm hover:bg-red-500/90 dark:bg-red-900 dark:text-gray-50 dark:hover:bg-red-900/90',
         outline:
-          "border border-gray-200 bg-white shadow-sm hover:bg-gray-100 hover:text-gray-900 dark:border-gray-800 dark:bg-gray-950 dark:hover:bg-gray-800 dark:hover:text-gray-50",
+          'border border-gray-200 bg-white shadow-sm hover:bg-gray-100 hover:text-gray-900 dark:border-gray-800 dark:bg-gray-950 dark:hover:bg-gray-800 dark:hover:text-gray-50',
         secondary:
-          "bg-gray-100 text-gray-900 shadow-sm hover:bg-gray-100/80 dark:bg-gray-800 dark:text-gray-50 dark:hover:bg-gray-800/80",
-        ghost: "hover:bg-gray-100 hover:text-gray-900 dark:hover:bg-gray-800 dark:hover:text-gray-50 dark:text-white",
-        link: "text-gray-900 underline-offset-4 hover:underline dark:text-gray-50",
+          'bg-gray-100 text-gray-900 shadow-sm hover:bg-gray-100/80 dark:bg-gray-800 dark:text-gray-50 dark:hover:bg-gray-800/80',
+        ghost:
+          'hover:bg-gray-100 hover:text-gray-900 dark:hover:bg-gray-800 dark:hover:text-gray-50 dark:text-white',
+        link: 'text-gray-900 underline-offset-4 hover:underline dark:text-gray-50',
       },
       size: {
-        default: "h-9 px-4 py-2",
-        sm: "h-8 rounded-md px-3 text-xs",
-        lg: "h-10 rounded-md px-8",
-        icon: "h-9 w-9",
+        default: 'h-9 px-4 py-2',
+        sm: 'h-8 rounded-md px-3 text-xs',
+        lg: 'h-10 rounded-md px-8',
+        icon: 'h-9 w-9',
       },
     },
     defaultVariants: {
-      variant: "default",
-      size: "default",
+      variant: 'default',
+      size: 'default',
     },
   }
-)
+);
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
-  asChild?: boolean
+  asChild?: boolean;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button"
+    const Comp = asChild ? Slot : 'button';
     return (
       <Comp
         className={cn(buttonVariants({ variant, size, className }))}
         ref={ref}
         {...props}
       />
-    )
+    );
   }
-)
-Button.displayName = "Button"
+);
+Button.displayName = 'Button';
 
-export { Button, buttonVariants }
+export { Button, buttonVariants };
diff --git a/rnd/autogpt_builder/src/components/ui/calendar.tsx b/rnd/autogpt_builder/src/components/ui/calendar.tsx
index 6e1396dc1044..1f22c5b81494 100644
--- a/rnd/autogpt_builder/src/components/ui/calendar.tsx
+++ b/rnd/autogpt_builder/src/components/ui/calendar.tsx
@@ -1,13 +1,13 @@
-"use client"
+'use client';
 
-import * as React from "react"
-import { ChevronLeftIcon, ChevronRightIcon } from "@radix-ui/react-icons"
-import { DayPicker } from "react-day-picker"
+import * as React from 'react';
+import { ChevronLeftIcon, ChevronRightIcon } from '@radix-ui/react-icons';
+import { DayPicker } from 'react-day-picker';
 
-import { cn } from "@/lib/utils"
-import { buttonVariants } from "@/components/ui/button"
+import { cn } from '@/lib/utils';
+import { buttonVariants } from '@/components/ui/button';
 
-export type CalendarProps = React.ComponentProps<typeof DayPicker>
+export type CalendarProps = React.ComponentProps<typeof DayPicker>;
 
 function Calendar({
   className,
@@ -18,45 +18,46 @@ function Calendar({
   return (
     <DayPicker
       showOutsideDays={showOutsideDays}
-      className={cn("p-3", className)}
+      className={cn('p-3', className)}
       classNames={{
-        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
-        month: "space-y-4",
-        caption: "flex justify-center pt-1 relative items-center",
-        caption_label: "text-sm font-medium",
-        nav: "space-x-1 flex items-center",
+        months: 'flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0',
+        month: 'space-y-4',
+        caption: 'flex justify-center pt-1 relative items-center',
+        caption_label: 'text-sm font-medium',
+        nav: 'space-x-1 flex items-center',
         nav_button: cn(
-          buttonVariants({ variant: "outline" }),
-          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+          buttonVariants({ variant: 'outline' }),
+          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100'
         ),
-        nav_button_previous: "absolute left-1",
-        nav_button_next: "absolute right-1",
-        table: "w-full border-collapse space-y-1",
-        head_row: "flex",
+        nav_button_previous: 'absolute left-1',
+        nav_button_next: 'absolute right-1',
+        table: 'w-full border-collapse space-y-1',
+        head_row: 'flex',
         head_cell:
-          "text-neutral-500 rounded-md w-8 font-normal text-[0.8rem] dark:text-neutral-400",
-        row: "flex w-full mt-2",
+          'text-neutral-500 rounded-md w-8 font-normal text-[0.8rem] dark:text-neutral-400',
+        row: 'flex w-full mt-2',
         cell: cn(
-          "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-neutral-100 [&:has([aria-selected].day-outside)]:bg-neutral-100/50 [&:has([aria-selected].day-range-end)]:rounded-r-md dark:[&:has([aria-selected])]:bg-neutral-800 dark:[&:has([aria-selected].day-outside)]:bg-neutral-800/50",
-          props.mode === "range"
-            ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
-            : "[&:has([aria-selected])]:rounded-md"
+          'relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-neutral-100 [&:has([aria-selected].day-outside)]:bg-neutral-100/50 [&:has([aria-selected].day-range-end)]:rounded-r-md dark:[&:has([aria-selected])]:bg-neutral-800 dark:[&:has([aria-selected].day-outside)]:bg-neutral-800/50',
+          props.mode === 'range'
+            ? '[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md'
+            : '[&:has([aria-selected])]:rounded-md'
         ),
         day: cn(
-          buttonVariants({ variant: "ghost" }),
-          "h-8 w-8 p-0 font-normal aria-selected:opacity-100"
+          buttonVariants({ variant: 'ghost' }),
+          'h-8 w-8 p-0 font-normal aria-selected:opacity-100'
         ),
-        day_range_start: "day-range-start",
-        day_range_end: "day-range-end",
+        day_range_start: 'day-range-start',
+        day_range_end: 'day-range-end',
         day_selected:
-          "bg-neutral-900 text-neutral-50 hover:bg-neutral-900 hover:text-neutral-50 focus:bg-neutral-900 focus:text-neutral-50 dark:bg-neutral-50 dark:text-neutral-900 dark:hover:bg-neutral-50 dark:hover:text-neutral-900 dark:focus:bg-neutral-50 dark:focus:text-neutral-900",
-        day_today: "bg-neutral-100 text-neutral-900 dark:bg-neutral-800 dark:text-neutral-50",
+          'bg-neutral-900 text-neutral-50 hover:bg-neutral-900 hover:text-neutral-50 focus:bg-neutral-900 focus:text-neutral-50 dark:bg-neutral-50 dark:text-neutral-900 dark:hover:bg-neutral-50 dark:hover:text-neutral-900 dark:focus:bg-neutral-50 dark:focus:text-neutral-900',
+        day_today:
+          'bg-neutral-100 text-neutral-900 dark:bg-neutral-800 dark:text-neutral-50',
         day_outside:
-          "day-outside text-neutral-500 opacity-50  aria-selected:bg-neutral-100/50 aria-selected:text-neutral-500 aria-selected:opacity-30 dark:text-neutral-400 dark:aria-selected:bg-neutral-800/50 dark:aria-selected:text-neutral-400",
-        day_disabled: "text-neutral-500 opacity-50 dark:text-neutral-400",
+          'day-outside text-neutral-500 opacity-50  aria-selected:bg-neutral-100/50 aria-selected:text-neutral-500 aria-selected:opacity-30 dark:text-neutral-400 dark:aria-selected:bg-neutral-800/50 dark:aria-selected:text-neutral-400',
+        day_disabled: 'text-neutral-500 opacity-50 dark:text-neutral-400',
         day_range_middle:
-          "aria-selected:bg-neutral-100 aria-selected:text-neutral-900 dark:aria-selected:bg-neutral-800 dark:aria-selected:text-neutral-50",
-        day_hidden: "invisible",
+          'aria-selected:bg-neutral-100 aria-selected:text-neutral-900 dark:aria-selected:bg-neutral-800 dark:aria-selected:text-neutral-50',
+        day_hidden: 'invisible',
         ...classNames,
       }}
       components={{
@@ -65,8 +66,8 @@ function Calendar({
       }}
       {...props}
     />
-  )
+  );
 }
-Calendar.displayName = "Calendar"
+Calendar.displayName = 'Calendar';
 
-export { Calendar }
+export { Calendar };
diff --git a/rnd/autogpt_builder/src/components/ui/card.tsx b/rnd/autogpt_builder/src/components/ui/card.tsx
index abf239fffc58..13bf49a2acaa 100644
--- a/rnd/autogpt_builder/src/components/ui/card.tsx
+++ b/rnd/autogpt_builder/src/components/ui/card.tsx
@@ -1,6 +1,6 @@
-import * as React from "react"
+import * as React from 'react';
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils';
 
 const Card = React.forwardRef<
   HTMLDivElement,
@@ -9,13 +9,13 @@ const Card = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "rounded-xl border border-neutral-200 bg-white text-neutral-950 shadow dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
+      'rounded-xl border border-neutral-200 bg-white text-neutral-950 shadow dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50',
       className
     )}
     {...props}
   />
-))
-Card.displayName = "Card"
+));
+Card.displayName = 'Card';
 
 const CardHeader = React.forwardRef<
   HTMLDivElement,
@@ -23,11 +23,11 @@ const CardHeader = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    className={cn('flex flex-col space-y-1.5 p-6', className)}
     {...props}
   />
-))
-CardHeader.displayName = "CardHeader"
+));
+CardHeader.displayName = 'CardHeader';
 
 const CardTitle = React.forwardRef<
   HTMLParagraphElement,
@@ -35,11 +35,11 @@ const CardTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <h3
     ref={ref}
-    className={cn("font-semibold leading-none tracking-tight", className)}
+    className={cn('font-semibold leading-none tracking-tight', className)}
     {...props}
   />
-))
-CardTitle.displayName = "CardTitle"
+));
+CardTitle.displayName = 'CardTitle';
 
 const CardDescription = React.forwardRef<
   HTMLParagraphElement,
@@ -47,19 +47,19 @@ const CardDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <p
     ref={ref}
-    className={cn("text-sm text-neutral-500 dark:text-neutral-400", className)}
+    className={cn('text-sm text-neutral-500 dark:text-neutral-400', className)}
     {...props}
   />
-))
-CardDescription.displayName = "CardDescription"
+));
+CardDescription.displayName = 'CardDescription';
 
 const CardContent = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
-))
-CardContent.displayName = "CardContent"
+  <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
+));
+CardContent.displayName = 'CardContent';
 
 const CardFooter = React.forwardRef<
   HTMLDivElement,
@@ -67,10 +67,17 @@ const CardFooter = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("flex items-center p-6 pt-0", className)}
+    className={cn('flex items-center p-6 pt-0', className)}
     {...props}
   />
-))
-CardFooter.displayName = "CardFooter"
+));
+CardFooter.displayName = 'CardFooter';
 
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+};
diff --git a/rnd/autogpt_builder/src/components/ui/dialog.tsx b/rnd/autogpt_builder/src/components/ui/dialog.tsx
index eca43bfe16d7..856d5994b734 100644
--- a/rnd/autogpt_builder/src/components/ui/dialog.tsx
+++ b/rnd/autogpt_builder/src/components/ui/dialog.tsx
@@ -1,18 +1,18 @@
-"use client"
+'use client';
 
-import * as React from "react"
-import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { Cross2Icon } from "@radix-ui/react-icons"
+import * as React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { Cross2Icon } from '@radix-ui/react-icons';
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils';
 
-const Dialog = DialogPrimitive.Root
+const Dialog = DialogPrimitive.Root;
 
-const DialogTrigger = DialogPrimitive.Trigger
+const DialogTrigger = DialogPrimitive.Trigger;
 
-const DialogPortal = DialogPrimitive.Portal
+const DialogPortal = DialogPrimitive.Portal;
 
-const DialogClose = DialogPrimitive.Close
+const DialogClose = DialogPrimitive.Close;
 
 const DialogOverlay = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Overlay>,
@@ -21,13 +21,13 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      'fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
       className
     )}
     {...props}
   />
-))
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
@@ -38,7 +38,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-neutral-200 bg-white p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg dark:border-neutral-800 dark:bg-neutral-950",
+        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-neutral-200 bg-white p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg dark:border-neutral-800 dark:bg-neutral-950',
         className
       )}
       {...props}
@@ -50,8 +50,8 @@ const DialogContent = React.forwardRef<
       </DialogPrimitive.Close>
     </DialogPrimitive.Content>
   </DialogPortal>
-))
-DialogContent.displayName = DialogPrimitive.Content.displayName
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
 
 const DialogHeader = ({
   className,
@@ -59,13 +59,13 @@ const DialogHeader = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      "flex flex-col space-y-1.5 text-center sm:text-left",
+      'flex flex-col space-y-1.5 text-center sm:text-left',
       className
     )}
     {...props}
   />
-)
-DialogHeader.displayName = "DialogHeader"
+);
+DialogHeader.displayName = 'DialogHeader';
 
 const DialogFooter = ({
   className,
@@ -73,13 +73,13 @@ const DialogFooter = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
       className
     )}
     {...props}
   />
-)
-DialogFooter.displayName = "DialogFooter"
+);
+DialogFooter.displayName = 'DialogFooter';
 
 const DialogTitle = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Title>,
@@ -88,13 +88,13 @@ const DialogTitle = React.forwardRef<
   <DialogPrimitive.Title
     ref={ref}
     className={cn(
-      "text-lg font-semibold leading-none tracking-tight",
+      'text-lg font-semibold leading-none tracking-tight',
       className
     )}
     {...props}
   />
-))
-DialogTitle.displayName = DialogPrimitive.Title.displayName
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
 
 const DialogDescription = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Description>,
@@ -102,11 +102,11 @@ const DialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Description
     ref={ref}
-    className={cn("text-sm text-neutral-500 dark:text-neutral-400", className)}
+    className={cn('text-sm text-neutral-500 dark:text-neutral-400', className)}
     {...props}
   />
-))
-DialogDescription.displayName = DialogPrimitive.Description.displayName
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 export {
   Dialog,
@@ -119,4 +119,4 @@ export {
   DialogFooter,
   DialogTitle,
   DialogDescription,
-}
+};
diff --git a/rnd/autogpt_builder/src/components/ui/dropdown-menu.tsx b/rnd/autogpt_builder/src/components/ui/dropdown-menu.tsx
index 4681fc0ff900..f1728fd6c6a5 100644
--- a/rnd/autogpt_builder/src/components/ui/dropdown-menu.tsx
+++ b/rnd/autogpt_builder/src/components/ui/dropdown-menu.tsx
@@ -1,38 +1,38 @@
-"use client"
+'use client';
 
-import * as React from "react"
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import * as React from 'react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import {
   CheckIcon,
   ChevronRightIcon,
   DotFilledIcon,
-} from "@radix-ui/react-icons"
+} from '@radix-ui/react-icons';
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils';
 
-const DropdownMenu = DropdownMenuPrimitive.Root
+const DropdownMenu = DropdownMenuPrimitive.Root;
 
-const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
 
-const DropdownMenuGroup = DropdownMenuPrimitive.Group
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
 
-const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
 
-const DropdownMenuSub = DropdownMenuPrimitive.Sub
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
 
-const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
 
 const DropdownMenuSubTrigger = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
-    inset?: boolean
+    inset?: boolean;
   }
 >(({ className, inset, children, ...props }, ref) => (
   <DropdownMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-neutral-100 data-[state=open]:bg-neutral-100 dark:focus:bg-neutral-800 dark:data-[state=open]:bg-neutral-800",
-      inset && "pl-8",
+      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-neutral-100 data-[state=open]:bg-neutral-100 dark:focus:bg-neutral-800 dark:data-[state=open]:bg-neutral-800',
+      inset && 'pl-8',
       className
     )}
     {...props}
@@ -40,9 +40,9 @@ const DropdownMenuSubTrigger = React.forwardRef<
     {children}
     <ChevronRightIcon className="ml-auto h-4 w-4" />
   </DropdownMenuPrimitive.SubTrigger>
-))
+));
 DropdownMenuSubTrigger.displayName =
-  DropdownMenuPrimitive.SubTrigger.displayName
+  DropdownMenuPrimitive.SubTrigger.displayName;
 
 const DropdownMenuSubContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
@@ -51,14 +51,14 @@ const DropdownMenuSubContent = React.forwardRef<
   <DropdownMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border border-neutral-200 bg-white p-1 text-neutral-950 shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
+      'z-50 min-w-[8rem] overflow-hidden rounded-md border border-neutral-200 bg-white p-1 text-neutral-950 shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50',
       className
     )}
     {...props}
   />
-))
+));
 DropdownMenuSubContent.displayName =
-  DropdownMenuPrimitive.SubContent.displayName
+  DropdownMenuPrimitive.SubContent.displayName;
 
 const DropdownMenuContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Content>,
@@ -69,33 +69,33 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md border border-neutral-200 bg-white p-1 text-neutral-950 shadow-md dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        'z-50 min-w-[8rem] overflow-hidden rounded-md border border-neutral-200 bg-white p-1 text-neutral-950 shadow-md dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50',
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
         className
       )}
       {...props}
     />
   </DropdownMenuPrimitive.Portal>
-))
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
 
 const DropdownMenuItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
-    inset?: boolean
+    inset?: boolean;
   }
 >(({ className, inset, ...props }, ref) => (
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-neutral-100 focus:text-neutral-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-neutral-800 dark:focus:text-neutral-50",
-      inset && "pl-8",
+      'relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-neutral-100 focus:text-neutral-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-neutral-800 dark:focus:text-neutral-50',
+      inset && 'pl-8',
       className
     )}
     {...props}
   />
-))
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
 
 const DropdownMenuCheckboxItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
@@ -104,7 +104,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      "relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-neutral-100 focus:text-neutral-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-neutral-800 dark:focus:text-neutral-50",
+      'relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-neutral-100 focus:text-neutral-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-neutral-800 dark:focus:text-neutral-50',
       className
     )}
     checked={checked}
@@ -117,9 +117,9 @@ const DropdownMenuCheckboxItem = React.forwardRef<
     </span>
     {children}
   </DropdownMenuPrimitive.CheckboxItem>
-))
+));
 DropdownMenuCheckboxItem.displayName =
-  DropdownMenuPrimitive.CheckboxItem.displayName
+  DropdownMenuPrimitive.CheckboxItem.displayName;
 
 const DropdownMenuRadioItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
@@ -128,7 +128,7 @@ const DropdownMenuRadioItem = React.forwardRef<
   <DropdownMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      "relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-neutral-100 focus:text-neutral-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-neutral-800 dark:focus:text-neutral-50",
+      'relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-neutral-100 focus:text-neutral-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-neutral-800 dark:focus:text-neutral-50',
       className
     )}
     {...props}
@@ -140,26 +140,26 @@ const DropdownMenuRadioItem = React.forwardRef<
     </span>
     {children}
   </DropdownMenuPrimitive.RadioItem>
-))
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
 
 const DropdownMenuLabel = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Label>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
-    inset?: boolean
+    inset?: boolean;
   }
 >(({ className, inset, ...props }, ref) => (
   <DropdownMenuPrimitive.Label
     ref={ref}
     className={cn(
-      "px-2 py-1.5 text-sm font-semibold",
-      inset && "pl-8",
+      'px-2 py-1.5 text-sm font-semibold',
+      inset && 'pl-8',
       className
     )}
     {...props}
   />
-))
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
 
 const DropdownMenuSeparator = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
@@ -167,11 +167,14 @@ const DropdownMenuSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DropdownMenuPrimitive.Separator
     ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-neutral-100 dark:bg-neutral-800", className)}
+    className={cn(
+      '-mx-1 my-1 h-px bg-neutral-100 dark:bg-neutral-800',
+      className
+    )}
     {...props}
   />
-))
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
 
 const DropdownMenuShortcut = ({
   className,
@@ -179,12 +182,12 @@ const DropdownMenuShortcut = ({
 }: React.HTMLAttributes<HTMLSpanElement>) => {
   return (
     <span
-      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      className={cn('ml-auto text-xs tracking-widest opacity-60', className)}
       {...props}
     />
-  )
-}
-DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+  );
+};
+DropdownMenuShortcut.displayName = 'DropdownMenuShortcut';
 
 export {
   DropdownMenu,
@@ -202,4 +205,4 @@ export {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuRadioGroup,
-}
+};
diff --git a/rnd/autogpt_builder/src/components/ui/form.tsx b/rnd/autogpt_builder/src/components/ui/form.tsx
index cef40bd96dea..2c718a880f48 100644
--- a/rnd/autogpt_builder/src/components/ui/form.tsx
+++ b/rnd/autogpt_builder/src/components/ui/form.tsx
@@ -1,8 +1,8 @@
-"use client"
+'use client';
 
-import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
-import { Slot } from "@radix-ui/react-slot"
+import * as React from 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { Slot } from '@radix-ui/react-slot';
 import {
   Controller,
   ControllerProps,
@@ -10,27 +10,27 @@ import {
   FieldValues,
   FormProvider,
   useFormContext,
-} from "react-hook-form"
+} from 'react-hook-form';
 
-import { cn } from "@/lib/utils"
-import { Label } from "@/components/ui/label"
+import { cn } from '@/lib/utils';
+import { Label } from '@/components/ui/label';
 
-const Form = FormProvider
+const Form = FormProvider;
 
 type FormFieldContextValue<
   TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 > = {
-  name: TName
-}
+  name: TName;
+};
 
 const FormFieldContext = React.createContext<FormFieldContextValue>(
   {} as FormFieldContextValue
-)
+);
 
 const FormField = <
   TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 >({
   ...props
 }: ControllerProps<TFieldValues, TName>) => {
@@ -38,21 +38,21 @@ const FormField = <
     <FormFieldContext.Provider value={{ name: props.name }}>
       <Controller {...props} />
     </FormFieldContext.Provider>
-  )
-}
+  );
+};
 
 const useFormField = () => {
-  const fieldContext = React.useContext(FormFieldContext)
-  const itemContext = React.useContext(FormItemContext)
-  const { getFieldState, formState } = useFormContext()
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = React.useContext(FormItemContext);
+  const { getFieldState, formState } = useFormContext();
 
-  const fieldState = getFieldState(fieldContext.name, formState)
+  const fieldState = getFieldState(fieldContext.name, formState);
 
   if (!fieldContext) {
-    throw new Error("useFormField should be used within <FormField>")
+    throw new Error('useFormField should be used within <FormField>');
   }
 
-  const { id } = itemContext
+  const { id } = itemContext;
 
   return {
     id,
@@ -61,53 +61,54 @@ const useFormField = () => {
     formDescriptionId: `${id}-form-item-description`,
     formMessageId: `${id}-form-item-message`,
     ...fieldState,
-  }
-}
+  };
+};
 
 type FormItemContextValue = {
-  id: string
-}
+  id: string;
+};
 
 const FormItemContext = React.createContext<FormItemContextValue>(
   {} as FormItemContextValue
-)
+);
 
 const FormItem = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => {
-  const id = React.useId()
+  const id = React.useId();
 
   return (
     <FormItemContext.Provider value={{ id }}>
-      <div ref={ref} className={cn("space-y-2", className)} {...props} />
+      <div ref={ref} className={cn('space-y-2', className)} {...props} />
     </FormItemContext.Provider>
-  )
-})
-FormItem.displayName = "FormItem"
+  );
+});
+FormItem.displayName = 'FormItem';
 
 const FormLabel = React.forwardRef<
   React.ElementRef<typeof LabelPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
 >(({ className, ...props }, ref) => {
-  const { error, formItemId } = useFormField()
+  const { error, formItemId } = useFormField();
 
   return (
     <Label
       ref={ref}
-      className={cn(error && "text-red-500 dark:text-red-900", className)}
+      className={cn(error && 'text-red-500 dark:text-red-900', className)}
       htmlFor={formItemId}
       {...props}
     />
-  )
-})
-FormLabel.displayName = "FormLabel"
+  );
+});
+FormLabel.displayName = 'FormLabel';
 
 const FormControl = React.forwardRef<
   React.ElementRef<typeof Slot>,
   React.ComponentPropsWithoutRef<typeof Slot>
 >(({ ...props }, ref) => {
-  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+  const { error, formItemId, formDescriptionId, formMessageId } =
+    useFormField();
 
   return (
     <Slot
@@ -121,50 +122,56 @@ const FormControl = React.forwardRef<
       aria-invalid={!!error}
       {...props}
     />
-  )
-})
-FormControl.displayName = "FormControl"
+  );
+});
+FormControl.displayName = 'FormControl';
 
 const FormDescription = React.forwardRef<
   HTMLParagraphElement,
   React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, ...props }, ref) => {
-  const { formDescriptionId } = useFormField()
+  const { formDescriptionId } = useFormField();
 
   return (
     <p
       ref={ref}
       id={formDescriptionId}
-      className={cn("text-[0.8rem] text-neutral-500 dark:text-neutral-400", className)}
+      className={cn(
+        'text-[0.8rem] text-neutral-500 dark:text-neutral-400',
+        className
+      )}
       {...props}
     />
-  )
-})
-FormDescription.displayName = "FormDescription"
+  );
+});
+FormDescription.displayName = 'FormDescription';
 
 const FormMessage = React.forwardRef<
   HTMLParagraphElement,
   React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, children, ...props }, ref) => {
-  const { error, formMessageId } = useFormField()
-  const body = error ? String(error?.message) : children
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message) : children;
 
   if (!body) {
-    return null
+    return null;
   }
 
   return (
     <p
       ref={ref}
       id={formMessageId}
-      className={cn("text-[0.8rem] font-medium text-red-500 dark:text-red-900", className)}
+      className={cn(
+        'text-[0.8rem] font-medium text-red-500 dark:text-red-900',
+        className
+      )}
       {...props}
     >
       {body}
     </p>
-  )
-})
-FormMessage.displayName = "FormMessage"
+  );
+});
+FormMessage.displayName = 'FormMessage';
 
 export {
   useFormField,
@@ -175,4 +182,4 @@ export {
   FormDescription,
   FormMessage,
   FormField,
-}
+};
diff --git a/rnd/autogpt_builder/src/components/ui/input.tsx b/rnd/autogpt_builder/src/components/ui/input.tsx
index 2bdc268ca8ae..561dad95f2af 100644
--- a/rnd/autogpt_builder/src/components/ui/input.tsx
+++ b/rnd/autogpt_builder/src/components/ui/input.tsx
@@ -1,6 +1,6 @@
-import * as React from "react"
+import * as React from 'react';
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils';
 
 export interface InputProps
   extends React.InputHTMLAttributes<HTMLInputElement> {}
@@ -11,16 +11,16 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          "flex h-9 w-full rounded-md border border-gray-200 bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-gray-500 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-gray-950 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-800 dark:placeholder:text-gray-400 dark:focus-visible:ring-gray-300",
-          type == "file" ? "pt-1.5 pb-0.5" : "",  // fix alignment
+          'flex h-9 w-full rounded-md border border-gray-200 bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-gray-500 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-gray-950 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-800 dark:placeholder:text-gray-400 dark:focus-visible:ring-gray-300',
+          type == 'file' ? 'pt-1.5 pb-0.5' : '', // fix alignment
           className
         )}
         ref={ref}
         {...props}
       />
-    )
+    );
   }
-)
-Input.displayName = "Input"
+);
+Input.displayName = 'Input';
 
-export { Input }
+export { Input };
diff --git a/rnd/autogpt_builder/src/components/ui/label.tsx b/rnd/autogpt_builder/src/components/ui/label.tsx
index 534182176bf8..1e24ec01fd29 100644
--- a/rnd/autogpt_builder/src/components/ui/label.tsx
+++ b/rnd/autogpt_builder/src/components/ui/label.tsx
@@ -1,14 +1,14 @@
-"use client"
+'use client';
 
-import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { cva, type VariantProps } from 'class-variance-authority';
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils';
 
 const labelVariants = cva(
-  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-)
+  'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'
+);
 
 const Label = React.forwardRef<
   React.ElementRef<typeof LabelPrimitive.Root>,
@@ -20,7 +20,7 @@ const Label = React.forwardRef<
     className={cn(labelVariants(), className)}
     {...props}
   />
-))
-Label.displayName = LabelPrimitive.Root.displayName
+));
+Label.displayName = LabelPrimitive.Root.displayName;
 
-export { Label }
+export { Label };
diff --git a/rnd/autogpt_builder/src/components/ui/popover.tsx b/rnd/autogpt_builder/src/components/ui/popover.tsx
index b270062e25cc..8bf110c29643 100644
--- a/rnd/autogpt_builder/src/components/ui/popover.tsx
+++ b/rnd/autogpt_builder/src/components/ui/popover.tsx
@@ -1,33 +1,33 @@
-"use client"
+'use client';
 
-import * as React from "react"
-import * as PopoverPrimitive from "@radix-ui/react-popover"
+import * as React from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils';
 
-const Popover = PopoverPrimitive.Root
+const Popover = PopoverPrimitive.Root;
 
-const PopoverTrigger = PopoverPrimitive.Trigger
+const PopoverTrigger = PopoverPrimitive.Trigger;
 
-const PopoverAnchor = PopoverPrimitive.Anchor
+const PopoverAnchor = PopoverPrimitive.Anchor;
 
 const PopoverContent = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
->(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
   <PopoverPrimitive.Portal>
     <PopoverPrimitive.Content
       ref={ref}
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 w-72 rounded-md border border-neutral-200 bg-white p-4 text-neutral-950 shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
+        'z-50 w-72 rounded-md border border-neutral-200 bg-white p-4 text-neutral-950 shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50',
         className
       )}
       {...props}
     />
   </PopoverPrimitive.Portal>
-))
-PopoverContent.displayName = PopoverPrimitive.Content.displayName
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
-export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
diff --git a/rnd/autogpt_builder/src/components/ui/switch.tsx b/rnd/autogpt_builder/src/components/ui/switch.tsx
index 9f9cc0ce3135..ff065d10d83e 100644
--- a/rnd/autogpt_builder/src/components/ui/switch.tsx
+++ b/rnd/autogpt_builder/src/components/ui/switch.tsx
@@ -1,9 +1,9 @@
-"use client"
+'use client';
 
-import * as React from "react"
-import * as SwitchPrimitives from "@radix-ui/react-switch"
+import * as React from 'react';
+import * as SwitchPrimitives from '@radix-ui/react-switch';
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils';
 
 const Switch = React.forwardRef<
   React.ElementRef<typeof SwitchPrimitives.Root>,
@@ -11,7 +11,7 @@ const Switch = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SwitchPrimitives.Root
     className={cn(
-      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-950 focus-visible:ring-offset-2 focus-visible:ring-offset-white disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-neutral-900 data-[state=unchecked]:bg-neutral-200 dark:focus-visible:ring-neutral-300 dark:focus-visible:ring-offset-neutral-950 dark:data-[state=checked]:bg-neutral-50 dark:data-[state=unchecked]:bg-neutral-800",
+      'peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-950 focus-visible:ring-offset-2 focus-visible:ring-offset-white disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-neutral-900 data-[state=unchecked]:bg-neutral-200 dark:focus-visible:ring-neutral-300 dark:focus-visible:ring-offset-neutral-950 dark:data-[state=checked]:bg-neutral-50 dark:data-[state=unchecked]:bg-neutral-800',
       className
     )}
     {...props}
@@ -19,11 +19,11 @@ const Switch = React.forwardRef<
   >
     <SwitchPrimitives.Thumb
       className={cn(
-        "pointer-events-none block h-4 w-4 rounded-full bg-white shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0 dark:bg-neutral-950"
+        'pointer-events-none block h-4 w-4 rounded-full bg-white shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0 dark:bg-neutral-950'
       )}
     />
   </SwitchPrimitives.Root>
-))
-Switch.displayName = SwitchPrimitives.Root.displayName
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
 
-export { Switch }
+export { Switch };
diff --git a/rnd/autogpt_builder/src/components/ui/table.tsx b/rnd/autogpt_builder/src/components/ui/table.tsx
index 8d504872f6d4..2954c5f7d5fe 100644
--- a/rnd/autogpt_builder/src/components/ui/table.tsx
+++ b/rnd/autogpt_builder/src/components/ui/table.tsx
@@ -1,6 +1,6 @@
-import * as React from "react"
+import * as React from 'react';
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils';
 
 const Table = React.forwardRef<
   HTMLTableElement,
@@ -9,20 +9,20 @@ const Table = React.forwardRef<
   <div className="relative w-full overflow-auto">
     <table
       ref={ref}
-      className={cn("w-full caption-bottom text-sm", className)}
+      className={cn('w-full caption-bottom text-sm', className)}
       {...props}
     />
   </div>
-))
-Table.displayName = "Table"
+));
+Table.displayName = 'Table';
 
 const TableHeader = React.forwardRef<
   HTMLTableSectionElement,
   React.HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
-  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
-))
-TableHeader.displayName = "TableHeader"
+  <thead ref={ref} className={cn('[&_tr]:border-b', className)} {...props} />
+));
+TableHeader.displayName = 'TableHeader';
 
 const TableBody = React.forwardRef<
   HTMLTableSectionElement,
@@ -30,11 +30,11 @@ const TableBody = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <tbody
     ref={ref}
-    className={cn("[&_tr:last-child]:border-0", className)}
+    className={cn('[&_tr:last-child]:border-0', className)}
     {...props}
   />
-))
-TableBody.displayName = "TableBody"
+));
+TableBody.displayName = 'TableBody';
 
 const TableFooter = React.forwardRef<
   HTMLTableSectionElement,
@@ -43,13 +43,13 @@ const TableFooter = React.forwardRef<
   <tfoot
     ref={ref}
     className={cn(
-      "border-t bg-neutral-100/50 font-medium [&>tr]:last:border-b-0 dark:bg-neutral-800/50",
+      'border-t bg-neutral-100/50 font-medium [&>tr]:last:border-b-0 dark:bg-neutral-800/50',
       className
     )}
     {...props}
   />
-))
-TableFooter.displayName = "TableFooter"
+));
+TableFooter.displayName = 'TableFooter';
 
 const TableRow = React.forwardRef<
   HTMLTableRowElement,
@@ -58,13 +58,13 @@ const TableRow = React.forwardRef<
   <tr
     ref={ref}
     className={cn(
-      "border-b transition-colors hover:bg-neutral-100/50 data-[state=selected]:bg-neutral-100 dark:hover:bg-neutral-800/50 dark:data-[state=selected]:bg-neutral-800",
+      'border-b transition-colors hover:bg-neutral-100/50 data-[state=selected]:bg-neutral-100 dark:hover:bg-neutral-800/50 dark:data-[state=selected]:bg-neutral-800',
       className
     )}
     {...props}
   />
-))
-TableRow.displayName = "TableRow"
+));
+TableRow.displayName = 'TableRow';
 
 const TableHead = React.forwardRef<
   HTMLTableCellElement,
@@ -73,13 +73,13 @@ const TableHead = React.forwardRef<
   <th
     ref={ref}
     className={cn(
-      "h-10 px-2 text-left align-middle font-medium text-neutral-500 [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] dark:text-neutral-400",
+      'h-10 px-2 text-left align-middle font-medium text-neutral-500 [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] dark:text-neutral-400',
       className
     )}
     {...props}
   />
-))
-TableHead.displayName = "TableHead"
+));
+TableHead.displayName = 'TableHead';
 
 const TableCell = React.forwardRef<
   HTMLTableCellElement,
@@ -88,13 +88,13 @@ const TableCell = React.forwardRef<
   <td
     ref={ref}
     className={cn(
-      "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      'p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
       className
     )}
     {...props}
   />
-))
-TableCell.displayName = "TableCell"
+));
+TableCell.displayName = 'TableCell';
 
 const TableCaption = React.forwardRef<
   HTMLTableCaptionElement,
@@ -102,11 +102,14 @@ const TableCaption = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <caption
     ref={ref}
-    className={cn("mt-4 text-sm text-neutral-500 dark:text-neutral-400", className)}
+    className={cn(
+      'mt-4 text-sm text-neutral-500 dark:text-neutral-400',
+      className
+    )}
     {...props}
   />
-))
-TableCaption.displayName = "TableCaption"
+));
+TableCaption.displayName = 'TableCaption';
 
 export {
   Table,
@@ -117,4 +120,4 @@ export {
   TableRow,
   TableCell,
   TableCaption,
-}
+};
diff --git a/rnd/autogpt_builder/src/components/ui/textarea.tsx b/rnd/autogpt_builder/src/components/ui/textarea.tsx
index 83caa9b9f2db..4ca06111bbed 100644
--- a/rnd/autogpt_builder/src/components/ui/textarea.tsx
+++ b/rnd/autogpt_builder/src/components/ui/textarea.tsx
@@ -1,6 +1,6 @@
-import * as React from "react"
+import * as React from 'react';
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils';
 
 export interface TextareaProps
   extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
@@ -10,15 +10,15 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     return (
       <textarea
         className={cn(
-          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
           className
         )}
         ref={ref}
         {...props}
       />
-    )
+    );
   }
-)
-Textarea.displayName = "Textarea"
+);
+Textarea.displayName = 'Textarea';
 
-export { Textarea }
\ No newline at end of file
+export { Textarea };
diff --git a/rnd/autogpt_builder/src/components/ui/tooltip.tsx b/rnd/autogpt_builder/src/components/ui/tooltip.tsx
index 5f66c759ff38..2e5b34b837fd 100644
--- a/rnd/autogpt_builder/src/components/ui/tooltip.tsx
+++ b/rnd/autogpt_builder/src/components/ui/tooltip.tsx
@@ -1,11 +1,11 @@
-"use client"
+'use client';
 
-import * as React from "react"
-import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+import * as React from 'react';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils';
 
-const TooltipProvider = TooltipPrimitive.Provider
+const TooltipProvider = TooltipPrimitive.Provider;
 
 const Tooltip = ({ children, delayDuration = 10 }) => (
   <TooltipPrimitive.Root delayDuration={delayDuration}>
@@ -13,7 +13,7 @@ const Tooltip = ({ children, delayDuration = 10 }) => (
   </TooltipPrimitive.Root>
 );
 
-const TooltipTrigger = TooltipPrimitive.Trigger
+const TooltipTrigger = TooltipPrimitive.Trigger;
 
 const TooltipContent = React.forwardRef<
   React.ElementRef<typeof TooltipPrimitive.Content>,
@@ -23,12 +23,12 @@ const TooltipContent = React.forwardRef<
     ref={ref}
     sideOffset={sideOffset}
     className={cn(
-      "z-50 overflow-hidden rounded-md bg-neutral-900 px-3 py-1.5 text-xs text-neutral-50 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:bg-neutral-50 dark:text-neutral-900",
+      'z-50 overflow-hidden rounded-md bg-neutral-900 px-3 py-1.5 text-xs text-neutral-50 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:bg-neutral-50 dark:text-neutral-900',
       className
     )}
     {...props}
   />
-))
-TooltipContent.displayName = TooltipPrimitive.Content.displayName
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
diff --git a/rnd/autogpt_builder/src/lib/autogpt-server-api/client.ts b/rnd/autogpt_builder/src/lib/autogpt-server-api/client.ts
index 6901326ab17e..f4160a395ac3 100644
--- a/rnd/autogpt_builder/src/lib/autogpt-server-api/client.ts
+++ b/rnd/autogpt_builder/src/lib/autogpt-server-api/client.ts
@@ -6,7 +6,7 @@ import {
   GraphMeta,
   GraphExecuteResponse,
   NodeExecutionResult,
-} from "./types"
+} from './types';
 
 export default class AutoGPTServerAPI {
   private baseUrl: string;
@@ -15,31 +15,31 @@ export default class AutoGPTServerAPI {
   private messageHandlers: { [key: string]: (data: any) => void } = {};
 
   constructor(
-    baseUrl: string = process.env.AGPT_SERVER_URL || "http://localhost:8000/api"
+    baseUrl: string = process.env.AGPT_SERVER_URL || 'http://localhost:8000/api'
   ) {
     this.baseUrl = baseUrl;
     this.wsUrl = `ws://${new URL(this.baseUrl).host}/ws`;
   }
 
   async getBlocks(): Promise<Block[]> {
-    return await this._get("/blocks");
+    return await this._get('/blocks');
   }
 
   async listGraphs(): Promise<GraphMeta[]> {
-    return this._get("/graphs")
+    return this._get('/graphs');
   }
 
   async listTemplates(): Promise<GraphMeta[]> {
-    return this._get("/templates")
+    return this._get('/templates');
   }
 
   async getGraph(id: string, version?: number): Promise<Graph> {
-    const query = version !== undefined ? `?version=${version}` : "";
+    const query = version !== undefined ? `?version=${version}` : '';
     return this._get(`/graphs/${id}` + query);
   }
 
   async getTemplate(id: string, version?: number): Promise<Graph> {
-    const query = version !== undefined ? `?version=${version}` : "";
+    const query = version !== undefined ? `?version=${version}` : '';
     return this._get(`/templates/${id}` + query);
   }
 
@@ -52,96 +52,113 @@ export default class AutoGPTServerAPI {
   }
 
   async createGraph(graphCreateBody: GraphCreatable): Promise<Graph>;
-  async createGraph(fromTemplateID: string, templateVersion: number): Promise<Graph>;
   async createGraph(
-    graphOrTemplateID: GraphCreatable | string, templateVersion?: number
+    fromTemplateID: string,
+    templateVersion: number
+  ): Promise<Graph>;
+  async createGraph(
+    graphOrTemplateID: GraphCreatable | string,
+    templateVersion?: number
   ): Promise<Graph> {
     let requestBody: GraphCreateRequestBody;
 
-    if (typeof(graphOrTemplateID) == "string") {
+    if (typeof graphOrTemplateID == 'string') {
       if (templateVersion == undefined) {
-        throw new Error("templateVersion not specified")
+        throw new Error('templateVersion not specified');
       }
       requestBody = {
         template_id: graphOrTemplateID,
         template_version: templateVersion,
-      }
+      };
     } else {
-      requestBody = { graph: graphOrTemplateID }
+      requestBody = { graph: graphOrTemplateID };
     }
 
-    return this._request("POST", "/graphs", requestBody);
+    return this._request('POST', '/graphs', requestBody);
   }
 
   async createTemplate(templateCreateBody: GraphCreatable): Promise<Graph> {
     const requestBody: GraphCreateRequestBody = { graph: templateCreateBody };
-    return this._request("POST", "/templates", requestBody);
+    return this._request('POST', '/templates', requestBody);
   }
 
   async updateGraph(id: string, graph: GraphUpdateable): Promise<Graph> {
-    return await this._request("PUT", `/graphs/${id}`, graph);
+    return await this._request('PUT', `/graphs/${id}`, graph);
   }
 
   async updateTemplate(id: string, template: GraphUpdateable): Promise<Graph> {
-    return await this._request("PUT", `/templates/${id}`, template);
+    return await this._request('PUT', `/templates/${id}`, template);
   }
 
   async setGraphActiveVersion(id: string, version: number): Promise<Graph> {
-    return this._request(
-      "PUT", `/graphs/${id}/versions/active`, { active_graph_version: version }
-    );
+    return this._request('PUT', `/graphs/${id}/versions/active`, {
+      active_graph_version: version,
+    });
   }
 
   async executeGraph(
-    id: string, inputData: { [key: string]: any } = {}
+    id: string,
+    inputData: { [key: string]: any } = {}
   ): Promise<GraphExecuteResponse> {
-    return this._request("POST", `/graphs/${id}/execute`, inputData);
+    return this._request('POST', `/graphs/${id}/execute`, inputData);
   }
 
-  async listGraphRunIDs(graphID: string, graphVersion?: number): Promise<string[]> {
-    const query = graphVersion !== undefined ? `?graph_version=${graphVersion}` : "";
+  async listGraphRunIDs(
+    graphID: string,
+    graphVersion?: number
+  ): Promise<string[]> {
+    const query =
+      graphVersion !== undefined ? `?graph_version=${graphVersion}` : '';
     return this._get(`/graphs/${graphID}/executions` + query);
   }
 
-  async getGraphExecutionInfo(graphID: string, runID: string): Promise<NodeExecutionResult[]> {
-    return (await this._get(`/graphs/${graphID}/executions/${runID}`))
-    .map((result: any) => ({
-      ...result,
-      add_time: new Date(result.add_time),
-      queue_time: result.queue_time ? new Date(result.queue_time) : undefined,
-      start_time: result.start_time ? new Date(result.start_time) : undefined,
-      end_time: result.end_time ? new Date(result.end_time) : undefined,
-    }));
+  async getGraphExecutionInfo(
+    graphID: string,
+    runID: string
+  ): Promise<NodeExecutionResult[]> {
+    return (await this._get(`/graphs/${graphID}/executions/${runID}`)).map(
+      (result: any) => ({
+        ...result,
+        add_time: new Date(result.add_time),
+        queue_time: result.queue_time ? new Date(result.queue_time) : undefined,
+        start_time: result.start_time ? new Date(result.start_time) : undefined,
+        end_time: result.end_time ? new Date(result.end_time) : undefined,
+      })
+    );
   }
 
   private async _get(path: string) {
-    return this._request("GET", path);
+    return this._request('GET', path);
   }
 
   private async _request(
-    method: "GET" | "POST" | "PUT" | "PATCH",
+    method: 'GET' | 'POST' | 'PUT' | 'PATCH',
     path: string,
-    payload?: { [key: string]: any },
+    payload?: { [key: string]: any }
   ) {
-    if (method != "GET") {
+    if (method != 'GET') {
       console.debug(`${method} ${path} payload:`, payload);
     }
 
     const response = await fetch(
       this.baseUrl + path,
-      method != "GET" ? {
-        method,
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify(payload),
-      } : undefined
+      method != 'GET'
+        ? {
+            method,
+            headers: {
+              'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(payload),
+          }
+        : undefined
     );
     const response_data = await response.json();
 
     if (!response.ok) {
       console.warn(
-        `${method} ${path} returned non-OK response:`, response_data.detail, response
+        `${method} ${path} returned non-OK response:`,
+        response_data.detail,
+        response
       );
       throw new Error(`HTTP error ${response.status}! ${response_data.detail}`);
     }
@@ -183,7 +200,8 @@ export default class AutoGPTServerAPI {
   }
 
   sendWebSocketMessage<M extends keyof WebsocketMessageTypeMap>(
-    method: M, data: WebsocketMessageTypeMap[M]
+    method: M,
+    data: WebsocketMessageTypeMap[M]
   ) {
     if (this.socket && this.socket.readyState === WebSocket.OPEN) {
       this.socket.send(JSON.stringify({ method, data }));
@@ -193,7 +211,8 @@ export default class AutoGPTServerAPI {
   }
 
   onWebSocketMessage<M extends keyof WebsocketMessageTypeMap>(
-    method: M, handler: (data: WebsocketMessageTypeMap[M]) => void
+    method: M,
+    handler: (data: WebsocketMessageTypeMap[M]) => void
   ) {
     this.messageHandlers[method] = handler;
   }
@@ -202,23 +221,27 @@ export default class AutoGPTServerAPI {
     this.sendWebSocketMessage('subscribe', { graph_id: graphId });
   }
 
-  runGraph(graphId: string, data: WebsocketMessageTypeMap["run_graph"]["data"] = {}) {
+  runGraph(
+    graphId: string,
+    data: WebsocketMessageTypeMap['run_graph']['data'] = {}
+  ) {
     this.sendWebSocketMessage('run_graph', { graph_id: graphId, data });
   }
 }
 
-
 /* *** UTILITY TYPES *** */
 
-type GraphCreateRequestBody = {
-  template_id: string;
-  template_version: number;
-} | {
-  graph: GraphCreatable;
-}
+type GraphCreateRequestBody =
+  | {
+      template_id: string;
+      template_version: number;
+    }
+  | {
+      graph: GraphCreatable;
+    };
 
 type WebsocketMessageTypeMap = {
-  subscribe: { graph_id: string; };
-  run_graph: { graph_id: string; data: { [key: string]: any }; };
+  subscribe: { graph_id: string };
+  run_graph: { graph_id: string; data: { [key: string]: any } };
   execution_event: NodeExecutionResult;
-}
+};
diff --git a/rnd/autogpt_builder/src/lib/autogpt-server-api/index.ts b/rnd/autogpt_builder/src/lib/autogpt-server-api/index.ts
index 234a72c75061..1d984b98803c 100644
--- a/rnd/autogpt_builder/src/lib/autogpt-server-api/index.ts
+++ b/rnd/autogpt_builder/src/lib/autogpt-server-api/index.ts
@@ -1,5 +1,5 @@
-import AutoGPTServerAPI from "./client";
+import AutoGPTServerAPI from './client';
 
 export default AutoGPTServerAPI;
-export * from "./types";
-export * from "./utils";
+export * from './types';
+export * from './utils';
diff --git a/rnd/autogpt_builder/src/lib/autogpt-server-api/types.ts b/rnd/autogpt_builder/src/lib/autogpt-server-api/types.ts
index 64bbe17dd82d..299d8ef6a497 100644
--- a/rnd/autogpt_builder/src/lib/autogpt-server-api/types.ts
+++ b/rnd/autogpt_builder/src/lib/autogpt-server-api/types.ts
@@ -19,10 +19,10 @@ export type Node = {
   id: string;
   block_id: string;
   input_default: { [key: string]: any };
-  input_nodes: Array<{ name: string, node_id: string }>;
-  output_nodes: Array<{ name: string, node_id: string }>;
+  input_nodes: Array<{ name: string; node_id: string }>;
+  output_nodes: Array<{ name: string; node_id: string }>;
   metadata: {
-    position: { x: number; y: number; };
+    position: { x: number; y: number };
     [key: string]: any;
   };
 };
@@ -34,11 +34,11 @@ export type Link = {
   sink_id: string;
   source_name: string;
   sink_name: string;
-}
+};
 
-export type LinkCreatable = Omit<Link, "id"> & {
+export type LinkCreatable = Omit<Link, 'id'> & {
   id?: string;
-}
+};
 
 /* Mirror of autogpt_server/data/graph.py:GraphMeta */
 export type GraphMeta = {
@@ -48,7 +48,7 @@ export type GraphMeta = {
   is_template: boolean;
   name: string;
   description: string;
-}
+};
 
 /* Mirror of autogpt_server/data/graph.py:Graph */
 export type Graph = GraphMeta & {
@@ -58,22 +58,22 @@ export type Graph = GraphMeta & {
 
 export type GraphUpdateable = Omit<
   Graph,
-  "version" | "is_active" | "is_template" | "links"
+  'version' | 'is_active' | 'is_template' | 'links'
 > & {
   version?: number;
   is_active?: boolean;
   is_template?: boolean;
   links: Array<LinkCreatable>;
-}
+};
 
-export type GraphCreatable = Omit<GraphUpdateable, "id"> & { id?: string }
+export type GraphCreatable = Omit<GraphUpdateable, 'id'> & { id?: string };
 
 /* Derived from autogpt_server/executor/manager.py:ExecutionManager.add_execution */
 export type GraphExecuteResponse = {
   /** ID of the initiated run */
   id: string;
   /** List of node executions */
-  executions: Array<{ id: string, node_id: string }>;
+  executions: Array<{ id: string; node_id: string }>;
 };
 
 /* Mirror of autogpt_server/data/execution.py:ExecutionResult */
diff --git a/rnd/autogpt_builder/src/lib/autogpt-server-api/utils.ts b/rnd/autogpt_builder/src/lib/autogpt-server-api/utils.ts
index ea7306ebe5d8..8b0f1aca5289 100644
--- a/rnd/autogpt_builder/src/lib/autogpt-server-api/utils.ts
+++ b/rnd/autogpt_builder/src/lib/autogpt-server-api/utils.ts
@@ -1,20 +1,20 @@
-import { Graph, Block, Node } from "./types";
+import { Graph, Block, Node } from './types';
 
 /** Creates a copy of the graph with all secrets removed */
 export function safeCopyGraph(graph: Graph, block_defs: Block[]): Graph {
   return {
     ...graph,
-    nodes: graph.nodes.map(node => {
-      const block = block_defs.find(b => b.id == node.block_id)!;
+    nodes: graph.nodes.map((node) => {
+      const block = block_defs.find((b) => b.id == node.block_id)!;
       return {
         ...node,
         input_default: Object.keys(node.input_default)
-          .filter(k => !block.inputSchema.properties[k].secret)
+          .filter((k) => !block.inputSchema.properties[k].secret)
           .reduce((obj: Node['input_default'], key) => {
             obj[key] = node.input_default[key];
             return obj;
           }, {}),
-      }
+      };
     }),
-  }
+  };
 }
diff --git a/rnd/autogpt_builder/src/lib/utils.ts b/rnd/autogpt_builder/src/lib/utils.ts
index f4e24d59eaa3..9648443c0c1b 100644
--- a/rnd/autogpt_builder/src/lib/utils.ts
+++ b/rnd/autogpt_builder/src/lib/utils.ts
@@ -1,17 +1,18 @@
-import { type ClassValue, clsx } from "clsx"
-import { twMerge } from "tailwind-merge"
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+  return twMerge(clsx(inputs));
 }
 
 /** Derived from https://stackoverflow.com/a/7616484 */
 export function hashString(str: string): number {
-  let hash = 0, chr: number;
+  let hash = 0,
+    chr: number;
   if (str.length === 0) return hash;
   for (let i = 0; i < str.length; i++) {
     chr = str.charCodeAt(i);
-    hash = ((hash << 5) - hash) + chr;
+    hash = (hash << 5) - hash + chr;
     hash |= 0; // Convert to 32bit integer
   }
   return hash;
@@ -19,83 +20,92 @@ export function hashString(str: string): number {
 
 /** Derived from https://stackoverflow.com/a/32922084 */
 export function deepEquals(x: any, y: any): boolean {
-  const ok = Object.keys, tx = typeof x, ty = typeof y;
-  return x && y && tx === ty && (
-    tx === 'object'
-      ? (
-        ok(x).length === ok(y).length &&
-          ok(x).every(key => deepEquals(x[key], y[key]))
-      )
-      : (x === y)
+  const ok = Object.keys,
+    tx = typeof x,
+    ty = typeof y;
+  return (
+    x &&
+    y &&
+    tx === ty &&
+    (tx === 'object'
+      ? ok(x).length === ok(y).length &&
+        ok(x).every((key) => deepEquals(x[key], y[key]))
+      : x === y)
   );
 }
 
 /** Get tailwind text color class from type name */
 export function getTypeTextColor(type: string | null): string {
   if (type === null) return 'bg-gray-500';
-  return {
-    string: 'text-green-500',
-    number: 'text-blue-500',
-    boolean: 'text-yellow-500',
-    object: 'text-purple-500',
-    array: 'text-indigo-500',
-    null: 'text-gray-500',
-    '': 'text-gray-500',
-  }[type] || 'text-gray-500';
+  return (
+    {
+      string: 'text-green-500',
+      number: 'text-blue-500',
+      boolean: 'text-yellow-500',
+      object: 'text-purple-500',
+      array: 'text-indigo-500',
+      null: 'text-gray-500',
+      '': 'text-gray-500',
+    }[type] || 'text-gray-500'
+  );
 }
 
 /** Get tailwind bg color class from type name */
 export function getTypeBgColor(type: string | null): string {
   if (type === null) return 'bg-gray-500';
-  return {
-    string: 'bg-green-500',
-    number: 'bg-blue-500',
-    boolean: 'bg-yellow-500',
-    object: 'bg-purple-500',
-    array: 'bg-indigo-500',
-    null: 'bg-gray-500',
-    '': 'bg-gray-500',
-  }[type] || 'bg-gray-500';
+  return (
+    {
+      string: 'bg-green-500',
+      number: 'bg-blue-500',
+      boolean: 'bg-yellow-500',
+      object: 'bg-purple-500',
+      array: 'bg-indigo-500',
+      null: 'bg-gray-500',
+      '': 'bg-gray-500',
+    }[type] || 'bg-gray-500'
+  );
 }
 
 export function getTypeColor(type: string | null): string {
   if (type === null) return 'bg-gray-500';
-  return {
-    string: '#22c55e',
-    number: '#3b82f6',
-    boolean: '#eab308',
-    object: '#a855f7',
-    array: '#6366f1',
-    null: '#6b7280',
-    '': '#6b7280',
-  }[type] || '#6b7280';
+  return (
+    {
+      string: '#22c55e',
+      number: '#3b82f6',
+      boolean: '#eab308',
+      object: '#a855f7',
+      array: '#6366f1',
+      null: '#6b7280',
+      '': '#6b7280',
+    }[type] || '#6b7280'
+  );
 }
 
 export function beautifyString(name: string): string {
   // Regular expression to identify places to split, considering acronyms
   const result = name
-    .replace(/([a-z])([A-Z])/g, '$1 $2')  // Add space before capital letters
-    .replace(/([A-Z])([A-Z][a-z])/g, '$1 $2')  // Add space between acronyms and next word
-    .replace(/_/g, ' ')  // Replace underscores with spaces
-    .replace(/\b\w/g, char => char.toUpperCase());  // Capitalize the first letter of each word
+    .replace(/([a-z])([A-Z])/g, '$1 $2') // Add space before capital letters
+    .replace(/([A-Z])([A-Z][a-z])/g, '$1 $2') // Add space between acronyms and next word
+    .replace(/_/g, ' ') // Replace underscores with spaces
+    .replace(/\b\w/g, (char) => char.toUpperCase()); // Capitalize the first letter of each word
 
   return applyExceptions(result);
-};
+}
 
 const exceptionMap: Record<string, string> = {
   'Auto GPT': 'AutoGPT',
-  'Gpt': 'GPT',
-  'Creds': 'Credentials',
-  'Id': 'ID',
-  'Openai': 'OpenAI',
-  'Api': 'API',
-  'Url': 'URL',
-  'Http': 'HTTP',
-  'Json': 'JSON',
+  Gpt: 'GPT',
+  Creds: 'Credentials',
+  Id: 'ID',
+  Openai: 'OpenAI',
+  Api: 'API',
+  Url: 'URL',
+  Http: 'HTTP',
+  Json: 'JSON',
 };
 
 const applyExceptions = (str: string): string => {
-  Object.keys(exceptionMap).forEach(key => {
+  Object.keys(exceptionMap).forEach((key) => {
     const regex = new RegExp(`\\b${key}\\b`, 'g');
     str = str.replace(regex, exceptionMap[key]);
   });
diff --git a/rnd/autogpt_builder/tailwind.config.ts b/rnd/autogpt_builder/tailwind.config.ts
index 9784068cc0e9..00cbbd4e790f 100644
--- a/rnd/autogpt_builder/tailwind.config.ts
+++ b/rnd/autogpt_builder/tailwind.config.ts
@@ -1,23 +1,21 @@
-import type { Config } from "tailwindcss";
+import type { Config } from 'tailwindcss';
 
 const config = {
-  darkMode: ["class"],
-  content: [
-    './src/**/*.{ts,tsx}',
-  ],
-  prefix: "",
+  darkMode: ['class'],
+  content: ['./src/**/*.{ts,tsx}'],
+  prefix: '',
   theme: {
     container: {
       center: true,
-      padding: "2rem",
+      padding: '2rem',
       screens: {
-        "2xl": "1400px",
+        '2xl': '1400px',
       },
     },
     extend: {
       fontFamily: {
         sans: ['var(--font-geist-sans)'],
-        mono: ['var(--font-geist-mono)']
+        mono: ['var(--font-geist-mono)'],
       },
       colors: {
         border: 'hsl(var(--border))',
@@ -27,55 +25,55 @@ const config = {
         foreground: 'hsl(var(--foreground))',
         primary: {
           DEFAULT: 'hsl(var(--primary))',
-          foreground: 'hsl(var(--primary-foreground))'
+          foreground: 'hsl(var(--primary-foreground))',
         },
         secondary: {
           DEFAULT: 'hsl(var(--secondary))',
-          foreground: 'hsl(var(--secondary-foreground))'
+          foreground: 'hsl(var(--secondary-foreground))',
         },
         destructive: {
           DEFAULT: 'hsl(var(--destructive))',
-          foreground: 'hsl(var(--destructive-foreground))'
+          foreground: 'hsl(var(--destructive-foreground))',
         },
         muted: {
           DEFAULT: 'hsl(var(--muted))',
-          foreground: 'hsl(var(--muted-foreground))'
+          foreground: 'hsl(var(--muted-foreground))',
         },
         accent: {
           DEFAULT: 'hsl(var(--accent))',
-          foreground: 'hsl(var(--accent-foreground))'
+          foreground: 'hsl(var(--accent-foreground))',
         },
         popover: {
           DEFAULT: 'hsl(var(--popover))',
-          foreground: 'hsl(var(--popover-foreground))'
+          foreground: 'hsl(var(--popover-foreground))',
         },
         card: {
           DEFAULT: 'hsl(var(--card))',
-          foreground: 'hsl(var(--card-foreground))'
-        }
+          foreground: 'hsl(var(--card-foreground))',
+        },
       },
       borderRadius: {
         lg: 'var(--radius)',
         md: 'calc(var(--radius) - 2px)',
-        sm: 'calc(var(--radius) - 4px)'
+        sm: 'calc(var(--radius) - 4px)',
       },
       keyframes: {
         'accordion-down': {
           from: { height: '0' },
-          to: { height: 'var(--radix-accordion-content-height)' }
+          to: { height: 'var(--radix-accordion-content-height)' },
         },
         'accordion-up': {
           from: { height: 'var(--radix-accordion-content-height)' },
-          to: { height: '0' }
-        }
+          to: { height: '0' },
+        },
       },
       animation: {
         'accordion-down': 'accordion-down 0.2s ease-out',
-        'accordion-up': 'accordion-up 0.2s ease-out'
-      }
-    }
+        'accordion-up': 'accordion-up 0.2s ease-out',
+      },
+    },
   },
-  plugins: [require("tailwindcss-animate")],
+  plugins: [require('tailwindcss-animate')],
 } satisfies Config;
 
 export default config;
diff --git a/rnd/autogpt_builder/webpack.config.js b/rnd/autogpt_builder/webpack.config.js
index 31d7de4473af..c3797cf8e458 100644
--- a/rnd/autogpt_builder/webpack.config.js
+++ b/rnd/autogpt_builder/webpack.config.js
@@ -1,7 +1,7 @@
 module.exports = {
   devServer: {
     proxy: {
-      '/graphs': 'http://localhost:8000'
-    }
-  }
-};
\ No newline at end of file
+      '/graphs': 'http://localhost:8000',
+    },
+  },
+};
diff --git a/rnd/autogpt_builder/yarn.lock b/rnd/autogpt_builder/yarn.lock
index fc24fc21fb8b..8eeff7ab5e3a 100644
--- a/rnd/autogpt_builder/yarn.lock
+++ b/rnd/autogpt_builder/yarn.lock
@@ -3484,6 +3484,11 @@ prelude-ls@^1.2.1:
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
   integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
 
+prettier@^3.3.3:
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.3.3.tgz#30c54fe0be0d8d12e6ae61dbb10109ea00d53105"
+  integrity sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==
+
 prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"


Code review comments:
diff_hunk: @@ -0,0 +1,15 @@
+{
path: rnd/autogpt_builder/.prettierrc.json
text: @user1:
Let's work with Prettier's defaults for now. No need for this file.

@author:
Sounds good, I'll keep it to the defaults suggested on their site:
[Configuration File](https://prettier.io/docs/en/configuration.html)

@user1:
Those are not the defaults. Defaults are listed [here](https://prettier.io/docs/en/options). Please just delete the file.

@author:
Can do. I have removed the file.