[pull] main from supermemoryai:main

apps/web/app/(app)/onboarding/page.tsx

@@ -172,7 +172,7 @@ function buildSpotlightCatalog(
 		analytics.onboardingIntegrationClicked({ integration })
 
 	const openPluginsPanel = () => {
-		void router.push("/?view=integrations&plugins=true")
+		void router.push("/?view=plugins")
 	}
 
 	return {
@@ -229,7 +229,7 @@ function buildSpotlightCatalog(
 				pro: true,
 				onOpen: () => {
 					track("connections")
-					void router.push("/?view=integrations&integration=connections")
+					void router.push("/?view=connections")
 				},
 			},
 		],
@@ -272,7 +272,7 @@ function buildSpotlightCatalog(
 				icon: <img src="/onboarding/x.png" alt="X" className="size-10" />,
 				onOpen: () => {
 					track("import_x")
-					void router.push("/?view=integrations&integration=import")
+					void router.push("/?view=import")
 				},
 			},
 		],

apps/web/app/(app)/page.tsx

@@ -10,12 +10,19 @@ import {
 } from "react"
 import { AnimatePresence, motion } from "motion/react"
 import { useQueryState } from "nuqs"
-import { Header } from "@/components/header"
+import { Header, PublicHeader } from "@/components/header"
 import { ChatSidebar, HomeChatComposer } from "@/components/chat"
 import { DashboardView } from "@/components/dashboard-view"
 import { MemoriesGrid } from "@/components/memories-grid"
 import { GraphLayoutView } from "@/components/graph-layout-view"
-import { IntegrationsView } from "@/components/integrations-view"
+import { IntegrationsView, DetailWrapper } from "@/components/integrations-view"
+import { MCPDetailView } from "@/components/mcp-modal/mcp-detail-view"
+import { XBookmarksDetailView } from "@/components/onboarding/x-bookmarks-detail-view"
+import { ChromeDetail } from "@/components/integrations/chrome-detail"
+import { ShortcutsDetail } from "@/components/integrations/shortcuts-detail"
+import { RaycastDetail } from "@/components/integrations/raycast-detail"
+import { ConnectionsDetail } from "@/components/integrations/connections-detail"
+import { PluginsDetail } from "@/components/integrations/plugins-detail"
 import { AnimatedGradientBackground } from "@/components/animated-gradient-background"
 import { AddDocumentModal } from "@/components/add-document"
 import { DocumentModal } from "@/components/document-modal"
@@ -50,8 +57,6 @@ import {
 	qParam,
 	docParam,
 	fullscreenParam,
-	integrationParam,
-	pluginsPanelParam,
 	type IntegrationParamValue,
 } from "@/lib/search-params"
 import { getChatSpaceDisplayLabel } from "@/lib/chat-space-label"
@@ -148,20 +153,6 @@ export default function NewPage() {
 		"fullscreen",
 		fullscreenParam,
 	)
-	const [integrationFromUrl, setIntegration] = useQueryState(
-		"integration",
-		integrationParam,
-	)
-	const [pluginsPanelFromUrl, setPluginsPanel] = useQueryState(
-		"plugins",
-		pluginsPanelParam,
-	)
-
-	useEffect(() => {
-		if (integrationFromUrl || pluginsPanelFromUrl === true) {
-			void setViewMode("integrations")
-		}
-	}, [integrationFromUrl, pluginsPanelFromUrl, setViewMode])
 
 	// Ephemeral local state (not worth URL-encoding)
 	const [fullscreenInitialContent, setFullscreenInitialContent] = useState("")
@@ -494,20 +485,14 @@ export default function NewPage() {
 
 	const handleOpenIntegrations = useCallback(
 		(integration?: IntegrationParamValue) => {
-			setViewMode("integrations")
-			if (integration) {
-				setIntegration(integration)
-			} else {
-				setIntegration(null)
-			}
+			void setViewMode(integration ?? "integrations")
 		},
-		[setViewMode, setIntegration],
+		[setViewMode],
 	)
 
 	const handleOpenPlugins = useCallback(() => {
-		void setViewMode("integrations")
-		void setPluginsPanel(true)
-	}, [setViewMode, setPluginsPanel])
+		void setViewMode("plugins")
+	}, [setViewMode])
 
 	const handleAddMemory = useCallback(
 		(tab: "note" | "link") => {
@@ -564,16 +549,20 @@ export default function NewPage() {
 						/>
 					</>
 				)}
-				<Header
-					onAddMemory={() => {
-						analytics.addDocumentModalOpened()
-						setAddDoc("note")
-					}}
-					onOpenSearch={() => {
-						analytics.searchOpened({ source: "header" })
-						setIsSearchOpen(true)
-					}}
-				/>
+				{!session && viewMode === "mcp" ? (
+					<PublicHeader />
+				) : (
+					<Header
+						onAddMemory={() => {
+							analytics.addDocumentModalOpened()
+							setAddDoc("note")
+						}}
+						onOpenSearch={() => {
+							analytics.searchOpened({ source: "header" })
+							setIsSearchOpen(true)
+						}}
+					/>
+				)}
 				<AnimatePresence mode="wait">
 					<motion.main
 						key={`main-container-${viewMode}`}
@@ -611,6 +600,44 @@ export default function NewPage() {
 									<div className="min-h-0 min-w-0 flex-1 p-4 pt-2! md:p-6 md:pr-0">
 										<IntegrationsView />
 									</div>
+								) : viewMode === "mcp" ? (
+									<MCPDetailView
+										onBack={() => void setViewMode("integrations")}
+									/>
+								) : viewMode === "plugins" ? (
+									<DetailWrapper
+										onBack={() => void setViewMode("integrations")}
+									>
+										<PluginsDetail />
+									</DetailWrapper>
+								) : viewMode === "chrome" ? (
+									<DetailWrapper
+										onBack={() => void setViewMode("integrations")}
+									>
+										<ChromeDetail />
+									</DetailWrapper>
+								) : viewMode === "shortcuts" ? (
+									<DetailWrapper
+										onBack={() => void setViewMode("integrations")}
+									>
+										<ShortcutsDetail />
+									</DetailWrapper>
+								) : viewMode === "raycast" ? (
+									<DetailWrapper
+										onBack={() => void setViewMode("integrations")}
+									>
+										<RaycastDetail />
+									</DetailWrapper>
+								) : viewMode === "connections" ? (
+									<DetailWrapper
+										onBack={() => void setViewMode("integrations")}
+									>
+										<ConnectionsDetail />
+									</DetailWrapper>
+								) : viewMode === "import" ? (
+									<XBookmarksDetailView
+										onBack={() => void setViewMode("integrations")}
+									/>
 								) : viewMode === "graph" && !isMobile ? (
 									<div className="min-h-0 min-w-0 flex-1">
 										<GraphLayoutView />

apps/web/app/auth/connect/page.tsx

@@ -349,7 +349,7 @@ function AuthConnectContent() {
 						</button>
 
 						<a
-							href="https://app.supermemory.ai/?plugins=true"
+							href="https://app.supermemory.ai/?view=plugins"
 							className={dmSans125ClassName(
 								"text-[12px] text-[#737373] hover:text-[#FAFAFA] transition-colors",
 							)}

apps/web/components/ensure-workspace.tsx

@@ -1,15 +1,19 @@
 "use client"
 
 import { useEffect } from "react"
-import { usePathname, useRouter } from "next/navigation"
+import { usePathname, useRouter, useSearchParams } from "next/navigation"
 import { useAuth } from "@lib/auth-context"
 
 export function EnsureWorkspace({ children }: { children: React.ReactNode }) {
 	const pathname = usePathname()
 	const router = useRouter()
+	const searchParams = useSearchParams()
 	const { session, organizations, isRestoring } = useAuth()
 
+	const isMcpPublicPage = searchParams.get("view") === "mcp"
+
 	useEffect(() => {
+		if (isMcpPublicPage) return
 		if (isRestoring) return
 		if (!session) {
 			router.replace(
@@ -21,7 +25,7 @@ export function EnsureWorkspace({ children }: { children: React.ReactNode }) {
 		if (organizations.length > 0) return
 		if (pathname.startsWith("/onboarding")) return
 		router.replace("/onboarding")
-	}, [session, organizations, isRestoring, pathname, router])
+	}, [session, organizations, isRestoring, pathname, router, isMcpPublicPage])
 
 	return children
 }

apps/web/components/header.tsx

@@ -187,11 +187,37 @@ export function Header({ onAddMemory, onOpenSearch }: HeaderProps) {
 								key={mode}
 								type="button"
 								role="tab"
-								aria-selected={viewMode === mode}
+								aria-selected={
+									mode === "integrations"
+										? [
+												"integrations",
+												"mcp",
+												"plugins",
+												"chrome",
+												"connections",
+												"shortcuts",
+												"raycast",
+												"import",
+											].includes(viewMode)
+										: viewMode === mode
+								}
 								onClick={() => void setViewMode(mode)}
 								className={cn(
 									"inline-flex h-[calc(100%-1px)] min-h-0 cursor-pointer items-center justify-center gap-1 rounded-full border border-transparent px-2.5 text-xs font-medium whitespace-nowrap transition-colors sm:gap-1.5 sm:px-3 sm:text-sm",
-									viewMode === mode
+									(
+										mode === "integrations"
+											? [
+													"integrations",
+													"mcp",
+													"plugins",
+													"chrome",
+													"connections",
+													"shortcuts",
+													"raycast",
+													"import",
+												].includes(viewMode)
+											: viewMode === mode
+									)
 										? "border-[#2261CA33] bg-[#00173C] text-white"
 										: "text-foreground hover:bg-white/5",
 									dmSansClassName(),
@@ -375,3 +401,56 @@ export function Header({ onAddMemory, onOpenSearch }: HeaderProps) {
 		</div>
 	)
 }
+
+export function PublicHeader() {
+	return (
+		<div className="relative z-10 flex shrink-0 items-center justify-between gap-2 p-2.5 md:p-3">
+			<Link
+				href="/"
+				className="flex items-center gap-2 hover:opacity-90 transition-opacity"
+			>
+				<Logo className="h-6 md:h-7" />
+				<div className="hidden sm:flex flex-col items-start">
+					<p className="text-[10px] leading-tight text-[#6B6B6B]">Your AI</p>
+					<p className="-mt-0.5 text-base leading-none font-medium text-white/90">
+						supermemory
+					</p>
+				</div>
+			</Link>
+
+			<div className="flex items-center gap-2">
+				<p
+					className={cn(
+						"hidden md:block text-[13px] text-[#4B5563]",
+						dmSansClassName(),
+					)}
+				>
+					Connect your tools, search everything.
+				</p>
+				<Link href="/login">
+					<button
+						type="button"
+						className={cn(
+							"text-[13px] font-medium text-[#8B8B8B] hover:text-white transition-colors px-3 h-8 cursor-pointer",
+							dmSansClassName(),
+						)}
+					>
+						Sign in
+					</button>
+				</Link>
+				<Link href="/login/new">
+					<button
+						type="button"
+						className={cn(
+							"flex items-center gap-1.5 text-[13px] font-medium text-white",
+							"bg-[#4BA0FA] hover:bg-[#4BA0FA]/90 rounded-full px-4 h-8 transition-colors cursor-pointer",
+							dmSansClassName(),
+						)}
+					>
+						Get started free
+					</button>
+				</Link>
+			</div>
+		</div>
+	)
+}