Merge branch 'master' into ntindle/samples

rnd/autogpt_builder/.gitignore

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

rnd/autogpt_builder/next.config.mjs

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

rnd/autogpt_builder/package.json

@@ -27,6 +27,7 @@
     "@radix-ui/react-switch": "^1.1.0",
     "@radix-ui/react-toast": "^1.2.1",
     "@radix-ui/react-tooltip": "^1.1.2",
+    "@sentry/nextjs": "^8",
     "@supabase/ssr": "^0.4.0",
     "@supabase/supabase-js": "^2.45.0",
     "@tanstack/react-table": "^8.20.5",

rnd/autogpt_builder/sentry.client.config.ts

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

rnd/autogpt_builder/sentry.edge.config.ts

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

rnd/autogpt_builder/sentry.server.config.ts

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

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

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

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

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

rnd/autogpt_builder/src/components/Flow.tsx

@@ -27,7 +27,7 @@ import "@xyflow/react/dist/style.css";
 import { CustomNode } from "./CustomNode";
 import "./flow.css";
 import { Link } from "@/lib/autogpt-server-api";
-import { getTypeColor } from "@/lib/utils";
+import { getTypeColor, filterBlocksByType } from "@/lib/utils";
 import { history } from "./history";
 import { CustomEdge } from "./CustomEdge";
 import ConnectionLine from "./ConnectionLine";
@@ -36,14 +36,19 @@ import { SaveControl } from "@/components/edit/control/SaveControl";
 import { BlocksControl } from "@/components/edit/control/BlocksControl";
 import {
   IconPlay,
+  IconUndo2,
   IconRedo2,
   IconSquare,
-  IconUndo2,
+  IconOutput,
 } from "@/components/ui/icons";
 import { startTutorial } from "./tutorial";
 import useAgentGraph from "@/hooks/useAgentGraph";
 import { v4 as uuidv4 } from "uuid";
 import { useRouter, usePathname, useSearchParams } from "next/navigation";
+import { LogOut } from "lucide-react";
+import RunnerUIWrapper, {
+  RunnerUIWrapperRef,
+} from "@/components/RunnerUIWrapper";
 
 // This is for the history, this is the minimum distance a block must move before it is logged
 // It helps to prevent spamming the history with small movements especially when pressing on a input in a block
@@ -101,6 +106,8 @@ const FlowEditor: React.FC<{
   // State to control if blocks menu should be pinned open
   const [pinBlocksPopover, setPinBlocksPopover] = useState(false);
 
+  const runnerUIRef = useRef<RunnerUIWrapperRef>(null);
+
   useEffect(() => {
     const params = new URLSearchParams(window.location.search);
 
@@ -550,9 +557,21 @@ const FlowEditor: React.FC<{
       onClick: handleRedo,
     },
     {
-      label: !isRunning ? "Run" : "Stop",
+      label: !savedAgent
+        ? "Please save the agent to run"
+        : !isRunning
+          ? "Run"
+          : "Stop",
       icon: !isRunning ? <IconPlay /> : <IconSquare />,
-      onClick: !isRunning ? requestSaveAndRun : requestStopRun,
+      onClick: !isRunning
+        ? () => runnerUIRef.current?.runOrOpenInput()
+        : requestStopRun,
+      disabled: !savedAgent,
+    },
+    {
+      label: "Runner Output",
+      icon: <LogOut size={18} strokeWidth={1.8} />,
+      onClick: () => runnerUIRef.current?.openRunnerOutput(),
     },
   ];
 
@@ -596,6 +615,13 @@ const FlowEditor: React.FC<{
           </ControlPanel>
         </ReactFlow>
       </div>
+      <RunnerUIWrapper
+        ref={runnerUIRef}
+        nodes={nodes}
+        setNodes={setNodes}
+        isRunning={isRunning}
+        requestSaveAndRun={requestSaveAndRun}
+      />
     </FlowContext.Provider>
   );
 };

rnd/autogpt_builder/src/components/RunnerUIWrapper.tsx

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

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

@@ -9,6 +9,7 @@ import {
 import FeaturedAgentsTable from "./FeaturedAgentsTable";
 import { AdminAddFeaturedAgentDialog } from "./AdminAddFeaturedAgentDialog";
 import { revalidatePath } from "next/cache";
+import * as Sentry from "@sentry/nextjs";
 
 export default async function AdminFeaturedAgentsControl({
   className,
@@ -55,9 +56,15 @@ export default async function AdminFeaturedAgentsControl({
             component: <Button>Remove</Button>,
             action: async (rows) => {
               "use server";
-              const all = rows.map((row) => removeFeaturedAgent(row.id));
-              await Promise.all(all);
-              revalidatePath("/marketplace");
+              return await Sentry.withServerActionInstrumentation(
+                "removeFeaturedAgent",
+                {},
+                async () => {
+                  const all = rows.map((row) => removeFeaturedAgent(row.id));
+                  await Promise.all(all);
+                  revalidatePath("/marketplace");
+                },
+              );
             },
           },
         ]}

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

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

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

@@ -19,6 +19,7 @@ import React from "react";
 export type Control = {
   icon: React.ReactNode;
   label: string;
+  disabled?: boolean;
   onClick: () => void;
 };
 
@@ -50,15 +51,18 @@ export const ControlPanel = ({
           {controls.map((control, index) => (
             <Tooltip key={index} delayDuration={500}>
               <TooltipTrigger asChild>
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  onClick={() => control.onClick()}
-                  data-id={`control-button-${index}`}
-                >
-                  {control.icon}
-                  <span className="sr-only">{control.label}</span>
-                </Button>
+                <div>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    onClick={() => control.onClick()}
+                    data-id={`control-button-${index}`}
+                    disabled={control.disabled || false}
+                  >
+                    {control.icon}
+                    <span className="sr-only">{control.label}</span>
+                  </Button>
+                </div>
               </TooltipTrigger>
               <TooltipContent side="right">{control.label}</TooltipContent>
             </Tooltip>

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

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

rnd/autogpt_builder/src/components/node-input-components.tsx

@@ -380,7 +380,7 @@ const NodeKeyValueInput: FC<{
                 <Input
                   type="text"
                   placeholder="Value"
-                  value={value ?? ""}
+                  defaultValue={value ?? ""}
                   onBlur={(e) =>
                     updateKeyValuePairs(
                       keyValuePairs.toSpliced(index, 1, {
@@ -563,7 +563,7 @@ const NodeStringInput: FC<{
           <Input
             type="text"
             id={selfKey}
-            value={schema.secret && value ? "********" : value}
+            defaultValue={schema.secret && value ? "********" : value}
             readOnly={schema.secret}
             placeholder={
               schema?.placeholder || `Enter ${beautifyString(displayName)}`
@@ -658,7 +658,7 @@ const NodeNumberInput: FC<{
         <Input
           type="number"
           id={selfKey}
-          value={value}
+          defaultValue={value}
           onBlur={(e) => handleInputChange(selfKey, parseFloat(e.target.value))}
           placeholder={
             schema.placeholder || `Enter ${beautifyString(displayName)}`

rnd/autogpt_builder/src/components/runner-ui/RunnerInputBlock.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+interface InputBlockProps {
+  id: string;
+  name: string;
+  description?: string;
+  value: string;
+  placeholder_values?: any[];
+  onInputChange: (id: string, field: string, value: string) => void;
+}
+
+export function InputBlock({
+  id,
+  name,
+  description,
+  value,
+  placeholder_values,
+  onInputChange,
+}: InputBlockProps) {
+  return (
+    <div className="space-y-1">
+      <h3 className="text-base font-semibold">{name || "Unnamed Input"}</h3>
+      {description && <p className="text-sm text-gray-600">{description}</p>}
+      <div>
+        {placeholder_values && placeholder_values.length > 1 ? (
+          <Select
+            onValueChange={(value) => onInputChange(id, "value", value)}
+            value={value}
+          >
+            <SelectTrigger className="w-full">
+              <SelectValue placeholder="Select a value" />
+            </SelectTrigger>
+            <SelectContent>
+              {placeholder_values.map((placeholder, index) => (
+                <SelectItem key={index} value={placeholder.toString()}>
+                  {placeholder.toString()}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        ) : (
+          <Input
+            id={`${id}-Value`}
+            value={value}
+            onChange={(e) => onInputChange(id, "value", e.target.value)}
+            placeholder={placeholder_values?.[0]?.toString() || "Enter value"}
+            className="w-full"
+          />
+        )}
+      </div>
+    </div>
+  );
+}

rnd/autogpt_builder/src/components/runner-ui/RunnerInputList.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { InputBlock } from "./RunnerInputBlock";
+import { BlockInput } from "./RunnerInputUI";
+
+interface InputListProps {
+  blockInputs: BlockInput[];
+  onInputChange: (nodeId: string, field: string, value: string) => void;
+}
+
+export function InputList({ blockInputs, onInputChange }: InputListProps) {
+  return (
+    <ScrollArea className="h-[20vh] overflow-auto pr-4 sm:h-[30vh] md:h-[40vh] lg:h-[50vh]">
+      <div className="space-y-4">
+        {blockInputs && blockInputs.length > 0 ? (
+          blockInputs.map((block) => (
+            <InputBlock
+              key={block.id}
+              id={block.id}
+              name={block.hardcodedValues.name}
+              description={block.hardcodedValues.description}
+              value={block.hardcodedValues.value?.toString() || ""}
+              placeholder_values={block.hardcodedValues.placeholder_values}
+              onInputChange={onInputChange}
+            />
+          ))
+        ) : (
+          <p>No input blocks available.</p>
+        )}
+      </div>
+    </ScrollArea>
+  );
+}

rnd/autogpt_builder/src/components/runner-ui/RunnerInputUI.tsx

@@ -0,0 +1,74 @@
+import React from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { BlockIORootSchema } from "@/lib/autogpt-server-api/types";
+import { InputList } from "./RunnerInputList";
+
+export interface BlockInput {
+  id: string;
+  inputSchema: BlockIORootSchema;
+  hardcodedValues: {
+    name: string;
+    description: string;
+    value: any;
+    placeholder_values?: any[];
+    limit_to_placeholder_values?: boolean;
+  };
+}
+
+interface RunSettingsUiProps {
+  isOpen: boolean;
+  onClose: () => void;
+  blockInputs: BlockInput[];
+  onInputChange: (nodeId: string, field: string, value: string) => void;
+  onRun: () => void;
+  isRunning: boolean;
+}
+
+export function RunnerInputUI({
+  isOpen,
+  onClose,
+  blockInputs,
+  onInputChange,
+  onRun,
+  isRunning,
+}: RunSettingsUiProps) {
+  const handleRun = () => {
+    onRun();
+    onClose();
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent className="flex max-h-[80vh] flex-col overflow-hidden sm:max-w-[400px] md:max-w-[500px] lg:max-w-[600px]">
+        <DialogHeader className="px-4 py-4">
+          <DialogTitle className="text-2xl">Run Settings</DialogTitle>
+          <DialogDescription className="mt-2 text-sm">
+            Configure settings for running your agent.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="flex-grow overflow-y-auto px-4 py-4">
+          <InputList blockInputs={blockInputs} onInputChange={onInputChange} />
+        </div>
+        <DialogFooter className="px-6 py-4">
+          <Button
+            onClick={handleRun}
+            className="px-8 py-2 text-lg"
+            disabled={isRunning}
+          >
+            {isRunning ? "Running..." : "Run"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export default RunnerInputUI;

rnd/autogpt_builder/src/components/runner-ui/RunnerOutputUI.tsx

@@ -0,0 +1,94 @@
+import React from "react";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetDescription,
+} from "@/components/ui/sheet";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { BlockIORootSchema } from "@/lib/autogpt-server-api/types";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+
+interface BlockOutput {
+  id: string;
+  outputSchema: BlockIORootSchema;
+  hardcodedValues: {
+    name: string;
+    description: string;
+  };
+  result?: any;
+}
+
+interface OutputModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  blockOutputs: BlockOutput[];
+}
+
+const formatOutput = (output: any): string => {
+  if (typeof output === "object") {
+    try {
+      return JSON.stringify(output, null, 2);
+    } catch (error) {
+      return `Error formatting output: ${(error as Error).message}`;
+    }
+  }
+  return String(output);
+};
+
+export function RunnerOutputUI({
+  isOpen,
+  onClose,
+  blockOutputs,
+}: OutputModalProps) {
+  return (
+    <Sheet open={isOpen} onOpenChange={onClose}>
+      <SheetContent
+        side="right"
+        className="flex h-full w-full flex-col overflow-hidden sm:max-w-[500px]"
+      >
+        <SheetHeader className="px-2 py-2">
+          <SheetTitle className="text-xl">Run Outputs</SheetTitle>
+          <SheetDescription className="mt-1 text-sm">
+            View the outputs from your agent run.
+          </SheetDescription>
+        </SheetHeader>
+        <div className="flex-grow overflow-y-auto px-2 py-2">
+          <ScrollArea className="h-full overflow-auto pr-4">
+            <div className="space-y-4">
+              {blockOutputs && blockOutputs.length > 0 ? (
+                blockOutputs.map((block) => (
+                  <div key={block.id} className="space-y-1">
+                    <Label className="text-base font-semibold">
+                      {block.hardcodedValues.name || "Unnamed Output"}
+                    </Label>
+
+                    {block.hardcodedValues.description && (
+                      <Label className="block text-sm text-gray-600">
+                        {block.hardcodedValues.description}
+                      </Label>
+                    )}
+
+                    <div className="rounded-md bg-gray-100 p-2">
+                      <Textarea
+                        readOnly
+                        value={formatOutput(block.result ?? "No output yet")}
+                        className="resize-none whitespace-pre-wrap break-words border-none bg-transparent text-sm"
+                      />
+                    </div>
+                  </div>
+                ))
+              ) : (
+                <p>No output blocks available.</p>
+              )}
+            </div>
+          </ScrollArea>
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+}
+
+export default RunnerOutputUI;

rnd/autogpt_builder/src/components/ui/input.tsx

@@ -6,20 +6,7 @@ export interface InputProps
   extends React.InputHTMLAttributes<HTMLInputElement> {}
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, type, value, ...props }, ref) => {
-    // This ref allows the `Input` component to be both controlled and uncontrolled.
-    // The HTMLvalue will only be updated if the value prop changes, but the user can still type in the input.
-    ref = ref || React.createRef<HTMLInputElement>();
-    React.useEffect(() => {
-      if (
-        ref &&
-        ref.current &&
-        ref.current.value !== value &&
-        type !== "file"
-      ) {
-        ref.current.value = value;
-      }
-    }, [value, type, ref]);
+  ({ className, type, ...props }, ref) => {
     return (
       <input
         type={type}
@@ -29,7 +16,6 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
           className,
         )}
         ref={ref}
-        defaultValue={type !== "file" ? value : undefined}
         {...props}
       />
     );

rnd/autogpt_builder/src/hooks/useAgentGraph.ts

@@ -139,8 +139,8 @@ export default function useAgentGraph(
             id: node.id,
             type: "custom",
             position: {
-              x: node.metadata.position.x,
-              y: node.metadata.position.y,
+              x: node?.metadata?.position?.x || 0,
+              y: node?.metadata?.position?.y || 0,
             },
             data: {
               block_id: block.id,
@@ -614,7 +614,7 @@ export default function useAgentGraph(
           }));
 
         return {
-          id: node.data.backend_id,
+          id: node.id,
           block_id: node.data.block_id,
           input_default: inputDefault,
           input_nodes: inputNodes,
@@ -643,35 +643,59 @@ export default function useAgentGraph(
         nodes: formattedNodes,
         links: links,
       };
-      if (savedAgent && deepEquals(payload, savedAgent, true)) {
+
+      // To avoid saving the same graph, we compare the payload with the saved agent.
+      // Differences in IDs are ignored.
+      const comparedPayload = {
+        ...(({ id, ...rest }) => rest)(payload),
+        nodes: payload.nodes.map(
+          ({ id, data, input_nodes, output_nodes, ...rest }) => rest,
+        ),
+        links: payload.links.map(({ source_id, sink_id, ...rest }) => rest),
+      };
+      const comparedSavedAgent = {
+        name: savedAgent?.name,
+        description: savedAgent?.description,
+        nodes: savedAgent?.nodes.map((v) => ({
+          block_id: v.block_id,
+          input_default: v.input_default,
+          metadata: v.metadata,
+        })),
+        links: savedAgent?.links.map((v) => ({
+          sink_name: v.sink_name,
+          source_name: v.source_name,
+        })),
+      };
+
+      let newSavedAgent = null;
+      if (savedAgent && deepEquals(comparedPayload, comparedSavedAgent)) {
         console.warn("No need to save: Graph is the same as version on server");
-        // Trigger state change
-        setSavedAgent(savedAgent);
-        return;
+        newSavedAgent = savedAgent;
       } else {
         console.debug(
           "Saving new Graph version; old vs new:",
-          savedAgent,
+          comparedPayload,
           payload,
         );
+        setNodesSyncedWithSavedAgent(false);
+
+        newSavedAgent = savedAgent
+          ? await (savedAgent.is_template
+              ? api.updateTemplate(savedAgent.id, payload)
+              : api.updateGraph(savedAgent.id, payload))
+          : await (asTemplate
+              ? api.createTemplate(payload)
+              : api.createGraph(payload));
+
+        console.debug("Response from the API:", newSavedAgent);
       }
 
-      setNodesSyncedWithSavedAgent(false);
-
-      const newSavedAgent = savedAgent
-        ? await (savedAgent.is_template
-            ? api.updateTemplate(savedAgent.id, payload)
-            : api.updateGraph(savedAgent.id, payload))
-        : await (asTemplate
-            ? api.createTemplate(payload)
-            : api.createGraph(payload));
-      console.debug("Response from the API:", newSavedAgent);
-
       // Route the URL to the new flow ID if it's a new agent.
       if (!savedAgent) {
         const path = new URLSearchParams(searchParams);
         path.set("flowID", newSavedAgent.id);
-        router.replace(`${pathname}?${path.toString()}`);
+        router.push(`${pathname}?${path.toString()}`);
+        return;
       }
 
       // Update the node IDs on the frontend

rnd/autogpt_builder/src/instrumentation.ts

@@ -0,0 +1,13 @@
+import * as Sentry from "@sentry/nextjs";
+
+export async function register() {
+  if (process.env.NEXT_RUNTIME === "nodejs") {
+    await import("../sentry.server.config");
+  }
+
+  if (process.env.NEXT_RUNTIME === "edge") {
+    await import("../sentry.edge.config");
+  }
+}
+
+export const onRequestError = Sentry.captureRequestError;

rnd/autogpt_builder/src/lib/supabase/client.ts

@@ -7,6 +7,7 @@ export function createClient() {
       process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
     );
   } catch (error) {
+    console.error("error creating client", error);
     return null;
   }
 }

rnd/autogpt_builder/src/lib/utils.ts

@@ -20,21 +20,18 @@ export function hashString(str: string): number {
 }
 
 /** Derived from https://stackoverflow.com/a/32922084 */
-export function deepEquals(x: any, y: any, allowMissingKeys = false): boolean {
+export function deepEquals(x: any, y: any): boolean {
   const ok = Object.keys,
     tx = typeof x,
     ty = typeof y;
 
-  const sk = (a: object, b: object) => ok(a).filter((k) => k in b);
-  const skipLengthCheck = allowMissingKeys && !Array.isArray(x);
-
   const res =
     x &&
     y &&
     tx === ty &&
     (tx === "object"
-      ? (skipLengthCheck || ok(x).length === ok(y).length) &&
-        sk(x, y).every((key) => deepEquals(x[key], y[key], allowMissingKeys))
+      ? ok(x).length === ok(y).length &&
+        ok(x).every((key) => deepEquals(x[key], y[key]))
       : x === y);
   return res;
 }
@@ -188,7 +185,7 @@ export const categoryColorMap: Record<string, string> = {
   SEARCH: "bg-blue-300/[.7]",
   BASIC: "bg-purple-300/[.7]",
   INPUT: "bg-cyan-300/[.7]",
-  OUTPUT: "bg-brown-300/[.7]",
+  OUTPUT: "bg-red-300/[.7]",
   LOGIC: "bg-teal-300/[.7]",
 };
 
@@ -198,3 +195,10 @@ export function getPrimaryCategoryColor(categories: Category[]): string {
   }
   return categoryColorMap[categories[0].category] || "bg-gray-300/[.7]";
 }
+
+export function filterBlocksByType<T>(
+  blocks: T[],
+  predicate: (block: T) => boolean,
+): T[] {
+  return blocks.filter(predicate);
+}

rnd/autogpt_builder/src/lib/withRoleAccess.ts

@@ -1,16 +1,23 @@
 import { redirect } from "next/navigation";
 import getServerUser from "@/hooks/getServerUser";
 import React from "react";
+import * as Sentry from "@sentry/nextjs";
 
 export async function withRoleAccess(allowedRoles: string[]) {
   "use server";
-  return async function <T extends React.ComponentType<any>>(Component: T) {
-    const { user, role, error } = await getServerUser();
+  return await Sentry.withServerActionInstrumentation(
+    "withRoleAccess",
+    {},
+    async () => {
+      return async function <T extends React.ComponentType<any>>(Component: T) {
+        const { user, role, error } = await getServerUser();
 
-    if (error || !user || !role || !allowedRoles.includes(role)) {
-      redirect("/unauthorized");
-    }
+        if (error || !user || !role || !allowedRoles.includes(role)) {
+          redirect("/unauthorized");
+        }
 
-    return Component;
-  };
+        return Component;
+      };
+    },
+  );
 }

rnd/autogpt_server/autogpt_server/executor/manager.py

@@ -155,7 +155,7 @@ def execute_node(
     try:
         credit = wait(user_credit.get_or_refill_credit(user_id))
         if credit < 0:
-            raise ValueError("Insufficient credit: {credit}")
+            raise ValueError(f"Insufficient credit: {credit}")
 
         for output_name, output_data in node_block.execute(input_data):
             output_size += len(json.dumps(output_data))