Merge remote-tracking branch 'origin/main' into SaaS

# Conflicts:
#	frontend/editor/src/core/components/shared/AppConfigModal.tsx

frontend/editor/src/saas/components/TrialExpiredBootstrap.tsx

@@ -1,7 +1,10 @@
-import { useEffect, useState } from "react";
+import { lazy, Suspense, useEffect, useState } from "react";
 import { useAuth } from "@app/auth/UseSession";
 import { TrialExpiredModal } from "@app/components/shared/TrialExpiredModal";
-import StripeCheckout from "@app/components/shared/StripeCheckoutSaas";
+
+const StripeCheckout = lazy(
+  () => import("@app/components/shared/StripeCheckoutSaas"),
+);
 
 /**
  * Bootstrap component that shows the trial expired modal when a user's trial has ended
@@ -106,20 +109,22 @@ export default function TrialExpiredBootstrap() {
         onSubscribe={handleSubscribe}
       />
 
-      {user && (
-        <StripeCheckout
-          opened={checkoutOpened}
-          onClose={handleCheckoutClose}
-          purchaseType="subscription"
-          planId="pro"
-          creditsPack={null}
-          planName="Pro"
-          onSuccess={handleCheckoutSuccess}
-          onError={(error) =>
-            console.error("[TrialExpired] Checkout error:", error)
-          }
-          isTrialConversion={false} // Trial already ended, so this is not a conversion
-        />
+      {user && checkoutOpened && (
+        <Suspense fallback={null}>
+          <StripeCheckout
+            opened={checkoutOpened}
+            onClose={handleCheckoutClose}
+            purchaseType="subscription"
+            planId="pro"
+            creditsPack={null}
+            planName="Pro"
+            onSuccess={handleCheckoutSuccess}
+            onError={(error) =>
+              console.error("[TrialExpired] Checkout error:", error)
+            }
+            isTrialConversion={false} // Trial already ended, so this is not a conversion
+          />
+        </Suspense>
       )}
     </>
   );

frontend/editor/src/saas/components/shared/StripeCheckoutSaas.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import { Modal, Button, Text, Alert, Loader, Stack } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import { loadStripe } from "@stripe/stripe-js";
@@ -9,7 +9,7 @@ import {
 import { supabase } from "@app/auth/supabase";
 import { Z_INDEX_OVER_SETTINGS_MODAL } from "@app/styles/zIndex";
 
-const stripePromise = loadStripe(import.meta.env.VITE_STRIPE_PUBLISHABLE_KEY);
+const STRIPE_KEY = import.meta.env.VITE_STRIPE_PUBLISHABLE_KEY;
 
 export type PurchaseType = "subscription" | "credits";
 export type CreditsPack = "xsmall" | "small" | "medium" | "large" | null;
@@ -68,6 +68,11 @@ const StripeCheckout: React.FC<StripeCheckoutProps> = ({
 }) => {
   const { t } = useTranslation();
   const [state, setState] = useState<CheckoutState>({ status: "idle" });
+  // Load Stripe.js lazily, only when this checkout component mounts. Loading
+  // at module scope pulled the Stripe script into every page that imports
+  // this file, which triggered the dev "HTTPS required" warning on every
+  // non-payment route.
+  const stripePromise = useMemo(() => loadStripe(STRIPE_KEY), []);
 
   const createCheckoutSession = async () => {
     try {

frontend/editor/src/saas/components/shared/TrialStatusBanner.tsx

@@ -1,11 +1,14 @@
-import { useEffect, useState, useCallback } from "react";
+import { lazy, Suspense, useEffect, useState, useCallback } from "react";
 import { useBanner } from "@app/contexts/BannerContext";
 import { useAuth } from "@app/auth/UseSession";
 import { useTranslation } from "react-i18next";
 import { InfoBanner } from "@app/components/shared/InfoBanner";
-import StripeCheckout from "@app/components/shared/StripeCheckoutSaas";
 import { BASE_PATH } from "@app/constants/app";
 
+const StripeCheckout = lazy(
+  () => import("@app/components/shared/StripeCheckoutSaas"),
+);
+
 const SESSION_STORAGE_KEY = "trialBannerDismissed";
 
 export function TrialStatusBanner() {
@@ -113,18 +116,20 @@ export function TrialStatusBanner() {
 
   return (
     <>
-      {trialStatus && (
-        <StripeCheckout
-          opened={checkoutOpen}
-          onClose={() => setCheckoutOpen(false)}
-          purchaseType="subscription"
-          planId="pro"
-          creditsPack={null}
-          planName="Pro"
-          onSuccess={handleCheckoutSuccess}
-          onError={(error) => console.error("Checkout error:", error)}
-          isTrialConversion={true}
-        />
+      {trialStatus && checkoutOpen && (
+        <Suspense fallback={null}>
+          <StripeCheckout
+            opened={checkoutOpen}
+            onClose={() => setCheckoutOpen(false)}
+            purchaseType="subscription"
+            planId="pro"
+            creditsPack={null}
+            planName="Pro"
+            onSuccess={handleCheckoutSuccess}
+            onError={(error) => console.error("Checkout error:", error)}
+            isTrialConversion={true}
+          />
+        </Suspense>
       )}
     </>
   );

frontend/editor/src/saas/components/shared/config/configSections/Plan.tsx

@@ -1,11 +1,15 @@
-import React, { useState, useCallback, useEffect } from "react";
+import React, { lazy, Suspense, useState, useCallback, useEffect } from "react";
 import { Divider, Loader, Alert, Select, Group, Text } from "@mantine/core";
 import { usePlans, PlanTier } from "@app/hooks/usePlans";
-import StripeCheckout, {
+import type {
   PurchaseType,
   CreditsPack,
   PlanID,
 } from "@app/components/shared/StripeCheckoutSaas";
+
+const StripeCheckout = lazy(
+  () => import("@app/components/shared/StripeCheckoutSaas"),
+);
 import AvailablePlansSection from "@app/components/shared/config/configSections/plan/AvailablePlansSection";
 import ApiPackagesSection from "@app/components/shared/config/configSections/plan/ApiPackagesSection";
 import ActivePlanSection from "@app/components/shared/config/configSections/plan/ActivePlanSection";
@@ -204,29 +208,36 @@ const Plan: React.FC = () => {
       />
 
       {/* Stripe Checkout Modal */}
-      <StripeCheckout
-        opened={
-          checkoutOpen &&
-          (selectedPlan !== null || selectedCreditsPack !== null)
-        }
-        onClose={handleCheckoutClose}
-        purchaseType={purchaseType}
-        planId={
-          purchaseType === "subscription" ? (selectedPlan?.id as PlanID) : null
-        }
-        creditsPack={purchaseType === "credits" ? selectedCreditsPack : null}
-        planName={
-          purchaseType === "subscription"
-            ? selectedPlan?.name || ""
-            : data?.apiPackages.find((pkg) => pkg.id === selectedCreditsPack)
-                ?.name || ""
-        }
-        onSuccess={handlePaymentSuccess}
-        onError={handlePaymentError}
-        isTrialConversion={
-          trialStatus?.isTrialing && purchaseType === "subscription"
-        }
-      />
+      {checkoutOpen &&
+        (selectedPlan !== null || selectedCreditsPack !== null) && (
+          <Suspense fallback={null}>
+            <StripeCheckout
+              opened={true}
+              onClose={handleCheckoutClose}
+              purchaseType={purchaseType}
+              planId={
+                purchaseType === "subscription"
+                  ? (selectedPlan?.id as PlanID)
+                  : null
+              }
+              creditsPack={
+                purchaseType === "credits" ? selectedCreditsPack : null
+              }
+              planName={
+                purchaseType === "subscription"
+                  ? selectedPlan?.name || ""
+                  : data?.apiPackages.find(
+                      (pkg) => pkg.id === selectedCreditsPack,
+                    )?.name || ""
+              }
+              onSuccess={handlePaymentSuccess}
+              onError={handlePaymentError}
+              isTrialConversion={
+                trialStatus?.isTrialing && purchaseType === "subscription"
+              }
+            />
+          </Suspense>
+        )}
     </div>
   );
 };

frontend/editor/src/saas/components/shared/config/configSections/plan/ApiPackagesSection.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Button, Card, Text, Stack, Flex, Slider } from "@mantine/core";
 import { useTranslation } from "react-i18next";
-import { CreditsPack } from "@app/components/shared/StripeCheckoutSaas";
+import type { CreditsPack } from "@app/components/shared/StripeCheckoutSaas";
 
 interface ApiPackage {
   id: string;

frontend/editor/src/saas/services/apiClient.test.ts

@@ -1,6 +1,7 @@
 import { describe, it, expect, vi, beforeEach } from "vitest";
 import type { Session, AuthError } from "@supabase/supabase-js";
 import { supabase } from "@app/auth/supabase";
+import { expectConsole } from "@app/tests/failOnConsole";
 
 // Mock supabase
 vi.mock("@app/auth/supabase", () => ({
@@ -177,6 +178,7 @@ describe("apiClient", () => {
   });
 
   it("should handle refresh token failure", async () => {
+    expectConsole.error(/\[API Client\] Token refresh failed/);
     const oldToken = "old-token";
 
     const oldSession = {

frontend/editor/src/saas/setupTests.ts

@@ -1,5 +1,8 @@
 import "@testing-library/jest-dom";
 import { vi } from "vitest";
+import { installFailOnConsole } from "@app/tests/failOnConsole";
+
+installFailOnConsole();
 
 // Mock localStorage for tests
 const localStorageMock = (() => {