Merge remote-tracking branch 'upstream/dev' into feat/human-in-the-loop

surfsense_web/Dockerfile

@@ -71,7 +71,7 @@ COPY --from=builder /app/public ./public
 
 # Automatically leverage output traces to reduce image size
 # https://nextjs.org/docs/advanced-features/output-file-tracing
-COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone/app/ ./
 COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
 
 # Entrypoint scripts for runtime env var substitution

surfsense_web/atoms/user/user-mutation.atoms.ts

@@ -1,18 +1,18 @@
 import { atomWithMutation, queryClientAtom } from "jotai-tanstack-query";
 import type { UpdateUserRequest } from "@/contracts/types/user.types";
 import { userApiService } from "@/lib/apis/user-api.service";
-import { cacheKeys } from "@/lib/query-client/cache-keys";
+import { USER_QUERY_KEY } from "./user-query.atoms";
 
 export const updateUserMutationAtom = atomWithMutation((get) => {
 	const queryClient = get(queryClientAtom);
 
 	return {
-		mutationKey: cacheKeys.user.current(),
+		mutationKey: USER_QUERY_KEY,
 		mutationFn: async (request: UpdateUserRequest) => {
 			return userApiService.updateMe(request);
 		},
 		onSuccess: () => {
-			queryClient.invalidateQueries({ queryKey: cacheKeys.user.current() });
+			queryClient.invalidateQueries({ queryKey: USER_QUERY_KEY });
 		},
 	};
 });

surfsense_web/atoms/user/user-query.atoms.ts

@@ -1,14 +1,16 @@
 import { atomWithQuery } from "jotai-tanstack-query";
 import { userApiService } from "@/lib/apis/user-api.service";
 import { getBearerToken, isPublicRoute } from "@/lib/auth-utils";
-import { cacheKeys } from "@/lib/query-client/cache-keys";
+
+export const USER_QUERY_KEY = ["user", "me"] as const;
+const userQueryFn = () => userApiService.getMe();
 
 export const currentUserAtom = atomWithQuery(() => {
 	const pathname = typeof window !== "undefined" ? window.location.pathname : null;
 	return {
-		queryKey: cacheKeys.user.current(),
-		staleTime: 5 * 60 * 1000, // 5 minutes
+		queryKey: USER_QUERY_KEY,
+		staleTime: 5 * 60 * 1000,
 		enabled: !!getBearerToken() && pathname !== null && !isPublicRoute(pathname),
-		queryFn: async () => userApiService.getMe(),
+		queryFn: userQueryFn,
 	};
 });

surfsense_web/components/ui/hero-carousel.tsx

@@ -152,13 +152,38 @@ function usePrefetchVideos() {
 	}, []);
 }
 
+const AUTOPLAY_MS = 6000;
+
 function HeroCarousel() {
 	const [activeIndex, setActiveIndex] = useState(0);
 	const [isGifExpanded, setIsGifExpanded] = useState(false);
+	const [isHovered, setIsHovered] = useState(false);
+	const [isTabVisible, setIsTabVisible] = useState(true);
 	const directionRef = useRef<"forward" | "backward">("forward");
 
 	usePrefetchVideos();
 
+	const shouldAutoPlay = !isGifExpanded && !isHovered && isTabVisible;
+
+	useEffect(() => {
+		if (!shouldAutoPlay) return;
+
+		const id = setTimeout(() => {
+			directionRef.current = "forward";
+			setActiveIndex((prev) =>
+				prev >= carouselItems.length - 1 ? 0 : prev + 1
+			);
+		}, AUTOPLAY_MS);
+
+		return () => clearTimeout(id);
+	}, [activeIndex, shouldAutoPlay]);
+
+	useEffect(() => {
+		const handler = () => setIsTabVisible(!document.hidden);
+		document.addEventListener("visibilitychange", handler);
+		return () => document.removeEventListener("visibilitychange", handler);
+	}, []);
+
 	const goTo = useCallback(
 		(newIndex: number) => {
 			directionRef.current = newIndex >= activeIndex ? "forward" : "backward";
@@ -179,7 +204,11 @@ function HeroCarousel() {
 	const isForward = directionRef.current === "forward";
 
 	return (
-		<div className="w-full py-4 sm:py-8">
+		<div
+			className="w-full py-4 sm:py-8"
+			onMouseEnter={() => setIsHovered(true)}
+			onMouseLeave={() => setIsHovered(false)}
+		>
 			<div className="relative mx-auto w-full max-w-[900px]">
 				<AnimatePresence mode="wait" initial={false}>
 					<motion.div
@@ -215,13 +244,25 @@ function HeroCarousel() {
 							key={`dot_${i}`}
 							type="button"
 							onClick={() => !isGifExpanded && goTo(i)}
-							className={`h-2 rounded-full transition-all duration-300 ${
+							className={`relative h-2 overflow-hidden rounded-full transition-all duration-300 ${
 								i === activeIndex
-									? "w-6 bg-neutral-900 dark:bg-white"
+									? shouldAutoPlay
+										? "w-6 bg-neutral-300 dark:bg-neutral-600"
+										: "w-6 bg-neutral-900 dark:bg-white"
 									: "w-2 bg-neutral-300 hover:bg-neutral-400 dark:bg-neutral-600 dark:hover:bg-neutral-500"
 							}`}
 							aria-label={`Go to slide ${i + 1}`}
-						/>
+						>
+							{i === activeIndex && shouldAutoPlay && (
+								<motion.span
+									key={`progress_${activeIndex}`}
+									className="absolute inset-0 origin-left rounded-full bg-neutral-900 dark:bg-white"
+									initial={{ scaleX: 0 }}
+									animate={{ scaleX: 1 }}
+									transition={{ duration: AUTOPLAY_MS / 1000, ease: "linear" }}
+								/>
+							)}
+						</button>
 					))}
 				</div>
 

surfsense_web/next.config.ts

@@ -1,3 +1,4 @@
+import path from "path";
 import { createMDX } from "fumadocs-mdx/next";
 import type { NextConfig } from "next";
 import createNextIntlPlugin from "next-intl/plugin";
@@ -5,8 +6,12 @@ import createNextIntlPlugin from "next-intl/plugin";
 // Create the next-intl plugin
 const withNextIntl = createNextIntlPlugin("./i18n/request.ts");
 
+// TODO: Separate app routes (/login, /dashboard) from marketing routes
+// (landing page, /contact, /pricing, /docs) so the desktop build only
+// ships what desktop users actually need.
 const nextConfig: NextConfig = {
 	output: "standalone",
+	outputFileTracingRoot: path.join(__dirname, ".."),
 	reactStrictMode: false,
 	typescript: {
 		ignoreBuildErrors: true,