Epic 5 Complete: Billing, Subscriptions, and Admin Features

Resolve all 5 deferred items from Epic 5 adversarial code review:
- Migration 124: Add CASCADE to subscriptionstatus enum drop (prevent orphaned references)
- Stripe rate limiting: In-memory per-user limiter (20 calls/60s) on verify-checkout-session
- Subscription request cooldown: 24h cooldown before resubmitting rejected requests
- Token reset date: Initialize on first subscription activation
- Checkout URL validation: Confirmed HTTPS-only (Stripe always returns HTTPS)

Implement Story 5.4 (Usage Tracking & Rate Limit Enforcement):
- Page quota pre-check at HTTP upload layer
- Extend UserRead schema with token quota fields
- Frontend 402 error handling in document upload
- Quota indicator in dashboard sidebar

Story 5.5 (Admin Seed & Approval Flow):
- Seed admin user migration with default credentials warning
- Subscription approval/rejection routes with admin guard
- 24h rejection cooldown enforcement

Story 5.6 (Admin-Only Model Config):
- Global model config visible across all search spaces
- Per-search-space model configs with user access control
- Superuser CRUD for global configs

Additional fixes from code review:
- PageLimitService: PAST_DUE subscriptions enforce free-tier limits
- TokenQuotaService: PAST_DUE subscriptions enforce free-tier limits
- Config routes: Fixed user_id.is_(None) filter on mutation endpoints
- Stripe webhook: Added guard against silent plan downgrade on unrecognized price_id

All changes formatted with Ruff (Python) and Biome (TypeScript).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

surfsense_web/components/layout/providers/LayoutDataProvider.tsx

@@ -703,6 +703,8 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
 		? {
 				pagesUsed: user.pages_used,
 				pagesLimit: user.pages_limit,
+				tokensUsed: user.tokens_used_this_month,
+				tokensLimit: user.monthly_token_limit,
 			}
 		: undefined;
 

surfsense_web/components/layout/types/layout.types.ts

@@ -38,6 +38,8 @@ export interface ChatItem {
 export interface PageUsage {
 	pagesUsed: number;
 	pagesLimit: number;
+	tokensUsed: number;
+	tokensLimit: number;
 }
 
 export interface IconRailProps {
@@ -78,6 +80,8 @@ export interface ChatsSectionProps {
 export interface PageUsageDisplayProps {
 	pagesUsed: number;
 	pagesLimit: number;
+	tokensUsed: number;
+	tokensLimit: number;
 }
 
 export interface SidebarUserProfileProps {

surfsense_web/components/layout/ui/sidebar/PageUsageDisplay.tsx

@@ -11,12 +11,32 @@ import { stripeApiService } from "@/lib/apis/stripe-api.service";
 interface PageUsageDisplayProps {
 	pagesUsed: number;
 	pagesLimit: number;
+	tokensUsed: number;
+	tokensLimit: number;
 }
 
-export function PageUsageDisplay({ pagesUsed, pagesLimit }: PageUsageDisplayProps) {
+function formatTokenCount(n: number): string {
+	if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
+	if (n >= 1_000) return `${(n / 1_000).toFixed(0)}K`;
+	return n.toLocaleString();
+}
+
+function progressColor(percent: number): string {
+	if (percent > 95) return "[&>div]:bg-red-500";
+	if (percent > 80) return "[&>div]:bg-amber-500";
+	return "";
+}
+
+export function PageUsageDisplay({
+	pagesUsed,
+	pagesLimit,
+	tokensUsed,
+	tokensLimit,
+}: PageUsageDisplayProps) {
 	const params = useParams();
 	const searchSpaceId = params?.search_space_id ?? "";
-	const usagePercentage = (pagesUsed / pagesLimit) * 100;
+	const pagePercent = Math.min(100, (pagesUsed / pagesLimit) * 100);
+	const tokenPercent = Math.min(100, (tokensUsed / tokensLimit) * 100);
 	const { data: stripeStatus } = useQuery({
 		queryKey: ["stripe-status"],
 		queryFn: () => stripeApiService.getStatus(),
@@ -25,14 +45,29 @@ export function PageUsageDisplay({ pagesUsed, pagesLimit }: PageUsageDisplayProp
 
 	return (
 		<div className="px-3 py-3 border-t">
-			<div className="space-y-1.5">
-				<div className="flex justify-between items-center text-xs">
-					<span className="text-muted-foreground">
-						{pagesUsed.toLocaleString()} / {pagesLimit.toLocaleString()} pages
-					</span>
-					<span className="font-medium">{usagePercentage.toFixed(0)}%</span>
+			<div className="space-y-2">
+				{/* Page usage */}
+				<div className="space-y-1">
+					<div className="flex justify-between items-center text-xs">
+						<span className="text-muted-foreground">
+							{pagesUsed.toLocaleString()} / {pagesLimit.toLocaleString()} pages
+						</span>
+						<span className="font-medium">{pagePercent.toFixed(0)}%</span>
+					</div>
+					<Progress value={pagePercent} className={`h-1.5 ${progressColor(pagePercent)}`} />
 				</div>
-				<Progress value={usagePercentage} className="h-1.5" />
+
+				{/* Token usage */}
+				<div className="space-y-1">
+					<div className="flex justify-between items-center text-xs">
+						<span className="text-muted-foreground">
+							{formatTokenCount(tokensUsed)} / {formatTokenCount(tokensLimit)} tokens
+						</span>
+						<span className="font-medium">{tokenPercent.toFixed(0)}%</span>
+					</div>
+					<Progress value={tokenPercent} className={`h-1.5 ${progressColor(tokenPercent)}`} />
+				</div>
+
 				<Link
 					href={`/dashboard/${searchSpaceId}/more-pages`}
 					className="group flex w-[calc(100%+0.75rem)] items-center justify-between rounded-md px-1.5 py-1 -mx-1.5 transition-colors hover:bg-accent"

surfsense_web/components/layout/ui/sidebar/Sidebar.tsx

@@ -268,7 +268,12 @@ export function Sidebar({
 				)}
 
 				{pageUsage && !isCollapsed && (
-					<PageUsageDisplay pagesUsed={pageUsage.pagesUsed} pagesLimit={pageUsage.pagesLimit} />
+					<PageUsageDisplay
+						pagesUsed={pageUsage.pagesUsed}
+						pagesLimit={pageUsage.pagesLimit}
+						tokensUsed={pageUsage.tokensUsed}
+						tokensLimit={pageUsage.tokensLimit}
+					/>
 				)}
 
 				<SidebarUserProfile

surfsense_web/components/new-chat/chat-header.tsx

@@ -1,7 +1,8 @@
 "use client";
 
 import { useCallback, useEffect, useState } from "react";
-import { useSetAtom } from "jotai";
+import { useAtomValue, useSetAtom } from "jotai";
+import { currentUserAtom } from "@/atoms/user/user-query.atoms";
 import { selectedSystemModelIdAtom } from "@/atoms/new-llm-config/system-models-query.atoms";
 import { ImageConfigDialog } from "@/components/shared/image-config-dialog";
 import { ModelConfigDialog } from "@/components/shared/model-config-dialog";
@@ -24,6 +25,9 @@ interface ChatHeaderProps {
 }
 
 export function ChatHeader({ searchSpaceId, className }: ChatHeaderProps) {
+	const { data: currentUser } = useAtomValue(currentUserAtom);
+	const isAdmin = !!currentUser?.is_superuser;
+
 	// Reset system model selection when search space changes
 	const setSelectedSystemModelId = useSetAtom(selectedSystemModelIdAtom);
 	useEffect(() => {
@@ -129,12 +133,12 @@ export function ChatHeader({ searchSpaceId, className }: ChatHeaderProps) {
 				<SystemModelSelector className={className} />
 			) : (
 				<ModelSelector
-					onEditLLM={handleEditLLMConfig}
-					onAddNewLLM={handleAddNewLLM}
-					onEditImage={handleEditImageConfig}
-					onAddNewImage={handleAddImageModel}
-					onEditVision={handleEditVisionConfig}
-					onAddNewVision={handleAddVisionModel}
+					onEditLLM={isAdmin ? handleEditLLMConfig : undefined}
+					onAddNewLLM={isAdmin ? handleAddNewLLM : undefined}
+					onEditImage={isAdmin ? handleEditImageConfig : undefined}
+					onAddNewImage={isAdmin ? handleAddImageModel : undefined}
+					onEditVision={isAdmin ? handleEditVisionConfig : undefined}
+					onAddNewVision={isAdmin ? handleAddVisionModel : undefined}
 					className={className}
 				/>
 			)}

surfsense_web/components/new-chat/model-selector.tsx

@@ -2,7 +2,7 @@
 
 import { useAtomValue } from "jotai";
 import { Bot, Check, ChevronDown, Edit3, Eye, ImageIcon, Plus, Search, Zap } from "lucide-react";
-import { type UIEvent, useCallback, useMemo, useState } from "react";
+import { type UIEvent, useCallback, useEffect, useMemo, useState } from "react";
 import { toast } from "sonner";
 import {
 	globalImageGenConfigsAtom,
@@ -45,8 +45,8 @@ import { getProviderIcon } from "@/lib/provider-icons";
 import { cn } from "@/lib/utils";
 
 interface ModelSelectorProps {
-	onEditLLM: (config: NewLLMConfigPublic | GlobalNewLLMConfig, isGlobal: boolean) => void;
-	onAddNewLLM: () => void;
+	onEditLLM?: (config: NewLLMConfigPublic | GlobalNewLLMConfig, isGlobal: boolean) => void;
+	onAddNewLLM?: () => void;
 	onEditImage?: (config: ImageGenerationConfig | GlobalImageGenConfig, isGlobal: boolean) => void;
 	onAddNewImage?: () => void;
 	onEditVision?: (config: VisionLLMConfig | GlobalVisionLLMConfig, isGlobal: boolean) => void;
@@ -155,6 +155,30 @@ export function ModelSelector({
 		);
 	}, [currentVisionConfig]);
 
+	// ─── Auto-reset stale config selections ───
+	// When configs finish loading and a saved preference points to a deleted config,
+	// silently clear the stale ID so the UI shows "Select a model" instead of erroring.
+	useEffect(() => {
+		if (!preferences || !searchSpaceId || llmUserLoading || llmGlobalLoading || prefsLoading)
+			return;
+		const agentLlmId = preferences.agent_llm_id;
+		if (agentLlmId === null || agentLlmId === undefined) return;
+		const existsInUser = llmUserConfigs?.some((c) => c.id === agentLlmId);
+		const existsInGlobal = llmGlobalConfigs?.some((c) => c.id === agentLlmId);
+		if (!existsInUser && !existsInGlobal) {
+			updatePreferences({ search_space_id: Number(searchSpaceId), data: { agent_llm_id: null } });
+		}
+	}, [
+		preferences,
+		llmUserConfigs,
+		llmGlobalConfigs,
+		llmUserLoading,
+		llmGlobalLoading,
+		prefsLoading,
+		searchSpaceId,
+		updatePreferences,
+	]);
+
 	// ─── LLM filtering ───
 	const filteredLLMGlobal = useMemo(() => {
 		if (!llmGlobalConfigs) return [];
@@ -520,7 +544,7 @@ export function ModelSelector({
 																</div>
 															</div>
 														</div>
-														{!isAutoMode && (
+														{!isAutoMode && onEditLLM && (
 															<Button
 																variant="ghost"
 																size="icon"
@@ -585,14 +609,16 @@ export function ModelSelector({
 																</div>
 															</div>
 														</div>
-														<Button
-															variant="ghost"
-															size="icon"
-															className="size-7 shrink-0 rounded-md hover:bg-muted opacity-0 group-hover:opacity-100 transition-opacity"
-															onClick={(e) => handleEditLLMConfig(e, config, false)}
-														>
-															<Edit3 className="size-3.5 text-muted-foreground" />
-														</Button>
+														{onEditLLM && (
+															<Button
+																variant="ghost"
+																size="icon"
+																className="size-7 shrink-0 rounded-md hover:bg-muted opacity-0 group-hover:opacity-100 transition-opacity"
+																onClick={(e) => handleEditLLMConfig(e, config, false)}
+															>
+																<Edit3 className="size-3.5 text-muted-foreground" />
+															</Button>
+														)}
 													</div>
 												</CommandItem>
 											);
@@ -600,21 +626,23 @@ export function ModelSelector({
 									</CommandGroup>
 								)}
 
-								{/* Add New LLM Config */}
-								<div className="p-2 bg-muted/20 dark:bg-neutral-900">
-									<Button
-										variant="ghost"
-										size="sm"
-										className="w-full justify-start gap-2 h-9 rounded-lg hover:bg-accent/50 dark:hover:bg-white/[0.06]"
-										onClick={() => {
-											setOpen(false);
-											onAddNewLLM();
-										}}
-									>
-										<Plus className="size-4 text-primary" />
-										<span className="text-sm font-medium">Add Model</span>
-									</Button>
-								</div>
+								{/* Add New LLM Config — admin only */}
+								{onAddNewLLM && (
+									<div className="p-2 bg-muted/20 dark:bg-neutral-900">
+										<Button
+											variant="ghost"
+											size="sm"
+											className="w-full justify-start gap-2 h-9 rounded-lg hover:bg-accent/50 dark:hover:bg-white/[0.06]"
+											onClick={() => {
+												setOpen(false);
+												onAddNewLLM();
+											}}
+										>
+											<Plus className="size-4 text-primary" />
+											<span className="text-sm font-medium">Add Model</span>
+										</Button>
+									</div>
+								)}
 							</CommandList>
 						</Command>
 					</TabsContent>

surfsense_web/components/pricing/pricing-section.tsx

@@ -56,6 +56,12 @@ function PricingBasic() {
 			}
 
 			const data = await response.json();
+
+			if (data.admin_approval_mode) {
+				toast.success("Subscription request submitted! An admin will approve it shortly.");
+				return;
+			}
+
 			const checkoutUrl = data.checkout_url;
 			if (typeof checkoutUrl === "string" && checkoutUrl.startsWith("https://")) {
 				window.location.href = checkoutUrl;
@@ -103,7 +109,11 @@ function PricingBasic() {
 				"Priority support on Discord",
 			],
 			description: "For power users and professionals",
-			buttonText: isLoading ? "Redirecting…" : isOnline ? "Upgrade to Pro" : "Offline — unavailable",
+			buttonText: isLoading
+				? "Redirecting…"
+				: isOnline
+					? "Upgrade to Pro"
+					: "Offline — unavailable",
 			href: "#",
 			isPopular: true,
 			onAction: handleUpgradePro,

surfsense_web/components/settings/image-model-manager.tsx

@@ -9,6 +9,7 @@ import {
 	imageGenConfigsAtom,
 } from "@/atoms/image-gen-config/image-gen-config-query.atoms";
 import { membersAtom, myAccessAtom } from "@/atoms/members/members-query.atoms";
+import { currentUserAtom } from "@/atoms/user/user-query.atoms";
 import { ImageConfigDialog } from "@/components/shared/image-config-dialog";
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import {
@@ -77,15 +78,14 @@ export function ImageModelManager({ searchSpaceId }: ImageModelManagerProps) {
 		return map;
 	}, [members]);
 
+	// Permissions — only superusers can create/edit/delete model configs
 	const { data: access } = useAtomValue(myAccessAtom);
-	const canCreate =
-		!!access &&
-		(access.is_owner || (access.permissions?.includes("image_generations:create") ?? false));
-	const canDelete =
-		!!access &&
-		(access.is_owner || (access.permissions?.includes("image_generations:delete") ?? false));
-	const canUpdate = canCreate;
-	const isReadOnly = !canCreate && !canDelete;
+	const { data: currentUser } = useAtomValue(currentUserAtom);
+	const isAdmin = !!currentUser?.is_superuser;
+	const canCreate = isAdmin;
+	const canDelete = isAdmin;
+	const canUpdate = isAdmin;
+	const isReadOnly = !isAdmin;
 
 	const [isDialogOpen, setIsDialogOpen] = useState(false);
 	const [editingConfig, setEditingConfig] = useState<ImageGenerationConfig | null>(null);

surfsense_web/components/settings/model-config-manager.tsx

@@ -14,6 +14,7 @@ import {
 } from "lucide-react";
 import { useMemo, useState } from "react";
 import { membersAtom, myAccessAtom } from "@/atoms/members/members-query.atoms";
+import { currentUserAtom } from "@/atoms/user/user-query.atoms";
 import { deleteNewLLMConfigMutationAtom } from "@/atoms/new-llm-config/new-llm-config-mutation.atoms";
 import {
 	globalNewLLMConfigsAtom,
@@ -87,15 +88,14 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
 		return map;
 	}, [members]);
 
-	// Permissions
+	// Permissions — only superusers can create/edit/delete model configs
 	const { data: access } = useAtomValue(myAccessAtom);
-	const canCreate =
-		!!access && (access.is_owner || (access.permissions?.includes("llm_configs:create") ?? false));
-	const canUpdate =
-		!!access && (access.is_owner || (access.permissions?.includes("llm_configs:update") ?? false));
-	const canDelete =
-		!!access && (access.is_owner || (access.permissions?.includes("llm_configs:delete") ?? false));
-	const isReadOnly = !canCreate && !canUpdate && !canDelete;
+	const { data: currentUser } = useAtomValue(currentUserAtom);
+	const isAdmin = !!currentUser?.is_superuser;
+	const canCreate = isAdmin;
+	const canUpdate = isAdmin;
+	const canDelete = isAdmin;
+	const isReadOnly = !isAdmin;
 
 	// Local state
 	const [isDialogOpen, setIsDialogOpen] = useState(false);

surfsense_web/components/settings/vision-model-manager.tsx

@@ -4,6 +4,7 @@ import { useAtomValue } from "jotai";
 import { AlertCircle, Dot, Edit3, Info, RefreshCw, Trash2 } from "lucide-react";
 import { useMemo, useState } from "react";
 import { membersAtom, myAccessAtom } from "@/atoms/members/members-query.atoms";
+import { currentUserAtom } from "@/atoms/user/user-query.atoms";
 import { deleteVisionLLMConfigMutationAtom } from "@/atoms/vision-llm-config/vision-llm-config-mutation.atoms";
 import {
 	globalVisionLLMConfigsAtom,
@@ -78,19 +79,14 @@ export function VisionModelManager({ searchSpaceId }: VisionModelManagerProps) {
 		return map;
 	}, [members]);
 
+	// Permissions — only superusers can create/edit/delete model configs
 	const { data: access } = useAtomValue(myAccessAtom);
-	const canCreate = useMemo(() => {
-		if (!access) return false;
-		if (access.is_owner) return true;
-		return access.permissions?.includes("vision_configs:create") ?? false;
-	}, [access]);
-	const canDelete = useMemo(() => {
-		if (!access) return false;
-		if (access.is_owner) return true;
-		return access.permissions?.includes("vision_configs:delete") ?? false;
-	}, [access]);
-	const canUpdate = canCreate;
-	const isReadOnly = !canCreate && !canDelete;
+	const { data: currentUser } = useAtomValue(currentUserAtom);
+	const isAdmin = !!currentUser?.is_superuser;
+	const canCreate = isAdmin;
+	const canDelete = isAdmin;
+	const canUpdate = isAdmin;
+	const isReadOnly = !isAdmin;
 
 	const [isDialogOpen, setIsDialogOpen] = useState(false);
 	const [editingConfig, setEditingConfig] = useState<VisionLLMConfig | null>(null);

surfsense_web/components/sources/DocumentUploadTab.tsx

@@ -4,6 +4,7 @@ import { useAtom } from "jotai";
 import { ChevronDown, Dot, File as FileIcon, FolderOpen, Upload, X } from "lucide-react";
 
 import { useTranslations } from "next-intl";
+import { useRouter } from "next/navigation";
 import { type ChangeEvent, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useDropzone } from "react-dropzone";
 import { toast } from "sonner";
@@ -132,6 +133,7 @@ export function DocumentUploadTab({
 	onAccordionStateChange,
 }: DocumentUploadTabProps) {
 	const t = useTranslations("upload_documents");
+	const router = useRouter();
 	const [files, setFiles] = useState<FileWithId[]>([]);
 	const [uploadProgress, setUploadProgress] = useState(0);
 	const [accordionValue, setAccordionValue] = useState<string>("");
@@ -379,11 +381,20 @@ export function DocumentUploadTab({
 			setFolderUpload(null);
 			onSuccess?.();
 		} catch (error) {
-			const message = error instanceof Error ? error.message : "Upload failed";
-			trackDocumentUploadFailure(Number(searchSpaceId), message);
-			toast(t("upload_error"), {
-				description: `${t("upload_error_desc")}: ${message}`,
-			});
+			const status = (error as { status?: number }).status;
+			if (status === 402) {
+				const message = error instanceof Error ? error.message : "Page quota exceeded";
+				trackDocumentUploadFailure(Number(searchSpaceId), message);
+				toast.error(message, {
+					action: { label: "Upgrade", onClick: () => router.push("/pricing") },
+				});
+			} else {
+				const message = error instanceof Error ? error.message : "Upload failed";
+				trackDocumentUploadFailure(Number(searchSpaceId), message);
+				toast(t("upload_error"), {
+					description: `${t("upload_error_desc")}: ${message}`,
+				});
+			}
 		} finally {
 			setIsFolderUploading(false);
 			setUploadProgress(0);
@@ -422,11 +433,20 @@ export function DocumentUploadTab({
 				onError: (error: unknown) => {
 					if (progressIntervalRef.current) clearInterval(progressIntervalRef.current);
 					setUploadProgress(0);
-					const message = error instanceof Error ? error.message : "Upload failed";
-					trackDocumentUploadFailure(Number(searchSpaceId), message);
-					toast(t("upload_error"), {
-						description: `${t("upload_error_desc")}: ${message}`,
-					});
+					const status = (error as { status?: number }).status;
+					if (status === 402) {
+						const message = error instanceof Error ? error.message : "Page quota exceeded";
+						trackDocumentUploadFailure(Number(searchSpaceId), message);
+						toast.error(message, {
+							action: { label: "Upgrade", onClick: () => router.push("/pricing") },
+						});
+					} else {
+						const message = error instanceof Error ? error.message : "Upload failed";
+						trackDocumentUploadFailure(Number(searchSpaceId), message);
+						toast(t("upload_error"), {
+							description: `${t("upload_error_desc")}: ${message}`,
+						});
+					}
 				},
 			}
 		);
@@ -533,35 +553,35 @@ export function DocumentUploadTab({
 						</button>
 					)
 				) : (
-				<div
-					role="button"
-					tabIndex={0}
-					className="flex flex-col items-center gap-4 py-12 px-4 cursor-pointer w-full bg-transparent outline-none select-none"
-					onClick={() => {
-						if (!isElectron) fileInputRef.current?.click();
-					}}
-					onKeyDown={(e) => {
-						if (e.key === "Enter" || e.key === " ") {
-							e.preventDefault();
+					<div
+						role="button"
+						tabIndex={0}
+						className="flex flex-col items-center gap-4 py-12 px-4 cursor-pointer w-full bg-transparent outline-none select-none"
+						onClick={() => {
 							if (!isElectron) fileInputRef.current?.click();
-						}
-					}}
-				>
-					<Upload className="h-10 w-10 text-muted-foreground" />
-					<div className="text-center space-y-1.5">
-						<p className="text-base font-medium">
-							{isElectron ? t("select_files_or_folder") : t("tap_select_files_or_folder")}
-						</p>
-						<p className="text-sm text-muted-foreground">{t("file_size_limit")}</p>
-					</div>
-					<fieldset
-						className="w-full mt-1 border-none p-0 m-0"
-						onClick={(e) => e.stopPropagation()}
-						onKeyDown={(e) => e.stopPropagation()}
+						}}
+						onKeyDown={(e) => {
+							if (e.key === "Enter" || e.key === " ") {
+								e.preventDefault();
+								if (!isElectron) fileInputRef.current?.click();
+							}
+						}}
 					>
-						{renderBrowseButton({ fullWidth: true })}
-					</fieldset>
-				</div>
+						<Upload className="h-10 w-10 text-muted-foreground" />
+						<div className="text-center space-y-1.5">
+							<p className="text-base font-medium">
+								{isElectron ? t("select_files_or_folder") : t("tap_select_files_or_folder")}
+							</p>
+							<p className="text-sm text-muted-foreground">{t("file_size_limit")}</p>
+						</div>
+						<fieldset
+							className="w-full mt-1 border-none p-0 m-0"
+							onClick={(e) => e.stopPropagation()}
+							onKeyDown={(e) => e.stopPropagation()}
+						>
+							{renderBrowseButton({ fullWidth: true })}
+						</fieldset>
+					</div>
 				)}
 			</div>