create-nextblock 0.13.7 → 0.13.9

package/templates/nextblock-template/app/cms/blocks/editors/ProductGridBlockEditor.tsx

@@ -1,32 +1,238 @@
 "use client";
 
 import React from 'react';
-import { Label, Input } from "@nextblock-cms/ui";
+import { AlertTriangle, Clock, Folder, ListChecks } from 'lucide-react';
+import { Label, Input, Checkbox } from "@nextblock-cms/ui";
+import { cn } from "@nextblock-cms/utils";
 import { BlockEditorProps } from '../components/BlockEditorModal';
-import { ProductGridBlockContent } from '../../../../lib/blocks/ecommerce-block-schemas';
+import MultiEntityPicker, { type PickerOption } from '../components/MultiEntityPicker';
+import {
+  PRODUCT_GRID_DEFAULT_PAGE_SIZE,
+  PRODUCT_GRID_MAX_CATEGORIES,
+  PRODUCT_GRID_MAX_LIMIT,
+  PRODUCT_GRID_MAX_PRODUCTS,
+  PRODUCT_GRID_UNLIMITED,
+  resolveProductGridCategoryIds,
+  resolveProductGridLimit,
+  resolveProductGridProductIds,
+  type ProductGridBlockContent,
+} from '../../../../lib/blocks/ecommerce-block-schemas';
+
+type SourceType = NonNullable<ProductGridBlockContent['type']>;
+
+const SOURCE_OPTIONS: { value: SourceType; label: string; icon: React.ElementType; hint: string }[] = [
+  {
+    value: 'latest',
+    label: 'Latest',
+    icon: Clock,
+    hint: 'Newest products first — the grid updates itself as you add products.',
+  },
+  {
+    value: 'category',
+    label: 'By category',
+    icon: Folder,
+    hint: 'Products belonging to any of the selected categories, newest first.',
+  },
+  {
+    value: 'manual',
+    label: 'Hand-picked',
+    icon: ListChecks,
+    hint: 'Exactly the products you choose, shown in the order you add them.',
+  },
+];
+
+interface PickerProduct {
+  id: string;
+  title: string;
+  sku: string | null;
+  status: string | null;
+  languageCode: string | null;
+}
+
+interface PickerData {
+  categories: { id: string; name: string; slug: string }[];
+  products: PickerProduct[];
+  hasMore: boolean;
+}
+
+const EMPTY_DATA: PickerData = { categories: [], products: [], hasMore: false };
+
+function toProductOption(product: PickerProduct): PickerOption {
+  return {
+    id: product.id,
+    label: product.title,
+    description: product.sku ? `SKU ${product.sku}` : null,
+    badge:
+      [product.languageCode, product.status !== 'active' ? product.status : null]
+        .filter(Boolean)
+        .join(' · ') || null,
+  };
+}
 
 export default function ProductGridBlockEditor({ content, onChange }: BlockEditorProps<Partial<ProductGridBlockContent>>) {
+  const [data, setData] = React.useState<PickerData>(EMPTY_DATA);
+  const [isLoading, setIsLoading] = React.useState(true);
+  const [loadError, setLoadError] = React.useState<string | null>(null);
+  const [productSearch, setProductSearch] = React.useState('');
+  // Every product seen so far, so a chip keeps its label after the search that
+  // surfaced it is cleared.
+  const [knownProducts, setKnownProducts] = React.useState<Map<string, PickerProduct>>(
+    () => new Map()
+  );
 
-  const handleChange = (field: keyof ProductGridBlockContent, value: any) => {
+  const sourceType: SourceType = content.type ?? 'latest';
+  const selectedCategoryIds = React.useMemo(
+    () => resolveProductGridCategoryIds(content),
+    [content]
+  );
+  const selectedProductIds = React.useMemo(
+    () => resolveProductGridProductIds(content),
+    [content]
+  );
+
+  // Only the ids present when the editor mounts need hydrating — anything picked
+  // afterwards is already in `data.products`. Keeping this out of the fetch
+  // dependencies avoids a refetch on every selection change.
+  const initialProductIdsRef = React.useRef(selectedProductIds.join(','));
+
+  React.useEffect(() => {
+    const controller = new AbortController();
+    const handle = setTimeout(() => {
+      setIsLoading(true);
+      const params = new URLSearchParams();
+      if (productSearch.trim()) params.set('search', productSearch.trim());
+      if (initialProductIdsRef.current) params.set('ids', initialProductIdsRef.current);
+
+      fetch(`/api/cms/ecommerce/product-picker?${params.toString()}`, {
+        signal: controller.signal,
+      })
+        .then(async (response) => {
+          if (!response.ok) {
+            const body = await response.json().catch(() => ({}));
+            throw new Error(body?.error || 'Failed to load products.');
+          }
+          return response.json();
+        })
+        .then((payload: PickerData) => {
+          const products = payload.products ?? [];
+          setData({
+            categories: payload.categories ?? [],
+            products,
+            hasMore: Boolean(payload.hasMore),
+          });
+          setKnownProducts((previous) => {
+            const next = new Map(previous);
+            for (const product of products) next.set(product.id, product);
+            return next;
+          });
+          setLoadError(null);
+        })
+        .catch((error: unknown) => {
+          if (error instanceof DOMException && error.name === 'AbortError') return;
+          setLoadError(error instanceof Error ? error.message : 'Failed to load products.');
+        })
+        .finally(() => {
+          if (!controller.signal.aborted) setIsLoading(false);
+        });
+      // Debounce so typing in the product search does not fire a request per keystroke.
+    }, productSearch ? 250 : 0);
+
+    return () => {
+      controller.abort();
+      clearTimeout(handle);
+    };
+  }, [productSearch]);
+
+  const handleChange = <K extends keyof ProductGridBlockContent>(
+    field: K,
+    value: ProductGridBlockContent[K]
+  ) => {
     onChange({ ...content, [field]: value });
   };
 
+  /**
+   * Writing `categoryIds` has to drop the legacy `categoryId`, otherwise
+   * `resolveProductGridCategoryIds` falls back to it and a category the author
+   * just removed comes straight back.
+   */
+  const handleCategoryChange = (ids: string[]) => {
+    const { categoryId: _legacyCategoryId, ...rest } = content;
+    onChange({ ...rest, categoryIds: ids });
+  };
+
+  const limit = resolveProductGridLimit(content);
+  const isUnlimited = limit === PRODUCT_GRID_UNLIMITED;
+  const showPagination = Boolean(content.showPagination);
+
+  /**
+   * Pagination needs a page size, so switching it on for an unlimited grid picks
+   * a sensible one instead of leaving the block in a contradictory state.
+   */
+  const handlePaginationChange = (checked: boolean) => {
+    onChange({
+      ...content,
+      showPagination: checked,
+      limit: checked && isUnlimited ? PRODUCT_GRID_DEFAULT_PAGE_SIZE : limit,
+    });
+  };
+
+  // The field is backed by a draft string so it can be emptied mid-edit; only
+  // parseable values are committed to the block.
+  const [limitDraft, setLimitDraft] = React.useState(() => String(limit));
+  React.useEffect(() => {
+    setLimitDraft(String(limit));
+  }, [limit]);
+
+  const handleLimitChange = (raw: string) => {
+    setLimitDraft(raw);
+    const parsed = parseInt(raw, 10);
+    if (Number.isNaN(parsed)) return;
+    const floor = showPagination ? 1 : PRODUCT_GRID_UNLIMITED;
+    handleChange('limit', Math.min(Math.max(parsed, floor), PRODUCT_GRID_MAX_LIMIT));
+  };
+
+  const handleSourceChange = (nextType: SourceType) => {
+    const { categoryId: _legacyCategoryId, ...rest } = content;
+    onChange({
+      ...rest,
+      type: nextType,
+      // Both selections are kept so switching source back and forth is
+      // non-destructive; the renderer only reads the one matching `type`.
+      categoryIds: selectedCategoryIds,
+      productIds: selectedProductIds,
+    });
+  };
+
+  const categoryOptions: PickerOption[] = React.useMemo(
+    () =>
+      data.categories.map((category) => ({
+        id: category.id,
+        label: category.name,
+        description: `/${category.slug}`,
+      })),
+    [data.categories]
+  );
+
+  const productOptions: PickerOption[] = React.useMemo(
+    () => data.products.map(toProductOption),
+    [data.products]
+  );
+
+  const selectedProductOptions: PickerOption[] = React.useMemo(
+    () =>
+      selectedProductIds
+        .map((id) => knownProducts.get(id))
+        .filter((product): product is PickerProduct => Boolean(product))
+        .map(toProductOption),
+    [selectedProductIds, knownProducts]
+  );
+
+  const activeSource = SOURCE_OPTIONS.find((option) => option.value === sourceType) ?? SOURCE_OPTIONS[0];
+
   return (
-    <div className="space-y-4 p-3 border-t mt-2">
-      <div>
-        <Label htmlFor="pg-limit">Item Limit</Label>
-        <Input
-          id="pg-limit"
-          type="number"
-          min={1}
-          max={20}
-          value={content.limit || 6}
-          onChange={(e) => handleChange('limit', parseInt(e.target.value) || 6)}
-          className="mt-1"
-        />
-      </div>
+    <div className="mt-2 space-y-5 border-t p-3">
       <div>
-        <Label htmlFor="pg-title">Grid Title (Optional)</Label>
+        <Label htmlFor="pg-title">Grid title (optional)</Label>
         <Input
           id="pg-title"
           value={content.title || ""}
@@ -34,8 +240,159 @@ export default function ProductGridBlockEditor({ content, onChange }: BlockEdito
           placeholder="New Arrivals"
           className="mt-1"
         />
+        <p className="mt-1 text-[11px] text-muted-foreground">
+          Shown as a heading above the grid. Leave empty for no heading.
+        </p>
+      </div>
+
+      <div>
+        <Label>Which products?</Label>
+        <div
+          role="radiogroup"
+          aria-label="Product source"
+          className="mt-1 grid grid-cols-3 gap-1 rounded-lg border bg-muted/40 p-1"
+        >
+          {SOURCE_OPTIONS.map((option) => {
+            const Icon = option.icon;
+            const isActive = option.value === sourceType;
+            return (
+              <button
+                key={option.value}
+                type="button"
+                role="radio"
+                aria-checked={isActive}
+                onClick={() => handleSourceChange(option.value)}
+                className={cn(
+                  'flex items-center justify-center gap-1.5 rounded-md px-2 py-1.5 text-xs transition-colors',
+                  isActive
+                    ? 'bg-background font-medium text-foreground shadow-sm'
+                    : 'text-muted-foreground hover:text-foreground'
+                )}
+              >
+                <Icon className="h-3.5 w-3.5" />
+                {option.label}
+              </button>
+            );
+          })}
+        </div>
+        <p className="mt-1.5 text-[11px] leading-snug text-muted-foreground">{activeSource.hint}</p>
+      </div>
+
+      {loadError && (
+        <p className="flex items-start gap-1.5 rounded-md bg-destructive/10 p-2 text-[11px] text-destructive">
+          <AlertTriangle className="mt-px h-3.5 w-3.5 shrink-0" />
+          {loadError}
+        </p>
+      )}
+
+      {sourceType === 'category' && (
+        <div>
+          <Label>Categories</Label>
+          <div className="mt-1">
+            <MultiEntityPicker
+              options={categoryOptions}
+              selectedIds={selectedCategoryIds}
+              onChange={handleCategoryChange}
+              nouns={['category', 'categories']}
+              placeholder="Select categories…"
+              searchPlaceholder="Search categories…"
+              emptyMessage="No categories yet."
+              isLoading={isLoading}
+              maxSelected={PRODUCT_GRID_MAX_CATEGORIES}
+              hint={
+                selectedCategoryIds.length === 0
+                  ? 'No category selected — the grid falls back to the latest products.'
+                  : 'A product appears if it belongs to any of these categories.'
+              }
+            />
+          </div>
+        </div>
+      )}
+
+      {sourceType === 'manual' && (
+        <div>
+          <Label>Products</Label>
+          <div className="mt-1">
+            <MultiEntityPicker
+              options={productOptions}
+              selectedOptions={selectedProductOptions}
+              selectedIds={selectedProductIds}
+              onChange={(ids) => handleChange('productIds', ids)}
+              nouns={['product', 'products']}
+              placeholder="Select products…"
+              searchPlaceholder="Search by title or SKU…"
+              emptyMessage="No products match that search."
+              isLoading={isLoading}
+              onSearchChange={setProductSearch}
+              showOrder
+              maxSelected={PRODUCT_GRID_MAX_PRODUCTS}
+              hint={
+                selectedProductIds.length === 0
+                  ? 'Pick at least one product — an empty list renders nothing on the page.'
+                  : `Shown in this order. ${data.hasMore ? 'Search to find products beyond the 50 most recent. ' : ''}Products are matched to the page language automatically.`
+              }
+            />
+          </div>
+        </div>
+      )}
+
+      <div className="space-y-3">
+        {/* A hand-picked list has no cap to set — the picks are the cap — so the
+            count field only appears there once it means "per page". */}
+        {(sourceType !== 'manual' || showPagination) && (
+          <div>
+            <Label htmlFor="pg-limit">
+              {showPagination ? 'Products per page' : 'Products to show'}
+            </Label>
+            <Input
+              id="pg-limit"
+              type="number"
+              min={showPagination ? 1 : PRODUCT_GRID_UNLIMITED}
+              max={PRODUCT_GRID_MAX_LIMIT}
+              value={limitDraft}
+              onChange={(e) => handleLimitChange(e.target.value)}
+              onBlur={() => setLimitDraft(String(limit))}
+              className="mt-1 w-28"
+            />
+            <p className="mt-1 text-[11px] leading-snug text-muted-foreground">
+              {showPagination ? (
+                <>
+                  How many products fill one page (1–{PRODUCT_GRID_MAX_LIMIT}). Visitors page
+                  through {sourceType === 'manual' ? 'the whole list' : 'everything that matches'}.
+                </>
+              ) : isUnlimited ? (
+                <>
+                  <strong className="font-medium text-foreground">0 = unlimited</strong> — every
+                  matching product is shown on one page.
+                </>
+              ) : (
+                <>
+                  Maximum number of products in this grid (max {PRODUCT_GRID_MAX_LIMIT}). Set it to{' '}
+                  <strong className="font-medium text-foreground">0</strong> to show them all.
+                </>
+              )}
+            </p>
+          </div>
+        )}
+
+        <div className="flex items-start gap-2">
+          <Checkbox
+            id="pg-pagination"
+            checked={showPagination}
+            onCheckedChange={(checked) => handlePaginationChange(checked === true)}
+            className="mt-0.5"
+          />
+          <div>
+            <Label htmlFor="pg-pagination" className="cursor-pointer">
+              Paginate
+            </Label>
+            <p className="text-[11px] leading-snug text-muted-foreground">
+              Adds Previous / Next controls so visitors can reach every product
+              {isUnlimited ? `, ${PRODUCT_GRID_DEFAULT_PAGE_SIZE} at a time.` : '.'}
+            </p>
+          </div>
+        </div>
       </div>
-       {/* Type selection could be added here, currently defaulting to 'latest' */}
     </div>
   );
 }

package/templates/nextblock-template/app/cms/components/EcommerceActiveContext.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import React, { createContext, useContext } from "react";
+
+const EcommerceActiveContext = createContext<boolean>(false);
+
+export function EcommerceActiveProvider({
+  children,
+  isActive,
+}: {
+  children: React.ReactNode;
+  isActive: boolean;
+}) {
+  return (
+    <EcommerceActiveContext.Provider value={isActive}>
+      {children}
+    </EcommerceActiveContext.Provider>
+  );
+}
+
+/**
+ * Whether the premium `ecommerce` package is activated for this install.
+ * Defaults to `false` outside the provider so any UI gated on it fails closed.
+ */
+export function useEcommerceActive() {
+  return useContext(EcommerceActiveContext);
+}

package/templates/nextblock-template/app/cms/settings/bot-protection/actions.ts

@@ -3,6 +3,7 @@
 
 import { createClient } from '@nextblock-cms/db/server';
 import { revalidatePath } from 'next/cache';
+import type { SettingsActionResult } from '../../../../lib/cms/action-result';
 
 export type BotProtectionSettings = {
   provider: 'none' | 'turnstile' | 'recaptcha';
@@ -37,13 +38,15 @@ export async function getBotProtectionSettings(): Promise<BotProtectionSettings>
   };
 }
 
-export async function updateBotProtectionSettings(formData: FormData) {
+export async function updateBotProtectionSettings(
+  formData: FormData,
+): Promise<SettingsActionResult> {
   const supabase = createClient();
 
   // Verify auth and role
   const { data: { user } } = await supabase.auth.getUser();
   if (!user) {
-    throw new Error('You must be logged in to update settings.');
+    return { ok: false, error: 'You must be logged in to update settings.' };
   }
 
   const { data: profile, error: profileError } = await supabase
@@ -53,7 +56,7 @@ export async function updateBotProtectionSettings(formData: FormData) {
     .single();
 
   if (profileError || !profile || profile.role !== 'ADMIN') {
-    throw new Error('You do not have permission to perform this action.');
+    return { ok: false, error: 'You do not have permission to perform this action.' };
   }
 
   const provider = formData.get('provider') as 'none' | 'turnstile' | 'recaptcha';
@@ -70,7 +73,7 @@ export async function updateBotProtectionSettings(formData: FormData) {
 
   if (publicError) {
     console.error('Error updating public bot protection settings:', publicError);
-    throw new Error('Failed to update bot protection settings.');
+    return { ok: false, error: 'Failed to update bot protection settings.' };
   }
 
   // Update secret settings (secretKey)
@@ -83,11 +86,11 @@ export async function updateBotProtectionSettings(formData: FormData) {
 
   if (secretError) {
     console.error('Error updating secret bot protection settings:', secretError);
-    throw new Error('Failed to update bot protection secrets.');
+    return { ok: false, error: 'Failed to update bot protection secrets.' };
   }
 
   // Revalidate root layout so scripts update instantly
   revalidatePath('/', 'layout');
 
-  return { success: true, message: 'Bot protection settings updated successfully.' };
+  return { ok: true, message: 'Bot protection settings updated successfully.' };
 }

package/templates/nextblock-template/app/cms/settings/bot-protection/components/BotProtectionForm.tsx

@@ -33,11 +33,7 @@ export default function BotProtectionForm({ initialSettings }: BotProtectionForm
     startTransition(async () => {
       try {
         const result = await updateBotProtectionSettings(formData);
-        if (result.success) {
-          setMessage({ success: result.message });
-        } else {
-          setMessage({ error: 'An unexpected error occurred.' });
-        }
+        setMessage(result.ok ? { success: result.message } : { error: result.error });
       } catch (error) {
         setMessage({ error: error instanceof Error ? error.message : 'An unknown error occurred.' });
       }

package/templates/nextblock-template/app/cms/settings/copyright/actions.ts

@@ -3,6 +3,7 @@
 
 import { createClient } from '@nextblock-cms/db/server';
 import { revalidatePath } from 'next/cache';
+import type { SettingsActionResult } from '../../../../lib/cms/action-result';
 
 export type CopyrightSettings = {
   [key: string]: string;
@@ -50,13 +51,15 @@ export async function getCopyrightSettings(): Promise<CopyrightSettings> {
   return data.value as CopyrightSettings;
 }
 
-export async function updateCopyrightSettings(formData: FormData) {
+export async function updateCopyrightSettings(
+  formData: FormData,
+): Promise<SettingsActionResult> {
   const supabase = createClient();
 
   // Check if user is an admin
   const { data: { user } } = await supabase.auth.getUser();
   if (!user) {
-    throw new Error('You must be logged in to update settings.');
+    return { ok: false, error: 'You must be logged in to update settings.' };
   }
   const { data: profile, error: profileError } = await supabase
     .from('profiles')
@@ -65,7 +68,7 @@ export async function updateCopyrightSettings(formData: FormData) {
     .single();
 
   if (profileError || !profile || !['ADMIN', 'WRITER'].includes(profile.role)) {
-    throw new Error('You do not have permission to perform this action.');
+    return { ok: false, error: 'You do not have permission to perform this action.' };
   }
 
   const newSettings: CopyrightSettings = {};
@@ -82,7 +85,7 @@ export async function updateCopyrightSettings(formData: FormData) {
 
   if (error) {
     console.error('Error updating copyright settings:', error);
-    throw new Error('Failed to update copyright settings.');
+    return { ok: false, error: 'Failed to update copyright settings.' };
   }
 
   // Persist the footer attribution toggle. The client always submits an explicit
@@ -94,11 +97,11 @@ export async function updateCopyrightSettings(formData: FormData) {
 
   if (attributionError) {
     console.error('Error updating footer attribution setting:', attributionError);
-    throw new Error('Failed to update footer attribution setting.');
+    return { ok: false, error: 'Failed to update footer attribution setting.' };
   }
 
   // Revalidate the root layout to reflect changes immediately across the site.
   revalidatePath('/', 'layout');
 
-  return { success: true, message: 'Copyright settings updated successfully.' };
+  return { ok: true, message: 'Copyright settings updated successfully.' };
 }

package/templates/nextblock-template/app/cms/settings/copyright/components/CopyrightForm.tsx

@@ -44,11 +44,7 @@ export default function CopyrightForm({ languages, initialSettings, initialAttri
     startTransition(async () => {
       try {
         const result = await updateCopyrightSettings(formData);
-        if (result.success) {
-          setMessage({ success: result.message });
-        } else {
-          setMessage({ error: 'An unexpected error occurred.' });
-        }
+        setMessage(result.ok ? { success: result.message } : { error: result.error });
       } catch (error) {
         setMessage({ error: error instanceof Error ? error.message : 'An unknown error occurred.' });
       }

package/templates/nextblock-template/app/cms/settings/cortex-ai/actions.ts

@@ -50,6 +50,16 @@ type CortexAiSettingsStatus = {
   unsplashAppName: string | null;
 };
 
+/**
+ * How every action in this file reports back: the page reads `?success=` / `?error=` and
+ * renders it. These are plain `<form action={fn}>` submissions, so a return value would be
+ * discarded and a thrown error would take out the page (with its message replaced by a
+ * generic string in production).
+ *
+ * Must be called OUTSIDE the try blocks below. `redirect()` signals itself by throwing
+ * NEXT_REDIRECT, so calling this inside a `try` would have the `catch` swallow the
+ * navigation and re-redirect with the framework's digest as the user-facing message.
+ */
 function redirectWithStatus(status: 'success' | 'error', message: string): never {
   redirect(`${CORTEX_AI_SETTINGS_PATH}?${status}=${encodeURIComponent(message)}`);
 }
@@ -173,7 +183,7 @@ export async function getCortexAiSettingsStatus(): Promise<CortexAiSettingsStatu
 
 export async function saveOpenRouterApiKeyAction(formData: FormData) {
   if (process.env.NEXT_PUBLIC_IS_SANDBOX === 'true') {
-    throw new Error('Sandbox environment cannot save keys to the database.');
+    redirectWithStatus('error', 'Sandbox environment cannot save keys to the database.');
   }
 
   try {
@@ -206,7 +216,7 @@ export async function saveOpenRouterApiKeyAction(formData: FormData) {
 
 export async function clearOpenRouterApiKeyAction() {
   if (process.env.NEXT_PUBLIC_IS_SANDBOX === 'true') {
-    throw new Error('Sandbox environment cannot clear keys from the database.');
+    redirectWithStatus('error', 'Sandbox environment cannot clear keys from the database.');
   }
 
   try {
@@ -235,7 +245,7 @@ export async function clearOpenRouterApiKeyAction() {
 
 export async function saveStockPhotoKeysAction(formData: FormData) {
   if (process.env.NEXT_PUBLIC_IS_SANDBOX === 'true') {
-    throw new Error('Sandbox environment cannot save keys to the database.');
+    redirectWithStatus('error', 'Sandbox environment cannot save keys to the database.');
   }
 
   try {
@@ -287,7 +297,7 @@ export async function saveStockPhotoKeysAction(formData: FormData) {
 
 export async function clearStockPhotoKeysAction() {
   if (process.env.NEXT_PUBLIC_IS_SANDBOX === 'true') {
-    throw new Error('Sandbox environment cannot clear keys from the database.');
+    redirectWithStatus('error', 'Sandbox environment cannot clear keys from the database.');
   }
 
   try {
@@ -313,7 +323,7 @@ export async function clearStockPhotoKeysAction() {
 
 export async function saveCortexAiAgentSettingsAction(formData: FormData) {
   if (process.env.NEXT_PUBLIC_IS_SANDBOX === 'true') {
-    throw new Error('Sandbox environment cannot save settings to the database.');
+    redirectWithStatus('error', 'Sandbox environment cannot save settings to the database.');
   }
 
   try {
@@ -357,7 +367,7 @@ export async function saveCortexAiAgentSettingsAction(formData: FormData) {
 
 export async function resetCortexAiAgentSettingsAction() {
   if (process.env.NEXT_PUBLIC_IS_SANDBOX === 'true') {
-    throw new Error('Sandbox environment cannot change settings in the database.');
+    redirectWithStatus('error', 'Sandbox environment cannot change settings in the database.');
   }
 
   try {
@@ -383,7 +393,7 @@ export async function resetCortexAiAgentSettingsAction() {
 
 export async function saveCortexAiModelSelectionAction(formData: FormData) {
   if (process.env.NEXT_PUBLIC_IS_SANDBOX === 'true') {
-    throw new Error('Sandbox environment cannot save model selection to the database.');
+    redirectWithStatus('error', 'Sandbox environment cannot save model selection to the database.');
   }
 
   try {
@@ -440,7 +450,7 @@ export async function saveCortexAiModelSelectionAction(formData: FormData) {
 
 export async function clearCortexAiModelSelectionAction() {
   if (process.env.NEXT_PUBLIC_IS_SANDBOX === 'true') {
-    throw new Error('Sandbox environment cannot clear model selection from the database.');
+    redirectWithStatus('error', 'Sandbox environment cannot clear model selection from the database.');
   }
 
   try {