Supabase integration experiment setting (off by default)

src/pages/app-details.tsx

@@ -29,6 +29,7 @@ import {
 } from "@/components/ui/dialog";
 import { GitHubConnector } from "@/components/GitHubConnector";
 import { SupabaseConnector } from "@/components/SupabaseConnector";
+import { useSettings } from "@/hooks/useSettings";
 
 export default function AppDetailsPage() {
   const navigate = useNavigate();
@@ -48,7 +49,7 @@ export default function AppDetailsPage() {
   const [newFolderName, setNewFolderName] = useState("");
   const [isRenamingFolder, setIsRenamingFolder] = useState(false);
   const appBasePath = useAtomValue(appBasePathAtom);
-
+  const { settings } = useSettings();
   // Get the appId from search params and find the corresponding app
   const appId = search.appId ? Number(search.appId) : null;
   const selectedApp = appId ? appsList.find((app) => app.id === appId) : null;
@@ -241,7 +242,9 @@ export default function AppDetailsPage() {
             <MessageCircle className="h-5 w-5" />
           </Button>
           <GitHubConnector appId={appId} folderName={selectedApp.path} />
-          {appId && <SupabaseConnector appId={appId} />}
+          {appId && settings?.experiments?.enableSupabaseIntegration && (
+            <SupabaseConnector appId={appId} />
+          )}
         </div>
 
         {/* Rename Dialog */}

src/pages/settings.tsx

@@ -6,6 +6,7 @@ import { IpcClient } from "@/ipc/ipc_client";
 import { showSuccess, showError } from "@/lib/toast";
 import { AutoApproveSwitch } from "@/components/AutoApproveSwitch";
 import { TelemetrySwitch } from "@/components/TelemetrySwitch";
+import { SupabaseIntegrationSwitch } from "@/components/SupabaseIntegrationSwitch";
 import { useSettings } from "@/hooks/useSettings";
 import { Button } from "@/components/ui/button";
 import { ArrowLeft } from "lucide-react";
@@ -145,6 +146,22 @@ export default function SettingsPage() {
             </div>
           </div>
 
+          {/* Experiments Section */}
+          <div className="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6">
+            <h2 className="text-lg font-medium text-gray-900 dark:text-white mb-4">
+              Experiments
+            </h2>
+            <div className="space-y-4">
+              <div className="space-y-2">
+                <SupabaseIntegrationSwitch />
+                <div className="text-sm text-gray-500 dark:text-gray-400">
+                  Enable integration with Supabase for auth, database and server
+                  function support.
+                </div>
+              </div>
+            </div>
+          </div>
+
           {/* Danger Zone */}
           <div className="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6 border border-red-200 dark:border-red-800">
             <h2 className="text-lg font-medium text-red-600 dark:text-red-400 mb-4">