[pull] main from supermemoryai:main

apps/web/app/(app)/configure/[section]/page.tsx

@@ -6,12 +6,22 @@ import {
 
 export default async function ConfigureSectionPage({
 	params,
+	searchParams,
 }: {
 	params: Promise<{ section: string }>
+	searchParams: Promise<Record<string, string | string[] | undefined>>
 }) {
 	const { section } = await params
-	// Default section is canonical at /configure.
-	if (section === DEFAULT_CONFIGURE_SECTION) redirect("/configure")
+	// Carry the query across, else deep links like ?mcpSetup= are dropped here.
+	if (section === DEFAULT_CONFIGURE_SECTION) {
+		const query = new URLSearchParams()
+		for (const [key, value] of Object.entries(await searchParams)) {
+			if (typeof value === "string") query.set(key, value)
+			else if (Array.isArray(value)) for (const v of value) query.append(key, v)
+		}
+		const search = query.toString()
+		redirect(search ? `/configure?${search}` : "/configure")
+	}
 	if (!isConfigureSection(section)) notFound()
 	return null
 }

apps/web/app/api/mcp-icon/route.ts

@@ -0,0 +1,58 @@
+import { type NextRequest, NextResponse } from "next/server"
+import iconDomains from "@/lib/mcp-icon-domains.json"
+
+const DOMAIN_RE =
+	/^(?=.{1,253}$)(?:[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?\.)+[a-z]{2,63}$/i
+const MAX_ICON_BYTES = 256 * 1024
+
+const ALLOWED_DOMAINS = new Set(iconDomains.domains)
+
+export async function GET(request: NextRequest) {
+	const domain = request.nextUrl.searchParams
+		.get("domain")
+		?.trim()
+		.toLowerCase()
+	if (!domain || !DOMAIN_RE.test(domain) || !ALLOWED_DOMAINS.has(domain)) {
+		return new NextResponse(null, { status: 400 })
+	}
+
+	const response = await fetch(
+		`https://www.google.com/s2/favicons?domain=${encodeURIComponent(domain)}&sz=128`,
+		{ next: { revalidate: 60 * 60 * 24 * 7 } },
+	)
+	const contentType = response.headers.get("content-type") ?? ""
+	if (!response.ok || !contentType.startsWith("image/")) {
+		return new NextResponse(null, { status: 404 })
+	}
+	const contentLength = Number(response.headers.get("content-length") ?? 0)
+	if (contentLength > MAX_ICON_BYTES) {
+		return new NextResponse(null, { status: 413 })
+	}
+	if (!response.body) return new NextResponse(null, { status: 404 })
+	const reader = response.body.getReader()
+	const chunks: Uint8Array[] = []
+	let bytes = 0
+	while (true) {
+		const { done, value } = await reader.read()
+		if (done) break
+		bytes += value.byteLength
+		if (bytes > MAX_ICON_BYTES) {
+			await reader.cancel()
+			return new NextResponse(null, { status: 413 })
+		}
+		chunks.push(value)
+	}
+	const body = new Uint8Array(bytes)
+	let offset = 0
+	for (const chunk of chunks) {
+		body.set(chunk, offset)
+		offset += chunk.byteLength
+	}
+	return new NextResponse(body, {
+		headers: {
+			"cache-control":
+				"public, max-age=86400, s-maxage=604800, stale-while-revalidate=2592000",
+			"content-type": contentType,
+		},
+	})
+}

apps/web/components/brain-connector-icons.tsx

@@ -1,5 +1,5 @@
 import { cn } from "@lib/utils"
-import { Gmail, Granola, Notion } from "@ui/assets/icons"
+import { Gmail, GoogleDrive, Granola, Notion } from "@ui/assets/icons"
 import { dmSans125ClassName } from "@/lib/fonts"
 
 export function SlackMark({ className }: { className?: string }) {
@@ -99,6 +99,8 @@ export function brainConnectorIcon(
 	className = "size-[18px]",
 ): React.ReactNode {
 	switch (slug) {
+		case "google-drive":
+			return <GoogleDrive className={className} />
 		case "gmail":
 			return <Gmail className={className} />
 		case "github":

apps/web/components/directory/connector-card.tsx

@@ -0,0 +1,82 @@
+"use client"
+
+import { cn } from "@lib/utils"
+import type { ReactNode } from "react"
+import { dmSans125ClassName } from "@/lib/fonts"
+
+// Shared connector/integration card shell: icon, name, subtitle, optional
+// top-right slot, and a footer split into a status side and an action side.
+export function ConnectorCard({
+	icon,
+	name,
+	subtitle,
+	topRight,
+	footerLeft,
+	footerRight,
+}: {
+	icon: ReactNode
+	name: string
+	subtitle: string
+	topRight?: ReactNode
+	footerLeft: ReactNode
+	footerRight?: ReactNode
+}) {
+	return (
+		<div className="flex h-full min-w-0 flex-col justify-between gap-3 rounded-xl bg-[#14161A] p-4 shadow-[inset_2.42px_2.42px_4.263px_rgba(11,15,21,0.7)]">
+			<div className="flex min-w-0 items-start gap-3">
+				<div className="flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-[10px] bg-[#080B0F] shadow-[inset_1.5px_1.5px_4.5px_rgba(0,0,0,0.6)]">
+					{icon}
+				</div>
+				<div className="min-w-0 flex-1 pt-0.5">
+					<p
+						className={cn(
+							dmSans125ClassName(),
+							"truncate font-semibold text-[14px] tracking-[-0.15px] text-[#FAFAFA]",
+						)}
+					>
+						{name}
+					</p>
+					<p
+						className={cn(
+							dmSans125ClassName(),
+							"mt-1 line-clamp-2 break-words text-[12px] font-medium leading-5 text-[#737373]",
+						)}
+					>
+						{subtitle}
+					</p>
+				</div>
+				{topRight}
+			</div>
+			<div className="flex min-h-9 items-center justify-between gap-3 border-[#1E293B]/50 border-t pt-3">
+				<div className="flex min-w-0 items-center gap-3">{footerLeft}</div>
+				{footerRight}
+			</div>
+		</div>
+	)
+}
+
+export function ScopeChip({
+	label,
+	connected,
+}: {
+	label: string
+	connected: boolean
+}) {
+	return (
+		<span
+			className={cn(
+				dmSans125ClassName(),
+				"flex shrink-0 items-center gap-1.5 whitespace-nowrap text-[12px] font-medium",
+				connected ? "text-[#FAFAFA]" : "text-[#737373]",
+			)}
+		>
+			<span
+				className={cn(
+					"size-[7px] shrink-0 rounded-full",
+					connected ? "bg-[#00AC3F]" : "bg-[#3A4150]",
+				)}
+			/>
+			{label}
+		</span>
+	)
+}

apps/web/components/directory/section-rail.tsx

@@ -0,0 +1,117 @@
+"use client"
+
+import { cn } from "@lib/utils"
+import { ArrowLeft, ArrowRight } from "lucide-react"
+import { type ReactNode, useCallback, useEffect, useRef, useState } from "react"
+import { dmSans125ClassName } from "@/lib/fonts"
+
+export const sectionLabelClass = cn(
+	dmSans125ClassName(),
+	"text-[13px] font-semibold tracking-[-0.01em] text-[#A1A1AA]",
+)
+
+// Horizontally scrollable card rail with a section heading — shared by the
+// main integrations directory and the Company Brain connections directory.
+// Arrows appear only when the content actually overflows.
+export function SectionRail({
+	label,
+	children,
+	headerSlot,
+	labelSlot,
+	scrollbar = "hidden",
+}: {
+	label: string
+	children: ReactNode
+	headerSlot?: ReactNode
+	labelSlot?: ReactNode
+	scrollbar?: "hidden" | "visible"
+}) {
+	const scrollRef = useRef<HTMLDivElement>(null)
+	const [canScrollLeft, setCanScrollLeft] = useState(false)
+	const [canScrollRight, setCanScrollRight] = useState(false)
+	const [hasOverflow, setHasOverflow] = useState(false)
+
+	const update = useCallback(() => {
+		const el = scrollRef.current
+		if (!el) return
+		setHasOverflow(el.scrollWidth > el.clientWidth + 4)
+		setCanScrollLeft(el.scrollLeft > 4)
+		setCanScrollRight(el.scrollLeft + el.clientWidth < el.scrollWidth - 4)
+	}, [])
+
+	useEffect(() => {
+		update()
+		const el = scrollRef.current
+		if (!el) return
+		el.addEventListener("scroll", update, { passive: true })
+		el.addEventListener("scrollend", update)
+		const ro = new ResizeObserver(update)
+		ro.observe(el)
+		return () => {
+			el.removeEventListener("scroll", update)
+			el.removeEventListener("scrollend", update)
+			ro.disconnect()
+		}
+	}, [update])
+
+	const scrollBy = (dir: 1 | -1) => {
+		scrollRef.current?.scrollBy({ left: 292 * dir, behavior: "smooth" })
+		setTimeout(update, 450)
+	}
+
+	const arrowClass = cn(
+		"flex size-7 items-center justify-center rounded-full bg-[#0D121A] text-[#FAFAFA] transition-opacity",
+		"shadow-[inset_1.5px_1.5px_4.5px_rgba(0,0,0,0.6)]",
+		"hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-30",
+	)
+
+	return (
+		<section className="flex flex-col gap-3">
+			<div className="flex items-center justify-between gap-3">
+				<div className="flex min-w-0 flex-wrap items-center gap-2">
+					<h3 className={sectionLabelClass}>{label}</h3>
+					{labelSlot}
+				</div>
+				<div className="hidden items-center gap-1.5 sm:flex">
+					{headerSlot}
+					{hasOverflow ? (
+						<>
+							<button
+								type="button"
+								aria-label="Show previous"
+								disabled={!canScrollLeft}
+								onClick={() => scrollBy(-1)}
+								className={arrowClass}
+							>
+								<ArrowLeft className="size-3.5" />
+							</button>
+							<button
+								type="button"
+								aria-label="Show more"
+								disabled={!canScrollRight}
+								onClick={() => scrollBy(1)}
+								className={arrowClass}
+							>
+								<ArrowRight className="size-3.5" />
+							</button>
+						</>
+					) : null}
+				</div>
+			</div>
+			<div
+				ref={scrollRef}
+				className={cn(
+					"flex flex-col gap-1.5 sm:-mx-1 sm:flex-row sm:gap-3 sm:overflow-x-auto sm:px-1",
+					scrollbar === "visible" ? "scrollbar-thin sm:pb-2" : "scrollbar-none",
+				)}
+			>
+				{children}
+			</div>
+		</section>
+	)
+}
+
+// Standard card width inside a rail: full-width stacked on mobile, 2-up on
+// small screens, 3-up on large.
+export const railItemClass =
+	"w-full sm:shrink-0 sm:grow-0 sm:basis-[calc((100%_-_0.75rem)/2)] lg:basis-[calc((100%_-_1.5rem)/3)]"