diff --git a/app/api/ai-gateway/consent/route.ts b/app/api/ai-gateway/consent/route.ts
new file mode 100644
index 000000000..700b95a4f
--- /dev/null
+++ b/app/api/ai-gateway/consent/route.ts
@@ -0,0 +1,286 @@
+import { and, eq } from "drizzle-orm";
+import { isAiGatewayManagedKeysEnabled } from "@/lib/ai-gateway/config";
+import { auth } from "@/lib/auth";
+import { db } from "@/lib/db";
+import { decrypt, encrypt } from "@/lib/db/integrations";
+import { accounts, integrations } from "@/lib/db/schema";
+import { generateId } from "@/lib/utils/id";
+
+const API_KEY_PURPOSE = "ai-gateway";
+const API_KEY_NAME = "Workflow Builder Gateway Key";
+
+/**
+ * Get team ID from Vercel API
+ * First tries /v2/teams, then falls back to userinfo endpoint
+ */
+async function getTeamId(accessToken: string): Promise<string | null> {
+  // First, try to get teams the user has granted access to
+  const teamsResponse = await fetch("https://api.vercel.com/v2/teams", {
+    headers: { Authorization: `Bearer ${accessToken}` },
+  });
+
+  if (teamsResponse.ok) {
+    const teamsData = await teamsResponse.json();
+    // biome-ignore lint/suspicious/noExplicitAny: API response type
+    const accessibleTeam = teamsData.teams?.find((t: any) => !t.limited);
+    if (accessibleTeam) {
+      return accessibleTeam.id;
+    }
+  }
+
+  // Fallback: get user ID from userinfo endpoint
+  const userinfoResponse = await fetch(
+    "https://api.vercel.com/login/oauth/userinfo",
+    { headers: { Authorization: `Bearer ${accessToken}` } }
+  );
+
+  if (!userinfoResponse.ok) {
+    return null;
+  }
+
+  const userinfo = await userinfoResponse.json();
+  return userinfo.sub;
+}
+
+/**
+ * Create or exchange API key on Vercel
+ */
+async function createVercelApiKey(
+  accessToken: string,
+  teamId: string
+): Promise<{ token: string; id: string } | null> {
+  const response = await fetch(
+    `https://api.vercel.com/v1/api-keys?teamId=${teamId}`,
+    {
+      method: "POST",
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        purpose: API_KEY_PURPOSE,
+        name: API_KEY_NAME,
+        exchange: true,
+      }),
+    }
+  );
+
+  if (!response.ok) {
+    console.error(
+      "[ai-gateway] Failed to create API key:",
+      await response.text()
+    );
+    return null;
+  }
+
+  const newKey = await response.json();
+  if (!newKey.apiKeyString) {
+    return null;
+  }
+
+  return { token: newKey.apiKeyString, id: newKey.apiKey?.id };
+}
+
+type SaveIntegrationParams = {
+  userId: string;
+  apiKey: string;
+  apiKeyId: string;
+  teamId: string;
+  teamName: string;
+};
+
+/**
+ * Save managed integration in database
+ * Each team gets its own managed integration - always creates a new one
+ * The apiKeyId and teamId are stored in config for later deletion
+ */
+async function saveIntegration(params: SaveIntegrationParams): Promise<string> {
+  const { userId, apiKey, apiKeyId, teamId, teamName } = params;
+
+  // Config contains the API key plus metadata for managing the key
+  const configData = { apiKey, managedKeyId: apiKeyId, teamId };
+  // Encrypt the entire config for storage (consistent with other integrations)
+  const encryptedConfig = encrypt(JSON.stringify(configData));
+
+  // Always create a new integration - users can have multiple managed keys for different teams
+  const integrationId = generateId();
+  await db.insert(integrations).values({
+    id: integrationId,
+    userId,
+    name: teamName,
+    type: "ai-gateway",
+    config: encryptedConfig,
+    isManaged: true,
+  });
+  return integrationId;
+}
+
+/**
+ * Delete API key from Vercel
+ */
+async function deleteVercelApiKey(
+  accessToken: string,
+  apiKeyId: string,
+  teamId: string
+): Promise<void> {
+  await fetch(
+    `https://api.vercel.com/v1/api-keys/${apiKeyId}?teamId=${teamId}`,
+    {
+      method: "DELETE",
+      headers: { Authorization: `Bearer ${accessToken}` },
+    }
+  );
+}
+
+/**
+ * POST /api/ai-gateway/consent
+ * Record consent and create API key on user's Vercel account
+ */
+export async function POST(request: Request) {
+  if (!isAiGatewayManagedKeysEnabled()) {
+    return Response.json({ error: "Feature not enabled" }, { status: 403 });
+  }
+
+  const session = await auth.api.getSession({ headers: request.headers });
+  if (!session?.user?.id) {
+    return Response.json({ error: "Not authenticated" }, { status: 401 });
+  }
+
+  const account = await db.query.accounts.findFirst({
+    where: eq(accounts.userId, session.user.id),
+  });
+
+  if (!account?.accessToken || account.providerId !== "vercel") {
+    return Response.json(
+      { error: "No Vercel account linked" },
+      { status: 400 }
+    );
+  }
+
+  // Get teamId and teamName from request body
+  let teamId: string | null = null;
+  let teamName: string | null = null;
+  try {
+    const body = await request.json();
+    teamId = body.teamId;
+    teamName = body.teamName;
+  } catch {
+    // If no body, try to auto-detect
+  }
+
+  // If no teamId provided, try to auto-detect
+  if (!teamId) {
+    teamId = await getTeamId(account.accessToken);
+  }
+
+  if (!teamId) {
+    return Response.json(
+      { error: "Could not determine user's team" },
+      { status: 500 }
+    );
+  }
+
+  try {
+    const vercelApiKey = await createVercelApiKey(account.accessToken, teamId);
+    if (!vercelApiKey) {
+      return Response.json(
+        { error: "Failed to create API key" },
+        { status: 500 }
+      );
+    }
+
+    const integrationId = await saveIntegration({
+      userId: session.user.id,
+      apiKey: vercelApiKey.token,
+      apiKeyId: vercelApiKey.id,
+      teamId,
+      teamName: teamName || "AI Gateway",
+    });
+
+    return Response.json({
+      success: true,
+      hasManagedKey: true,
+      managedIntegrationId: integrationId,
+    });
+  } catch (e) {
+    console.error("[ai-gateway] Error creating API key:", e);
+    return Response.json(
+      { error: "Failed to create API key" },
+      { status: 500 }
+    );
+  }
+}
+
+/**
+ * DELETE /api/ai-gateway/consent?integrationId=xxx
+ * Revoke consent and delete the API key
+ * Requires integrationId query parameter to specify which integration to delete
+ */
+export async function DELETE(request: Request) {
+  if (!isAiGatewayManagedKeysEnabled()) {
+    return Response.json({ error: "Feature not enabled" }, { status: 403 });
+  }
+
+  const session = await auth.api.getSession({ headers: request.headers });
+  if (!session?.user?.id) {
+    return Response.json({ error: "Not authenticated" }, { status: 401 });
+  }
+
+  const { searchParams } = new URL(request.url);
+  const integrationId = searchParams.get("integrationId");
+
+  if (!integrationId) {
+    return Response.json(
+      { error: "integrationId query parameter is required" },
+      { status: 400 }
+    );
+  }
+
+  const managedIntegration = await db.query.integrations.findFirst({
+    where: and(
+      eq(integrations.id, integrationId),
+      eq(integrations.userId, session.user.id),
+      eq(integrations.type, "ai-gateway"),
+      eq(integrations.isManaged, true)
+    ),
+  });
+
+  if (!managedIntegration) {
+    return Response.json({ error: "Integration not found" }, { status: 404 });
+  }
+
+  // Get managedKeyId and teamId from config (decrypt it first since it's stored encrypted)
+  let config: { managedKeyId?: string; teamId?: string } | null = null;
+  if (managedIntegration?.config) {
+    try {
+      const decrypted = decrypt(managedIntegration.config as string);
+      config = JSON.parse(decrypted);
+    } catch (e) {
+      console.error("[ai-gateway] Failed to decrypt config:", e);
+    }
+  }
+
+  if (config?.managedKeyId && config?.teamId) {
+    const account = await db.query.accounts.findFirst({
+      where: eq(accounts.userId, session.user.id),
+    });
+
+    if (account?.accessToken) {
+      try {
+        await deleteVercelApiKey(
+          account.accessToken,
+          config.managedKeyId,
+          config.teamId
+        );
+      } catch (e) {
+        console.error("[ai-gateway] Failed to delete API key from Vercel:", e);
+      }
+    }
+  }
+
+  await db
+    .delete(integrations)
+    .where(eq(integrations.id, managedIntegration.id));
+
+  return Response.json({ success: true, hasManagedKey: false });
+}
diff --git a/app/api/ai-gateway/status/route.ts b/app/api/ai-gateway/status/route.ts
new file mode 100644
index 000000000..1ae0aac30
--- /dev/null
+++ b/app/api/ai-gateway/status/route.ts
@@ -0,0 +1,60 @@
+import { and, eq } from "drizzle-orm";
+import { isAiGatewayManagedKeysEnabled } from "@/lib/ai-gateway/config";
+import { auth } from "@/lib/auth";
+import { db } from "@/lib/db";
+import { accounts, integrations } from "@/lib/db/schema";
+
+/**
+ * GET /api/ai-gateway/status
+ * Returns user's AI Gateway status including whether they can use managed keys
+ */
+export async function GET(request: Request) {
+  const enabled = isAiGatewayManagedKeysEnabled();
+
+  // If feature is not enabled, return minimal response
+  if (!enabled) {
+    return Response.json({
+      enabled: false,
+      signedIn: false,
+      isVercelUser: false,
+      hasManagedKey: false,
+    });
+  }
+
+  const session = await auth.api.getSession({
+    headers: request.headers,
+  });
+
+  if (!session?.user?.id) {
+    return Response.json({
+      enabled: true,
+      signedIn: false,
+      isVercelUser: false,
+      hasManagedKey: false,
+    });
+  }
+
+  // Check if user signed in with Vercel
+  const account = await db.query.accounts.findFirst({
+    where: eq(accounts.userId, session.user.id),
+  });
+
+  const isVercelUser = account?.providerId === "vercel";
+
+  // Check if user has a managed AI Gateway integration
+  const managedIntegration = await db.query.integrations.findFirst({
+    where: and(
+      eq(integrations.userId, session.user.id),
+      eq(integrations.type, "ai-gateway"),
+      eq(integrations.isManaged, true)
+    ),
+  });
+
+  return Response.json({
+    enabled: true,
+    signedIn: true,
+    isVercelUser,
+    hasManagedKey: !!managedIntegration,
+    managedIntegrationId: managedIntegration?.id,
+  });
+}
diff --git a/app/api/ai-gateway/teams/route.ts b/app/api/ai-gateway/teams/route.ts
new file mode 100644
index 000000000..3f6ef5f53
--- /dev/null
+++ b/app/api/ai-gateway/teams/route.ts
@@ -0,0 +1,119 @@
+import { eq } from "drizzle-orm";
+import { isAiGatewayManagedKeysEnabled } from "@/lib/ai-gateway/config";
+import { auth } from "@/lib/auth";
+import { db } from "@/lib/db";
+import { accounts } from "@/lib/db/schema";
+
+export type VercelTeam = {
+  id: string;
+  name: string;
+  slug: string;
+  avatar?: string;
+  isPersonal: boolean;
+};
+
+type VercelTeamApiResponse = {
+  id: string;
+  name: string;
+  slug: string;
+  avatar?: string;
+  limited?: boolean;
+};
+
+type VercelUserResponse = {
+  defaultTeamId: string | null;
+};
+
+/**
+ * Fetch user's default team ID from Vercel API
+ */
+async function fetchDefaultTeamId(accessToken: string): Promise<string | null> {
+  const response = await fetch("https://api.vercel.com/v2/user", {
+    headers: { Authorization: `Bearer ${accessToken}` },
+  });
+
+  if (!response.ok) return null;
+
+  const data = (await response.json()) as { user?: VercelUserResponse };
+  return data.user?.defaultTeamId ?? null;
+}
+
+/**
+ * Fetch teams from Vercel API and transform to our format
+ */
+async function fetchTeams(accessToken: string): Promise<VercelTeam[]> {
+  const response = await fetch("https://api.vercel.com/v2/teams", {
+    headers: { Authorization: `Bearer ${accessToken}` },
+  });
+
+  if (!response.ok) return [];
+
+  const data = (await response.json()) as { teams?: VercelTeamApiResponse[] };
+  const teams: VercelTeam[] = [];
+
+  for (const team of data.teams || []) {
+    if (team.limited) continue;
+    teams.push({
+      id: team.id,
+      name: team.name,
+      slug: team.slug,
+      // Team avatar URL uses teamId
+      avatar: `https://vercel.com/api/www/avatar?teamId=${team.id}&s=64`,
+      isPersonal: false,
+    });
+  }
+
+  return teams;
+}
+
+/**
+ * GET /api/ai-gateway/teams
+ * Fetch Vercel teams for the authenticated user
+ */
+export async function GET(request: Request) {
+  if (!isAiGatewayManagedKeysEnabled()) {
+    return Response.json({ error: "Feature not enabled" }, { status: 403 });
+  }
+
+  const session = await auth.api.getSession({ headers: request.headers });
+  if (!session?.user?.id) {
+    return Response.json({ error: "Not authenticated" }, { status: 401 });
+  }
+
+  const account = await db.query.accounts.findFirst({
+    where: eq(accounts.userId, session.user.id),
+  });
+
+  if (!account?.accessToken || account.providerId !== "vercel") {
+    return Response.json(
+      { error: "No Vercel account linked" },
+      { status: 400 }
+    );
+  }
+
+  try {
+    // Fetch default team ID and teams in parallel
+    const [defaultTeamId, teams] = await Promise.all([
+      fetchDefaultTeamId(account.accessToken),
+      fetchTeams(account.accessToken),
+    ]);
+
+    // Mark the user's default team as personal
+    const teamsWithPersonal = teams.map((team) => ({
+      ...team,
+      isPersonal: team.id === defaultTeamId,
+    }));
+
+    // Sort: personal/default team first, then alphabetically by name
+    const sortedTeams = teamsWithPersonal.sort((a, b) => {
+      if (a.isPersonal) return -1;
+      if (b.isPersonal) return 1;
+      return a.name.localeCompare(b.name);
+    });
+
+    return Response.json({ teams: sortedTeams });
+  } catch (e) {
+    console.error("[ai-gateway] Error fetching teams:", e);
+    return Response.json({ error: "Failed to fetch teams" }, { status: 500 });
+  }
+}
diff --git a/app/api/integrations/route.ts b/app/api/integrations/route.ts
index fa50cbb0b..4c591e6ca 100644
--- a/app/api/integrations/route.ts
+++ b/app/api/integrations/route.ts
@@ -11,13 +11,14 @@ export type GetIntegrationsResponse = {
   id: string;
   name: string;
   type: IntegrationType;
+  isManaged?: boolean;
   createdAt: string;
   updatedAt: string;
   // Config is intentionally excluded for security
 }[];
 
 export type CreateIntegrationRequest = {
-  name: string;
+  name?: string;
   type: IntegrationType;
   config: IntegrationConfig;
 };
@@ -59,6 +60,7 @@ export async function GET(request: Request) {
         id: integration.id,
         name: integration.name,
         type: integration.type,
+        isManaged: integration.isManaged ?? false,
         createdAt: integration.createdAt.toISOString(),
         updatedAt: integration.updatedAt.toISOString(),
       })
@@ -86,16 +88,16 @@ export async function POST(request: Request) {
 
     const body: CreateIntegrationRequest = await request.json();
 
-    if (!(body.name && body.type && body.config)) {
+    if (!(body.type && body.config)) {
       return NextResponse.json(
-        { error: "Name, type, and config are required" },
+        { error: "Type and config are required" },
         { status: 400 }
       );
     }
 
     const integration = await createIntegration(
       session.user.id,
-      body.name,
+      body.name || "",
       body.type,
       body.config
     );
diff --git a/app/api/integrations/test/route.ts b/app/api/integrations/test/route.ts
new file mode 100644
index 000000000..ce85c3141
--- /dev/null
+++ b/app/api/integrations/test/route.ts
@@ -0,0 +1,135 @@
+import { NextResponse } from "next/server";
+import postgres from "postgres";
+import { auth } from "@/lib/auth";
+import type {
+  IntegrationConfig,
+  IntegrationType,
+} from "@/lib/types/integration";
+import {
+  getCredentialMapping,
+  getIntegration as getPluginFromRegistry,
+} from "@/plugins";
+
+export type TestConnectionRequest = {
+  type: IntegrationType;
+  config: IntegrationConfig;
+};
+
+export type TestConnectionResult = {
+  status: "success" | "error";
+  message: string;
+};
+
+/**
+ * POST /api/integrations/test
+ * Test connection credentials without saving
+ */
+export async function POST(request: Request) {
+  try {
+    const session = await auth.api.getSession({
+      headers: request.headers,
+    });
+
+    if (!session?.user) {
+      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+    }
+
+    const body: TestConnectionRequest = await request.json();
+
+    if (!(body.type && body.config)) {
+      return NextResponse.json(
+        { error: "Type and config are required" },
+        { status: 400 }
+      );
+    }
+
+    if (body.type === "database") {
+      const url = body.config.url;
+      if (typeof url !== "string") {
+        return NextResponse.json(
+          { error: "Database URL must be a string" },
+          { status: 400 }
+        );
+      }
+      const result = await testDatabaseConnection(url);
+      return NextResponse.json(result);
+    }
+
+    const plugin = getPluginFromRegistry(body.type);
+
+    if (!plugin) {
+      return NextResponse.json(
+        { error: "Invalid integration type" },
+        { status: 400 }
+      );
+    }
+
+    if (!plugin.testConfig) {
+      return NextResponse.json(
+        { error: "Integration does not support testing" },
+        { status: 400 }
+      );
+    }
+
+    const credentials = getCredentialMapping(plugin, body.config);
+
+    const testFn = await plugin.testConfig.getTestFunction();
+    const testResult = await testFn(credentials);
+
+    const result: TestConnectionResult = {
+      status: testResult.success ? "success" : "error",
+      message: testResult.success
+        ? "Connection successful"
+        : testResult.error || "Connection failed",
+    };
+
+    return NextResponse.json(result);
+  } catch (error) {
+    console.error("Failed to test connection:", error);
+    return NextResponse.json(
+      {
+        status: "error",
+        message:
+          error instanceof Error ? error.message : "Failed to test connection",
+      },
+      { status: 500 }
+    );
+  }
+}
+
+async function testDatabaseConnection(
+  databaseUrl?: string
+): Promise<TestConnectionResult> {
+  let connection: postgres.Sql | null = null;
+
+  try {
+    if (!databaseUrl) {
+      return {
+        status: "error",
+        message: "Connection failed",
+      };
+    }
+
+    connection = postgres(databaseUrl, {
+      max: 1,
+      idle_timeout: 5,
+      connect_timeout: 5,
+    });
+
+    await connection`SELECT 1`;
+
+    return {
+      status: "success",
+      message: "Connection successful",
+    };
+  } catch {
+    return {
+      status: "error",
+      message: "Connection failed",
+    };
+  } finally {
+    if (connection) {
+      await connection.end();
+    }
+  }
+}
diff --git a/app/layout.tsx b/app/layout.tsx
index bcff328bd..75d0e2856 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -8,6 +8,7 @@ import { type ReactNode, Suspense } from "react";
 import { AuthProvider } from "@/components/auth/provider";
 import { GitHubStarsLoader } from "@/components/github-stars-loader";
 import { GitHubStarsProvider } from "@/components/github-stars-provider";
+import { GlobalModals } from "@/components/global-modals";
 import { ThemeProvider } from "@/components/theme-provider";
 import { Toaster } from "@/components/ui/sonner";
 import { PersistentCanvas } from "@/components/workflow/persistent-canvas";
@@ -65,6 +66,7 @@ const RootLayout = ({ children }: RootLayoutProps) => (
               </GitHubStarsLoader>
             </Suspense>
             <Toaster />
+            <GlobalModals />
           </AuthProvider>
         </Provider>
       </ThemeProvider>
diff --git a/app/workflows/[workflowId]/page.tsx b/app/workflows/[workflowId]/page.tsx
index c760640dd..1c03c860d 100644
--- a/app/workflows/[workflowId]/page.tsx
+++ b/app/workflows/[workflowId]/page.tsx
@@ -129,7 +129,7 @@ const WorkflowEditor = ({ params }: WorkflowPageProps) => {
   const setCurrentWorkflowVisibility = useSetAtom(
     currentWorkflowVisibilityAtom
   );
-  const setIsWorkflowOwner = useSetAtom(isWorkflowOwnerAtom);
+  const [isOwner, setIsWorkflowOwner] = useAtom(isWorkflowOwnerAtom);
   const setGlobalIntegrations = useSetAtom(integrationsAtom);
   const setIntegrationsLoaded = useSetAtom(integrationsLoadedAtom);
   const integrationsVersion = useAtomValue(integrationsVersionAtom);
@@ -427,6 +427,11 @@ const WorkflowEditor = ({ params }: WorkflowPageProps) => {
       return;
     }
 
+    // Skip for non-owners (they can't modify the workflow and may not be authenticated)
+    if (!isOwner) {
+      return;
+    }
+
     // Skip if already checked for this workflow+version combination
     const lastFix = lastAutoFixRef.current;
     if (
@@ -480,6 +485,7 @@ const WorkflowEditor = ({ params }: WorkflowPageProps) => {
     nodes,
     currentWorkflowId,
     integrationsVersion,
+    isOwner,
     updateNodeData,
     setGlobalIntegrations,
     setIntegrationsLoaded,
@@ -677,7 +683,7 @@ const WorkflowEditor = ({ params }: WorkflowPageProps) => {
       {/* Expand button when panel is collapsed */}
       {!isMobile && panelCollapsed && (
         <button
-          className="-translate-y-1/2 pointer-events-auto absolute top-1/2 right-0 z-20 flex size-6 items-center justify-center rounded-l-full border border-r-0 bg-background shadow-sm transition-colors hover:bg-muted"
+          className="pointer-events-auto absolute top-1/2 right-0 z-20 flex size-6 -translate-y-1/2 items-center justify-center rounded-l-full border border-r-0 bg-background shadow-sm transition-colors hover:bg-muted"
           onClick={() => {
             setIsPanelAnimating(true);
             setPanelCollapsed(false);
@@ -716,7 +722,7 @@ const WorkflowEditor = ({ params }: WorkflowPageProps) => {
             {/* Collapse button - hidden while resizing */}
             {!(isDraggingResize || panelCollapsed) && (
               <button
-                className="-translate-x-1/2 -translate-y-1/2 absolute top-1/2 left-0 flex size-6 items-center justify-center rounded-full border bg-background opacity-0 shadow-sm transition-opacity hover:bg-muted group-hover:opacity-100"
+                className="absolute top-1/2 left-0 flex size-6 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full border bg-background opacity-0 shadow-sm transition-opacity hover:bg-muted group-hover:opacity-100"
                 onClick={(e) => {
                   e.stopPropagation();
                   setIsPanelAnimating(true);
diff --git a/biome.jsonc b/biome.jsonc
index c98cd851b..d2f824a9a 100644
--- a/biome.jsonc
+++ b/biome.jsonc
@@ -8,7 +8,10 @@
       "!components/ai-elements",
       "!lib/utils.ts",
       "!hooks/use-mobile.ts",
-      "!plugins"
+      "!plugins",
+      "!app/api/ai-gateway",
+      "!lib/ai-gateway",
+      "!components/workflow/config/action-grid.tsx"
     ]
   }
 }
diff --git a/components/ai-gateway-consent-modal.tsx b/components/ai-gateway-consent-modal.tsx
new file mode 100644
index 000000000..8a8754ffc
--- /dev/null
+++ b/components/ai-gateway-consent-modal.tsx
@@ -0,0 +1,234 @@
+"use client";
+
+import { useAtom, useAtomValue, useSetAtom } from "jotai";
+import { Loader2, Sparkles, X } from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  aiGatewayConsentCallbacksAtom,
+  aiGatewayStatusAtom,
+  aiGatewayTeamsAtom,
+  aiGatewayTeamsLoadingAtom,
+  showAiGatewayConsentModalAtom,
+} from "@/lib/ai-gateway/state";
+import { api } from "@/lib/api-client";
+
+/**
+ * Global AI Gateway consent modal.
+ * Render this ONCE at app level. Control via atoms:
+ * - Set callbacks with aiGatewayConsentCallbacksAtom
+ * - Open modal with showAiGatewayConsentModalAtom
+ */
+export function AiGatewayConsentModal() {
+  const [showModal, setShowModal] = useAtom(showAiGatewayConsentModalAtom);
+  const callbacks = useAtomValue(aiGatewayConsentCallbacksAtom);
+  const setStatus = useSetAtom(aiGatewayStatusAtom);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [selectedTeamId, setSelectedTeamId] = useState<string>("");
+
+  // Use pre-loaded teams from state
+  const teams = useAtomValue(aiGatewayTeamsAtom);
+  const teamsLoading = useAtomValue(aiGatewayTeamsLoadingAtom);
+
+  // Reset state when modal opens
+  useEffect(() => {
+    if (showModal) {
+      setLoading(false);
+      setError(null);
+      // Auto-select first team when teams are loaded
+      if (teams.length > 0 && !selectedTeamId) {
+        setSelectedTeamId(teams[0].id);
+      }
+    }
+  }, [showModal, teams, selectedTeamId]);
+
+  const completeConsent = useCallback(
+    (integrationId: string) => {
+      setLoading(false);
+      setShowModal(false);
+      callbacks.onConsent?.(integrationId);
+    },
+    [setShowModal, callbacks]
+  );
+
+  const handleConsent = useCallback(async () => {
+    if (!selectedTeamId) {
+      setError("Please select a team");
+      return;
+    }
+
+    const selectedTeam = teams.find((t) => t.id === selectedTeamId);
+    const teamName = selectedTeam?.name || "AI Gateway";
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      const result = await api.aiGateway.consent(selectedTeamId, teamName);
+
+      if (!result.success) {
+        throw new Error(result.error || "Failed to set up AI Gateway");
+      }
+
+      const integrationId = result.managedIntegrationId || "";
+
+      // Update status atom
+      setStatus((prev) =>
+        prev
+          ? {
+              ...prev,
+              hasManagedKey: result.hasManagedKey,
+              managedIntegrationId: integrationId,
+            }
+          : null
+      );
+
+      // For managed connections, skip testing - the key was just created by Vercel
+      // and is definitely valid. Testing would require decryption which adds complexity.
+      completeConsent(integrationId);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "An error occurred");
+      setLoading(false);
+    }
+  }, [selectedTeamId, teams, setStatus, completeConsent]);
+
+  const handleDecline = useCallback(() => {
+    setShowModal(false);
+    callbacks.onDecline?.();
+  }, [setShowModal, callbacks]);
+
+  const handleManualEntry = useCallback(() => {
+    setShowModal(false);
+    callbacks.onManualEntry?.();
+  }, [setShowModal, callbacks]);
+
+  return (
+    <Dialog onOpenChange={(open) => !open && handleDecline()} open={showModal}>
+      <DialogContent className="max-w-md">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Sparkles className="size-5 text-primary" />
+            Use Your AI Gateway Credits
+          </DialogTitle>
+          <DialogDescription>
+            Connect your Vercel account to use your own AI Gateway balance
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4 py-4">
+          <p className="text-muted-foreground text-sm">
+            This will create an API key on your Vercel account that uses your AI
+            Gateway credits for AI operations in workflows.
+          </p>
+
+          <div className="space-y-2">
+            <Label htmlFor="team-select">Vercel Team</Label>
+            {teamsLoading && teams.length === 0 ? (
+              <div className="flex h-10 items-center gap-2 rounded-md border px-3 text-muted-foreground text-sm">
+                <Loader2 className="size-4 animate-spin" />
+                Loading teams...
+              </div>
+            ) : (
+              <Select
+                disabled={loading}
+                onValueChange={setSelectedTeamId}
+                value={selectedTeamId}
+              >
+                <SelectTrigger id="team-select">
+                  <SelectValue placeholder="Select a team" />
+                </SelectTrigger>
+                <SelectContent>
+                  {teams.map((team, index) => (
+                    <div key={team.id}>
+                      <SelectItem value={team.id}>
+                        <div className="flex items-center gap-2">
+                          {team.avatar ? (
+                            // biome-ignore lint/correctness/useImageSize: Avatar has fixed size
+                            // biome-ignore lint/performance/noImgElement: External Vercel avatar
+                            <img
+                              alt=""
+                              className="size-4 rounded-full bg-white"
+                              src={team.avatar}
+                            />
+                          ) : (
+                            <div className="size-4 rounded-full bg-white" />
+                          )}
+                          <span>{team.name}</span>
+                          {team.isPersonal && (
+                            <span className="text-muted-foreground text-xs">
+                              (Personal)
+                            </span>
+                          )}
+                        </div>
+                      </SelectItem>
+                      {team.isPersonal && index < teams.length - 1 && (
+                        <SelectSeparator />
+                      )}
+                    </div>
+                  ))}
+                </SelectContent>
+              </Select>
+            )}
+          </div>
+
+          {error && (
+            <div className="flex items-start gap-3 rounded-md border border-red-500/30 bg-red-500/10 p-3">
+              <X className="mt-0.5 size-4 shrink-0 text-red-500" />
+              <p className="text-red-700 text-sm dark:text-red-400">{error}</p>
+            </div>
+          )}
+        </div>
+
+        <DialogFooter className="sm:justify-between">
+          {callbacks.onManualEntry && (
+            <Button
+              disabled={loading}
+              onClick={handleManualEntry}
+              variant="ghost"
+            >
+              Enter manually
+            </Button>
+          )}
+          <div className="flex gap-2">
+            <Button
+              disabled={loading}
+              onClick={handleDecline}
+              variant="outline"
+            >
+              Cancel
+            </Button>
+            <Button
+              disabled={
+                loading ||
+                (teamsLoading && teams.length === 0) ||
+                !selectedTeamId
+              }
+              onClick={handleConsent}
+            >
+              {loading && <Loader2 className="mr-2 size-4 animate-spin" />}
+              {loading ? "Setting up..." : "Agree & Connect"}
+            </Button>
+          </div>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/components/global-modals.tsx b/components/global-modals.tsx
new file mode 100644
index 000000000..592d4ff4f
--- /dev/null
+++ b/components/global-modals.tsx
@@ -0,0 +1,10 @@
+"use client";
+
+import { AiGatewayConsentModal } from "@/components/ai-gateway-consent-modal";
+
+/**
+ * Global modals that need to be rendered once at app level
+ */
+export function GlobalModals() {
+  return <AiGatewayConsentModal />;
+}
diff --git a/components/settings/api-keys-dialog.tsx b/components/settings/api-keys-dialog.tsx
index d36339631..f40053b5a 100644
--- a/components/settings/api-keys-dialog.tsx
+++ b/components/settings/api-keys-dialog.tsx
@@ -253,25 +253,38 @@ export function ApiKeysDialog({ open, onOpenChange }: ApiKeysDialogProps) {
               Create a new API key for webhook authentication
             </DialogDescription>
           </DialogHeader>
-          <div className="space-y-4 py-4">
-            <div className="space-y-2">
-              <Label htmlFor="key-name">Label (optional)</Label>
-              <Input
-                id="key-name"
-                onChange={(e) => setNewKeyName(e.target.value)}
-                placeholder="e.g., Production, Testing"
-                value={newKeyName}
-              />
+          <form
+            id="create-api-key-form"
+            onSubmit={(e) => {
+              e.preventDefault();
+              handleCreate();
+            }}
+          >
+            <div className="space-y-4 py-4">
+              <div className="space-y-2">
+                <Label htmlFor="key-name">Label (optional)</Label>
+                <Input
+                  id="key-name"
+                  onChange={(e) => setNewKeyName(e.target.value)}
+                  placeholder="e.g., Production, Testing"
+                  value={newKeyName}
+                />
+              </div>
             </div>
-          </div>
+          </form>
           <DialogFooter>
             <Button
               onClick={() => setShowCreateDialog(false)}
+              type="button"
               variant="outline"
             >
               Cancel
             </Button>
-            <Button disabled={creating} onClick={handleCreate}>
+            <Button
+              disabled={creating}
+              form="create-api-key-form"
+              type="submit"
+            >
               {creating ? <Spinner className="mr-2 size-4" /> : null}
               Create
             </Button>
diff --git a/components/settings/index.tsx b/components/settings/index.tsx
index 5e411465a..df9d9d313 100644
--- a/components/settings/index.tsx
+++ b/components/settings/index.tsx
@@ -83,21 +83,36 @@ export function SettingsDialog({ open, onOpenChange }: SettingsDialogProps) {
             <Spinner />
           </div>
         ) : (
-          <div className="mt-4">
+          <form
+            className="mt-4"
+            id="settings-form"
+            onSubmit={(e) => {
+              e.preventDefault();
+              saveAccount();
+            }}
+          >
             <AccountSettings
               accountEmail={accountEmail}
               accountName={accountName}
               onEmailChange={setAccountEmail}
               onNameChange={setAccountName}
             />
-          </div>
+          </form>
         )}
 
         <DialogFooter>
-          <Button onClick={() => onOpenChange(false)} variant="outline">
+          <Button
+            onClick={() => onOpenChange(false)}
+            type="button"
+            variant="outline"
+          >
             Cancel
           </Button>
-          <Button disabled={loading || saving} onClick={saveAccount}>
+          <Button
+            disabled={loading || saving}
+            form="settings-form"
+            type="submit"
+          >
             {saving ? <Spinner className="mr-2 size-4" /> : null}
             Save
           </Button>
diff --git a/components/settings/integration-form-dialog.tsx b/components/settings/integration-form-dialog.tsx
index 9013d886d..523370431 100644
--- a/components/settings/integration-form-dialog.tsx
+++ b/components/settings/integration-form-dialog.tsx
@@ -1,7 +1,29 @@
 "use client";
 
-import { useCallback, useEffect, useState } from "react";
+import { useAtomValue, useSetAtom } from "jotai";
+import {
+  ArrowLeft,
+  Check,
+  CheckCircle2,
+  Pencil,
+  Search,
+  Trash2,
+  X,
+  XCircle,
+  Zap,
+} from "lucide-react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { toast } from "sonner";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
 import {
@@ -15,35 +37,28 @@ import {
 import { Input } from "@/components/ui/input";
 import { IntegrationIcon } from "@/components/ui/integration-icon";
 import { Label } from "@/components/ui/label";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
 import { Spinner } from "@/components/ui/spinner";
 import {
-  api,
-  type Integration,
-  type IntegrationWithConfig,
-} from "@/lib/api-client";
-import type {
-  IntegrationConfig,
-  IntegrationType,
-} from "@/lib/types/integration";
+  aiGatewayStatusAtom,
+  aiGatewayTeamsAtom,
+  aiGatewayTeamsLoadingAtom,
+  openAiGatewayConsentModalAtom,
+} from "@/lib/ai-gateway/state";
+import { api, type Integration } from "@/lib/api-client";
+import type { IntegrationType } from "@/lib/types/integration";
 import {
   getIntegration,
   getIntegrationLabels,
   getSortedIntegrationTypes,
 } from "@/plugins";
-import { SendGridIntegrationSection } from "./sendgrid-integration-section";
+import { getIntegrationDescriptions } from "@/plugins/registry";
 import { Web3WalletSection } from "./web3-wallet-section";
 
 type IntegrationFormDialogProps = {
   open: boolean;
   onClose: () => void;
   onSuccess?: (integrationId: string) => void;
+  onDelete?: () => void;
   integration?: Integration | null;
   mode: "create" | "edit";
   preselectedType?: IntegrationType;
@@ -51,8 +66,8 @@ type IntegrationFormDialogProps = {
 
 type IntegrationFormData = {
   name: string;
-  type: IntegrationType;
-  config: Record<string, string | boolean>;
+  type: IntegrationType | null;
+  config: Record<string, string>;
 };
 
 // System integrations that don't have plugins
@@ -60,6 +75,9 @@ const SYSTEM_INTEGRATION_TYPES: IntegrationType[] = ["database"];
 const SYSTEM_INTEGRATION_LABELS: Record<string, string> = {
   database: "Database",
 };
+const SYSTEM_INTEGRATION_DESCRIPTIONS: Record<string, string> = {
+  database: "Connect to PostgreSQL databases",
+};
 
 // Get all integration types (plugins + system)
 const getIntegrationTypes = (): IntegrationType[] => [
@@ -71,100 +89,612 @@ const getIntegrationTypes = (): IntegrationType[] => [
 const getLabel = (type: IntegrationType): string =>
   getIntegrationLabels()[type] || SYSTEM_INTEGRATION_LABELS[type] || type;
 
+// Get description for any integration type
+const getDescription = (type: IntegrationType): string =>
+  getIntegrationDescriptions()[type] ||
+  SYSTEM_INTEGRATION_DESCRIPTIONS[type] ||
+  "";
+
+function SecretField({
+  fieldId,
+  label,
+  configKey,
+  placeholder,
+  helpText,
+  helpLink,
+  value,
+  onChange,
+  isEditMode,
+}: {
+  fieldId: string;
+  label: string;
+  configKey: string;
+  placeholder?: string;
+  helpText?: string;
+  helpLink?: { url: string; text: string };
+  value: string;
+  onChange: (key: string, value: string) => void;
+  isEditMode: boolean;
+}) {
+  const [isEditing, setIsEditing] = useState(!isEditMode);
+  const hasNewValue = value.length > 0;
+
+  // In edit mode, start with "configured" state
+  // User can click to change, or clear after entering a new value
+  if (isEditMode && !isEditing && !hasNewValue) {
+    return (
+      <div className="space-y-2">
+        <Label htmlFor={fieldId}>{label}</Label>
+        <div className="flex items-center gap-2">
+          <div className="flex h-9 flex-1 items-center gap-2 rounded-md border bg-muted/30 px-3">
+            <Check className="size-4 text-green-600" />
+            <span className="text-muted-foreground text-sm">Configured</span>
+          </div>
+          <Button
+            onClick={() => setIsEditing(true)}
+            type="button"
+            variant="outline"
+          >
+            <Pencil className="mr-1.5 size-3" />
+            Change
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-2">
+      <Label htmlFor={fieldId}>{label}</Label>
+      <div className="flex items-center gap-2">
+        <Input
+          autoFocus={isEditMode && isEditing}
+          className="flex-1"
+          id={fieldId}
+          onChange={(e) => onChange(configKey, e.target.value)}
+          placeholder={placeholder}
+          type="password"
+          value={value}
+        />
+        {isEditMode && (isEditing || hasNewValue) && (
+          <Button
+            onClick={() => {
+              onChange(configKey, "");
+              setIsEditing(false);
+            }}
+            size="icon"
+            type="button"
+            variant="ghost"
+          >
+            <X className="size-4" />
+          </Button>
+        )}
+      </div>
+      {(helpText || helpLink) && (
+        <p className="text-muted-foreground text-xs">
+          {helpText}
+          {helpLink && (
+            <a
+              className="underline hover:text-foreground"
+              href={helpLink.url}
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              {helpLink.text}
+            </a>
+          )}
+        </p>
+      )}
+    </div>
+  );
+}
+
+function ConfigFields({
+  formData,
+  updateConfig,
+  isEditMode,
+}: {
+  formData: IntegrationFormData;
+  updateConfig: (key: string, value: string) => void;
+  isEditMode: boolean;
+}) {
+  if (!formData.type) {
+    return null;
+  }
+
+  // Handle system integrations with hardcoded fields
+  if (formData.type === "database") {
+    return (
+      <SecretField
+        configKey="url"
+        fieldId="url"
+        helpText="Connection string in the format: postgresql://user:password@host:port/database"
+        isEditMode={isEditMode}
+        label="Database URL"
+        onChange={updateConfig}
+        placeholder="postgresql://user:password@host:port/database"
+        value={(formData.config.url as string) || ""}
+      />
+    );
+  }
+
+  // Handle Web3 wallet creation
+  if (formData.type === "web3") {
+    return <Web3WalletSection />;
+  }
+
+  // Get plugin form fields from registry
+  const plugin = getIntegration(formData.type);
+  if (!plugin?.formFields) {
+    return null;
+  }
+
+  return plugin.formFields.map((field) => {
+    const isSecretField = field.type === "password";
+
+    if (isSecretField) {
+      return (
+        <SecretField
+          configKey={field.configKey}
+          fieldId={field.id}
+          helpLink={field.helpLink}
+          helpText={field.helpText}
+          isEditMode={isEditMode}
+          key={field.id}
+          label={field.label}
+          onChange={updateConfig}
+          placeholder={field.placeholder}
+          value={(formData.config[field.configKey] as string) || ""}
+        />
+      );
+    }
+
+    return (
+      <div className="space-y-2" key={field.id}>
+        <Label htmlFor={field.id}>{field.label}</Label>
+        <Input
+          id={field.id}
+          onChange={(e) => updateConfig(field.configKey, e.target.value)}
+          placeholder={field.placeholder}
+          type={field.type}
+          value={(formData.config[field.configKey] as string) || ""}
+        />
+        {(field.helpText || field.helpLink) && (
+          <p className="text-muted-foreground text-xs">
+            {field.helpText}
+            {field.helpLink && (
+              <a
+                className="underline hover:text-foreground"
+                href={field.helpLink.url}
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                {field.helpLink.text}
+              </a>
+            )}
+          </p>
+        )}
+      </div>
+    );
+  });
+}
+
+function FormFooterActions({
+  step,
+  mode,
+  preselectedType,
+  saving,
+  deleting,
+  testing,
+  testResult,
+  onBack,
+  onDelete,
+  onTestConnection,
+  onClose,
+}: {
+  step: "select" | "configure";
+  mode: "create" | "edit";
+  preselectedType?: IntegrationType;
+  saving: boolean;
+  deleting: boolean;
+  testing: boolean;
+  testResult: { status: "success" | "error"; message: string } | null;
+  onBack: () => void;
+  onDelete: () => void;
+  onTestConnection: () => void;
+  onClose: () => void;
+}) {
+  if (step === "select") {
+    return (
+      <Button onClick={onClose} variant="outline">
+        Cancel
+      </Button>
+    );
+  }
+
+  return (
+    <>
+      <div className="flex gap-2">
+        {mode === "create" && !preselectedType && (
+          <Button disabled={saving} onClick={onBack} variant="ghost">
+            <ArrowLeft className="mr-2 size-4" />
+            Back
+          </Button>
+        )}
+        {mode === "edit" && (
+          <Button
+            disabled={saving || deleting || testing}
+            onClick={onDelete}
+            variant="ghost"
+          >
+            <Trash2 className="mr-2 size-4" />
+            Delete
+          </Button>
+        )}
+        <Button
+          disabled={saving || deleting || testing}
+          onClick={onTestConnection}
+          variant="ghost"
+        >
+          <TestConnectionIcon testing={testing} testResult={testResult} />
+          Test Connection
+        </Button>
+      </div>
+      <div className="flex gap-2">
+        <Button
+          disabled={saving || deleting || testing}
+          onClick={onClose}
+          type="button"
+          variant="outline"
+        >
+          Cancel
+        </Button>
+        <Button
+          disabled={saving || deleting || testing}
+          form="integration-form"
+          type="submit"
+        >
+          {saving ? <Spinner className="mr-2 size-4" /> : null}
+          {mode === "edit" ? "Update" : "Create"}
+        </Button>
+      </div>
+    </>
+  );
+}
+
+function TestConnectionIcon({
+  testing,
+  testResult,
+}: {
+  testing: boolean;
+  testResult: { status: "success" | "error"; message: string } | null;
+}) {
+  if (testing) {
+    return <Spinner className="mr-2 size-4" />;
+  }
+  if (testResult?.status === "success") {
+    return <CheckCircle2 className="mr-2 size-4 text-green-600" />;
+  }
+  if (testResult?.status === "error") {
+    return <XCircle className="mr-2 size-4 text-red-600" />;
+  }
+  return <Zap className="mr-2 size-4" />;
+}
+
+function DeleteConfirmDialog({
+  open,
+  onOpenChange,
+  deleting,
+  onDelete,
+  isManaged,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  deleting: boolean;
+  onDelete: (revokeKey: boolean) => void;
+  isManaged?: boolean;
+}) {
+  const [revokeKey, setRevokeKey] = useState(true);
+
+  return (
+    <AlertDialog onOpenChange={onOpenChange} open={open}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Delete Connection</AlertDialogTitle>
+          <AlertDialogDescription>
+            Are you sure you want to delete this connection? Workflows using it
+            will fail until a new one is configured.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        {isManaged && (
+          <div className="flex items-center gap-2 py-2">
+            <Checkbox
+              checked={revokeKey}
+              id="revoke-key"
+              onCheckedChange={(checked: boolean) => setRevokeKey(checked)}
+            />
+            <Label className="cursor-pointer font-normal" htmlFor="revoke-key">
+              Revoke API key from Vercel
+            </Label>
+          </div>
+        )}
+        <AlertDialogFooter>
+          <AlertDialogCancel disabled={deleting}>Cancel</AlertDialogCancel>
+          <AlertDialogAction
+            disabled={deleting}
+            onClick={() => onDelete(isManaged ? revokeKey : false)}
+          >
+            {deleting ? <Spinner className="mr-2 size-4" /> : null}
+            Delete
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}
+
+function TestFailedConfirmDialog({
+  open,
+  onOpenChange,
+  message,
+  onProceed,
+  saving,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  message: string;
+  onProceed: () => void;
+  saving: boolean;
+}) {
+  return (
+    <AlertDialog onOpenChange={onOpenChange} open={open}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Connection Test Failed</AlertDialogTitle>
+          <AlertDialogDescription className="space-y-2">
+            <span>The connection test failed with the following error:</span>
+            <span className="block rounded bg-muted p-2 font-mono text-destructive text-xs">
+              {message}
+            </span>
+            <span className="block">
+              Do you want to save the connection anyway?
+            </span>
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel disabled={saving}>Cancel</AlertDialogCancel>
+          <AlertDialogAction disabled={saving} onClick={onProceed}>
+            {saving ? <Spinner className="mr-2 size-4" /> : null}
+            Save Anyway
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}
+
+function TypeSelector({
+  searchQuery,
+  onSearchChange,
+  filteredTypes,
+  onSelectType,
+}: {
+  searchQuery: string;
+  onSearchChange: (value: string) => void;
+  filteredTypes: IntegrationType[];
+  onSelectType: (type: IntegrationType) => void;
+}) {
+  return (
+    <div className="space-y-3">
+      <div className="relative">
+        <Search className="absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" />
+        <Input
+          autoFocus
+          className="pl-9"
+          onChange={(e) => onSearchChange(e.target.value)}
+          placeholder="Search services..."
+          value={searchQuery}
+        />
+      </div>
+      <div className="max-h-[300px] space-y-1 overflow-y-auto">
+        {filteredTypes.length === 0 ? (
+          <p className="py-4 text-center text-muted-foreground text-sm">
+            No services found
+          </p>
+        ) : (
+          filteredTypes.map((type) => {
+            const description = getDescription(type);
+            return (
+              <button
+                className="flex w-full items-center gap-3 rounded-md px-3 py-2 text-left text-sm transition-colors hover:bg-muted/50"
+                key={type}
+                onClick={() => onSelectType(type)}
+                type="button"
+              >
+                <IntegrationIcon
+                  className="size-5 shrink-0"
+                  integration={type === "ai-gateway" ? "vercel" : type}
+                />
+                <span className="min-w-0 flex-1 truncate">
+                  <span className="font-medium">{getLabel(type)}</span>
+                  {description && (
+                    <span className="text-muted-foreground text-xs">
+                      {" "}
+                      - {description}
+                    </span>
+                  )}
+                </span>
+              </button>
+            );
+          })
+        )}
+      </div>
+    </div>
+  );
+}
+
 export function IntegrationFormDialog({
   open,
   onClose,
   onSuccess,
+  onDelete,
   integration,
   mode,
   preselectedType,
 }: IntegrationFormDialogProps) {
   const [saving, setSaving] = useState(false);
+  const [deleting, setDeleting] = useState(false);
+  const [testing, setTesting] = useState(false);
+  const [testResult, setTestResult] = useState<{
+    status: "success" | "error";
+    message: string;
+  } | null>(null);
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+  const [showTestFailedConfirm, setShowTestFailedConfirm] = useState(false);
+  const [testFailedMessage, setTestFailedMessage] = useState("");
+  const [searchQuery, setSearchQuery] = useState("");
   const [formData, setFormData] = useState<IntegrationFormData>({
     name: "",
-    type: preselectedType || "resend",
+    type: preselectedType || null,
     config: {},
   });
 
-  const initializeConfigFromPlugin = useCallback(
-    (pluginType: IntegrationType): Record<string, string | boolean> => {
-      const plugin = getIntegration(pluginType);
-      const config: Record<string, string | boolean> = {};
-      if (plugin?.formFields) {
-        for (const field of plugin.formFields) {
-          if (field.defaultValue !== undefined) {
-            config[field.configKey] = field.defaultValue as string | boolean;
-          }
-        }
-      }
-      return config;
-    },
-    []
-  );
+  // AI Gateway managed keys state
+  const aiGatewayStatus = useAtomValue(aiGatewayStatusAtom);
+  const openConsentModal = useSetAtom(openAiGatewayConsentModalAtom);
 
-  const initializeConfigFromIntegration = useCallback(
-    (
-      integrationData: Integration | IntegrationWithConfig
-    ): Record<string, string | boolean> => {
-      const plugin = getIntegration(integrationData.type);
-      const config: Record<string, string | boolean> = {};
-
-      if (plugin?.formFields && "config" in integrationData) {
-        const integrationConfig = integrationData.config as IntegrationConfig;
-        for (const field of plugin.formFields) {
-          if (integrationConfig[field.configKey] !== undefined) {
-            config[field.configKey] = integrationConfig[field.configKey] as
-              | string
-              | boolean;
-          } else if (field.defaultValue !== undefined) {
-            config[field.configKey] = field.defaultValue as string | boolean;
-          }
-        }
-      }
+  // Check if AI Gateway managed keys should be offered
+  const shouldUseManagedKeys =
+    aiGatewayStatus?.enabled && aiGatewayStatus?.isVercelUser;
 
-      return config;
-    },
-    []
+  // Step: "select" for type selection, "configure" for form
+  const [step, setStep] = useState<"select" | "configure">(
+    preselectedType || mode === "edit" ? "configure" : "select"
   );
 
   useEffect(() => {
+    setTestResult(null);
     if (integration) {
-      const initialConfig = initializeConfigFromIntegration(integration);
       setFormData({
         name: integration.name,
         type: integration.type,
-        config: initialConfig,
+        config: {},
       });
+      setStep("configure");
     } else {
-      const pluginType = preselectedType || "resend";
-      const initialConfig = initializeConfigFromPlugin(pluginType);
       setFormData({
         name: "",
-        type: pluginType,
-        config: initialConfig,
+        type: preselectedType || null,
+        config: {},
+      });
+      setStep(preselectedType ? "configure" : "select");
+    }
+  }, [integration, preselectedType]);
+
+  // AI Gateway atoms for fetching status and teams
+  const setAiGatewayStatus = useSetAtom(aiGatewayStatusAtom);
+  const setTeams = useSetAtom(aiGatewayTeamsAtom);
+  const setTeamsLoading = useSetAtom(aiGatewayTeamsLoadingAtom);
+
+  // Helper to open consent modal with callbacks
+  const showConsentModalWithCallbacks = useCallback(() => {
+    onClose();
+    openConsentModal({
+      onConsent: (integrationId: string) => {
+        onSuccess?.(integrationId);
+      },
+    });
+  }, [onClose, openConsentModal, onSuccess]);
+
+  // Handle preselected AI Gateway - fetch status/teams and show consent modal if managed keys available
+  useEffect(() => {
+    if (!open || preselectedType !== "ai-gateway" || mode !== "create") {
+      return;
+    }
+
+    // If we already have status and managed keys are available, show consent modal
+    if (shouldUseManagedKeys) {
+      showConsentModalWithCallbacks();
+      return;
+    }
+
+    // If status is null (not fetched yet), fetch it and teams
+    if (aiGatewayStatus === null) {
+      api.aiGateway.getStatus().then((status) => {
+        setAiGatewayStatus(status);
+        // Check if managed keys should be used after fetching
+        if (status?.enabled && status?.isVercelUser) {
+          // Also fetch teams before showing consent modal
+          setTeamsLoading(true);
+          api.aiGateway
+            .getTeams()
+            .then((response) => {
+              setTeams(response.teams);
+            })
+            .finally(() => {
+              setTeamsLoading(false);
+              showConsentModalWithCallbacks();
+            });
+        }
       });
     }
   }, [
-    integration,
+    open,
     preselectedType,
-    initializeConfigFromIntegration,
-    initializeConfigFromPlugin,
+    mode,
+    aiGatewayStatus,
+    shouldUseManagedKeys,
+    showConsentModalWithCallbacks,
+    setAiGatewayStatus,
+    setTeams,
+    setTeamsLoading,
   ]);
 
-  const handleSave = async () => {
+  const handleSelectType = (type: IntegrationType) => {
+    // If selecting AI Gateway and managed keys are available, show consent modal
+    if (type === "ai-gateway" && shouldUseManagedKeys) {
+      showConsentModalWithCallbacks();
+      return;
+    }
+
+    setFormData({
+      name: "",
+      type,
+      config: {},
+    });
+    setStep("configure");
+  };
+
+  const handleBack = () => {
+    setStep("select");
+    setSearchQuery("");
+    setFormData({
+      name: "",
+      type: null,
+      config: {},
+    });
+  };
+
+  const doSave = async () => {
+    if (!formData.type) {
+      return;
+    }
+
     try {
       setSaving(true);
 
-      // Generate a default name if none provided
-      const integrationName =
-        formData.name.trim() || `${getLabel(formData.type)} Integration`;
+      const integrationName = formData.name.trim();
 
       if (mode === "edit" && integration) {
+        // Only include config if there are actual new values entered
+        const hasNewConfig = Object.values(formData.config).some(
+          (v) => v && v.length > 0
+        );
         await api.integration.update(integration.id, {
           name: integrationName,
-          config: formData.config,
+          ...(hasNewConfig ? { config: formData.config } : {}),
         });
-        toast.success("Integration updated");
+        toast.success("Connection updated");
         onSuccess?.(integration.id);
       } else {
         const newIntegration = await api.integration.create({
@@ -172,7 +702,6 @@ export function IntegrationFormDialog({
           type: formData.type,
           config: formData.config,
         });
-        toast.success("Integration created");
         onSuccess?.(newIntegration.id);
       }
       onClose();
@@ -184,148 +713,141 @@ export function IntegrationFormDialog({
     }
   };
 
-  const updateConfig = (key: string, value: string | boolean) => {
-    setFormData({
-      ...formData,
-      config: { ...formData.config, [key]: value },
-    });
-  };
-
-  const renderHelpText = (
-    helpText?: string,
-    helpLink?: { text: string; url: string }
-  ) => {
-    if (!(helpText || helpLink)) {
-      return null;
+  const handleSave = async () => {
+    if (!formData.type) {
+      return;
     }
-    return (
-      <p className="text-muted-foreground text-xs">
-        {helpText}
-        {helpLink && (
-          <a
-            className="underline hover:text-foreground"
-            href={helpLink.url}
-            rel="noopener noreferrer"
-            target="_blank"
-          >
-            {helpLink.text}
-          </a>
-        )}
-      </p>
+
+    // Check if we have config values to test
+    const hasConfig = Object.values(formData.config).some(
+      (v) => v && v.length > 0
     );
-  };
 
-  const renderCheckboxField = (field: {
-    id: string;
-    type: string;
-    label: string;
-    configKey: string;
-    defaultValue?: string | boolean;
-    helpText?: string;
-    helpLink?: { text: string; url: string };
-  }) => {
-    let checkboxValue: string | boolean | undefined =
-      formData.config[field.configKey];
-    if (checkboxValue === undefined) {
-      checkboxValue =
-        field.defaultValue !== undefined ? field.defaultValue : true;
+    // In edit mode without new config, skip testing
+    if (mode === "edit" && !hasConfig) {
+      await doSave();
+      return;
     }
-    const isChecked =
-      typeof checkboxValue === "boolean"
-        ? checkboxValue
-        : checkboxValue === "true";
 
-    return (
-      <div className="flex items-center space-x-2" key={field.id}>
-        <Checkbox
-          checked={isChecked}
-          id={field.id}
-          onCheckedChange={(checked) =>
-            updateConfig(field.configKey, checked === true)
-          }
-        />
-        <Label className="cursor-pointer font-normal" htmlFor={field.id}>
-          {field.label}
-        </Label>
-        {renderHelpText(field.helpText, field.helpLink)}
-      </div>
-    );
-  };
+    // Test the connection before saving
+    try {
+      setSaving(true);
+      setTestResult(null);
 
-  const renderInputField = (field: {
-    id: string;
-    type: string;
-    label: string;
-    configKey: string;
-    placeholder?: string;
-    helpText?: string;
-    helpLink?: { text: string; url: string };
-  }) => (
-    <div className="space-y-2" key={field.id}>
-      <Label htmlFor={field.id}>{field.label}</Label>
-      <Input
-        id={field.id}
-        onChange={(e) => updateConfig(field.configKey, e.target.value)}
-        placeholder={field.placeholder}
-        type={field.type}
-        value={(formData.config[field.configKey] as string) || ""}
-      />
-      {renderHelpText(field.helpText, field.helpLink)}
-    </div>
-  );
+      const result = await api.integration.testCredentials({
+        type: formData.type,
+        config: formData.config,
+      });
 
-  const renderConfigFields = () => {
-    // Handle system integrations with hardcoded fields
-    if (formData.type === "database") {
-      return (
-        <div className="space-y-2">
-          <Label htmlFor="url">Database URL</Label>
-          <Input
-            id="url"
-            onChange={(e) => updateConfig("url", e.target.value)}
-            placeholder="postgresql://..."
-            type="password"
-            value={(formData.config.url as string) || ""}
-          />
-          <p className="text-muted-foreground text-xs">
-            Connection string in the format:
-            postgresql://user:password@host:port/database
-          </p>
-        </div>
-      );
+      if (result.status === "error") {
+        // Test failed - ask user if they want to proceed
+        setTestFailedMessage(result.message);
+        setShowTestFailedConfirm(true);
+        setSaving(false);
+        return;
+      }
+
+      // Test passed - proceed with save
+      setSaving(false);
+      await doSave();
+    } catch (error) {
+      console.error("Failed to test connection:", error);
+      const message =
+        error instanceof Error ? error.message : "Failed to test connection";
+      setTestFailedMessage(message);
+      setShowTestFailedConfirm(true);
+      setSaving(false);
+    }
+  };
+
+  const handleDelete = async (revokeKey: boolean) => {
+    if (!integration) {
+      return;
     }
 
-    // Handle Web3 wallet creation
-    if (formData.type === "web3") {
-      return <Web3WalletSection />;
+    try {
+      setDeleting(true);
+
+      // If this is a managed connection and user wants to revoke the key
+      if (integration.isManaged && revokeKey) {
+        await api.aiGateway.revokeConsent();
+      } else {
+        await api.integration.delete(integration.id);
+      }
+
+      toast.success("Connection deleted");
+      onDelete?.();
+      onClose();
+    } catch (error) {
+      console.error("Failed to delete integration:", error);
+      toast.error("Failed to delete connection");
+    } finally {
+      setDeleting(false);
+      setShowDeleteConfirm(false);
     }
+  };
 
-    // Get plugin form fields from registry
-    const plugin = getIntegration(formData.type);
-    if (!plugin?.formFields) {
-      return null;
+  const handleTestConnection = async () => {
+    if (!formData.type) {
+      return;
     }
 
-    // Handle SendGrid integration with special checkbox logic
-    if (formData.type === "sendgrid") {
-      return (
-        <SendGridIntegrationSection
-          config={formData.config}
-          formFields={plugin.formFields}
-          updateConfig={updateConfig}
-        />
-      );
+    // Check if we have any config values to test
+    const hasConfig = Object.values(formData.config).some(
+      (v) => v && v.length > 0
+    );
+    if (!hasConfig && mode === "create") {
+      toast.error("Please enter credentials first");
+      return;
     }
 
-    // Default rendering for other integrations
-    return plugin.formFields.map((field) => {
-      if (field.type === "checkbox") {
-        return renderCheckboxField(field);
+    try {
+      setTesting(true);
+      setTestResult(null);
+
+      let result: { status: "success" | "error"; message: string };
+
+      if (mode === "edit" && integration && !hasConfig) {
+        // Test existing integration (no new config entered)
+        result = await api.integration.testConnection(integration.id);
+      } else {
+        // Test with new credentials
+        result = await api.integration.testCredentials({
+          type: formData.type,
+          config: formData.config,
+        });
       }
-      return renderInputField(field);
+
+      setTestResult(result);
+    } catch (error) {
+      console.error("Failed to test connection:", error);
+      const message =
+        error instanceof Error ? error.message : "Failed to test connection";
+      setTestResult({ status: "error", message });
+    } finally {
+      setTesting(false);
+    }
+  };
+
+  const updateConfig = (key: string, value: string) => {
+    setFormData({
+      ...formData,
+      config: { ...formData.config, [key]: value },
     });
   };
 
+  const integrationTypes = getIntegrationTypes();
+
+  const filteredIntegrationTypes = useMemo(() => {
+    if (!searchQuery.trim()) {
+      return integrationTypes;
+    }
+    const query = searchQuery.toLowerCase();
+    return integrationTypes.filter((type) =>
+      getLabel(type).toLowerCase().includes(query)
+    );
+  }, [integrationTypes, searchQuery]);
+
   return (
     <Dialog onOpenChange={(isOpen) => !isOpen && onClose()} open={open}>
       <DialogContent className="max-w-md">
@@ -354,77 +876,81 @@ export function IntegrationFormDialog({
           </DialogDescription>
         </DialogHeader>
 
-        <div className="space-y-4">
-          {mode === "create" && (
+        {step === "select" && (
+          <TypeSelector
+            filteredTypes={filteredIntegrationTypes}
+            onSearchChange={setSearchQuery}
+            onSelectType={handleSelectType}
+            searchQuery={searchQuery}
+          />
+        )}
+
+        {step === "configure" && (
+          <form
+            className="space-y-4"
+            id="integration-form"
+            onSubmit={(e) => {
+              e.preventDefault();
+              handleSave();
+            }}
+          >
+            <ConfigFields
+              formData={formData}
+              isEditMode={mode === "edit"}
+              updateConfig={updateConfig}
+            />
+
             <div className="space-y-2">
-              <Label htmlFor="type">Type</Label>
-              <Select
-                disabled={!!preselectedType}
-                onValueChange={(value) =>
-                  setFormData({
-                    ...formData,
-                    type: value as IntegrationType,
-                    config: {},
-                  })
+              <Label htmlFor="name">Label (Optional)</Label>
+              <Input
+                id="name"
+                onChange={(e) =>
+                  setFormData({ ...formData, name: e.target.value })
                 }
-                value={formData.type}
-              >
-                <SelectTrigger className="w-full" id="type">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  {getIntegrationTypes().map((type) => (
-                    <SelectItem key={type} value={type}>
-                      <div className="flex items-center gap-2">
-                        <IntegrationIcon
-                          className="size-4"
-                          integration={type}
-                        />
-                        {getLabel(type)}
-                      </div>
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
+                placeholder="e.g. Production, Personal, Work"
+                value={formData.name}
+              />
             </div>
-          )}
-
-          {renderConfigFields()}
-
-          <div className="space-y-2">
-            <Label htmlFor="name">Name (Optional)</Label>
-            <Input
-              id="name"
-              onChange={(e) =>
-                setFormData({ ...formData, name: e.target.value })
-              }
-              placeholder={`${getLabel(formData.type)} Integration`}
-              value={formData.name}
-            />
-          </div>
-        </div>
+          </form>
+        )}
 
-        <DialogFooter>
-          {formData.type === "web3" ? (
-            // Web3 wallet creation happens in the component, just show Close
-            <Button onClick={() => onClose()}>Close</Button>
-          ) : (
-            <>
-              <Button
-                disabled={saving}
-                onClick={() => onClose()}
-                variant="outline"
-              >
-                Cancel
-              </Button>
-              <Button disabled={saving} onClick={handleSave}>
-                {saving ? <Spinner className="mr-2 size-4" /> : null}
-                {mode === "edit" ? "Update" : "Create"}
-              </Button>
-            </>
-          )}
+        <DialogFooter
+          className={step === "configure" ? "sm:justify-between" : ""}
+        >
+          <FormFooterActions
+            deleting={deleting}
+            mode={mode}
+            onBack={handleBack}
+            onClose={onClose}
+            onDelete={() => setShowDeleteConfirm(true)}
+            onTestConnection={handleTestConnection}
+            preselectedType={preselectedType}
+            saving={saving}
+            step={step}
+            testing={testing}
+            testResult={testResult}
+          />
         </DialogFooter>
       </DialogContent>
+
+      <DeleteConfirmDialog
+        deleting={deleting}
+        isManaged={integration?.isManaged}
+        onDelete={handleDelete}
+        onOpenChange={setShowDeleteConfirm}
+        open={showDeleteConfirm}
+      />
+
+      <TestFailedConfirmDialog
+        message={testFailedMessage}
+        onOpenChange={setShowTestFailedConfirm}
+        onProceed={() => {
+          setShowTestFailedConfirm(false);
+          doSave();
+        }}
+        open={showTestFailedConfirm}
+        saving={saving}
+      />
     </Dialog>
   );
 }
diff --git a/components/settings/integrations-dialog.tsx b/components/settings/integrations-dialog.tsx
index 443a080a2..280147caf 100644
--- a/components/settings/integrations-dialog.tsx
+++ b/components/settings/integrations-dialog.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useSetAtom } from "jotai";
-import { Plus } from "lucide-react";
+import { Plus, Search } from "lucide-react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { Button } from "@/components/ui/button";
 import {
@@ -12,6 +12,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
 import { Spinner } from "@/components/ui/spinner";
 import { integrationsVersionAtom } from "@/lib/integrations-store";
 import { IntegrationsManager } from "./integrations-manager";
@@ -27,6 +28,7 @@ export function IntegrationsDialog({
 }: IntegrationsDialogProps) {
   const [loading, setLoading] = useState(true);
   const [showCreateDialog, setShowCreateDialog] = useState(false);
+  const [filter, setFilter] = useState("");
   const setIntegrationsVersion = useSetAtom(integrationsVersionAtom);
   // Track if any changes were made during this dialog session
   const hasChangesRef = useRef(false);
@@ -48,6 +50,8 @@ export function IntegrationsDialog({
       hasChangesRef.current = false;
       // Reset create dialog state when opening
       setShowCreateDialog(false);
+      // Reset filter when opening
+      setFilter("");
     }
   }, [open, loadAll]);
 
@@ -68,14 +72,11 @@ export function IntegrationsDialog({
 
   return (
     <Dialog onOpenChange={handleClose} open={open}>
-      <DialogContent
-        className="max-h-[90vh] max-w-4xl overflow-y-auto"
-        showCloseButton={false}
-      >
+      <DialogContent className="max-w-4xl" showCloseButton={false}>
         <DialogHeader>
-          <DialogTitle>Integrations</DialogTitle>
+          <DialogTitle>Connections</DialogTitle>
           <DialogDescription>
-            Manage your integrations that can be used across workflows
+            Manage API keys and credentials used by your workflows
           </DialogDescription>
         </DialogHeader>
 
@@ -84,18 +85,31 @@ export function IntegrationsDialog({
             <Spinner />
           </div>
         ) : (
-          <div className="mt-4">
-            <IntegrationsManager
-              onIntegrationChange={handleIntegrationChange}
-              showCreateDialog={showCreateDialog}
-            />
+          <div className="mt-4 space-y-4">
+            <div className="relative">
+              <Search className="absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" />
+              <Input
+                className="pl-9"
+                onChange={(e) => setFilter(e.target.value)}
+                placeholder="Filter connections..."
+                value={filter}
+              />
+            </div>
+            <div className="max-h-[300px] overflow-y-auto">
+              <IntegrationsManager
+                filter={filter}
+                onCreateDialogClose={() => setShowCreateDialog(false)}
+                onIntegrationChange={handleIntegrationChange}
+                showCreateDialog={showCreateDialog}
+              />
+            </div>
           </div>
         )}
 
-        <DialogFooter className="flex justify-between sm:justify-between">
+        <DialogFooter className="sm:justify-between">
           <Button onClick={() => setShowCreateDialog(true)} variant="outline">
             <Plus className="mr-2 size-4" />
-            Add Integration
+            Add Connection
           </Button>
           <Button onClick={() => handleClose(false)}>Done</Button>
         </DialogFooter>
diff --git a/components/settings/integrations-manager.tsx b/components/settings/integrations-manager.tsx
index db7fb9017..ad891d646 100644
--- a/components/settings/integrations-manager.tsx
+++ b/components/settings/integrations-manager.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { Pencil, Trash2 } from "lucide-react";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { toast } from "sonner";
 import {
   AlertDialog,
@@ -31,18 +31,21 @@ const SYSTEM_INTEGRATION_LABELS: Record<string, string> = {
 
 type IntegrationsManagerProps = {
   showCreateDialog: boolean;
+  onCreateDialogClose?: () => void;
   onIntegrationChange?: () => void;
+  filter?: string;
 };
 
 export function IntegrationsManager({
   showCreateDialog: externalShowCreateDialog,
+  onCreateDialogClose,
   onIntegrationChange,
+  filter = "",
 }: IntegrationsManagerProps) {
   const [integrations, setIntegrations] = useState<Integration[]>([]);
   const [loading, setLoading] = useState(true);
   const [editingIntegration, setEditingIntegration] =
     useState<IntegrationWithConfig | null>(null);
-  const [loadingIntegration, setLoadingIntegration] = useState(false);
   const [showCreateDialog, setShowCreateDialog] = useState(false);
   const [deletingId, setDeletingId] = useState<string | null>(null);
   const [testingId, setTestingId] = useState<string | null>(null);
@@ -69,6 +72,38 @@ export function IntegrationsManager({
     loadIntegrations();
   }, [loadIntegrations]);
 
+  // Get integrations with their labels, sorted by label then name
+  const integrationsWithLabels = useMemo(() => {
+    const labels = getIntegrationLabels() as Record<string, string>;
+    const filterLower = filter.toLowerCase();
+
+    return integrations
+      .map((integration) => ({
+        ...integration,
+        label:
+          labels[integration.type] ||
+          SYSTEM_INTEGRATION_LABELS[integration.type] ||
+          integration.type,
+      }))
+      .filter((integration) => {
+        if (!filter) {
+          return true;
+        }
+        return (
+          integration.label.toLowerCase().includes(filterLower) ||
+          integration.name.toLowerCase().includes(filterLower) ||
+          integration.type.toLowerCase().includes(filterLower)
+        );
+      })
+      .sort((a, b) => {
+        const labelCompare = a.label.localeCompare(b.label);
+        if (labelCompare !== 0) {
+          return labelCompare;
+        }
+        return a.name.localeCompare(b.name);
+      });
+  }, [integrations, filter]);
+
   const handleDelete = async (id: string) => {
     try {
       await api.integration.delete(id);
@@ -106,6 +141,7 @@ export function IntegrationsManager({
   const handleDialogClose = () => {
     setShowCreateDialog(false);
     setEditingIntegration(null);
+    onCreateDialogClose?.();
   };
 
   const handleDialogSuccess = async () => {
@@ -121,81 +157,93 @@ export function IntegrationsManager({
     );
   }
 
-  return (
-    <div className="space-y-4">
-      {integrations.length === 0 ? (
-        <div className="rounded-lg border border-dashed py-12 text-center">
+  const renderIntegrationsList = () => {
+    if (integrations.length === 0) {
+      return (
+        <div className="py-8 text-center">
           <p className="text-muted-foreground text-sm">
-            No integrations configured yet
+            No connections configured yet
           </p>
         </div>
-      ) : (
-        <div className="space-y-2">
-          {integrations.map((integration) => (
-            <div
-              className="flex items-center justify-between rounded-lg border p-4"
-              key={integration.id}
-            >
-              <div className="flex items-center gap-3">
-                <IntegrationIcon
-                  className="size-8"
-                  integration={integration.type}
-                />
-                <div>
-                  <p className="font-medium text-sm">{integration.name}</p>
-                  <p className="text-muted-foreground text-xs">
-                    {getIntegrationLabels()[integration.type] ||
-                      SYSTEM_INTEGRATION_LABELS[integration.type] ||
-                      integration.type}
-                  </p>
-                </div>
-              </div>
-              <div className="flex items-center gap-2">
-                <Button
-                  disabled={testingId === integration.id}
-                  onClick={() => handleTest(integration.id)}
-                  size="sm"
-                  variant="outline"
-                >
-                  {testingId === integration.id ? (
-                    <Spinner className="size-4" />
-                  ) : (
-                    "Test"
-                  )}
-                </Button>
-                <Button
-                  disabled={loadingIntegration}
-                  onClick={async () => {
-                    try {
-                      setLoadingIntegration(true);
-                      const fullIntegration = await api.integration.get(
-                        integration.id
-                      );
-                      setEditingIntegration(fullIntegration);
-                    } catch (error) {
-                      console.error("Failed to load integration:", error);
-                      toast.error("Failed to load integration details");
-                    } finally {
-                      setLoadingIntegration(false);
-                    }
-                  }}
-                  size="sm"
-                  variant="outline"
-                >
-                  <Pencil className="size-4" />
-                </Button>
-                <Button
-                  onClick={() => setDeletingId(integration.id)}
-                  size="sm"
-                  variant="outline"
-                >
-                  <Trash2 className="size-4" />
-                </Button>
-              </div>
-            </div>
-          ))}
+      );
+    }
+
+    if (integrationsWithLabels.length === 0) {
+      return (
+        <div className="py-8 text-center">
+          <p className="text-muted-foreground text-sm">
+            No connections match your filter
+          </p>
         </div>
-      )}
+      );
+    }
+
+    return (
+      <div className="space-y-1">
+        {integrationsWithLabels.map((integration) => (
+          <div
+            className="flex items-center justify-between rounded-md px-2 py-1.5"
+            key={integration.id}
+          >
+            <div className="flex items-center gap-2">
+              <IntegrationIcon
+                className="size-4"
+                integration={
+                  integration.type === "ai-gateway"
+                    ? "vercel"
+                    : integration.type
+                }
+              />
+              <span className="font-medium text-sm">{integration.label}</span>
+              <span className="text-muted-foreground text-sm">
+                {integration.name}
+              </span>
+            </div>
+            <div className="flex items-center gap-1">
+              <Button
+                className="h-7 px-2"
+                disabled={testingId === integration.id}
+                onClick={() => handleTest(integration.id)}
+                size="sm"
+                variant="outline"
+              >
+                {testingId === integration.id ? (
+                  <Spinner className="size-3" />
+                ) : (
+                  <span className="text-xs">Test</span>
+                )}
+              </Button>
+              <Button
+                className="size-7"
+                onClick={async () => {
+                  const fullIntegration = await api.integration.get(
+                    integration.id
+                  );
+                  setEditingIntegration(fullIntegration);
+                }}
+                size="icon"
+                variant="outline"
+              >
+                <Pencil className="size-3" />
+              </Button>
+              <Button
+                className="size-7"
+                onClick={() => setDeletingId(integration.id)}
+                size="icon"
+                variant="outline"
+              >
+                <Trash2 className="size-3" />
+              </Button>
+            </div>
+          </div>
+        ))}
+      </div>
+    );
+  };
+
+  return (
+    <div className="space-y-1">
+      {renderIntegrationsList()}
 
       {(showCreateDialog || editingIntegration) && (
         <IntegrationFormDialog
@@ -217,10 +265,10 @@ export function IntegrationsManager({
       >
         <AlertDialogContent>
           <AlertDialogHeader>
-            <AlertDialogTitle>Delete Integration</AlertDialogTitle>
+            <AlertDialogTitle>Delete Connection</AlertDialogTitle>
             <AlertDialogDescription>
-              Are you sure you want to delete this integration? Workflows using
-              this integration will fail until a new one is selected.
+              Are you sure you want to delete this connection? Workflows using
+              it will fail until a new one is configured.
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
diff --git a/components/settings/sendgrid-integration-section.tsx b/components/settings/sendgrid-integration-section.tsx
deleted file mode 100644
index cb4dab6b1..000000000
--- a/components/settings/sendgrid-integration-section.tsx
+++ /dev/null
@@ -1,133 +0,0 @@
-"use client";
-
-import { Checkbox } from "@/components/ui/checkbox";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import type { IntegrationConfig } from "@/lib/types/integration";
-import type { IntegrationPlugin } from "@/plugins/registry";
-
-type SendGridIntegrationSectionProps = {
-  formFields: IntegrationPlugin["formFields"];
-  config: IntegrationConfig;
-  updateConfig: (key: string, value: string | boolean) => void;
-};
-
-const renderHelpText = (
-  helpText?: string,
-  helpLink?: { text: string; url: string }
-) => {
-  if (!(helpText || helpLink)) {
-    return null;
-  }
-  return (
-    <p className="text-muted-foreground text-xs">
-      {helpText}
-      {helpLink && (
-        <a
-          className="underline hover:text-foreground"
-          href={helpLink.url}
-          rel="noopener noreferrer"
-          target="_blank"
-        >
-          {helpLink.text}
-        </a>
-      )}
-    </p>
-  );
-};
-
-const renderCheckboxField = (
-  field: {
-    id: string;
-    type: string;
-    label: string;
-    configKey: string;
-    defaultValue?: string | boolean;
-    helpText?: string;
-    helpLink?: { text: string; url: string };
-  },
-  config: IntegrationConfig,
-  updateConfig: (key: string, value: string | boolean) => void
-) => {
-  let checkboxValue: string | boolean | undefined = config[field.configKey];
-  if (checkboxValue === undefined) {
-    checkboxValue =
-      field.defaultValue !== undefined ? field.defaultValue : true;
-  }
-  const isChecked =
-    typeof checkboxValue === "boolean"
-      ? checkboxValue
-      : checkboxValue === "true";
-
-  return (
-    <div className="flex items-center space-x-2" key={field.id}>
-      <Checkbox
-        checked={isChecked}
-        id={field.id}
-        onCheckedChange={(checked) =>
-          updateConfig(field.configKey, checked === true)
-        }
-      />
-      <Label className="cursor-pointer font-normal" htmlFor={field.id}>
-        {field.label}
-      </Label>
-      {renderHelpText(field.helpText, field.helpLink)}
-    </div>
-  );
-};
-
-const renderInputField = (
-  field: {
-    id: string;
-    type: string;
-    label: string;
-    configKey: string;
-    placeholder?: string;
-    helpText?: string;
-    helpLink?: { text: string; url: string };
-  },
-  config: IntegrationConfig,
-  updateConfig: (key: string, value: string | boolean) => void
-) => (
-  <div className="space-y-2" key={field.id}>
-    <Label htmlFor={field.id}>{field.label}</Label>
-    <Input
-      id={field.id}
-      onChange={(e) => updateConfig(field.configKey, e.target.value)}
-      placeholder={field.placeholder}
-      type={field.type}
-      value={(config[field.configKey] as string) || ""}
-    />
-    {renderHelpText(field.helpText, field.helpLink)}
-  </div>
-);
-
-export function SendGridIntegrationSection({
-  formFields,
-  config,
-  updateConfig,
-}: SendGridIntegrationSectionProps) {
-  // Check if useKeeperHubApiKey checkbox is checked
-  const useKeeperHubApiKey =
-    config.useKeeperHubApiKey !== undefined
-      ? config.useKeeperHubApiKey === true ||
-        config.useKeeperHubApiKey === "true"
-      : true; // Default to true
-
-  return (
-    <>
-      {formFields.map((field) => {
-        if (field.type === "checkbox") {
-          return renderCheckboxField(field, config, updateConfig);
-        }
-
-        // Hide API key field if useKeeperHubApiKey is checked
-        if (useKeeperHubApiKey && field.configKey === "apiKey") {
-          return null;
-        }
-
-        return renderInputField(field, config, updateConfig);
-      })}
-    </>
-  );
-}
diff --git a/components/ui/integration-selector.tsx b/components/ui/integration-selector.tsx
index 4d5323edf..41af1e69d 100644
--- a/components/ui/integration-selector.tsx
+++ b/components/ui/integration-selector.tsx
@@ -1,31 +1,40 @@
 "use client";
 
-import { useAtomValue, useSetAtom } from "jotai";
-import { AlertTriangle } from "lucide-react";
-import { useEffect, useState } from "react";
+import { useAtom, useAtomValue, useSetAtom } from "jotai";
 import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { Separator } from "@/components/ui/separator";
+  AlertTriangle,
+  Check,
+  Circle,
+  Pencil,
+  Plus,
+  Settings,
+} from "lucide-react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { IntegrationFormDialog } from "@/components/settings/integration-form-dialog";
+import { Button } from "@/components/ui/button";
+import {
+  aiGatewayStatusAtom,
+  aiGatewayTeamsAtom,
+  aiGatewayTeamsFetchedAtom,
+  aiGatewayTeamsLoadingAtom,
+  openAiGatewayConsentModalAtom,
+} from "@/lib/ai-gateway/state";
 import { api, type Integration } from "@/lib/api-client";
 import {
   integrationsAtom,
   integrationsVersionAtom,
 } from "@/lib/integrations-store";
 import type { IntegrationType } from "@/lib/types/integration";
-import { IntegrationFormDialog } from "@/components/settings/integration-form-dialog";
+import { cn } from "@/lib/utils";
+import { getIntegration } from "@/plugins";
 
 type IntegrationSelectorProps = {
   integrationType: IntegrationType;
   value?: string;
   onChange: (integrationId: string) => void;
   onOpenSettings?: () => void;
-  label?: string;
   disabled?: boolean;
+  onAddConnection?: () => void;
 };
 
 export function IntegrationSelector({
@@ -33,87 +42,241 @@ export function IntegrationSelector({
   value,
   onChange,
   onOpenSettings,
-  label,
   disabled,
+  onAddConnection,
 }: IntegrationSelectorProps) {
-  const [integrations, setIntegrations] = useState<Integration[]>([]);
-  const [loading, setLoading] = useState(true);
   const [showNewDialog, setShowNewDialog] = useState(false);
+  const [editingIntegration, setEditingIntegration] =
+    useState<Integration | null>(null);
+  const [globalIntegrations, setGlobalIntegrations] = useAtom(integrationsAtom);
   const integrationsVersion = useAtomValue(integrationsVersionAtom);
-  const setGlobalIntegrations = useSetAtom(integrationsAtom);
   const setIntegrationsVersion = useSetAtom(integrationsVersionAtom);
+  const lastVersionRef = useRef(integrationsVersion);
+  const [hasFetched, setHasFetched] = useState(false);
+
+  // AI Gateway user keys state
+  const [aiGatewayStatus, setAiGatewayStatus] = useAtom(aiGatewayStatusAtom);
+  const [aiGatewayStatusFetched, setAiGatewayStatusFetched] = useState(false);
+  const openConsentModal = useSetAtom(openAiGatewayConsentModalAtom);
+
+  // AI Gateway teams state (pre-loaded for consent modal)
+  const [teams, setTeams] = useAtom(aiGatewayTeamsAtom);
+  const [teamsFetched, setTeamsFetched] = useAtom(aiGatewayTeamsFetchedAtom);
+  const setTeamsLoading = useSetAtom(aiGatewayTeamsLoadingAtom);
 
-  const loadIntegrations = async () => {
+  // Filter integrations from global cache
+  const integrations = useMemo(
+    () => globalIntegrations.filter((i) => i.type === integrationType),
+    [globalIntegrations, integrationType]
+  );
+
+  // Check if we have cached data
+  const hasCachedData = globalIntegrations.length > 0;
+
+  const loadIntegrations = useCallback(async () => {
     try {
-      setLoading(true);
       const all = await api.integration.getAll();
       // Update global store so other components can access it
       setGlobalIntegrations(all);
-      const filtered = all.filter((i) => i.type === integrationType);
-      setIntegrations(filtered);
-      
-      // Auto-select if only one option and nothing selected yet
-      if (filtered.length === 1 && !value) {
-        onChange(filtered[0].id);
-      }
+      setHasFetched(true);
     } catch (error) {
       console.error("Failed to load integrations:", error);
-    } finally {
-      setLoading(false);
     }
-  };
+  }, [setGlobalIntegrations]);
 
+  // Load AI Gateway status for ai-gateway type
   useEffect(() => {
-    loadIntegrations();
+    if (integrationType === "ai-gateway" && !aiGatewayStatusFetched) {
+      api.aiGateway
+        .getStatus()
+        .then((status) => {
+          setAiGatewayStatus(status);
+          setAiGatewayStatusFetched(true);
+        })
+        .catch(() => {
+          setAiGatewayStatusFetched(true);
+        });
+    }
+  }, [integrationType, aiGatewayStatusFetched, setAiGatewayStatus]);
+
+  // Load AI Gateway teams when status indicates user can use managed keys
+  useEffect(() => {
+    if (
+      integrationType === "ai-gateway" &&
+      aiGatewayStatus?.enabled &&
+      aiGatewayStatus?.isVercelUser &&
+      !teamsFetched
+    ) {
+      setTeamsLoading(true);
+      api.aiGateway
+        .getTeams()
+        .then((response) => {
+          setTeams(response.teams);
+          // Only mark as fetched if we got teams - empty might mean expired token
+          if (response.teams.length > 0) {
+            setTeamsFetched(true);
+          }
+        })
+        .catch(() => {
+          // Don't mark as fetched on error - allow retry
+        })
+        .finally(() => {
+          setTeamsLoading(false);
+        });
+    }
+  }, [
+    integrationType,
+    aiGatewayStatus,
+    teamsFetched,
+    setTeams,
+    setTeamsFetched,
+    setTeamsLoading,
+  ]);
+
+  // Refresh teams in background (always try if we should use managed keys)
+  useEffect(() => {
+    if (
+      integrationType === "ai-gateway" &&
+      aiGatewayStatus?.enabled &&
+      aiGatewayStatus?.isVercelUser
+    ) {
+      // Always try to refresh teams - handles token refresh after re-auth
+      api.aiGateway
+        .getTeams()
+        .then((response) => {
+          if (response.teams.length > 0) {
+            setTeams(response.teams);
+            setTeamsFetched(true);
+          }
+        })
+        .catch(() => {
+          // Silently fail background refresh
+        });
+    }
+    // Only run on mount and when status changes
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [integrationType, integrationsVersion]);
+  }, [integrationType, aiGatewayStatus?.enabled, aiGatewayStatus?.isVercelUser]);
 
-  const handleValueChange = (newValue: string) => {
-    if (newValue === "__new__") {
-      setShowNewDialog(true);
-    } else if (newValue === "__manage__") {
-      onOpenSettings?.();
-    } else {
-      onChange(newValue);
+  useEffect(() => {
+    loadIntegrations();
+  }, [loadIntegrations, integrationType]);
+
+  // Listen for version changes (from other components creating/editing integrations)
+  useEffect(() => {
+    // Skip initial render - only react to actual version changes
+    if (integrationsVersion !== lastVersionRef.current) {
+      lastVersionRef.current = integrationsVersion;
+      loadIntegrations();
     }
-  };
+  }, [integrationsVersion, loadIntegrations]);
+
+  // Auto-select first integration when none is selected or current selection is invalid
+  useEffect(() => {
+    if (integrations.length > 0 && !disabled) {
+      // Check if current value exists in available integrations
+      const currentExists = value && integrations.some((i) => i.id === value);
+      if (!currentExists) {
+        // Prefer managed integrations, fall back to first available
+        const managed = integrations.find((i) => i.isManaged);
+        onChange(managed?.id || integrations[0].id);
+      }
+    }
+  }, [integrations, value, disabled, onChange]);
 
   const handleNewIntegrationCreated = async (integrationId: string) => {
     await loadIntegrations();
     onChange(integrationId);
     setShowNewDialog(false);
-    // Increment version to trigger auto-fix for other nodes that need this integration type
+    // Increment version to trigger re-fetch in other selectors
     setIntegrationsVersion((v) => v + 1);
   };
 
-  if (loading) {
+  const handleEditSuccess = async () => {
+    await loadIntegrations();
+    setEditingIntegration(null);
+    setIntegrationsVersion((v) => v + 1);
+  };
+
+  const handleDelete = async () => {
+    await loadIntegrations();
+    setEditingIntegration(null);
+    setIntegrationsVersion((v) => v + 1);
+    // Refresh AI Gateway status if this is an AI Gateway integration
+    if (integrationType === "ai-gateway") {
+      const status = await api.aiGateway.getStatus();
+      setAiGatewayStatus(status);
+    }
+  };
+
+  // Check if AI Gateway managed keys should be used
+  const shouldUseManagedKeys =
+    integrationType === "ai-gateway" &&
+    aiGatewayStatus?.enabled &&
+    aiGatewayStatus?.isVercelUser &&
+    !aiGatewayStatus?.hasManagedKey;
+
+  const handleConsentSuccess = useCallback(async (integrationId: string) => {
+    await loadIntegrations();
+    onChange(integrationId);
+    setIntegrationsVersion((v) => v + 1);
+    // Refetch AI Gateway status
+    const status = await api.aiGateway.getStatus();
+    setAiGatewayStatus(status);
+  }, [loadIntegrations, onChange, setIntegrationsVersion, setAiGatewayStatus]);
+
+  const handleAddConnection = useCallback(() => {
+    if (onAddConnection) {
+      onAddConnection();
+    } else if (shouldUseManagedKeys) {
+      // For AI Gateway with managed keys enabled, show consent modal
+      openConsentModal({
+        onConsent: handleConsentSuccess,
+        onManualEntry: () => {
+          setShowNewDialog(true);
+        },
+      });
+    } else {
+      setShowNewDialog(true);
+    }
+  }, [onAddConnection, shouldUseManagedKeys, openConsentModal, handleConsentSuccess]);
+
+  // Only show loading skeleton if we have no cached data and haven't fetched yet
+  if (!hasCachedData && !hasFetched) {
     return (
-      <Select disabled value="">
-        <SelectTrigger className="flex-1">
-          <SelectValue placeholder="Loading..." />
-        </SelectTrigger>
-      </Select>
+      <div className="flex flex-col gap-1">
+        <div className="flex items-center gap-2 rounded-md px-2 py-1.5">
+          <div className="size-4 shrink-0 animate-pulse rounded-full bg-muted" />
+          <div className="h-4 flex-1 animate-pulse rounded bg-muted" />
+          <div className="size-6 shrink-0 animate-pulse rounded bg-muted" />
+        </div>
+      </div>
     );
   }
 
+  const plugin = getIntegration(integrationType);
+  const integrationLabel = plugin?.label || integrationType;
+
+  // Separate managed and manual integrations for AI Gateway
+  const managedIntegrations = integrations.filter((i) => i.isManaged);
+  const manualIntegrations = integrations.filter((i) => !i.isManaged);
+
+  // No integrations - show add button
   if (integrations.length === 0) {
     return (
-      <div className="space-y-2">
-        <Select disabled={disabled} onValueChange={handleValueChange} value={value}>
-          <SelectTrigger className="flex-1">
-            <div className="flex items-center gap-2">
-              <div className="rounded-full bg-orange-500/50 p-0.5">
-                <AlertTriangle className="size-3 text-white" />
-              </div>
-              <SelectValue placeholder="No integrations" />
-            </div>
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="__new__">New Integration</SelectItem>
-            <SelectItem value="__manage__">Manage Integrations</SelectItem>
-          </SelectContent>
-        </Select>
-        
+      <>
+        <Button
+          className="w-full justify-start gap-2 border-orange-500/50 bg-orange-500/10 text-orange-600 hover:bg-orange-500/20 dark:text-orange-400"
+          disabled={disabled}
+          onClick={handleAddConnection}
+          variant="outline"
+        >
+          <AlertTriangle className="size-4" />
+          <span className="flex-1 text-left">
+            Add {integrationLabel} connection
+          </span>
+          <Plus className="size-4" />
+        </Button>
+
         <IntegrationFormDialog
           mode="create"
           onClose={() => setShowNewDialog(false)}
@@ -121,29 +284,160 @@ export function IntegrationSelector({
           open={showNewDialog}
           preselectedType={integrationType}
         />
-      </div>
+      </>
+    );
+  }
+
+  // Single integration - show as outlined field (not radio-style)
+  if (integrations.length === 1) {
+    const integration = integrations[0];
+    const displayName = integration.name || `${integrationLabel} API Key`;
+
+    return (
+      <>
+        <div
+          className={cn(
+            "flex h-9 w-full items-center gap-2 rounded-md border px-3 text-sm",
+            disabled && "cursor-not-allowed opacity-50"
+          )}
+        >
+          <Check className="size-4 shrink-0 text-green-600" />
+          <span className="flex-1 truncate">{displayName}</span>
+          <Button
+            className="size-6 shrink-0"
+            disabled={disabled}
+            onClick={() => setEditingIntegration(integration)}
+            size="icon"
+            variant="ghost"
+          >
+            <Pencil className="size-3" />
+          </Button>
+        </div>
+
+        <IntegrationFormDialog
+          mode="create"
+          onClose={() => setShowNewDialog(false)}
+          onSuccess={handleNewIntegrationCreated}
+          open={showNewDialog}
+          preselectedType={integrationType}
+        />
+
+        {editingIntegration && (
+          <IntegrationFormDialog
+            integration={editingIntegration}
+            mode="edit"
+            onClose={() => setEditingIntegration(null)}
+            onDelete={handleDelete}
+            onSuccess={handleEditSuccess}
+            open
+          />
+        )}
+      </>
     );
   }
 
+  // Multiple integrations or AI Gateway with option to add managed key
   return (
-    <div className="flex items-center gap-2">
-      {label && <span className="text-muted-foreground text-sm">{label}</span>}
-      <Select disabled={disabled} onValueChange={handleValueChange} value={value}>
-        <SelectTrigger className="flex-1">
-          <SelectValue placeholder="Select integration..." />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value="__new__">New Integration</SelectItem>
-          <SelectItem value="__manage__">Manage Integrations</SelectItem>
-          {integrations.length > 0 && <Separator className="my-1" />}
-          {integrations.map((integration) => (
-            <SelectItem key={integration.id} value={integration.id}>
-              {integration.name}
-            </SelectItem>
-          ))}
-        </SelectContent>
-      </Select>
-      
+    <>
+      <div className="flex flex-col gap-1">
+        {/* Show managed integrations first */}
+        {managedIntegrations.map((integration) => {
+          const isSelected = value === integration.id;
+          const displayName = integration.name || `${integrationLabel} API Key`;
+          return (
+            <div
+              className={cn(
+                "flex w-full items-center gap-2 rounded-md px-[13px] py-1.5 text-sm transition-colors",
+                isSelected ? "bg-primary/10 text-primary" : "hover:bg-muted/50",
+                disabled && "cursor-not-allowed opacity-50"
+              )}
+              key={integration.id}
+            >
+              <button
+                className="flex flex-1 items-center gap-2 text-left"
+                disabled={disabled}
+                onClick={() => onChange(integration.id)}
+                type="button"
+              >
+                {isSelected ? (
+                  <Check className="size-4 shrink-0" />
+                ) : (
+                  <Circle className="size-4 shrink-0 text-muted-foreground" />
+                )}
+                <span className="truncate">{displayName}</span>
+              </button>
+              <Button
+                className="size-6 shrink-0"
+                disabled={disabled}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  setEditingIntegration(integration);
+                }}
+                size="icon"
+                variant="ghost"
+              >
+                <Pencil className="size-3" />
+              </Button>
+            </div>
+          );
+        })}
+
+        {/* Show manual integrations */}
+        {manualIntegrations.map((integration) => {
+          const isSelected = value === integration.id;
+          const displayName =
+            integration.name || `${integrationLabel} API Key`;
+          return (
+            <div
+              className={cn(
+                "flex w-full items-center gap-2 rounded-md px-[13px] py-1.5 text-sm transition-colors",
+                isSelected ? "bg-primary/10 text-primary" : "hover:bg-muted/50",
+                disabled && "cursor-not-allowed opacity-50"
+              )}
+              key={integration.id}
+            >
+              <button
+                className="flex flex-1 items-center gap-2 text-left"
+                disabled={disabled}
+                onClick={() => onChange(integration.id)}
+                type="button"
+              >
+                {isSelected ? (
+                  <Check className="size-4 shrink-0" />
+                ) : (
+                  <Circle className="size-4 shrink-0 text-muted-foreground" />
+                )}
+                <span className="truncate">{displayName}</span>
+              </button>
+              <Button
+                className="size-6 shrink-0"
+                disabled={disabled}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  setEditingIntegration(integration);
+                }}
+                size="icon"
+                variant="ghost"
+              >
+                <Pencil className="size-3" />
+              </Button>
+            </div>
+          );
+        })}
+
+        {onOpenSettings && (
+          <button
+            className="flex w-full items-center gap-2 rounded-md px-[13px] py-1.5 text-muted-foreground text-sm transition-colors hover:bg-muted/50 hover:text-foreground"
+            disabled={disabled}
+            onClick={onOpenSettings}
+            type="button"
+          >
+            <Settings className="size-4 shrink-0" />
+            <span>Manage all connections</span>
+          </button>
+        )}
+      </div>
+
       <IntegrationFormDialog
         mode="create"
         onClose={() => setShowNewDialog(false)}
@@ -151,7 +445,17 @@ export function IntegrationSelector({
         open={showNewDialog}
         preselectedType={integrationType}
       />
-    </div>
+
+      {editingIntegration && (
+        <IntegrationFormDialog
+          integration={editingIntegration}
+          mode="edit"
+          onClose={() => setEditingIntegration(null)}
+          onDelete={handleDelete}
+          onSuccess={handleEditSuccess}
+          open
+        />
+      )}
+    </>
   );
 }
-
diff --git a/components/ui/tooltip.tsx b/components/ui/tooltip.tsx
new file mode 100644
index 000000000..a4e90d4e9
--- /dev/null
+++ b/components/ui/tooltip.tsx
@@ -0,0 +1,61 @@
+"use client"
+
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  )
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-foreground text-background 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 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
diff --git a/components/workflow/config/action-config-renderer.tsx b/components/workflow/config/action-config-renderer.tsx
index 702972623..2af79a5c4 100644
--- a/components/workflow/config/action-config-renderer.tsx
+++ b/components/workflow/config/action-config-renderer.tsx
@@ -457,6 +457,7 @@ function renderField(
     <div className="space-y-2" key={field.key}>
       <Label className="ml-1" htmlFor={field.key}>
         {field.label}
+        {field.required && <span className="text-red-500">*</span>}
       </Label>
       <FieldRenderer
         disabled={disabled}
diff --git a/components/workflow/config/action-config.tsx b/components/workflow/config/action-config.tsx
index be2cfe67b..c3594e155 100644
--- a/components/workflow/config/action-config.tsx
+++ b/components/workflow/config/action-config.tsx
@@ -1,23 +1,41 @@
 "use client";
 
-import { Settings } from "lucide-react";
+import { useAtomValue, useSetAtom } from "jotai";
+import { HelpCircle, Plus, Settings } from "lucide-react";
 import { useEffect, useMemo, useState } from "react";
+import { IntegrationFormDialog } from "@/components/settings/integration-form-dialog";
+import { Button } from "@/components/ui/button";
 import { CodeEditor } from "@/components/ui/code-editor";
 import { IntegrationIcon } from "@/components/ui/integration-icon";
+import { IntegrationSelector } from "@/components/ui/integration-selector";
 import { Label } from "@/components/ui/label";
 import {
   Select,
   SelectContent,
   SelectItem,
+  SelectSeparator,
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
 import { TemplateBadgeInput } from "@/components/ui/template-badge-input";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import {
+  aiGatewayStatusAtom,
+  openAiGatewayConsentModalAtom,
+} from "@/lib/ai-gateway/state";
+import { integrationsVersionAtom } from "@/lib/integrations-store";
+import type { IntegrationType } from "@/lib/types/integration";
 import {
   findActionById,
   flattenConfigFields,
   getActionsByCategory,
   getAllIntegrations,
+  getIntegration,
 } from "@/plugins";
 import { ActionConfigRenderer } from "./action-config-renderer";
 import { DiscordWebhookDisplay } from "./discord-webhook-display";
@@ -27,6 +45,7 @@ type ActionConfigProps = {
   config: Record<string, unknown>;
   onUpdateConfig: (key: string, value: string) => void;
   disabled: boolean;
+  isOwner?: boolean;
 };
 
 // Database Query fields component
@@ -210,6 +229,11 @@ const SYSTEM_ACTIONS: Array<{ id: string; label: string }> = [
 
 const SYSTEM_ACTION_IDS = SYSTEM_ACTIONS.map((a) => a.id);
 
+// System actions that need integrations (not in plugin registry)
+const SYSTEM_ACTION_INTEGRATIONS: Record<string, IntegrationType> = {
+  "Database Query": "database",
+};
+
 // Build category mapping dynamically from plugins + System
 function useCategoryData() {
   return useMemo(() => {
@@ -266,10 +290,12 @@ function normalizeActionType(actionType: string): string {
   return actionType;
 }
 
+// biome-ignore lint/complexity/noExcessiveCognitiveComplexity: Upstream function - preserving original structure for easier merges
 export function ActionConfig({
   config,
   onUpdateConfig,
   disabled,
+  isOwner = true,
 }: ActionConfigProps) {
   const actionType = (config?.actionType as string) || "";
   const categories = useCategoryData();
@@ -277,6 +303,12 @@ export function ActionConfig({
 
   const selectedCategory = actionType ? getCategoryForAction(actionType) : null;
   const [category, setCategory] = useState<string>(selectedCategory || "");
+  const [showAddConnectionDialog, setShowAddConnectionDialog] = useState(false);
+  const setIntegrationsVersion = useSetAtom(integrationsVersionAtom);
+
+  // AI Gateway managed keys state
+  const aiGatewayStatus = useAtomValue(aiGatewayStatusAtom);
+  const openConsentModal = useSetAtom(openAiGatewayConsentModalAtom);
 
   // Sync category state when actionType changes (e.g., when switching nodes)
   useEffect(() => {
@@ -332,12 +364,52 @@ export function ActionConfig({
   // Get dynamic config fields for plugin actions
   const pluginAction = actionType ? findActionById(actionType) : null;
 
+  // Determine the integration type for the current action
+  const integrationType: IntegrationType | undefined = useMemo(() => {
+    if (!actionType) {
+      return;
+    }
+
+    // Check system actions first
+    if (SYSTEM_ACTION_INTEGRATIONS[actionType]) {
+      return SYSTEM_ACTION_INTEGRATIONS[actionType];
+    }
+
+    // Check plugin actions
+    const action = findActionById(actionType);
+    return action?.integration as IntegrationType | undefined;
+  }, [actionType]);
+
+  // Check if AI Gateway managed keys should be offered (user can have multiple for different teams)
+  const shouldUseManagedKeys =
+    integrationType === "ai-gateway" &&
+    aiGatewayStatus?.enabled &&
+    aiGatewayStatus?.isVercelUser;
+
+  const handleConsentSuccess = (integrationId: string) => {
+    onUpdateConfig("integrationId", integrationId);
+    setIntegrationsVersion((v) => v + 1);
+  };
+
+  const handleAddSecondaryConnection = () => {
+    if (shouldUseManagedKeys) {
+      openConsentModal({
+        onConsent: handleConsentSuccess,
+        onManualEntry: () => {
+          setShowAddConnectionDialog(true);
+        },
+      });
+    } else {
+      setShowAddConnectionDialog(true);
+    }
+  };
+
   return (
     <>
       <div className="grid grid-cols-2 gap-2">
         <div className="space-y-2">
           <Label className="ml-1" htmlFor="actionCategory">
-            Category
+            Service
           </Label>
           <Select
             disabled={disabled}
@@ -354,6 +426,7 @@ export function ActionConfig({
                   <span>System</span>
                 </div>
               </SelectItem>
+              <SelectSeparator />
               {integrations.map((integration) => (
                 <SelectItem key={integration.type} value={integration.label}>
                   <div className="flex items-center gap-2">
@@ -393,6 +466,54 @@ export function ActionConfig({
         </div>
       </div>
 
+      {integrationType &&
+        isOwner &&
+        getIntegration(integrationType)?.requiresCredentials !== false && (
+          <div className="space-y-2">
+            <div className="ml-1 flex items-center justify-between">
+              <div className="flex items-center gap-1">
+                <Label>Connection</Label>
+                <TooltipProvider>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <HelpCircle className="size-3.5 text-muted-foreground" />
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <p>API key or OAuth credentials for this service</p>
+                    </TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
+              </div>
+              <Button
+                className="size-6"
+                disabled={disabled}
+                onClick={handleAddSecondaryConnection}
+                size="icon"
+                variant="ghost"
+              >
+                <Plus className="size-4" />
+              </Button>
+            </div>
+            <IntegrationSelector
+              disabled={disabled}
+              integrationType={integrationType}
+              onChange={(id) => onUpdateConfig("integrationId", id)}
+              value={(config?.integrationId as string) || ""}
+            />
+            <IntegrationFormDialog
+              mode="create"
+              onClose={() => setShowAddConnectionDialog(false)}
+              onSuccess={(integrationId) => {
+                setShowAddConnectionDialog(false);
+                setIntegrationsVersion((v) => v + 1);
+                onUpdateConfig("integrationId", integrationId);
+              }}
+              open={showAddConnectionDialog}
+              preselectedType={integrationType}
+            />
+          </div>
+        )}
+
       {/* System actions - hardcoded config fields */}
       {config?.actionType === "HTTP Request" && (
         <HttpRequestFields
diff --git a/components/workflow/config/action-grid.tsx b/components/workflow/config/action-grid.tsx
index 5be9a2367..20f986d60 100644
--- a/components/workflow/config/action-grid.tsx
+++ b/components/workflow/config/action-grid.tsx
@@ -1,10 +1,32 @@
 "use client";
 
-import { Database, Search, Settings, Zap } from "lucide-react";
+import {
+  ChevronRight,
+  Eye,
+  EyeOff,
+  Grid3X3,
+  List,
+  MoreHorizontal,
+  Search,
+  Settings,
+  Zap,
+} from "lucide-react";
 import { useEffect, useMemo, useRef, useState } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
 import { IntegrationIcon } from "@/components/ui/integration-icon";
-import { Label } from "@/components/ui/label";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 import { getAllActions } from "@/plugins";
 
@@ -13,7 +35,6 @@ type ActionType = {
   label: string;
   description: string;
   category: string;
-  icon?: React.ComponentType<{ className?: string }>;
   integration?: string;
 };
 
@@ -24,21 +45,18 @@ const SYSTEM_ACTIONS: ActionType[] = [
     label: "HTTP Request",
     description: "Make an HTTP request to any API",
     category: "System",
-    icon: Zap,
   },
   {
     id: "Database Query",
     label: "Database Query",
     description: "Query your database",
     category: "System",
-    icon: Database,
   },
   {
     id: "Condition",
     label: "Condition",
     description: "Branch based on a condition",
     category: "System",
-    icon: Settings,
   },
 ];
 
@@ -66,16 +84,70 @@ type ActionGridProps = {
   isNewlyCreated?: boolean;
 };
 
-function ActionIcon({ action }: { action: ActionType }) {
+function GroupIcon({
+  group,
+}: {
+  group: { category: string; actions: ActionType[] };
+}) {
+  // For plugin categories, use the integration icon from the first action
+  const firstAction = group.actions[0];
+  if (firstAction?.integration) {
+    return (
+      <IntegrationIcon
+        className="size-4"
+        integration={firstAction.integration}
+      />
+    );
+  }
+  // For System category
+  if (group.category === "System") {
+    return <Settings className="size-4" />;
+  }
+  return <Zap className="size-4" />;
+}
+
+function ActionIcon({
+  action,
+  className,
+}: {
+  action: ActionType;
+  className?: string;
+}) {
   if (action.integration) {
     return (
-      <IntegrationIcon className="size-8" integration={action.integration} />
+      <IntegrationIcon className={className} integration={action.integration} />
     );
   }
-  if (action.icon) {
-    return <action.icon className="size-8" />;
+  if (action.category === "System") {
+    return <Settings className={cn(className, "text-muted-foreground")} />;
+  }
+  return <Zap className={cn(className, "text-muted-foreground")} />;
+}
+
+// Local storage keys
+const HIDDEN_GROUPS_KEY = "workflow-action-grid-hidden-groups";
+const VIEW_MODE_KEY = "workflow-action-grid-view-mode";
+
+type ViewMode = "list" | "grid";
+
+function getInitialHiddenGroups(): Set<string> {
+  if (typeof window === "undefined") return new Set();
+  try {
+    const stored = localStorage.getItem(HIDDEN_GROUPS_KEY);
+    return stored ? new Set(JSON.parse(stored)) : new Set();
+  } catch {
+    return new Set();
+  }
+}
+
+function getInitialViewMode(): ViewMode {
+  if (typeof window === "undefined") return "list";
+  try {
+    const stored = localStorage.getItem(VIEW_MODE_KEY);
+    return stored === "grid" ? "grid" : "list";
+  } catch {
+    return "list";
   }
-  return <Zap className="size-8" />;
 }
 
 export function ActionGrid({
@@ -84,9 +156,49 @@ export function ActionGrid({
   isNewlyCreated,
 }: ActionGridProps) {
   const [filter, setFilter] = useState("");
+  const [collapsedGroups, setCollapsedGroups] = useState<Set<string>>(
+    new Set()
+  );
+  const [hiddenGroups, setHiddenGroups] = useState<Set<string>>(
+    getInitialHiddenGroups
+  );
+  const [showHidden, setShowHidden] = useState(false);
+  const [viewMode, setViewMode] = useState<ViewMode>(getInitialViewMode);
   const actions = useAllActions();
   const inputRef = useRef<HTMLInputElement>(null);
 
+  const toggleViewMode = () => {
+    const newMode = viewMode === "list" ? "grid" : "list";
+    setViewMode(newMode);
+    localStorage.setItem(VIEW_MODE_KEY, newMode);
+  };
+
+  const toggleGroup = (category: string) => {
+    setCollapsedGroups((prev) => {
+      const next = new Set(prev);
+      if (next.has(category)) {
+        next.delete(category);
+      } else {
+        next.add(category);
+      }
+      return next;
+    });
+  };
+
+  const toggleHideGroup = (category: string) => {
+    setHiddenGroups((prev) => {
+      const next = new Set(prev);
+      if (next.has(category)) {
+        next.delete(category);
+      } else {
+        next.add(category);
+      }
+      // Persist to localStorage
+      localStorage.setItem(HIDDEN_GROUPS_KEY, JSON.stringify([...next]));
+      return next;
+    });
+  };
+
   useEffect(() => {
     if (isNewlyCreated && inputRef.current) {
       inputRef.current.focus();
@@ -102,16 +214,47 @@ export function ActionGrid({
     );
   });
 
+  // Group actions by category
+  const groupedActions = useMemo(() => {
+    const groups: Record<string, ActionType[]> = {};
+
+    for (const action of filteredActions) {
+      const category = action.category;
+      if (!groups[category]) {
+        groups[category] = [];
+      }
+      groups[category].push(action);
+    }
+
+    // Sort categories: System first, then alphabetically
+    const sortedCategories = Object.keys(groups).sort((a, b) => {
+      if (a === "System") return -1;
+      if (b === "System") return 1;
+      return a.localeCompare(b);
+    });
+
+    return sortedCategories.map((category) => ({
+      category,
+      actions: groups[category],
+    }));
+  }, [filteredActions]);
+
+  // Filter groups based on hidden state
+  const visibleGroups = useMemo(() => {
+    if (showHidden) return groupedActions;
+    return groupedActions.filter((g) => !hiddenGroups.has(g.category));
+  }, [groupedActions, hiddenGroups, showHidden]);
+
+  const hiddenCount = hiddenGroups.size;
+
   return (
-    <div className="flex flex-col gap-4">
-      <div className="space-y-2">
-        <Label className="ml-1" htmlFor="action-filter">
-          Search Actions
-        </Label>
-        <div className="relative">
-          <Search className="absolute top-2.5 left-2.5 size-4 text-muted-foreground" />
+    <div className="flex min-h-0 flex-1 flex-col gap-3">
+      <div className="flex shrink-0 gap-2">
+        <div className="relative flex-1">
+          <Search className="absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" />
           <Input
-            className="pl-8"
+            autoFocus={isNewlyCreated}
+            className="pl-9"
             data-testid="action-search-input"
             disabled={disabled}
             id="action-filter"
@@ -121,32 +264,187 @@ export function ActionGrid({
             value={filter}
           />
         </div>
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                className="shrink-0"
+                onClick={toggleViewMode}
+                size="icon"
+                variant="ghost"
+              >
+                {viewMode === "list" ? (
+                  <Grid3X3 className="size-4" />
+                ) : (
+                  <List className="size-4" />
+                )}
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>
+              {viewMode === "list" ? "Grid view" : "List view"}
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+        {hiddenCount > 0 && (
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  className={cn("shrink-0", showHidden && "bg-muted")}
+                  onClick={() => setShowHidden(!showHidden)}
+                  size="icon"
+                  variant="ghost"
+                >
+                  {showHidden ? (
+                    <Eye className="size-4" />
+                  ) : (
+                    <EyeOff className="size-4" />
+                  )}
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                {showHidden
+                  ? "Hide hidden groups"
+                  : `Show ${hiddenCount} hidden group${hiddenCount > 1 ? "s" : ""}`}
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        )}
       </div>
 
-      <div className="grid grid-cols-2 gap-2" data-testid="action-grid">
-        {filteredActions.map((action) => (
-          <button
-            className={cn(
-              "flex flex-col items-center justify-center gap-3 rounded-lg border bg-card p-4 transition-colors hover:border-primary hover:bg-accent",
-              disabled && "pointer-events-none opacity-50"
-            )}
-            data-testid={`action-option-${action.id.toLowerCase().replace(/\s+/g, "-")}`}
-            disabled={disabled}
-            key={action.id}
-            onClick={() => onSelectAction(action.id)}
-            type="button"
+      <div
+        className="min-h-0 flex-1 overflow-y-auto pb-4"
+        data-testid="action-grid"
+      >
+        {filteredActions.length === 0 && (
+          <p className="py-4 text-center text-muted-foreground text-sm">
+            No actions found
+          </p>
+        )}
+        {filteredActions.length > 0 && visibleGroups.length === 0 && (
+          <p className="py-4 text-center text-muted-foreground text-sm">
+            All groups are hidden
+          </p>
+        )}
+
+        {/* Grid View */}
+        {viewMode === "grid" && visibleGroups.length > 0 && (
+          <div
+            className="grid gap-2 p-1"
+            style={{
+              gridTemplateColumns: "repeat(auto-fill, minmax(72px, 1fr))",
+            }}
           >
-            <ActionIcon action={action} />
-            <p className="text-center font-medium text-sm">{action.label}</p>
-          </button>
-        ))}
-      </div>
+            {filteredActions
+              .filter(
+                (action) => showHidden || !hiddenGroups.has(action.category)
+              )
+              .map((action) => (
+                <button
+                  className={cn(
+                    "flex aspect-square flex-col items-center justify-center gap-1.5 rounded-lg border border-transparent p-2 text-center transition-colors hover:border-border hover:bg-muted",
+                    disabled && "pointer-events-none opacity-50"
+                  )}
+                  data-testid={`action-option-${action.id.toLowerCase().replace(/\s+/g, "-")}`}
+                  disabled={disabled}
+                  key={action.id}
+                  onClick={() => onSelectAction(action.id)}
+                  type="button"
+                >
+                  <ActionIcon action={action} className="size-6" />
+                  <span className="line-clamp-2 font-medium text-xs leading-tight">
+                    {action.label}
+                  </span>
+                </button>
+              ))}
+          </div>
+        )}
 
-      {filteredActions.length === 0 && (
-        <p className="py-8 text-center text-muted-foreground text-sm">
-          No actions found
-        </p>
-      )}
+        {/* List View */}
+        {viewMode === "list" &&
+          visibleGroups.length > 0 &&
+          visibleGroups.map((group, groupIndex) => {
+            const isCollapsed = collapsedGroups.has(group.category);
+            const isHidden = hiddenGroups.has(group.category);
+            return (
+              <div key={group.category}>
+                {groupIndex > 0 && <div className="my-2 h-px bg-border" />}
+                <div
+                  className={cn(
+                    "sticky top-0 z-10 mb-1 flex items-center gap-2 bg-background px-3 py-2 font-medium text-muted-foreground text-xs uppercase tracking-wider",
+                    isHidden && "opacity-50"
+                  )}
+                >
+                  <button
+                    className="flex flex-1 items-center gap-2 text-left hover:text-foreground"
+                    onClick={() => toggleGroup(group.category)}
+                    type="button"
+                  >
+                    <ChevronRight
+                      className={cn(
+                        "size-3.5 transition-transform",
+                        !isCollapsed && "rotate-90"
+                      )}
+                    />
+                    <GroupIcon group={group} />
+                    {group.category}
+                  </button>
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <button
+                        className="rounded p-0.5 hover:bg-muted hover:text-foreground"
+                        type="button"
+                      >
+                        <MoreHorizontal className="size-4" />
+                      </button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end">
+                      <DropdownMenuItem
+                        onClick={() => toggleHideGroup(group.category)}
+                      >
+                        {isHidden ? (
+                          <>
+                            <Eye className="mr-2 size-4" />
+                            Show group
+                          </>
+                        ) : (
+                          <>
+                            <EyeOff className="mr-2 size-4" />
+                            Hide group
+                          </>
+                        )}
+                      </DropdownMenuItem>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </div>
+                {!isCollapsed &&
+                  group.actions.map((action) => (
+                    <button
+                      className={cn(
+                        "flex w-full items-center rounded-md px-3 py-2 text-left text-sm transition-colors hover:bg-muted",
+                        disabled && "pointer-events-none opacity-50"
+                      )}
+                      data-testid={`action-option-${action.id.toLowerCase().replace(/\s+/g, "-")}`}
+                      disabled={disabled}
+                      key={action.id}
+                      onClick={() => onSelectAction(action.id)}
+                      type="button"
+                    >
+                      <span className="min-w-0 flex-1 truncate">
+                        <span className="font-medium">{action.label}</span>
+                        {action.description && (
+                          <span className="text-muted-foreground text-xs">
+                            {" "}
+                            - {action.description}
+                          </span>
+                        )}
+                      </span>
+                    </button>
+                  ))}
+              </div>
+            );
+          })}
+      </div>
     </div>
   );
 }
diff --git a/components/workflow/node-config-panel.tsx b/components/workflow/node-config-panel.tsx
index 35593f839..398e70a73 100644
--- a/components/workflow/node-config-panel.tsx
+++ b/components/workflow/node-config-panel.tsx
@@ -775,19 +775,11 @@ export const PanelInner = () => {
           className="flex flex-col overflow-hidden"
           value="properties"
         >
-          <div className="flex-1 space-y-4 overflow-y-auto p-4">
-            {selectedNode.data.type === "trigger" && (
-              <TriggerConfig
-                config={selectedNode.data.config || {}}
-                disabled={isGenerating || !isOwner}
-                onUpdateConfig={handleUpdateConfig}
-                workflowId={currentWorkflowId ?? undefined}
-              />
-            )}
-
-            {selectedNode.data.type === "action" &&
-              !selectedNode.data.config?.actionType &&
-              isOwner && (
+          {/* Action selection - full height flex layout */}
+          {selectedNode.data.type === "action" &&
+            !selectedNode.data.config?.actionType &&
+            isOwner && (
+              <div className="flex min-h-0 flex-1 flex-col px-4 pt-4">
                 <ActionGrid
                   disabled={isGenerating}
                   isNewlyCreated={selectedNode?.id === newlyCreatedNodeId}
@@ -799,66 +791,85 @@ export const PanelInner = () => {
                     }
                   }}
                 />
+              </div>
+            )}
+
+          {/* Other content - scrollable */}
+          {!(
+            selectedNode.data.type === "action" &&
+            !selectedNode.data.config?.actionType &&
+            isOwner
+          ) && (
+            <div className="flex-1 space-y-4 overflow-y-auto p-4">
+              {selectedNode.data.type === "trigger" && (
+                <TriggerConfig
+                  config={selectedNode.data.config || {}}
+                  disabled={isGenerating || !isOwner}
+                  onUpdateConfig={handleUpdateConfig}
+                  workflowId={currentWorkflowId ?? undefined}
+                />
               )}
 
-            {selectedNode.data.type === "action" &&
-              !selectedNode.data.config?.actionType &&
-              !isOwner && (
+              {selectedNode.data.type === "action" &&
+                !selectedNode.data.config?.actionType &&
+                !isOwner && (
+                  <div className="rounded-lg border border-muted bg-muted/30 p-3">
+                    <p className="text-muted-foreground text-sm">
+                      No action configured for this step.
+                    </p>
+                  </div>
+                )}
+
+              {selectedNode.data.type === "action" &&
+              selectedNode.data.config?.actionType ? (
+                <ActionConfig
+                  config={selectedNode.data.config || {}}
+                  disabled={isGenerating || !isOwner}
+                  isOwner={isOwner}
+                  onUpdateConfig={handleUpdateConfig}
+                />
+              ) : null}
+
+              {selectedNode.data.type !== "action" ||
+              selectedNode.data.config?.actionType ? (
+                <>
+                  <div className="space-y-2">
+                    <Label className="ml-1" htmlFor="label">
+                      Label
+                    </Label>
+                    <Input
+                      disabled={isGenerating || !isOwner}
+                      id="label"
+                      onChange={(e) => handleUpdateLabel(e.target.value)}
+                      value={selectedNode.data.label}
+                    />
+                  </div>
+
+                  <div className="space-y-2">
+                    <Label className="ml-1" htmlFor="description">
+                      Description
+                    </Label>
+                    <Input
+                      disabled={isGenerating || !isOwner}
+                      id="description"
+                      onChange={(e) => handleUpdateDescription(e.target.value)}
+                      placeholder="Optional description"
+                      value={selectedNode.data.description || ""}
+                    />
+                  </div>
+                </>
+              ) : null}
+
+              {!isOwner && (
                 <div className="rounded-lg border border-muted bg-muted/30 p-3">
                   <p className="text-muted-foreground text-sm">
-                    No action configured for this step.
+                    You are viewing a public workflow. Duplicate it to make
+                    changes.
                   </p>
                 </div>
               )}
-
-            {selectedNode.data.type === "action" &&
-            selectedNode.data.config?.actionType ? (
-              <ActionConfig
-                config={selectedNode.data.config || {}}
-                disabled={isGenerating || !isOwner}
-                onUpdateConfig={handleUpdateConfig}
-              />
-            ) : null}
-
-            {selectedNode.data.type !== "action" ||
-            selectedNode.data.config?.actionType ? (
-              <>
-                <div className="space-y-2">
-                  <Label className="ml-1" htmlFor="label">
-                    Label
-                  </Label>
-                  <Input
-                    disabled={isGenerating || !isOwner}
-                    id="label"
-                    onChange={(e) => handleUpdateLabel(e.target.value)}
-                    value={selectedNode.data.label}
-                  />
-                </div>
-
-                <div className="space-y-2">
-                  <Label className="ml-1" htmlFor="description">
-                    Description
-                  </Label>
-                  <Input
-                    disabled={isGenerating || !isOwner}
-                    id="description"
-                    onChange={(e) => handleUpdateDescription(e.target.value)}
-                    placeholder="Optional description"
-                    value={selectedNode.data.description || ""}
-                  />
-                </div>
-              </>
-            ) : null}
-
-            {!isOwner && (
-              <div className="rounded-lg border border-muted bg-muted/30 p-3">
-                <p className="text-muted-foreground text-sm">
-                  You are viewing a public workflow. Duplicate it to make
-                  changes.
-                </p>
-              </div>
-            )}
-          </div>
+            </div>
+          )}
           {selectedNode.data.type === "action" && isOwner && (
             <div className="flex shrink-0 items-center justify-between border-t p-4">
               <div className="flex items-center gap-2">
@@ -921,7 +932,6 @@ export const PanelInner = () => {
                   return (
                     <IntegrationSelector
                       integrationType={integrationType as IntegrationType}
-                      label="Integration"
                       onChange={(id) => handleUpdateConfig("integrationId", id)}
                       onOpenSettings={() => setShowIntegrationsDialog(true)}
                       value={
diff --git a/components/workflow/workflow-runs.tsx b/components/workflow/workflow-runs.tsx
index 4c4624adf..07f7ea497 100644
--- a/components/workflow/workflow-runs.tsx
+++ b/components/workflow/workflow-runs.tsx
@@ -399,7 +399,7 @@ function ExecutionLogEntry({
   return (
     <div className="relative flex gap-3" key={log.id}>
       {/* Timeline connector */}
-      <div className="-ml-px relative flex flex-col items-center pt-2">
+      <div className="relative -ml-px flex flex-col items-center pt-2">
         {!isFirst && (
           <div className="absolute bottom-full h-2 w-px bg-border" />
         )}
diff --git a/components/workflow/workflow-toolbar.tsx b/components/workflow/workflow-toolbar.tsx
index 84e16998e..40a7794ec 100644
--- a/components/workflow/workflow-toolbar.tsx
+++ b/components/workflow/workflow-toolbar.tsx
@@ -339,6 +339,7 @@ function getMissingRequiredFields(
 // Get missing integrations for workflow nodes
 // Uses the plugin registry to determine which integrations are required
 // Also handles built-in actions that aren't in the plugin registry
+// biome-ignore lint/complexity/noExcessiveCognitiveComplexity: Upstream function - preserving original structure for easier merges
 function getMissingIntegrations(
   nodes: WorkflowNode[],
   userIntegrations: Array<{ id: string; type: IntegrationType }>
@@ -1607,10 +1608,20 @@ function WorkflowIssuesDialog({
   const { brokenReferences, missingRequiredFields, missingIntegrations } =
     actions.workflowIssues;
 
-  const handleGoToStep = (nodeId: string) => {
+  const handleGoToStep = (nodeId: string, fieldKey?: string) => {
     actions.setShowWorkflowIssuesDialog(false);
     state.setSelectedNodeId(nodeId);
     state.setActiveTab("properties");
+    // Focus on the specific field after a short delay to allow the panel to render
+    if (fieldKey) {
+      setTimeout(() => {
+        const element = document.getElementById(fieldKey);
+        if (element) {
+          element.focus();
+          element.scrollIntoView({ behavior: "smooth", block: "center" });
+        }
+      }, 100);
+    }
   };
 
   const handleAddIntegration = (integrationType: IntegrationType) => {
@@ -1642,147 +1653,128 @@ function WorkflowIssuesDialog({
             </AlertDialogDescription>
           </AlertDialogHeader>
 
-          <div className="flex-1 space-y-4 overflow-y-auto py-2">
-            {/* Broken References Section */}
-            {brokenReferences.length > 0 && (
-              <div className="space-y-2">
-                <h4 className="flex items-center gap-1.5 font-medium text-red-600 text-sm dark:text-red-400">
-                  <AlertTriangle className="size-4" />
-                  Broken References ({brokenReferences.length})
+          <div className="flex-1 space-y-3 overflow-y-auto py-2">
+            {/* Missing Connections Section */}
+            {missingIntegrations.length > 0 && (
+              <div className="space-y-1">
+                <h4 className="font-medium text-muted-foreground text-xs uppercase tracking-wide">
+                  Missing Connections
                 </h4>
-                <div className="space-y-2">
-                  {brokenReferences.map((broken) => (
-                    <div
-                      className="flex items-center gap-3 rounded-lg border border-red-500/20 bg-red-500/5 p-3"
-                      key={broken.nodeId}
+                {missingIntegrations.map((missing) => (
+                  <div
+                    className="flex items-center gap-3 py-1"
+                    key={missing.integrationType}
+                  >
+                    <IntegrationIcon
+                      className="size-4 shrink-0"
+                      integration={missing.integrationType}
+                    />
+                    <p className="min-w-0 flex-1 text-sm">
+                      <span className="font-medium">
+                        {missing.integrationLabel}
+                      </span>
+                      <span className="text-muted-foreground">
+                        {" — "}
+                        {missing.nodeNames.length > 3
+                          ? `${missing.nodeNames.slice(0, 3).join(", ")} +${missing.nodeNames.length - 3} more`
+                          : missing.nodeNames.join(", ")}
+                      </span>
+                    </p>
+                    <Button
+                      className="shrink-0"
+                      onClick={() =>
+                        handleAddIntegration(missing.integrationType)
+                      }
+                      size="sm"
+                      variant="outline"
                     >
-                      <div className="min-w-0 flex-1">
-                        <p className="font-medium text-foreground text-sm">
-                          {broken.nodeLabel}
-                        </p>
-                        <div className="mt-1 space-y-1">
-                          {broken.brokenReferences.map((ref, idx) => (
-                            <p
-                              className="text-muted-foreground text-xs"
-                              key={`${ref.fieldKey}-${idx}`}
-                            >
-                              <span className="font-mono text-red-600 dark:text-red-400">
-                                {ref.displayText}
-                              </span>{" "}
-                              in {ref.fieldLabel}
-                            </p>
-                          ))}
-                        </div>
-                      </div>
-                      <Button
-                        className="shrink-0"
-                        onClick={() => handleGoToStep(broken.nodeId)}
-                        size="sm"
-                        variant="outline"
-                      >
-                        Fix
-                      </Button>
-                    </div>
-                  ))}
-                </div>
+                      Add
+                    </Button>
+                  </div>
+                ))}
               </div>
             )}
 
-            {/* Missing Required Fields Section */}
-            {missingRequiredFields.length > 0 && (
+            {/* Broken References Section */}
+            {brokenReferences.length > 0 && (
               <div className="space-y-2">
-                <h4 className="flex items-center gap-1.5 font-medium text-orange-600 text-sm dark:text-orange-400">
-                  <AlertTriangle className="size-4" />
-                  Missing Required Fields ({missingRequiredFields.length})
+                <h4 className="font-medium text-muted-foreground text-xs uppercase tracking-wide">
+                  Broken References
                 </h4>
-                <div className="space-y-2">
-                  {missingRequiredFields.map((node) => (
-                    <div
-                      className="flex items-center gap-3 rounded-lg border border-orange-500/20 bg-orange-500/5 p-3"
-                      key={node.nodeId}
-                    >
-                      <div className="min-w-0 flex-1">
-                        <p className="font-medium text-foreground text-sm">
-                          {node.nodeLabel}
-                        </p>
-                        <div className="mt-1 space-y-1">
-                          {node.missingFields.map((field) => (
-                            <p
-                              className="text-muted-foreground text-xs"
-                              key={field.fieldKey}
-                            >
-                              Missing:{" "}
-                              <span className="font-medium text-orange-600 dark:text-orange-400">
-                                {field.fieldLabel}
-                              </span>
-                            </p>
-                          ))}
+                {brokenReferences.map((broken) => (
+                  <div key={broken.nodeId}>
+                    <p className="font-medium text-sm">{broken.nodeLabel}</p>
+                    <div className="mt-1 space-y-0.5">
+                      {broken.brokenReferences.map((ref, idx) => (
+                        <div
+                          className="flex items-center gap-3 py-0.5 pl-3"
+                          key={`${broken.nodeId}-${ref.fieldKey}-${idx}`}
+                        >
+                          <p className="min-w-0 flex-1 text-muted-foreground text-sm">
+                            <span className="font-mono">{ref.displayText}</span>
+                            {" in "}
+                            {ref.fieldLabel}
+                          </p>
+                          <Button
+                            className="shrink-0"
+                            onClick={() =>
+                              handleGoToStep(broken.nodeId, ref.fieldKey)
+                            }
+                            size="sm"
+                            variant="outline"
+                          >
+                            Fix
+                          </Button>
                         </div>
-                      </div>
-                      <Button
-                        className="shrink-0"
-                        onClick={() => handleGoToStep(node.nodeId)}
-                        size="sm"
-                        variant="outline"
-                      >
-                        Fix
-                      </Button>
+                      ))}
                     </div>
-                  ))}
-                </div>
+                  </div>
+                ))}
               </div>
             )}
 
-            {/* Missing Integrations Section */}
-            {missingIntegrations.length > 0 && (
+            {/* Missing Required Fields Section */}
+            {missingRequiredFields.length > 0 && (
               <div className="space-y-2">
-                <h4 className="flex items-center gap-1.5 font-medium text-orange-600 text-sm dark:text-orange-400">
-                  <AlertTriangle className="size-4" />
-                  Missing Integrations ({missingIntegrations.length})
+                <h4 className="font-medium text-muted-foreground text-xs uppercase tracking-wide">
+                  Missing Required Fields
                 </h4>
-                <div className="space-y-2">
-                  {missingIntegrations.map((missing) => (
-                    <div
-                      className="flex items-center gap-3 rounded-lg border border-orange-500/20 bg-orange-500/5 p-3"
-                      key={missing.integrationType}
-                    >
-                      <IntegrationIcon
-                        className="size-5 shrink-0"
-                        integration={missing.integrationType}
-                      />
-                      <div className="min-w-0 flex-1">
-                        <p className="font-medium text-foreground text-sm">
-                          {missing.integrationLabel}
-                        </p>
-                        <p className="text-muted-foreground text-xs">
-                          Used by:{" "}
-                          {missing.nodeNames.length > 3
-                            ? `${missing.nodeNames.slice(0, 3).join(", ")} and ${missing.nodeNames.length - 3} more`
-                            : missing.nodeNames.join(", ")}
-                        </p>
-                      </div>
-                      <Button
-                        className="shrink-0"
-                        onClick={() =>
-                          handleAddIntegration(missing.integrationType)
-                        }
-                        size="sm"
-                        variant="outline"
-                      >
-                        Add
-                      </Button>
+                {missingRequiredFields.map((node) => (
+                  <div key={node.nodeId}>
+                    <p className="font-medium text-sm">{node.nodeLabel}</p>
+                    <div className="mt-1 space-y-0.5">
+                      {node.missingFields.map((field) => (
+                        <div
+                          className="flex items-center gap-3 py-0.5 pl-3"
+                          key={`${node.nodeId}-${field.fieldKey}`}
+                        >
+                          <p className="min-w-0 flex-1 text-muted-foreground text-sm">
+                            {field.fieldLabel}
+                          </p>
+                          <Button
+                            className="shrink-0"
+                            onClick={() =>
+                              handleGoToStep(node.nodeId, field.fieldKey)
+                            }
+                            size="sm"
+                            variant="outline"
+                          >
+                            Fix
+                          </Button>
+                        </div>
+                      ))}
                     </div>
-                  ))}
-                </div>
+                  </div>
+                ))}
               </div>
             )}
           </div>
 
-          <AlertDialogFooter className="flex-col gap-2 sm:flex-row">
-            <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogFooter className="sm:justify-between">
             <Button onClick={actions.handleExecuteAnyway} variant="outline">
               Run Anyway
             </Button>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
           </AlertDialogFooter>
         </AlertDialogContent>
       </AlertDialog>
@@ -1954,12 +1946,14 @@ function WorkflowDialogsComponent({
               the workflow?
             </AlertDialogDescription>
           </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogFooter className="sm:justify-between">
             <Button onClick={actions.handleRunWithoutSaving} variant="outline">
               Run Without Saving
             </Button>
-            <Button onClick={actions.handleSaveAndRun}>Save and Run</Button>
+            <div className="flex gap-2">
+              <AlertDialogCancel>Cancel</AlertDialogCancel>
+              <Button onClick={actions.handleSaveAndRun}>Save and Run</Button>
+            </div>
           </AlertDialogFooter>
         </AlertDialogContent>
       </AlertDialog>
diff --git a/components/workflows/user-menu.tsx b/components/workflows/user-menu.tsx
index ca319988e..3e6ee144d 100644
--- a/components/workflows/user-menu.tsx
+++ b/components/workflows/user-menu.tsx
@@ -147,7 +147,7 @@ export const UserMenu = () => {
         )}
         <DropdownMenuItem onClick={() => setIntegrationsOpen(true)}>
           <Plug className="size-4" />
-          <span>Integrations</span>
+          <span>Connections</span>
         </DropdownMenuItem>
         <DropdownMenuItem onClick={() => setApiKeysOpen(true)}>
           <Key className="size-4" />
@@ -159,7 +159,7 @@ export const UserMenu = () => {
         </DropdownMenuItem>
         <DropdownMenuSub>
           <DropdownMenuSubTrigger>
-            <Sun className="dark:-rotate-90 size-4 rotate-0 scale-100 transition-all dark:scale-0" />
+            <Sun className="size-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
             <Moon className="absolute size-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
             <span>Theme</span>
           </DropdownMenuSubTrigger>
diff --git a/drizzle/0004_real_wither.sql b/drizzle/0004_real_wither.sql
new file mode 100644
index 000000000..1eb476a85
--- /dev/null
+++ b/drizzle/0004_real_wither.sql
@@ -0,0 +1 @@
+ALTER TABLE "integrations" ADD COLUMN "is_managed" boolean DEFAULT false;
\ No newline at end of file
diff --git a/drizzle/meta/0004_snapshot.json b/drizzle/meta/0004_snapshot.json
new file mode 100644
index 000000000..3a4b9ccb0
--- /dev/null
+++ b/drizzle/meta/0004_snapshot.json
@@ -0,0 +1,731 @@
+{
+  "id": "0832c6e0-e9ef-4979-af70-f53f1f15d10a",
+  "prevId": "725be3c3-851b-481a-91d1-080feccc324d",
+  "version": "7",
+  "dialect": "postgresql",
+  "tables": {
+    "public.accounts": {
+      "name": "accounts",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "account_id": {
+          "name": "account_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "provider_id": {
+          "name": "provider_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "access_token": {
+          "name": "access_token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "refresh_token": {
+          "name": "refresh_token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "id_token": {
+          "name": "id_token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "access_token_expires_at": {
+          "name": "access_token_expires_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "refresh_token_expires_at": {
+          "name": "refresh_token_expires_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "scope": {
+          "name": "scope",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "password": {
+          "name": "password",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "accounts_user_id_users_id_fk": {
+          "name": "accounts_user_id_users_id_fk",
+          "tableFrom": "accounts",
+          "tableTo": "users",
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.api_keys": {
+      "name": "api_keys",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "key_hash": {
+          "name": "key_hash",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "key_prefix": {
+          "name": "key_prefix",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "last_used_at": {
+          "name": "last_used_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "api_keys_user_id_users_id_fk": {
+          "name": "api_keys_user_id_users_id_fk",
+          "tableFrom": "api_keys",
+          "tableTo": "users",
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.integrations": {
+      "name": "integrations",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "type": {
+          "name": "type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "config": {
+          "name": "config",
+          "type": "jsonb",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "is_managed": {
+          "name": "is_managed",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": false,
+          "default": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "integrations_user_id_users_id_fk": {
+          "name": "integrations_user_id_users_id_fk",
+          "tableFrom": "integrations",
+          "tableTo": "users",
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.sessions": {
+      "name": "sessions",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "expires_at": {
+          "name": "expires_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "token": {
+          "name": "token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "ip_address": {
+          "name": "ip_address",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "user_agent": {
+          "name": "user_agent",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "sessions_user_id_users_id_fk": {
+          "name": "sessions_user_id_users_id_fk",
+          "tableFrom": "sessions",
+          "tableTo": "users",
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "sessions_token_unique": {
+          "name": "sessions_token_unique",
+          "nullsNotDistinct": false,
+          "columns": ["token"]
+        }
+      },
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.users": {
+      "name": "users",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "email": {
+          "name": "email",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "email_verified": {
+          "name": "email_verified",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "default": false
+        },
+        "image": {
+          "name": "image",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "is_anonymous": {
+          "name": "is_anonymous",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": false,
+          "default": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "users_email_unique": {
+          "name": "users_email_unique",
+          "nullsNotDistinct": false,
+          "columns": ["email"]
+        }
+      },
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.verifications": {
+      "name": "verifications",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "identifier": {
+          "name": "identifier",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "value": {
+          "name": "value",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "expires_at": {
+          "name": "expires_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.workflow_execution_logs": {
+      "name": "workflow_execution_logs",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "execution_id": {
+          "name": "execution_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "node_id": {
+          "name": "node_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "node_name": {
+          "name": "node_name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "node_type": {
+          "name": "node_type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "status": {
+          "name": "status",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "input": {
+          "name": "input",
+          "type": "jsonb",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "output": {
+          "name": "output",
+          "type": "jsonb",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "error": {
+          "name": "error",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "started_at": {
+          "name": "started_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "completed_at": {
+          "name": "completed_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "duration": {
+          "name": "duration",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "timestamp": {
+          "name": "timestamp",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "workflow_execution_logs_execution_id_workflow_executions_id_fk": {
+          "name": "workflow_execution_logs_execution_id_workflow_executions_id_fk",
+          "tableFrom": "workflow_execution_logs",
+          "tableTo": "workflow_executions",
+          "columnsFrom": ["execution_id"],
+          "columnsTo": ["id"],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.workflow_executions": {
+      "name": "workflow_executions",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "workflow_id": {
+          "name": "workflow_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "status": {
+          "name": "status",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "input": {
+          "name": "input",
+          "type": "jsonb",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "output": {
+          "name": "output",
+          "type": "jsonb",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "error": {
+          "name": "error",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "started_at": {
+          "name": "started_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "completed_at": {
+          "name": "completed_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "duration": {
+          "name": "duration",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "workflow_executions_workflow_id_workflows_id_fk": {
+          "name": "workflow_executions_workflow_id_workflows_id_fk",
+          "tableFrom": "workflow_executions",
+          "tableTo": "workflows",
+          "columnsFrom": ["workflow_id"],
+          "columnsTo": ["id"],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        },
+        "workflow_executions_user_id_users_id_fk": {
+          "name": "workflow_executions_user_id_users_id_fk",
+          "tableFrom": "workflow_executions",
+          "tableTo": "users",
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.workflows": {
+      "name": "workflows",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "description": {
+          "name": "description",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "nodes": {
+          "name": "nodes",
+          "type": "jsonb",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "edges": {
+          "name": "edges",
+          "type": "jsonb",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "visibility": {
+          "name": "visibility",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'private'"
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "workflows_user_id_users_id_fk": {
+          "name": "workflows_user_id_users_id_fk",
+          "tableFrom": "workflows",
+          "tableTo": "users",
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    }
+  },
+  "enums": {},
+  "schemas": {},
+  "sequences": {},
+  "roles": {},
+  "policies": {},
+  "views": {},
+  "_meta": {
+    "columns": {},
+    "schemas": {},
+    "tables": {}
+  }
+}
diff --git a/drizzle/meta/_journal.json b/drizzle/meta/_journal.json
index 065206e88..de501962f 100644
--- a/drizzle/meta/_journal.json
+++ b/drizzle/meta/_journal.json
@@ -29,6 +29,13 @@
       "when": 1765507190572,
       "tag": "0003_parched_wendell_rand",
       "breakpoints": true
+    },
+    {
+      "idx": 4,
+      "version": "7",
+      "when": 1765834764376,
+      "tag": "0004_real_wither",
+      "breakpoints": true
     }
   ]
 }
diff --git a/lib/ai-gateway/config.ts b/lib/ai-gateway/config.ts
new file mode 100644
index 000000000..5cb047165
--- /dev/null
+++ b/lib/ai-gateway/config.ts
@@ -0,0 +1,27 @@
+/**
+ * AI Gateway Managed Keys Configuration
+ *
+ * This feature allows signed-in users to use their own Vercel AI Gateway
+ * API keys (and credits) instead of manually entering an API key.
+ *
+ * The AI Gateway itself is available to everyone via AI_GATEWAY_API_KEY.
+ * This feature flag only controls the ability to create API keys on behalf
+ * of users through OAuth - which is an internal Vercel feature.
+ *
+ * Set AI_GATEWAY_MANAGED_KEYS_ENABLED=true to enable.
+ */
+
+export function isAiGatewayManagedKeysEnabled(): boolean {
+  return process.env.AI_GATEWAY_MANAGED_KEYS_ENABLED === "true";
+}
+
+/**
+ * Check if managed keys feature is enabled on the client side
+ * Uses NEXT_PUBLIC_ prefix for client-side access
+ */
+export function isAiGatewayManagedKeysEnabledClient(): boolean {
+  if (typeof window === "undefined") {
+    return process.env.AI_GATEWAY_MANAGED_KEYS_ENABLED === "true";
+  }
+  return process.env.NEXT_PUBLIC_AI_GATEWAY_MANAGED_KEYS_ENABLED === "true";
+}
diff --git a/lib/ai-gateway/state.ts b/lib/ai-gateway/state.ts
new file mode 100644
index 000000000..736c45026
--- /dev/null
+++ b/lib/ai-gateway/state.ts
@@ -0,0 +1,65 @@
+"use client";
+
+import { atom } from "jotai";
+import type { VercelTeam } from "@/lib/api-client";
+
+/**
+ * AI Gateway consent modal state
+ */
+export const showAiGatewayConsentModalAtom = atom(false);
+
+/**
+ * Callbacks for the consent modal - stored in atoms so any component can set them
+ */
+export type AiGatewayConsentCallbacks = {
+  onConsent?: (integrationId: string) => void;
+  onManualEntry?: () => void;
+  onDecline?: () => void;
+};
+
+export const aiGatewayConsentCallbacksAtom = atom<AiGatewayConsentCallbacks>(
+  {}
+);
+
+/**
+ * Write-only atom to open the consent modal with specific callbacks.
+ * Usage: const openModal = useSetAtom(openAiGatewayConsentModalAtom);
+ *        openModal({ onConsent: (id) => ..., onManualEntry: () => ... });
+ */
+export const openAiGatewayConsentModalAtom = atom(
+  null,
+  (get, set, callbacks: AiGatewayConsentCallbacks) => {
+    set(aiGatewayConsentCallbacksAtom, callbacks);
+    set(showAiGatewayConsentModalAtom, true);
+  }
+);
+
+/**
+ * AI Gateway status (fetched from API)
+ */
+export type AiGatewayStatus = {
+  /** Whether the user keys feature is enabled */
+  enabled: boolean;
+  /** Whether the user is signed in */
+  signedIn: boolean;
+  /** Whether the user signed in with Vercel OAuth */
+  isVercelUser: boolean;
+  /** Whether the user has a managed AI Gateway integration */
+  hasManagedKey: boolean;
+  /** The ID of the managed integration (if exists) */
+  managedIntegrationId?: string;
+} | null;
+
+export const aiGatewayStatusAtom = atom<AiGatewayStatus>(null);
+
+/**
+ * Loading state for consent action
+ */
+export const aiGatewayConsentLoadingAtom = atom(false);
+
+/**
+ * Vercel teams for the current user
+ */
+export const aiGatewayTeamsAtom = atom<VercelTeam[]>([]);
+export const aiGatewayTeamsLoadingAtom = atom(false);
+export const aiGatewayTeamsFetchedAtom = atom(false);
diff --git a/lib/api-client.ts b/lib/api-client.ts
index 27c9c5ad9..357db48ce 100644
--- a/lib/api-client.ts
+++ b/lib/api-client.ts
@@ -320,6 +320,7 @@ export type Integration = {
   id: string;
   name: string;
   type: IntegrationType;
+  isManaged?: boolean;
   createdAt: string;
   updatedAt: string;
 };
@@ -328,6 +329,34 @@ export type IntegrationWithConfig = Integration & {
   config: IntegrationConfig;
 };
 
+// AI Gateway types
+export type AiGatewayStatusResponse = {
+  enabled: boolean;
+  signedIn: boolean;
+  isVercelUser: boolean;
+  hasManagedKey: boolean;
+  managedIntegrationId?: string;
+};
+
+export type AiGatewayConsentResponse = {
+  success: boolean;
+  hasManagedKey: boolean;
+  managedIntegrationId?: string;
+  error?: string;
+};
+
+export type VercelTeam = {
+  id: string;
+  name: string;
+  slug: string;
+  avatar?: string;
+  isPersonal: boolean;
+};
+
+export type AiGatewayTeamsResponse = {
+  teams: VercelTeam[];
+};
+
 // Integration API
 export const integrationApi = {
   // List all integrations
@@ -362,7 +391,7 @@ export const integrationApi = {
       method: "DELETE",
     }),
 
-  // Test connection
+  // Test existing integration connection
   testConnection: (integrationId: string) =>
     apiCall<{ status: "success" | "error"; message: string }>(
       `/api/integrations/${integrationId}/test`,
@@ -370,6 +399,19 @@ export const integrationApi = {
         method: "POST",
       }
     ),
+
+  // Test credentials without saving
+  testCredentials: (data: {
+    type: IntegrationType;
+    config: IntegrationConfig;
+  }) =>
+    apiCall<{ status: "success" | "error"; message: string }>(
+      "/api/integrations/test",
+      {
+        method: "POST",
+        body: JSON.stringify(data),
+      }
+    ),
 };
 
 // User API
@@ -608,10 +650,33 @@ export const betaApi = {
     }),
 };
 
+// AI Gateway API (User Keys feature)
+export const aiGatewayApi = {
+  // Get status (whether feature is enabled, user has managed key, etc.)
+  getStatus: () => apiCall<AiGatewayStatusResponse>("/api/ai-gateway/status"),
+
+  // Get available Vercel teams
+  getTeams: () => apiCall<AiGatewayTeamsResponse>("/api/ai-gateway/teams"),
+
+  // Grant consent and create managed API key
+  consent: (teamId: string, teamName: string) =>
+    apiCall<AiGatewayConsentResponse>("/api/ai-gateway/consent", {
+      method: "POST",
+      body: JSON.stringify({ teamId, teamName }),
+    }),
+
+  // Revoke consent and delete managed API key
+  revokeConsent: () =>
+    apiCall<AiGatewayConsentResponse>("/api/ai-gateway/consent", {
+      method: "DELETE",
+    }),
+};
+
 // Export all APIs as a single object
 export const api = {
   ai: aiApi,
   beta: betaApi,
+  aiGateway: aiGatewayApi,
   integration: integrationApi,
   user: userApi,
   workflow: workflowApi,
diff --git a/lib/auth.ts b/lib/auth.ts
index 2098ead5c..d30452336 100644
--- a/lib/auth.ts
+++ b/lib/auth.ts
@@ -2,6 +2,7 @@ import { betterAuth } from "better-auth";
 import { drizzleAdapter } from "better-auth/adapters/drizzle";
 import { anonymous, genericOAuth } from "better-auth/plugins";
 import { eq } from "drizzle-orm";
+import { isAiGatewayManagedKeysEnabled } from "./ai-gateway/config";
 import { db } from "./db";
 import {
   accounts,
@@ -105,7 +106,11 @@ const plugins = [
               authorizationUrl: "https://vercel.com/oauth/authorize",
               tokenUrl: "https://api.vercel.com/login/oauth/token",
               userInfoUrl: "https://api.vercel.com/login/oauth/userinfo",
-              scopes: ["openid", "email", "profile"],
+              // Include read-write:team scope when AI Gateway User Keys is enabled
+              // This grants APIKey and APIKeyAiGateway permissions for creating user keys
+              scopes: isAiGatewayManagedKeysEnabled()
+                ? ["openid", "email", "profile", "read-write:team"]
+                : ["openid", "email", "profile"],
               discoveryUrl: undefined,
               pkce: true,
               getUserInfo: async (tokens) => {
diff --git a/lib/db/index.ts b/lib/db/index.ts
index 8f4c186d2..0596f0e15 100644
--- a/lib/db/index.ts
+++ b/lib/db/index.ts
@@ -1,8 +1,10 @@
+import type { PostgresJsDatabase } from "drizzle-orm/postgres-js";
 import { drizzle } from "drizzle-orm/postgres-js";
 import postgres from "postgres";
 import {
   accounts,
   apiKeys,
+  integrations,
   sessions,
   users,
   verifications,
@@ -23,6 +25,7 @@ const schema = {
   workflowExecutionLogs,
   workflowExecutionsRelations,
   apiKeys,
+  integrations,
 };
 
 const connectionString =
@@ -31,6 +34,18 @@ const connectionString =
 // For migrations
 export const migrationClient = postgres(connectionString, { max: 1 });
 
-// For queries
-const queryClient = postgres(connectionString);
-export const db = drizzle(queryClient, { schema });
+// Use global singleton to prevent connection exhaustion during HMR
+const globalForDb = globalThis as unknown as {
+  queryClient: ReturnType<typeof postgres> | undefined;
+  db: PostgresJsDatabase<typeof schema> | undefined;
+};
+
+// For queries - reuse connection in development
+const queryClient =
+  globalForDb.queryClient ?? postgres(connectionString, { max: 10 });
+export const db = globalForDb.db ?? drizzle(queryClient, { schema });
+
+if (process.env.NODE_ENV !== "production") {
+  globalForDb.queryClient = queryClient;
+  globalForDb.db = db;
+}
diff --git a/lib/db/integrations.ts b/lib/db/integrations.ts
index d4b46d7bb..4d96768f5 100644
--- a/lib/db/integrations.ts
+++ b/lib/db/integrations.ts
@@ -105,6 +105,7 @@ export type DecryptedIntegration = {
   name: string;
   type: IntegrationType;
   config: IntegrationConfig;
+  isManaged: boolean | null;
   createdAt: Date;
   updatedAt: Date;
 };
diff --git a/lib/db/schema.ts b/lib/db/schema.ts
index 5c50f1c2b..fe2b67275 100644
--- a/lib/db/schema.ts
+++ b/lib/db/schema.ts
@@ -93,6 +93,8 @@ export const integrations = pgTable("integrations", {
   type: text("type").notNull().$type<IntegrationType>(),
   // biome-ignore lint/suspicious/noExplicitAny: JSONB type - encrypted credentials stored as JSON
   config: jsonb("config").notNull().$type<any>(),
+  // Whether this integration was created via OAuth (managed by app) vs manual entry
+  isManaged: boolean("is_managed").default(false),
   createdAt: timestamp("created_at").notNull().defaultNow(),
   updatedAt: timestamp("updated_at").notNull().defaultNow(),
 });
diff --git a/lib/next-boilerplate/package.json b/lib/next-boilerplate/package.json
index 950962c66..124e01fad 100644
--- a/lib/next-boilerplate/package.json
+++ b/lib/next-boilerplate/package.json
@@ -9,7 +9,7 @@
     "lint": "eslint"
   },
   "dependencies": {
-    "next": "16.0.7",
+    "next": "16.0.10",
     "react": "19.2.0",
     "react-dom": "19.2.0"
   },
diff --git a/lib/next-boilerplate/pnpm-lock.yaml b/lib/next-boilerplate/pnpm-lock.yaml
index 8d4f62193..72515cd85 100644
--- a/lib/next-boilerplate/pnpm-lock.yaml
+++ b/lib/next-boilerplate/pnpm-lock.yaml
@@ -9,8 +9,8 @@ importers:
   .:
     dependencies:
       next:
-        specifier: 16.0.7
-        version: 16.0.7(@babel/core@7.28.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+        specifier: 16.0.10
+        version: 16.0.10(@babel/core@7.28.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
       react:
         specifier: 19.2.0
         version: 19.2.0
@@ -335,56 +335,56 @@ packages:
   '@napi-rs/wasm-runtime@0.2.12':
     resolution: {integrity: sha512-ZVWUcfwY4E/yPitQJl481FjFo3K22D6qF0DuFH6Y/nbnE11GY5uguDxZMGXPQ8WQ0128MXQD7TnfHyK4oWoIJQ==}
 
-  '@next/env@16.0.7':
-    resolution: {integrity: sha512-gpaNgUh5nftFKRkRQGnVi5dpcYSKGcZZkQffZ172OrG/XkrnS7UBTQ648YY+8ME92cC4IojpI2LqTC8sTDhAaw==}
+  '@next/env@16.0.10':
+    resolution: {integrity: sha512-8tuaQkyDVgeONQ1MeT9Mkk8pQmZapMKFh5B+OrFUlG3rVmYTXcXlBetBgTurKXGaIZvkoqRT9JL5K3phXcgang==}
 
   '@next/eslint-plugin-next@16.0.3':
     resolution: {integrity: sha512-6sPWmZetzFWMsz7Dhuxsdmbu3fK+/AxKRtj7OB0/3OZAI2MHB/v2FeYh271LZ9abvnM1WIwWc/5umYjx0jo5sQ==}
 
-  '@next/swc-darwin-arm64@16.0.7':
-    resolution: {integrity: sha512-LlDtCYOEj/rfSnEn/Idi+j1QKHxY9BJFmxx7108A6D8K0SB+bNgfYQATPk/4LqOl4C0Wo3LACg2ie6s7xqMpJg==}
+  '@next/swc-darwin-arm64@16.0.10':
+    resolution: {integrity: sha512-4XgdKtdVsaflErz+B5XeG0T5PeXKDdruDf3CRpnhN+8UebNa5N2H58+3GDgpn/9GBurrQ1uWW768FfscwYkJRg==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [darwin]
 
-  '@next/swc-darwin-x64@16.0.7':
-    resolution: {integrity: sha512-rtZ7BhnVvO1ICf3QzfW9H3aPz7GhBrnSIMZyr4Qy6boXF0b5E3QLs+cvJmg3PsTCG2M1PBoC+DANUi4wCOKXpA==}
+  '@next/swc-darwin-x64@16.0.10':
+    resolution: {integrity: sha512-spbEObMvRKkQ3CkYVOME+ocPDFo5UqHb8EMTS78/0mQ+O1nqE8toHJVioZo4TvebATxgA8XMTHHrScPrn68OGw==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [darwin]
 
-  '@next/swc-linux-arm64-gnu@16.0.7':
-    resolution: {integrity: sha512-mloD5WcPIeIeeZqAIP5c2kdaTa6StwP4/2EGy1mUw8HiexSHGK/jcM7lFuS3u3i2zn+xH9+wXJs6njO7VrAqww==}
+  '@next/swc-linux-arm64-gnu@16.0.10':
+    resolution: {integrity: sha512-uQtWE3X0iGB8apTIskOMi2w/MKONrPOUCi5yLO+v3O8Mb5c7K4Q5KD1jvTpTF5gJKa3VH/ijKjKUq9O9UhwOYw==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
 
-  '@next/swc-linux-arm64-musl@16.0.7':
-    resolution: {integrity: sha512-+ksWNrZrthisXuo9gd1XnjHRowCbMtl/YgMpbRvFeDEqEBd523YHPWpBuDjomod88U8Xliw5DHhekBC3EOOd9g==}
+  '@next/swc-linux-arm64-musl@16.0.10':
+    resolution: {integrity: sha512-llA+hiDTrYvyWI21Z0L1GiXwjQaanPVQQwru5peOgtooeJ8qx3tlqRV2P7uH2pKQaUfHxI/WVarvI5oYgGxaTw==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
 
-  '@next/swc-linux-x64-gnu@16.0.7':
-    resolution: {integrity: sha512-4WtJU5cRDxpEE44Ana2Xro1284hnyVpBb62lIpU5k85D8xXxatT+rXxBgPkc7C1XwkZMWpK5rXLXTh9PFipWsA==}
+  '@next/swc-linux-x64-gnu@16.0.10':
+    resolution: {integrity: sha512-AK2q5H0+a9nsXbeZ3FZdMtbtu9jxW4R/NgzZ6+lrTm3d6Zb7jYrWcgjcpM1k8uuqlSy4xIyPR2YiuUr+wXsavA==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
 
-  '@next/swc-linux-x64-musl@16.0.7':
-    resolution: {integrity: sha512-HYlhqIP6kBPXalW2dbMTSuB4+8fe+j9juyxwfMwCe9kQPPeiyFn7NMjNfoFOfJ2eXkeQsoUGXg+O2SE3m4Qg2w==}
+  '@next/swc-linux-x64-musl@16.0.10':
+    resolution: {integrity: sha512-1TDG9PDKivNw5550S111gsO4RGennLVl9cipPhtkXIFVwo31YZ73nEbLjNC8qG3SgTz/QZyYyaFYMeY4BKZR/g==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
 
-  '@next/swc-win32-arm64-msvc@16.0.7':
-    resolution: {integrity: sha512-EviG+43iOoBRZg9deGauXExjRphhuYmIOJ12b9sAPy0eQ6iwcPxfED2asb/s2/yiLYOdm37kPaiZu8uXSYPs0Q==}
+  '@next/swc-win32-arm64-msvc@16.0.10':
+    resolution: {integrity: sha512-aEZIS4Hh32xdJQbHz121pyuVZniSNoqDVx1yIr2hy+ZwJGipeqnMZBJHyMxv2tiuAXGx6/xpTcQJ6btIiBjgmg==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [win32]
 
-  '@next/swc-win32-x64-msvc@16.0.7':
-    resolution: {integrity: sha512-gniPjy55zp5Eg0896qSrf3yB1dw4F/3s8VK1ephdsZZ129j2n6e1WqCbE2YgcKhW9hPB9TVZENugquWJD5x0ug==}
+  '@next/swc-win32-x64-msvc@16.0.10':
+    resolution: {integrity: sha512-E+njfCoFLb01RAFEnGZn6ERoOqhK1Gl3Lfz1Kjnj0Ulfu7oJbuMyvBKNj/bw8XZnenHDASlygTjZICQW+rYW1Q==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [win32]
@@ -1498,8 +1498,8 @@ packages:
   natural-compare@1.4.0:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
 
-  next@16.0.7:
-    resolution: {integrity: sha512-3mBRJyPxT4LOxAJI6IsXeFtKfiJUbjCLgvXO02fV8Wy/lIhPvP94Fe7dGhUgHXcQy4sSuYwQNcOLhIfOm0rL0A==}
+  next@16.0.10:
+    resolution: {integrity: sha512-RtWh5PUgI+vxlV3HdR+IfWA1UUHu0+Ram/JBO4vWB54cVPentCD0e+lxyAYEsDTqGGMg7qpjhKh6dc6aW7W/sA==}
     engines: {node: '>=20.9.0'}
     hasBin: true
     peerDependencies:
@@ -2211,34 +2211,34 @@ snapshots:
       '@tybys/wasm-util': 0.10.1
     optional: true
 
-  '@next/env@16.0.7': {}
+  '@next/env@16.0.10': {}
 
   '@next/eslint-plugin-next@16.0.3':
     dependencies:
       fast-glob: 3.3.1
 
-  '@next/swc-darwin-arm64@16.0.7':
+  '@next/swc-darwin-arm64@16.0.10':
     optional: true
 
-  '@next/swc-darwin-x64@16.0.7':
+  '@next/swc-darwin-x64@16.0.10':
     optional: true
 
-  '@next/swc-linux-arm64-gnu@16.0.7':
+  '@next/swc-linux-arm64-gnu@16.0.10':
     optional: true
 
-  '@next/swc-linux-arm64-musl@16.0.7':
+  '@next/swc-linux-arm64-musl@16.0.10':
     optional: true
 
-  '@next/swc-linux-x64-gnu@16.0.7':
+  '@next/swc-linux-x64-gnu@16.0.10':
     optional: true
 
-  '@next/swc-linux-x64-musl@16.0.7':
+  '@next/swc-linux-x64-musl@16.0.10':
     optional: true
 
-  '@next/swc-win32-arm64-msvc@16.0.7':
+  '@next/swc-win32-arm64-msvc@16.0.10':
     optional: true
 
-  '@next/swc-win32-x64-msvc@16.0.7':
+  '@next/swc-win32-x64-msvc@16.0.10':
     optional: true
 
   '@nodelib/fs.scandir@2.1.5':
@@ -3477,9 +3477,9 @@ snapshots:
 
   natural-compare@1.4.0: {}
 
-  next@16.0.7(@babel/core@7.28.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0):
+  next@16.0.10(@babel/core@7.28.5)(react-dom@19.2.0(react@19.2.0))(react@19.2.0):
     dependencies:
-      '@next/env': 16.0.7
+      '@next/env': 16.0.10
       '@swc/helpers': 0.5.15
       caniuse-lite: 1.0.30001756
       postcss: 8.4.31
@@ -3487,14 +3487,14 @@ snapshots:
       react-dom: 19.2.0(react@19.2.0)
       styled-jsx: 5.1.6(@babel/core@7.28.5)(react@19.2.0)
     optionalDependencies:
-      '@next/swc-darwin-arm64': 16.0.7
-      '@next/swc-darwin-x64': 16.0.7
-      '@next/swc-linux-arm64-gnu': 16.0.7
-      '@next/swc-linux-arm64-musl': 16.0.7
-      '@next/swc-linux-x64-gnu': 16.0.7
-      '@next/swc-linux-x64-musl': 16.0.7
-      '@next/swc-win32-arm64-msvc': 16.0.7
-      '@next/swc-win32-x64-msvc': 16.0.7
+      '@next/swc-darwin-arm64': 16.0.10
+      '@next/swc-darwin-x64': 16.0.10
+      '@next/swc-linux-arm64-gnu': 16.0.10
+      '@next/swc-linux-arm64-musl': 16.0.10
+      '@next/swc-linux-x64-gnu': 16.0.10
+      '@next/swc-linux-x64-musl': 16.0.10
+      '@next/swc-win32-arm64-msvc': 16.0.10
+      '@next/swc-win32-x64-msvc': 16.0.10
       sharp: 0.34.5
     transitivePeerDependencies:
       - '@babel/core'
diff --git a/package.json b/package.json
index c9b030756..6a8d6e3bf 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
     "@radix-ui/react-context-menu": "^2.2.16",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-tooltip": "^1.2.8",
     "@slack/web-api": "^7.12.0",
     "@vercel/analytics": "^1.5.0",
     "@vercel/og": "^0.8.5",
@@ -47,12 +48,13 @@
     "dotenv": "^17.2.3",
     "drizzle-orm": "^0.44.7",
     "ethers": "^6.15.0",
+    "jose": "^6.1.3",
     "jotai": "^2.15.1",
     "jszip": "^3.10.1",
     "lucide-react": "^0.552.0",
     "motion": "^12.23.24",
     "nanoid": "^5.1.6",
-    "next": "16.0.7",
+    "next": "16.0.10",
     "next-themes": "^0.4.6",
     "openai": "^6.8.1",
     "postgres": "^3.4.7",
diff --git a/plugins/ai-gateway/icon.tsx b/plugins/ai-gateway/icon.tsx
new file mode 100644
index 000000000..7b30b3aed
--- /dev/null
+++ b/plugins/ai-gateway/icon.tsx
@@ -0,0 +1,3 @@
+import { Bot } from "lucide-react";
+
+export default Bot;
diff --git a/plugins/ai-gateway/index.ts b/plugins/ai-gateway/index.ts
new file mode 100644
index 000000000..0aaf097ab
--- /dev/null
+++ b/plugins/ai-gateway/index.ts
@@ -0,0 +1,184 @@
+import type { IntegrationPlugin } from "../registry";
+import { registerIntegration } from "../registry";
+import AiGatewayIcon from "./icon";
+
+const aiGatewayPlugin: IntegrationPlugin = {
+  type: "ai-gateway",
+  label: "AI Gateway",
+  description: "Generate text and images using AI models",
+
+  icon: AiGatewayIcon,
+
+  formFields: [
+    {
+      id: "openaiApiKey",
+      label: "API Key",
+      type: "password",
+      placeholder: "Your AI Gateway API key",
+      configKey: "apiKey",
+      envVar: "AI_GATEWAY_API_KEY",
+      helpText: "Get your API key from ",
+      helpLink: {
+        text: "vercel.com/ai-gateway",
+        url: "https://vercel.com/docs/ai-gateway/getting-started",
+      },
+    },
+  ],
+
+  testConfig: {
+    getTestFunction: async () => {
+      return async (_credentials: Record<string, string>) => {
+        const { testConnection } = await import("./test");
+        const result = await testConnection();
+        return {
+          success: result.status === "success",
+          error: result.status === "error" ? result.message : undefined,
+        };
+      };
+    },
+  },
+
+  dependencies: {
+    ai: "^5.0.86",
+    openai: "^6.8.0",
+    "@google/genai": "^1.28.0",
+    zod: "^4.1.12",
+  },
+
+  actions: [
+    {
+      slug: "generate-text",
+      label: "Generate Text",
+      description: "Generate text using AI models",
+      category: "AI Gateway",
+      stepFunction: "generateTextStep",
+      stepImportPath: "generate-text",
+      configFields: [
+        {
+          key: "aiFormat",
+          label: "Output Format",
+          type: "select",
+          defaultValue: "text",
+          options: [
+            { value: "text", label: "Text" },
+            { value: "object", label: "Object" },
+          ],
+        },
+        {
+          key: "aiModel",
+          label: "Model",
+          type: "select",
+          defaultValue: "meta/llama-4-scout",
+          options: [
+            // Current models
+            { value: "anthropic/claude-sonnet-4.5", label: "Claude Sonnet 4.5" },
+            { value: "anthropic/claude-haiku-4.5", label: "Claude Haiku 4.5" },
+            { value: "anthropic/claude-opus-4.5", label: "Claude Opus 4.5" },
+            { value: "meta/llama-4-scout", label: "Llama 4 Scout" },
+            { value: "meta/llama-4-maverick", label: "Llama 4 Maverick" },
+            { value: "openai/gpt-5.2", label: "GPT-5.2" },
+            { value: "openai/gpt-5.2-pro", label: "GPT-5.2 Pro" },
+            {
+              value: "google/gemini-3-pro-preview",
+              label: "Gemini 3 Pro Preview",
+            },
+            { value: "google/gemini-2.5-flash-lite", label: "Gemini 2.5 Flash Lite" },
+            { value: "google/gemini-2.5-flash", label: "Gemini 2.5 Flash" },
+            { value: "google/gemini-2.5-pro", label: "Gemini 2.5 Pro" },
+            // Legacy models (kept for backwards compatibility)
+            { value: "anthropic/claude-sonnet-4.0", label: "Claude Sonnet 4.0" },
+            {
+              value: "anthropic/claude-3.5-sonnet-20241022",
+              label: "Claude 3.5 Sonnet",
+            },
+            { value: "anthropic/claude-3-7-sonnet", label: "Claude 3.7 Sonnet" },
+            { value: "openai/gpt-4o", label: "GPT-4o" },
+            { value: "openai/gpt-4o-mini", label: "GPT-4o Mini" },
+            { value: "openai/o1", label: "o1" },
+            { value: "openai/o1-mini", label: "o1 Mini" },
+            { value: "openai/gpt-4-turbo", label: "GPT-4 Turbo" },
+            { value: "openai/gpt-3.5-turbo", label: "GPT-3.5 Turbo" },
+            { value: "google/gemini-4.0-flash", label: "Gemini 4.0 Flash" },
+            { value: "google/gemini-2.0-flash", label: "Gemini 2.0 Flash" },
+            {
+              value: "google/gemini-2.0-flash-lite",
+              label: "Gemini 2.0 Flash Lite",
+            },
+            { value: "meta/llama-4-instruct", label: "Llama 4 Instruct" },
+          ],
+        },
+        {
+          key: "aiPrompt",
+          label: "Prompt",
+          type: "template-textarea",
+          placeholder:
+            "Enter your prompt here. Use {{NodeName.field}} to reference previous outputs.",
+          rows: 4,
+          example: "Summarize the following text: {{Scrape.markdown}}",
+          required: true,
+        },
+        {
+          key: "aiSchema",
+          label: "Schema",
+          type: "schema-builder",
+          showWhen: { field: "aiFormat", equals: "object" },
+        },
+      ],
+    },
+    {
+      slug: "generate-image",
+      label: "Generate Image",
+      description: "Generate images using AI models",
+      category: "AI Gateway",
+      stepFunction: "generateImageStep",
+      stepImportPath: "generate-image",
+      outputFields: [{ field: "base64", description: "Base64-encoded image data" }],
+      outputConfig: { type: "image", field: "base64" },
+      configFields: [
+        {
+          key: "imageModel",
+          label: "Model",
+          type: "select",
+          defaultValue: "google/imagen-4.0-generate-001",
+          options: [
+            {
+              value: "google/imagen-4.0-generate-001",
+              label: "Imagen 4",
+            },
+            {
+              value: "google/imagen-4.0-fast-generate-001",
+              label: "Imagen 4 Fast",
+            },
+            {
+              value: "google/imagen-4.0-ultra-generate-001",
+              label: "Imagen 4 Ultra",
+            },
+            {
+              value: "bfl/flux-kontext-pro",
+              label: "FLUX.1 Kontext Pro",
+            },
+            {
+              value: "bfl/flux-kontext-max",
+              label: "FLUX.1 Kontext Max",
+            },
+          ],
+        },
+        {
+          key: "imagePrompt",
+          label: "Prompt",
+          type: "template-textarea",
+          placeholder:
+            "Describe the image you want to generate. Use {{NodeName.field}} to reference previous outputs.",
+          rows: 4,
+          example: "A serene mountain landscape at sunset",
+          required: true,
+        },
+      ],
+    },
+  ],
+};
+
+// Auto-register on import
+registerIntegration(aiGatewayPlugin);
+
+export default aiGatewayPlugin;
diff --git a/plugins/ai-gateway/test.ts b/plugins/ai-gateway/test.ts
new file mode 100644
index 000000000..fb2972ad0
--- /dev/null
+++ b/plugins/ai-gateway/test.ts
@@ -0,0 +1,15 @@
+/**
+ * Test connection for AI Gateway integration
+ * AI Gateway managed keys are tested through the Vercel API
+ */
+export async function testConnection(): Promise<{
+  status: "success" | "error";
+  message: string;
+}> {
+  // AI Gateway connections are validated through the Vercel API consent flow
+  // No separate test needed as the managed key is created by Vercel
+  return {
+    status: "success",
+    message: "AI Gateway connection is managed by Vercel",
+  };
+}
diff --git a/plugins/registry.ts b/plugins/registry.ts
index ec4e87bf8..defe6738c 100644
--- a/plugins/registry.ts
+++ b/plugins/registry.ts
@@ -380,6 +380,17 @@ export function getIntegrationLabels(): Record<IntegrationType, string> {
   return labels as Record<IntegrationType, string>;
 }
 
+/**
+ * Get integration descriptions map
+ */
+export function getIntegrationDescriptions(): Record<IntegrationType, string> {
+  const descriptions: Record<string, string> = {};
+  for (const plugin of integrationRegistry.values()) {
+    descriptions[plugin.type] = plugin.description;
+  }
+  return descriptions as Record<IntegrationType, string>;
+}
+
 /**
  * Get sorted integration types for dropdowns
  */
diff --git a/plugins/sendgrid/steps/send-email.ts b/plugins/sendgrid/steps/send-email.ts
index e8aadba34..8e4186337 100644
--- a/plugins/sendgrid/steps/send-email.ts
+++ b/plugins/sendgrid/steps/send-email.ts
@@ -135,17 +135,8 @@ export async function sendEmailStep(
     ? await fetchCredentials(input.integrationId)
     : {};
 
-  // Fetch integration config to check useKeeperHubApiKey
-  let useKeeperHubApiKey = true; // Default to true
-  if (input.integrationId) {
-    const { getIntegrationById } = await import("@/lib/db/integrations");
-    const integration = await getIntegrationById(input.integrationId);
-    if (integration?.config) {
-      const useKeeperHubValue = integration.config.useKeeperHubApiKey;
-      useKeeperHubApiKey =
-        useKeeperHubValue === true || useKeeperHubValue === "true";
-    }
-  }
+  // Always use KeeperHub API key
+  const useKeeperHubApiKey = true;
 
   const coreInput: SendEmailCoreInput = {
     ...input,
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 174a52bee..dca17aa99 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -47,12 +47,15 @@ importers:
       '@radix-ui/react-slot':
         specifier: ^1.2.4
         version: 1.2.4(@types/react@19.2.2)(react@19.2.1)
+      '@radix-ui/react-tooltip':
+        specifier: ^1.2.8
+        version: 1.2.8(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
       '@slack/web-api':
         specifier: ^7.12.0
         version: 7.12.0
       '@vercel/analytics':
         specifier: ^1.5.0
-        version: 1.5.0(next@16.0.7(@babel/core@7.28.5)(@opentelemetry/api@1.9.0)(@playwright/test@1.57.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1))(react@19.2.1)
+        version: 1.5.0(next@16.0.10(@babel/core@7.28.5)(@opentelemetry/api@1.9.0)(@playwright/test@1.57.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1))(react@19.2.1)
       '@vercel/og':
         specifier: ^0.8.5
         version: 0.8.5
@@ -61,7 +64,7 @@ importers:
         version: 1.17.1
       '@vercel/speed-insights':
         specifier: ^1.2.0
-        version: 1.2.0(next@16.0.7(@babel/core@7.28.5)(@opentelemetry/api@1.9.0)(@playwright/test@1.57.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1))(react@19.2.1)
+        version: 1.2.0(next@16.0.10(@babel/core@7.28.5)(@opentelemetry/api@1.9.0)(@playwright/test@1.57.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1))(react@19.2.1)
       '@xyflow/react':
         specifier: ^12.9.2
         version: 12.9.2(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
@@ -70,7 +73,7 @@ importers:
         version: 5.0.102(zod@4.1.12)
       better-auth:
         specifier: ^1.3.34
-        version: 1.3.34(next@16.0.7(@babel/core@7.28.5)(@opentelemetry/api@1.9.0)(@playwright/test@1.57.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1))(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+        version: 1.3.34(next@16.0.10(@babel/core@7.28.5)(@opentelemetry/api@1.9.0)(@playwright/test@1.57.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1))(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
       class-variance-authority:
         specifier: ^0.7.1
         version: 0.7.1
@@ -86,6 +89,9 @@ importers:
       ethers:
         specifier: ^6.15.0
         version: 6.15.0
+      jose:
+        specifier: ^6.1.3
+        version: 6.1.3
       jotai:
         specifier: ^2.15.1
         version: 2.15.1(@babel/core@7.28.5)(@babel/template@7.27.2)(@types/react@19.2.2)(react@19.2.1)
@@ -102,8 +108,8 @@ importers:
         specifier: ^5.1.6
         version: 5.1.6
       next:
-        specifier: 16.0.7
-        version: 16.0.7(@babel/core@7.28.5)(@opentelemetry/api@1.9.0)(@playwright/test@1.57.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+        specifier: 16.0.10
+        version: 16.0.10(@babel/core@7.28.5)(@opentelemetry/api@1.9.0)(@playwright/test@1.57.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
       next-themes:
         specifier: ^0.4.6
         version: 0.4.6(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
@@ -145,7 +151,7 @@ importers:
         version: 1.1.2(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
       workflow:
         specifier: 4.0.1-beta.17
-        version: 4.0.1-beta.17(@aws-sdk/client-sts@3.936.0)(@babel/core@7.28.5)(@opentelemetry/api@1.9.0)(@playwright/test@1.57.0)(next@16.0.7(@babel/core@7.28.5)(@opentelemetry/api@1.9.0)(@playwright/test@1.57.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1))(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(typescript@5.9.3)
+        version: 4.0.1-beta.17(@aws-sdk/client-sts@3.936.0)(@babel/core@7.28.5)(@opentelemetry/api@1.9.0)(@playwright/test@1.57.0)(next@16.0.10(@babel/core@7.28.5)(@opentelemetry/api@1.9.0)(@playwright/test@1.57.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1))(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(typescript@5.9.3)
       zod:
         specifier: ^4.1.12
         version: 4.1.12
@@ -1212,8 +1218,8 @@ packages:
   '@next/env@15.5.4':
     resolution: {integrity: sha512-27SQhYp5QryzIT5uO8hq99C69eLQ7qkzkDPsk3N+GuS2XgOgoYEeOav7Pf8Tn4drECOVDsDg8oj+/DVy8qQL2A==}
 
-  '@next/env@16.0.7':
-    resolution: {integrity: sha512-gpaNgUh5nftFKRkRQGnVi5dpcYSKGcZZkQffZ172OrG/XkrnS7UBTQ648YY+8ME92cC4IojpI2LqTC8sTDhAaw==}
+  '@next/env@16.0.10':
+    resolution: {integrity: sha512-8tuaQkyDVgeONQ1MeT9Mkk8pQmZapMKFh5B+OrFUlG3rVmYTXcXlBetBgTurKXGaIZvkoqRT9JL5K3phXcgang==}
 
   '@next/swc-darwin-arm64@15.5.4':
     resolution: {integrity: sha512-nopqz+Ov6uvorej8ndRX6HlxCYWCO3AHLfKK2TYvxoSB2scETOcfm/HSS3piPqc3A+MUgyHoqE6je4wnkjfrOA==}
@@ -1221,8 +1227,8 @@ packages:
     cpu: [arm64]
     os: [darwin]
 
-  '@next/swc-darwin-arm64@16.0.7':
-    resolution: {integrity: sha512-LlDtCYOEj/rfSnEn/Idi+j1QKHxY9BJFmxx7108A6D8K0SB+bNgfYQATPk/4LqOl4C0Wo3LACg2ie6s7xqMpJg==}
+  '@next/swc-darwin-arm64@16.0.10':
+    resolution: {integrity: sha512-4XgdKtdVsaflErz+B5XeG0T5PeXKDdruDf3CRpnhN+8UebNa5N2H58+3GDgpn/9GBurrQ1uWW768FfscwYkJRg==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [darwin]
@@ -1233,8 +1239,8 @@ packages:
     cpu: [x64]
     os: [darwin]
 
-  '@next/swc-darwin-x64@16.0.7':
-    resolution: {integrity: sha512-rtZ7BhnVvO1ICf3QzfW9H3aPz7GhBrnSIMZyr4Qy6boXF0b5E3QLs+cvJmg3PsTCG2M1PBoC+DANUi4wCOKXpA==}
+  '@next/swc-darwin-x64@16.0.10':
+    resolution: {integrity: sha512-spbEObMvRKkQ3CkYVOME+ocPDFo5UqHb8EMTS78/0mQ+O1nqE8toHJVioZo4TvebATxgA8XMTHHrScPrn68OGw==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [darwin]
@@ -1245,8 +1251,8 @@ packages:
     cpu: [arm64]
     os: [linux]
 
-  '@next/swc-linux-arm64-gnu@16.0.7':
-    resolution: {integrity: sha512-mloD5WcPIeIeeZqAIP5c2kdaTa6StwP4/2EGy1mUw8HiexSHGK/jcM7lFuS3u3i2zn+xH9+wXJs6njO7VrAqww==}
+  '@next/swc-linux-arm64-gnu@16.0.10':
+    resolution: {integrity: sha512-uQtWE3X0iGB8apTIskOMi2w/MKONrPOUCi5yLO+v3O8Mb5c7K4Q5KD1jvTpTF5gJKa3VH/ijKjKUq9O9UhwOYw==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
@@ -1257,8 +1263,8 @@ packages:
     cpu: [arm64]
     os: [linux]
 
-  '@next/swc-linux-arm64-musl@16.0.7':
-    resolution: {integrity: sha512-+ksWNrZrthisXuo9gd1XnjHRowCbMtl/YgMpbRvFeDEqEBd523YHPWpBuDjomod88U8Xliw5DHhekBC3EOOd9g==}
+  '@next/swc-linux-arm64-musl@16.0.10':
+    resolution: {integrity: sha512-llA+hiDTrYvyWI21Z0L1GiXwjQaanPVQQwru5peOgtooeJ8qx3tlqRV2P7uH2pKQaUfHxI/WVarvI5oYgGxaTw==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
@@ -1269,8 +1275,8 @@ packages:
     cpu: [x64]
     os: [linux]
 
-  '@next/swc-linux-x64-gnu@16.0.7':
-    resolution: {integrity: sha512-4WtJU5cRDxpEE44Ana2Xro1284hnyVpBb62lIpU5k85D8xXxatT+rXxBgPkc7C1XwkZMWpK5rXLXTh9PFipWsA==}
+  '@next/swc-linux-x64-gnu@16.0.10':
+    resolution: {integrity: sha512-AK2q5H0+a9nsXbeZ3FZdMtbtu9jxW4R/NgzZ6+lrTm3d6Zb7jYrWcgjcpM1k8uuqlSy4xIyPR2YiuUr+wXsavA==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
@@ -1281,8 +1287,8 @@ packages:
     cpu: [x64]
     os: [linux]
 
-  '@next/swc-linux-x64-musl@16.0.7':
-    resolution: {integrity: sha512-HYlhqIP6kBPXalW2dbMTSuB4+8fe+j9juyxwfMwCe9kQPPeiyFn7NMjNfoFOfJ2eXkeQsoUGXg+O2SE3m4Qg2w==}
+  '@next/swc-linux-x64-musl@16.0.10':
+    resolution: {integrity: sha512-1TDG9PDKivNw5550S111gsO4RGennLVl9cipPhtkXIFVwo31YZ73nEbLjNC8qG3SgTz/QZyYyaFYMeY4BKZR/g==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
@@ -1293,8 +1299,8 @@ packages:
     cpu: [arm64]
     os: [win32]
 
-  '@next/swc-win32-arm64-msvc@16.0.7':
-    resolution: {integrity: sha512-EviG+43iOoBRZg9deGauXExjRphhuYmIOJ12b9sAPy0eQ6iwcPxfED2asb/s2/yiLYOdm37kPaiZu8uXSYPs0Q==}
+  '@next/swc-win32-arm64-msvc@16.0.10':
+    resolution: {integrity: sha512-aEZIS4Hh32xdJQbHz121pyuVZniSNoqDVx1yIr2hy+ZwJGipeqnMZBJHyMxv2tiuAXGx6/xpTcQJ6btIiBjgmg==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [win32]
@@ -1305,8 +1311,8 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@next/swc-win32-x64-msvc@16.0.7':
-    resolution: {integrity: sha512-gniPjy55zp5Eg0896qSrf3yB1dw4F/3s8VK1ephdsZZ129j2n6e1WqCbE2YgcKhW9hPB9TVZENugquWJD5x0ug==}
+  '@next/swc-win32-x64-msvc@16.0.10':
+    resolution: {integrity: sha512-E+njfCoFLb01RAFEnGZn6ERoOqhK1Gl3Lfz1Kjnj0Ulfu7oJbuMyvBKNj/bw8XZnenHDASlygTjZICQW+rYW1Q==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [win32]
@@ -3820,8 +3826,8 @@ packages:
     resolution: {integrity: sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==}
     hasBin: true
 
-  jose@6.1.0:
-    resolution: {integrity: sha512-TTQJyoEoKcC1lscpVDCSsVgYzUDg/0Bt3WE//WiTPK6uOCQC2KZS4MpugbMWt/zyjkopgZoXhZuCi00gLudfUA==}
+  jose@6.1.3:
+    resolution: {integrity: sha512-0TpaTfihd4QMNwrz/ob2Bp7X04yuxJkjRGi4aKmOqwhov54i6u79oCv7T+C7lo70MKH6BesI3vscD1yb/yzKXQ==}
 
   jotai@2.15.1:
     resolution: {integrity: sha512-yHT1HAZ3ba2Q8wgaUQ+xfBzEtcS8ie687I8XVCBinfg4bNniyqLIN+utPXWKQE93LMF5fPbQSVRZqgpcN5yd6Q==}
@@ -4140,8 +4146,8 @@ packages:
       sass:
         optional: true
 
-  next@16.0.7:
-    resolution: {integrity: sha512-3mBRJyPxT4LOxAJI6IsXeFtKfiJUbjCLgvXO02fV8Wy/lIhPvP94Fe7dGhUgHXcQy4sSuYwQNcOLhIfOm0rL0A==}
+  next@16.0.10:
+    resolution: {integrity: sha512-RtWh5PUgI+vxlV3HdR+IfWA1UUHu0+Ram/JBO4vWB54cVPentCD0e+lxyAYEsDTqGGMg7qpjhKh6dc6aW7W/sA==}
     engines: {node: '>=20.9.0'}
     hasBin: true
     peerDependencies:
@@ -5550,19 +5556,19 @@ snapshots:
       '@babel/helper-validator-identifier': 7.28.5
     optional: true
 
-  '@better-auth/core@1.3.34(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.18)(better-call@1.0.19)(jose@6.1.0)(kysely@0.28.8)(nanostores@1.0.1)':
+  '@better-auth/core@1.3.34(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.18)(better-call@1.0.19)(jose@6.1.3)(kysely@0.28.8)(nanostores@1.0.1)':
     dependencies:
       '@better-auth/utils': 0.3.0
       '@better-fetch/fetch': 1.1.18
       better-call: 1.0.19
-      jose: 6.1.0
+      jose: 6.1.3
       kysely: 0.28.8
       nanostores: 1.0.1
       zod: 4.1.12
 
-  '@better-auth/telemetry@1.3.34(better-call@1.0.19)(jose@6.1.0)(kysely@0.28.8)(nanostores@1.0.1)':
+  '@better-auth/telemetry@1.3.34(better-call@1.0.19)(jose@6.1.3)(kysely@0.28.8)(nanostores@1.0.1)':
     dependencies:
-      '@better-auth/core': 1.3.34(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.18)(better-call@1.0.19)(jose@6.1.0)(kysely@0.28.8)(nanostores@1.0.1)
+      '@better-auth/core': 1.3.34(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.18)(better-call@1.0.19)(jose@6.1.3)(kysely@0.28.8)(nanostores@1.0.1)
       '@better-auth/utils': 0.3.0
       '@better-fetch/fetch': 1.1.18
     transitivePeerDependencies:
@@ -6287,54 +6293,54 @@ snapshots:
 
   '@next/env@15.5.4': {}
 
-  '@next/env@16.0.7': {}
+  '@next/env@16.0.10': {}
 
   '@next/swc-darwin-arm64@15.5.4':
     optional: true
 
-  '@next/swc-darwin-arm64@16.0.7':
+  '@next/swc-darwin-arm64@16.0.10':
     optional: true
 
   '@next/swc-darwin-x64@15.5.4':
     optional: true
 
-  '@next/swc-darwin-x64@16.0.7':
+  '@next/swc-darwin-x64@16.0.10':
     optional: true
 
   '@next/swc-linux-arm64-gnu@15.5.4':
     optional: true
 
-  '@next/swc-linux-arm64-gnu@16.0.7':
+  '@next/swc-linux-arm64-gnu@16.0.10':
     optional: true
 
   '@next/swc-linux-arm64-musl@15.5.4':
     optional: true
 
-  '@next/swc-linux-arm64-musl@16.0.7':
+  '@next/swc-linux-arm64-musl@16.0.10':
     optional: true
 
   '@next/swc-linux-x64-gnu@15.5.4':
     optional: true
 
-  '@next/swc-linux-x64-gnu@16.0.7':
+  '@next/swc-linux-x64-gnu@16.0.10':
     optional: true
 
   '@next/swc-linux-x64-musl@15.5.4':
     optional: true
 
-  '@next/swc-linux-x64-musl@16.0.7':
+  '@next/swc-linux-x64-musl@16.0.10':
     optional: true
 
   '@next/swc-win32-arm64-msvc@15.5.4':
     optional: true
 
-  '@next/swc-win32-arm64-msvc@16.0.7':
+  '@next/swc-win32-arm64-msvc@16.0.10':
     optional: true
 
   '@next/swc-win32-x64-msvc@15.5.4':
     optional: true
 
-  '@next/swc-win32-x64-msvc@16.0.7':
+  '@next/swc-win32-x64-msvc@16.0.10':
     optional: true
 
   '@noble/ciphers@1.1.3': {}
@@ -7894,9 +7900,9 @@ snapshots:
 
   '@types/retry@0.12.0': {}
 
-  '@vercel/analytics@1.5.0(next@16.0.7(@babel/core@7.28.5)(@opentelemetry/api@1.9.0)(@playwright/test@1.57.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1))(react@19.2.1)':
+  '@vercel/analytics@1.5.0(next@16.0.10(@babel/core@7.28.5)(@opentelemetry/api@1.9.0)(@playwright/test@1.57.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1))(react@19.2.1)':
     optionalDependencies:
-      next: 16.0.7(@babel/core@7.28.5)(@opentelemetry/api@1.9.0)(@playwright/test@1.57.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      next: 16.0.10(@babel/core@7.28.5)(@opentelemetry/api@1.9.0)(@playwright/test@1.57.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
       react: 19.2.1
 
   '@vercel/functions@3.3.3(@aws-sdk/credential-provider-web-identity@3.609.0(@aws-sdk/client-sts@3.936.0))':
@@ -7921,9 +7927,9 @@ snapshots:
     dependencies:
       zod: 4.1.12
 
-  '@vercel/speed-insights@1.2.0(next@16.0.7(@babel/core@7.28.5)(@opentelemetry/api@1.9.0)(@playwright/test@1.57.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1))(react@19.2.1)':
+  '@vercel/speed-insights@1.2.0(next@16.0.10(@babel/core@7.28.5)(@opentelemetry/api@1.9.0)(@playwright/test@1.57.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1))(react@19.2.1)':
     optionalDependencies:
-      next: 16.0.7(@babel/core@7.28.5)(@opentelemetry/api@1.9.0)(@playwright/test@1.57.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      next: 16.0.10(@babel/core@7.28.5)(@opentelemetry/api@1.9.0)(@playwright/test@1.57.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
       react: 19.2.1
 
   '@workflow/builders@4.0.1-beta.13(@aws-sdk/client-sts@3.936.0)(@opentelemetry/api@1.9.0)':
@@ -8019,7 +8025,7 @@ snapshots:
       '@workflow/utils': 4.0.1-beta.3
       ms: 2.1.3
 
-  '@workflow/next@4.0.1-beta.17(@aws-sdk/client-sts@3.936.0)(@opentelemetry/api@1.9.0)(next@16.0.7(@babel/core@7.28.5)(@opentelemetry/api@1.9.0)(@playwright/test@1.57.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1))':
+  '@workflow/next@4.0.1-beta.17(@aws-sdk/client-sts@3.936.0)(@opentelemetry/api@1.9.0)(next@16.0.10(@babel/core@7.28.5)(@opentelemetry/api@1.9.0)(@playwright/test@1.57.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1))':
     dependencies:
       '@swc/core': 1.11.24
       '@workflow/builders': 4.0.1-beta.13(@aws-sdk/client-sts@3.936.0)(@opentelemetry/api@1.9.0)
@@ -8028,7 +8034,7 @@ snapshots:
       semver: 7.7.3
       watchpack: 2.4.4
     optionalDependencies:
-      next: 16.0.7(@babel/core@7.28.5)(@opentelemetry/api@1.9.0)(@playwright/test@1.57.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      next: 16.0.10(@babel/core@7.28.5)(@opentelemetry/api@1.9.0)(@playwright/test@1.57.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
     transitivePeerDependencies:
       - '@aws-sdk/client-sts'
       - '@opentelemetry/api'
@@ -8223,10 +8229,10 @@ snapshots:
 
   bech32@1.1.4: {}
 
-  better-auth@1.3.34(next@16.0.7(@babel/core@7.28.5)(@opentelemetry/api@1.9.0)(@playwright/test@1.57.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1))(react-dom@19.2.1(react@19.2.1))(react@19.2.1):
+  better-auth@1.3.34(next@16.0.10(@babel/core@7.28.5)(@opentelemetry/api@1.9.0)(@playwright/test@1.57.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1))(react-dom@19.2.1(react@19.2.1))(react@19.2.1):
     dependencies:
-      '@better-auth/core': 1.3.34(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.18)(better-call@1.0.19)(jose@6.1.0)(kysely@0.28.8)(nanostores@1.0.1)
-      '@better-auth/telemetry': 1.3.34(better-call@1.0.19)(jose@6.1.0)(kysely@0.28.8)(nanostores@1.0.1)
+      '@better-auth/core': 1.3.34(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.18)(better-call@1.0.19)(jose@6.1.3)(kysely@0.28.8)(nanostores@1.0.1)
+      '@better-auth/telemetry': 1.3.34(better-call@1.0.19)(jose@6.1.3)(kysely@0.28.8)(nanostores@1.0.1)
       '@better-auth/utils': 0.3.0
       '@better-fetch/fetch': 1.1.18
       '@noble/ciphers': 2.0.1
@@ -8235,12 +8241,12 @@ snapshots:
       '@simplewebauthn/server': 13.2.2
       better-call: 1.0.19
       defu: 6.1.4
-      jose: 6.1.0
+      jose: 6.1.3
       kysely: 0.28.8
       nanostores: 1.0.1
       zod: 4.1.12
     optionalDependencies:
-      next: 16.0.7(@babel/core@7.28.5)(@opentelemetry/api@1.9.0)(@playwright/test@1.57.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      next: 16.0.10(@babel/core@7.28.5)(@opentelemetry/api@1.9.0)(@playwright/test@1.57.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
       react: 19.2.1
       react-dom: 19.2.1(react@19.2.1)
 
@@ -9023,7 +9029,7 @@ snapshots:
 
   jiti@2.6.1: {}
 
-  jose@6.1.0: {}
+  jose@6.1.3: {}
 
   jotai@2.15.1(@babel/core@7.28.5)(@babel/template@7.27.2)(@types/react@19.2.2)(react@19.2.1):
     optionalDependencies:
@@ -9285,9 +9291,9 @@ snapshots:
       - '@babel/core'
       - babel-plugin-macros
 
-  next@16.0.7(@babel/core@7.28.5)(@opentelemetry/api@1.9.0)(@playwright/test@1.57.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1):
+  next@16.0.10(@babel/core@7.28.5)(@opentelemetry/api@1.9.0)(@playwright/test@1.57.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1):
     dependencies:
-      '@next/env': 16.0.7
+      '@next/env': 16.0.10
       '@swc/helpers': 0.5.15
       caniuse-lite: 1.0.30001753
       postcss: 8.4.31
@@ -9295,14 +9301,14 @@ snapshots:
       react-dom: 19.2.1(react@19.2.1)
       styled-jsx: 5.1.6(@babel/core@7.28.5)(react@19.2.1)
     optionalDependencies:
-      '@next/swc-darwin-arm64': 16.0.7
-      '@next/swc-darwin-x64': 16.0.7
-      '@next/swc-linux-arm64-gnu': 16.0.7
-      '@next/swc-linux-arm64-musl': 16.0.7
-      '@next/swc-linux-x64-gnu': 16.0.7
-      '@next/swc-linux-x64-musl': 16.0.7
-      '@next/swc-win32-arm64-msvc': 16.0.7
-      '@next/swc-win32-x64-msvc': 16.0.7
+      '@next/swc-darwin-arm64': 16.0.10
+      '@next/swc-darwin-x64': 16.0.10
+      '@next/swc-linux-arm64-gnu': 16.0.10
+      '@next/swc-linux-arm64-musl': 16.0.10
+      '@next/swc-linux-x64-gnu': 16.0.10
+      '@next/swc-linux-x64-musl': 16.0.10
+      '@next/swc-win32-arm64-msvc': 16.0.10
+      '@next/swc-win32-x64-msvc': 16.0.10
       '@opentelemetry/api': 1.9.0
       '@playwright/test': 1.57.0
       sharp: 0.34.4
@@ -10080,12 +10086,12 @@ snapshots:
 
   wordwrap@1.0.0: {}
 
-  workflow@4.0.1-beta.17(@aws-sdk/client-sts@3.936.0)(@babel/core@7.28.5)(@opentelemetry/api@1.9.0)(@playwright/test@1.57.0)(next@16.0.7(@babel/core@7.28.5)(@opentelemetry/api@1.9.0)(@playwright/test@1.57.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1))(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(typescript@5.9.3):
+  workflow@4.0.1-beta.17(@aws-sdk/client-sts@3.936.0)(@babel/core@7.28.5)(@opentelemetry/api@1.9.0)(@playwright/test@1.57.0)(next@16.0.10(@babel/core@7.28.5)(@opentelemetry/api@1.9.0)(@playwright/test@1.57.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1))(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(typescript@5.9.3):
     dependencies:
       '@workflow/cli': 4.0.1-beta.17(@aws-sdk/client-sts@3.936.0)(@babel/core@7.28.5)(@opentelemetry/api@1.9.0)(@playwright/test@1.57.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)(typescript@5.9.3)
       '@workflow/core': 4.0.1-beta.15(@aws-sdk/client-sts@3.936.0)(@opentelemetry/api@1.9.0)
       '@workflow/errors': 4.0.1-beta.5
-      '@workflow/next': 4.0.1-beta.17(@aws-sdk/client-sts@3.936.0)(@opentelemetry/api@1.9.0)(next@16.0.7(@babel/core@7.28.5)(@opentelemetry/api@1.9.0)(@playwright/test@1.57.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1))
+      '@workflow/next': 4.0.1-beta.17(@aws-sdk/client-sts@3.936.0)(@opentelemetry/api@1.9.0)(next@16.0.10(@babel/core@7.28.5)(@opentelemetry/api@1.9.0)(@playwright/test@1.57.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1))
       '@workflow/nitro': 4.0.1-beta.17(@aws-sdk/client-sts@3.936.0)(@opentelemetry/api@1.9.0)
       '@workflow/nuxt': 4.0.1-beta.6(@aws-sdk/client-sts@3.936.0)(@opentelemetry/api@1.9.0)
       '@workflow/sveltekit': 4.0.0-beta.11(@aws-sdk/client-sts@3.936.0)(@opentelemetry/api@1.9.0)
diff --git a/scripts/discover-plugins.ts b/scripts/discover-plugins.ts
index 446bdfb01..e686e55b9 100644
--- a/scripts/discover-plugins.ts
+++ b/scripts/discover-plugins.ts
@@ -901,7 +901,9 @@ async function main(): Promise<void> {
       const disabledPlugins = allPlugins.filter(
         (p) => !enabledPlugins.includes(p)
       );
-      console.log(`Disabled ${disabledPlugins.length} plugin(s): ${disabledPlugins.join(", ")}`);
+      console.log(
+        `Disabled ${disabledPlugins.length} plugin(s): ${disabledPlugins.join(", ")}`
+      );
     }
   }