[pull] main from supermemoryai:main

apps/web/components/brain-home/brain-home-view.tsx

@@ -8,6 +8,8 @@ import { ArrowRight, Check, FileText, Loader2, UserPlus } from "lucide-react"
 import { useQueryState } from "nuqs"
 import { useSettingsModal } from "@/components/settings/settings-modal"
 import { useBrainTrial } from "@/hooks/use-brain-trial"
+import { TrialSetupBanner } from "@/components/trial-setup-banner"
+import { useTrialStatus } from "@/hooks/use-trial-status"
 import { dmSans125ClassName } from "@/lib/fonts"
 import { useViewMode } from "@/lib/view-mode-context"
 import {
@@ -170,6 +172,7 @@ export function BrainHomeView() {
 	const o = useBrainOverview()
 	const trial = useBrainTrial()
 	const board = useConnectionsBoard()
+	const { needsSetup } = useTrialStatus()
 	// Rows with no reported state (older orgs, pre-Slack) don't count or render.
 	const milestones = [
 		...(o.researchStatus != null ? [o.researchStatus === "done"] : []),
@@ -186,6 +189,7 @@ export function BrainHomeView() {
 
 	return (
 		<div className="mx-auto max-w-[1080px] space-y-6">
+			<TrialSetupBanner />
 			<StatsRow
 				memories={o.memoriesCount}
 				connected={o.connectedCount}
@@ -195,7 +199,7 @@ export function BrainHomeView() {
 				setupTotal={milestonesTotal}
 				lastUpdatedAt={o.lastUpdatedAt}
 			/>
-			{board.slack && !board.slack.connected && <SlackBanner />}
+			{board.slack && !board.slack.connected && !needsSetup && <SlackBanner />}
 			<div className="grid items-start gap-6 lg:grid-cols-[minmax(0,1fr)_340px]">
 				<div className="min-w-0 space-y-6">
 					{board.showBoard && <ConnectToolsCard board={board} />}
@@ -486,7 +490,7 @@ function BrainTimeline({
 	canInvite: boolean
 	toolsCardVisible: boolean
 }) {
-	const trial = useBrainTrial()
+	const { needsSetup } = useTrialStatus()
 	const { openSettings } = useSettingsModal()
 	const { setViewMode } = useViewMode()
 	const [, setInvite] = useQueryState("invite")
@@ -532,12 +536,13 @@ function BrainTimeline({
 			title: slackConnected ? "Slack connected" : "Connect Slack",
 			hint: slackConnected
 				? undefined
-				: trial.state === "trialing"
-					? "Ask your brain from any channel."
-					: "Starts your 14-day free trial. No credit card needed.",
-			action: slackConnected
-				? undefined
-				: { label: "Add", href: `${BACKEND}/brain/slack/oauth/install` },
+				: needsSetup
+					? "Starts with your trial."
+					: "Ask your brain from any channel.",
+			action:
+				slackConnected || needsSetup
+					? undefined
+					: { label: "Add", href: `${BACKEND}/brain/slack/oauth/install` },
 		},
 		...(rollout != null
 			? [

apps/web/components/brain-home/connections-board.tsx

@@ -4,6 +4,7 @@ import { cn } from "@lib/utils"
 import { ArrowRight, Loader2 } from "lucide-react"
 import { useCallback, useEffect, useState } from "react"
 import { toast } from "sonner"
+import { useTrialStatus } from "@/hooks/use-trial-status"
 import { dmSans125ClassName } from "@/lib/fonts"
 import { useViewMode } from "@/lib/view-mode-context"
 import { brainConnectorIcon, SlackMark } from "../brain-connector-icons"
@@ -192,6 +193,7 @@ export const CONNECT_TOOLS_CARD_ID = "connect-tools"
 export function ConnectToolsCard({ board }: { board: ConnectionsBoardState }) {
 	const { setViewMode } = useViewMode()
 	const { loading, featured, overflow, busy, isConnected, connect } = board
+	const { needsSetup } = useTrialStatus()
 
 	return (
 		<section
@@ -209,11 +211,19 @@ export function ConnectToolsCard({ board }: { board: ConnectionsBoardState }) {
 					Connect your tools
 				</p>
 				<p className="mt-0.5 text-[12px] font-medium text-[#737373]">
-					Give your Slack agent live access to the apps your team already uses.
+					{needsSetup
+						? "Starts with your trial."
+						: "Give your Slack agent live access to the apps your team already uses."}
 				</p>
 			</div>
 
-			<div className="overflow-hidden rounded-[12px] bg-[#14161A]">
+			<div
+				className={cn(
+					"overflow-hidden rounded-[12px] bg-[#14161A]",
+					needsSetup && "pointer-events-none opacity-40 select-none",
+				)}
+				aria-disabled={needsSetup || undefined}
+			>
 				{loading ? (
 					Array.from({ length: 3 }).map((_, i) => (
 						<TileSkeleton key={i} showDivider={i < 2} />
@@ -248,6 +258,7 @@ export function ConnectToolsCard({ board }: { board: ConnectionsBoardState }) {
 
 export function AskInSlackCard({ board }: { board: ConnectionsBoardState }) {
 	const { previewApps, isConnected, connectedCount } = board
+	const { needsSetup } = useTrialStatus()
 	const prompts = previewApps
 		.filter((a) => AGENT_PROMPTS[a.slug])
 		.slice(0, 6)
@@ -275,12 +286,19 @@ export function AskInSlackCard({ board }: { board: ConnectionsBoardState }) {
 				</p>
 			</div>
 			<p className="text-[12px] font-medium leading-[1.5] text-[#737373]">
-				{connectedCount > 0
-					? "Things your agent can answer now:"
-					: "Connect a tool and your agent can answer:"}
+				{needsSetup
+					? "Starts with your trial."
+					: connectedCount > 0
+						? "Things your agent can answer now:"
+						: "Connect a tool and your agent can answer:"}
 			</p>
 
-			<div className="overflow-hidden rounded-[12px] bg-[#14161A]">
+			<div
+				className={cn(
+					"overflow-hidden rounded-[12px] bg-[#14161A]",
+					needsSetup && "opacity-40 select-none",
+				)}
+			>
 				{prompts.map((p, i) => (
 					<div
 						key={p.slug}
@@ -426,6 +444,7 @@ function TileSkeleton({ showDivider = false }: { showDivider?: boolean }) {
 }
 
 export function SlackBanner() {
+	const { needsSetup } = useTrialStatus()
 	return (
 		<section
 			className="relative overflow-hidden rounded-[18px] bg-[#1B1F24] p-3.5 sm:p-5"
@@ -472,12 +491,20 @@ export function SlackBanner() {
 				</div>
 
 				<a
-					href={`${BACKEND}/brain/slack/oauth/install`}
+					href={
+						needsSetup ? "/onboarding" : `${BACKEND}/brain/slack/oauth/install`
+					}
 					className="inline-flex shrink-0 items-center justify-center rounded-lg bg-white px-3 py-1.5 text-[13px] font-semibold text-[#1D1C1D] transition-transform hover:scale-[1.02] sm:gap-2 sm:px-4 sm:py-2.5 sm:text-[14px]"
 				>
-					<SlackMark className="hidden sm:block sm:size-[18px]" />
-					<span className="sm:hidden">Add</span>
-					<span className="hidden sm:inline">Add to Slack</span>
+					{needsSetup ? (
+						<span>Start trial</span>
+					) : (
+						<>
+							<SlackMark className="hidden sm:block sm:size-[18px]" />
+							<span className="sm:hidden">Add</span>
+							<span className="hidden sm:inline">Add to Slack</span>
+						</>
+					)}
 				</a>
 			</div>
 		</section>

apps/web/components/dashboard-view.tsx

@@ -32,6 +32,7 @@ import { StaticGraphPreview } from "@/components/memory-graph/graph-card"
 import { Tooltip, TooltipContent, TooltipTrigger } from "@ui/components/tooltip"
 import { ChromeIcon, RaycastIcon } from "@/components/integration-icons"
 import { SlackConnectCard } from "@/components/slack-connect-card"
+import { TrialSetupBanner } from "@/components/trial-setup-banner"
 import { GoogleDrive, Notion, MCPIcon } from "@ui/assets/icons"
 import { analytics } from "@/lib/analytics"
 import type { IntegrationParamValue } from "@/lib/search-params"
@@ -1344,6 +1345,7 @@ export function DashboardView({
 			)}
 		>
 			<div className="mx-auto w-full max-w-4xl space-y-4 md:space-y-5">
+				<TrialSetupBanner />
 				<SlackConnectCard />
 				{headerNotice ? <div className="space-y-2">{headerNotice}</div> : null}
 

apps/web/components/onboarding-brain/company-brain-onboarding.tsx

@@ -30,6 +30,9 @@ import {
 	UserAvatar,
 } from "./step-about"
 import { ResearchActionRail } from "./research-action-rail"
+import { CHECKOUT_RETURN_PARAM, StepTrial } from "./step-trial"
+import { useTrialStatus } from "@/hooks/use-trial-status"
+import { analytics } from "@/lib/analytics"
 import {
 	type CompanyBrainConfirmResult,
 	type CompanyBrainOrganizationChoice,
@@ -52,7 +55,7 @@ interface CompanyBrainOnboardingProps {
 const BACKEND =
 	process.env.NEXT_PUBLIC_BACKEND_URL ?? "https://api.supermemory.ai"
 
-type Phase = "confirm" | "research"
+type Phase = "confirm" | "trial" | "research"
 
 function normalizeDomain(input: string): string {
 	const host = input
@@ -82,6 +85,23 @@ export function CompanyBrainOnboarding({
 	onUsePersonal,
 }: CompanyBrainOnboardingProps) {
 	const [phase, setPhase] = useState<Phase>("confirm")
+	const { needsSetup } = useTrialStatus()
+	const resumedRef = useRef(false)
+	useEffect(() => {
+		if (resumedRef.current) return
+		const url = new URL(window.location.href)
+		if (url.searchParams.get(CHECKOUT_RETURN_PARAM) !== "complete") return
+		resumedRef.current = true
+		url.searchParams.delete(CHECKOUT_RETURN_PARAM)
+		window.history.replaceState({}, "", `${url.pathname}${url.search}`)
+		setPhase("research")
+	}, [])
+	useEffect(() => {
+		if (resumedRef.current || !needsSetup || phase !== "confirm") return
+		resumedRef.current = true
+		setPhase("trial")
+		analytics.brainTrialCardViewed()
+	}, [needsSetup, phase])
 	const [domain, setDomain] = useState(initialDomain)
 	const [organizationChoices, setOrganizationChoices] = useState<
 		CompanyBrainOrganizationChoice[] | null
@@ -107,7 +127,8 @@ export function CompanyBrainOnboarding({
 		}
 		setOrganizationChoices(null)
 		setServerSchedulesResearch(result.serverSchedulesResearch)
-		setPhase("research")
+		setPhase("trial")
+		analytics.brainTrialCardViewed()
 	}
 
 	// New-org signup schedules research after provisioning; if that hook is slow
@@ -203,9 +224,9 @@ export function CompanyBrainOnboarding({
 			<main
 				className={cn(
 					"relative z-10 flex-1 flex flex-col min-h-0",
-					phase === "confirm"
-						? "justify-center items-center px-4 md:px-10"
-						: "justify-start items-stretch pt-2 px-4 md:px-8 xl:px-14",
+					phase === "research"
+						? "justify-start items-stretch pt-2 px-4 md:px-8 xl:px-14"
+						: "justify-center items-center px-4 md:px-10",
 				)}
 			>
 				{/* Persistent card: full confirm card, then morphs into a slim docked header. */}
@@ -215,13 +236,25 @@ export function CompanyBrainOnboarding({
 					style={cardSurfaceStyle}
 					className={cn(
 						"w-full mx-auto rounded-[22px] bg-[#1B1F24]",
-						phase === "confirm"
-							? "max-w-xl p-6 md:p-8"
-							: "max-w-7xl px-5 py-3 xl:max-w-[1360px]",
+						phase === "research"
+							? "max-w-7xl px-5 py-3 xl:max-w-[1360px]"
+							: phase === "trial"
+								? "max-w-4xl p-6 md:p-7"
+								: "max-w-xl p-6 md:p-8",
 					)}
 				>
 					<AnimatePresence mode="wait" initial={false}>
-						{phase === "confirm" ? (
+						{phase === "trial" ? (
+							<motion.div
+								key="trial"
+								initial={{ opacity: 0 }}
+								animate={{ opacity: 1 }}
+								exit={{ opacity: 0 }}
+								transition={{ duration: 0.15 }}
+							>
+								<StepTrial onActive={() => setPhase("research")} />
+							</motion.div>
+						) : phase === "confirm" ? (
 							<motion.div
 								key="confirm"
 								initial={{ opacity: 0 }}

apps/web/components/onboarding-brain/research-action-rail.tsx

@@ -536,7 +536,7 @@ function SlackStepBody({
 				Add to Slack
 			</a>
 			<p className="mt-2 text-center text-[11px] font-medium leading-[1.5] text-[#525D6E]">
-				Starts your 14-day free trial. No credit card needed.
+				Included in your 14-day trial.
 			</p>
 		</div>
 	)