Merge branch 'master' into master

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

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