"use client"

import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
import { useCustomer } from "autumn-js/react"
import { cn } from "@lib/utils"
import { dmSansClassName, dmSans125ClassName } from "@/lib/fonts"
import { SectionRail } from "@/components/directory/section-rail"
import { $fetch } from "@lib/api"
import { authClient } from "@lib/auth"
import { useAuth } from "@lib/auth-context"
import type {
	ConnectionResponseSchema,
	DocumentsWithMemoriesResponseSchema,
} from "@repo/validation/api"
import type { z } from "zod"
import { Button } from "@ui/components/button"
import {
	ChromeIcon,
	AppleShortcutsIcon,
	RaycastIcon,
} from "@/components/integration-icons"
import {
	GoogleDrive,
	Notion,
	OneDrive,
	MCPIcon,
	Granola,
} from "@ui/assets/icons"
import * as DialogPrimitive from "@radix-ui/react-dialog"
import {
	ArrowLeft,
	ArrowRight,
	BookOpen,
	Check,
	ChevronDown,
	ExternalLink,
	FileText,
	Globe,
	Info,
	Loader,
	Plus,
	Search,
	X,
	Zap,
} from "lucide-react"
import { formatRelativeTime } from "@/components/settings/sync-utils"
import { useConnectorAccess } from "@/hooks/use-connector-access"
import { useConnectionHealth } from "@/hooks/use-connection-health"
import { useContainerTags } from "@/hooks/use-container-tags"
import { DEFAULT_PROJECT_ID } from "@lib/constants"
import { CHROME_EXTENSION_URL, POKE_RECIPE_URL } from "@lib/constants"
import { analytics } from "@/lib/analytics"
import Image from "next/image"
import { useViewMode } from "@/lib/view-mode-context"
import type { ViewParamValue } from "@/lib/search-params"
import { parseAsString, parseAsStringEnum, useQueryState } from "nuqs"
import { addDocumentParam, docParam } from "@/lib/search-params"
import {
	useCallback,
	useEffect,
	useMemo,
	useRef,
	useState,
	type ReactNode,
} from "react"
import { AnimatePresence, motion } from "motion/react"
import { toast } from "sonner"
import { Dialog, DialogContent, DialogTitle } from "@ui/components/dialog"
import {
	PLUGIN_CATALOG,
	FREE_TIER_PLUGIN_IDS,
	isFreeTierPlugin,
	normalizePluginClientId,
	type InstallStep,
	type PluginInfo,
} from "@/lib/plugin-catalog"
import {
	CopyButton,
	INSET,
	InstallSteps,
	PillButton,
} from "./integrations/install-steps"
import {
	ShortcutsConnectButtons,
	useShortcutsConnect,
} from "./integrations/shortcuts-detail"
import { MCPSteps } from "./mcp-modal/mcp-detail-view"
import { GranolaConnectModal } from "./granola-connect-modal"
import { detectPluginSpace, detectPluginSource } from "@/lib/plugin-space"
import { usePromoCode } from "@/hooks/use-promo-code"

type Connection = z.infer<typeof ConnectionResponseSchema>

type ConnectorProvider = "google-drive" | "notion" | "onedrive" | "granola"

interface ConnectedKey {
	keyId: string
	keyStart: string | null
	pluginId: string
	lastRequest?: string | null
	createdAt?: string | null
}

interface ConnectedMcpKey {
	keyId: string
	keyStart: string | null
	lastRequest?: string | null
	createdAt?: string | null
}

function isMcpAuthMetadata(metadata: { sm_source?: string; sm_kind?: string }) {
	return (
		metadata.sm_source === "mcp" || metadata.sm_kind === "mcp_oauth_exchange"
	)
}

function toIsoDate(value: string | Date | null | undefined): string | null {
	if (!value) return null
	const d = value instanceof Date ? value : new Date(value)
	if (Number.isNaN(d.getTime())) return null
	return d.toISOString()
}

function toMs(value: string | null | undefined): number {
	if (!value) return 0
	const t = new Date(value).getTime()
	return Number.isNaN(t) ? 0 : t
}

function compactRelativeTime(value: number | string): string {
	return formatRelativeTime(value).replace(/\s*ago$/i, "")
}

function parsePluginAuthKeys(
	apiKeys: ListedApiKey[],
	keyPrefix: (key: ListedApiKey) => string | null,
): { active: ConnectedKey[]; setup: ConnectedKey[] } {
	const active: ConnectedKey[] = []
	const setup: ConnectedKey[] = []
	for (const key of apiKeys) {
		if (key.enabled === false) continue
		if (!key.metadata) continue
		try {
			const metadata =
				typeof key.metadata === "string"
					? (JSON.parse(key.metadata) as {
							sm_type?: string
							sm_client?: string
						})
					: (key.metadata as { sm_type?: string; sm_client?: string })
			if (metadata.sm_type !== "plugin_auth" || !metadata.sm_client) continue
			const entry: ConnectedKey = {
				keyId: key.id,
				keyStart: keyPrefix(key),
				pluginId: normalizePluginClientId(metadata.sm_client),
				lastRequest: toIsoDate(key.lastRequest),
				createdAt: toIsoDate(key.createdAt),
			}
			if (key.lastRequest) active.push(entry)
			else setup.push(entry)
		} catch {}
	}
	return { active, setup }
}

function parseMcpAuthKeys(
	apiKeys: ListedApiKey[],
	keyPrefix: (key: ListedApiKey) => string | null,
): ConnectedMcpKey[] {
	const keys: ConnectedMcpKey[] = []
	for (const key of apiKeys) {
		if (key.enabled === false) continue
		if (!key.metadata) continue
		try {
			const metadata =
				typeof key.metadata === "string"
					? (JSON.parse(key.metadata) as {
							sm_source?: string
							sm_kind?: string
						})
					: (key.metadata as { sm_source?: string; sm_kind?: string })
			if (!isMcpAuthMetadata(metadata)) continue
			keys.push({
				keyId: key.id,
				keyStart: keyPrefix(key),
				lastRequest: toIsoDate(key.lastRequest),
				createdAt: toIsoDate(key.createdAt),
			})
		} catch {}
	}
	return keys
}

type ListedApiKey = {
	id: string
	name?: string | null
	createdAt?: string | Date | null
	enabled?: boolean
	lastRequest?: string | Date | null
	metadata: string | Record<string, unknown> | null
	start?: string | null
}

type ItemKind = "plugin" | "connector" | "client" | "mcp-client" | "import"

type MCPClientKey =
	| "antigravity"
	| "chatgpt"
	| "codex"
	| "cursor"
	| "claude"
	| "vscode"
	| "cline"
	| "gemini-cli"
	| "claude-code"
	| "mcp-url"

const MCP_CLIENTS: Array<{
	key: MCPClientKey
	name: string
	tagline: string
	simpleTitle?: string
	dev?: boolean
}> = [
	{
		key: "antigravity",
		name: "Antigravity",
		tagline: "MCP config for Antigravity",
		simpleTitle: "Bring your memory into Antigravity",
		dev: true,
	},
	{
		key: "cursor",
		name: "Cursor",
		tagline: "One-click MCP install in Cursor",
		simpleTitle: "Code with your saved knowledge nearby",
	},
	{
		key: "claude",
		name: "Claude Desktop",
		tagline: "Connect supermemory in Claude Desktop",
		simpleTitle: "Reference your notes during any Claude chat",
	},
	{
		key: "chatgpt",
		name: "ChatGPT",
		tagline: "Apps via ChatGPT developer mode",
		simpleTitle: "Let ChatGPT recall what you've saved",
	},
	{
		key: "vscode",
		name: "VS Code",
		tagline: "Native MCP support in VS Code",
		simpleTitle: "Pull your knowledge into VS Code while coding",
		dev: true,
	},
	{
		key: "cline",
		name: "Cline",
		tagline: "MCP via the Cline VS Code extension",
		simpleTitle: "Cline can read and add to your memory",
		dev: true,
	},
	{
		key: "gemini-cli",
		name: "Gemini CLI",
		tagline: "Google Gemini terminal client",
		simpleTitle: "Bring your memory into Gemini sessions",
		dev: true,
	},
	{
		key: "codex",
		name: "Codex (MCP)",
		tagline: "OpenAI Codex CLI via MCP config",
		simpleTitle: "Codex with access to your saved context",
		dev: true,
	},
	{
		key: "claude-code",
		name: "Claude Code (MCP)",
		tagline: "Connect via Claude Code MCP config",
		simpleTitle: "Claude Code with your project context",
		dev: true,
	},
	{
		key: "mcp-url",
		name: "MCP URL",
		tagline: "Use the URL in any custom MCP client",
		simpleTitle: "Connect any MCP-capable app to supermemory",
		dev: true,
	},
]

function mcpClientIconSrc(key: MCPClientKey): string {
	if (key === "mcp-url") return "/mcp-icon.svg"
	if (key === "antigravity") return "/mcp-supported-tools/antigravity.png"
	const file = key === "claude-code" ? "claude" : key
	return `/mcp-supported-tools/${file}.png`
}

const PLUGIN_SIMPLE_TITLES: Record<string, string> = {
	claude_code: "Remembers your code conventions and decisions",
	codex: "Codex sessions that remember your project",
	cursor: "Cursor sessions with persistent project memory",
	opencode: "OpenCode with persistent project memory",
	openclaw: "Save chats from Telegram, Discord and Slack",
	hermes: "Persistent memory for the Hermes agent",
}

type CategoryFilter =
	| "all"
	| "connected"
	| "plugins"
	| "knowledge-bases"
	| "apps-extensions"
	| "ai-clients"

const CATEGORY_VALUES: readonly CategoryFilter[] = [
	"all",
	"connected",
	"ai-clients",
	"plugins",
	"knowledge-bases",
	"apps-extensions",
] as const

const catParam = parseAsStringEnum<CategoryFilter>([
	...CATEGORY_VALUES,
]).withDefault("all")

const CATEGORY_LABEL: Record<CategoryFilter, string> = {
	all: "All",
	connected: "Active",
	plugins: "Plugins",
	"knowledge-bases": "Knowledge bases",
	"apps-extensions": "Apps & extensions",
	"ai-clients": "MCP",
}

const SECTION_ORDER: Array<Exclude<CategoryFilter, "all" | "connected">> = [
	"ai-clients",
	"plugins",
	"knowledge-bases",
	"apps-extensions",
]

function itemCategory(
	item: Item,
): Exclude<CategoryFilter, "all" | "connected"> {
	switch (item.kind) {
		case "plugin":
			return "plugins"
		case "connector":
			return "knowledge-bases"
		case "mcp-client":
			return "ai-clients"
		case "client":
		case "import":
			return "apps-extensions"
	}
}

interface BaseItem {
	id: string
	name: string
	tagline: string
	icon: ReactNode
	docsUrl?: string
	pro?: boolean
	max?: boolean
	kind: ItemKind
	simpleTitle?: string
	dev?: boolean
	isNew?: boolean
}

interface PluginItem extends BaseItem {
	kind: "plugin"
	pluginId: string
}

interface ConnectorItem extends BaseItem {
	kind: "connector"
	provider: ConnectorProvider
}

interface ClientItem extends BaseItem {
	kind: "client"
	action:
		| { type: "external"; href: string }
		| { type: "view"; viewMode: ViewParamValue }
}

interface MCPClientItem extends BaseItem {
	kind: "mcp-client"
	clientKey: MCPClientKey
}

interface ImportItem extends BaseItem {
	kind: "import"
	viewMode: ViewParamValue
}

type Item = PluginItem | ConnectorItem | ClientItem | MCPClientItem | ImportItem

const SECTIONS: Array<{
	label: string
	items: (plugin: typeof PLUGIN_CATALOG) => Item[]
}> = [
	{
		label: "MCP",
		items: () =>
			MCP_CLIENTS.map<MCPClientItem>((c) => ({
				kind: "mcp-client",
				clientKey: c.key,
				id: `mcp-${c.key}`,
				name: c.name,
				tagline: c.tagline,
				simpleTitle: c.simpleTitle,
				dev: c.dev,
				icon:
					c.key === "mcp-url" ? (
						<MCPIcon className="size-6" />
					) : (
						<Image
							src={mcpClientIconSrc(c.key)}
							alt={c.name}
							width={24}
							height={24}
							unoptimized
							className="size-6 rounded object-contain"
						/>
					),
				docsUrl: "https://supermemory.ai/docs/supermemory-mcp/introduction",
			})),
	},
	{
		label: "Plugins",
		items: (catalog) =>
			Object.keys(catalog).map<PluginItem>((id) => {
				const plugin = catalog[id]
				if (!plugin) throw new Error(`Missing plugin ${id}`)
				return {
					kind: "plugin",
					id: `plugin-${id}`,
					pluginId: id,
					name: plugin.name,
					tagline: plugin.tagline,
					icon: (
						<Image
							src={plugin.icon}
							alt={plugin.name}
							width={24}
							height={24}
							className="size-6 rounded"
						/>
					),
					docsUrl: plugin.docsUrl,
					pro: !FREE_TIER_PLUGIN_IDS.includes(id),
					simpleTitle: PLUGIN_SIMPLE_TITLES[id],
					dev: true,
				}
			}),
	},
	{
		label: "Knowledge bases",
		items: () => [
			{
				kind: "connector",
				id: "google-drive",
				provider: "google-drive",
				name: "Google Drive",
				tagline: "Sync Docs, Sheets and Slides into your memory",
				simpleTitle: "Your Docs, Sheets and Slides, searchable",
				icon: <GoogleDrive className="size-6" />,
				pro: true,
				docsUrl: "https://supermemory.ai/docs/connectors/google-drive",
			},
			{
				kind: "connector",
				id: "notion",
				provider: "notion",
				name: "Notion",
				tagline: "Import Notion pages and databases",
				simpleTitle: "All your Notion pages, in supermemory",
				icon: <Notion className="size-6" />,
				pro: true,
				docsUrl: "https://supermemory.ai/docs/connectors/notion",
			},
			{
				kind: "connector",
				id: "onedrive",
				provider: "onedrive",
				name: "OneDrive",
				tagline: "Bring in Office documents from OneDrive",
				simpleTitle: "Your OneDrive files, ready to recall",
				icon: <OneDrive className="size-6" />,
				pro: true,
				docsUrl: "https://supermemory.ai/docs/connectors/onedrive",
			},
			{
				kind: "connector",
				id: "granola",
				provider: "granola",
				name: "Granola",
				tagline: "Sync AI meeting notes into your memory",
				simpleTitle: "Your meeting notes, ready to recall",
				icon: <Granola className="size-6" />,
				pro: true,
				docsUrl: "https://supermemory.ai/docs/connectors/granola",
			},
		],
	},
	{
		label: "Apps & extensions",
		items: () => [
			{
				kind: "client",
				id: "chrome",
				name: "Chrome Extension",
				tagline: "Save webpages, import bookmarks, sync ChatGPT memories",
				simpleTitle: "Save any webpage with one click",
				icon: <ChromeIcon className="size-6" />,
				action: { type: "external", href: CHROME_EXTENSION_URL },
			},
			{
				kind: "client",
				id: "poke",
				name: "Poke",
				tagline: "Recall and save memories from Poke over text",
				simpleTitle: "Text Poke to recall and save your memories",
				isNew: true,
				icon: (
					<div className="relative size-6 shrink-0 overflow-hidden rounded-md sm:size-10 sm:rounded-lg">
						<Image
							src="/images/poke.png"
							alt="Poke"
							width={40}
							height={40}
							className="size-full object-cover"
						/>
					</div>
				),
				action: { type: "external", href: POKE_RECIPE_URL },
			},
			{
				kind: "import",
				id: "x-bookmarks",
				name: "Import X bookmarks",
				tagline: "Turn your X/Twitter bookmarks into memories",
				simpleTitle: "Turn your X bookmarks into memory",
				icon: <Image src="/onboarding/x.png" alt="X" width={24} height={24} />,
				viewMode: "import" as ViewParamValue,
			},
			{
				kind: "client",
				id: "raycast",
				name: "Raycast",
				tagline: "Add and search memories from Raycast on Mac",
				simpleTitle: "Save and search from Raycast on Mac",
				icon: <RaycastIcon className="size-6" />,
				action: { type: "view", viewMode: "raycast" as ViewParamValue },
				dev: true,
			},
			{
				kind: "client",
				id: "shortcuts",
				name: "Apple Shortcuts",
				tagline: "Add memories from iPhone, iPad or Mac",
				simpleTitle: "Save anything from your phone or Mac",
				icon: <AppleShortcutsIcon />,
				action: { type: "view", viewMode: "shortcuts" as ViewParamValue },
			},
		],
	},
]

export function DetailWrapper({
	onBack,
	children,
}: {
	onBack: () => void
	children: ReactNode
}) {
	return (
		<div className="flex-1 p-4 md:p-6 pt-2">
			<div className="max-w-3xl mx-auto">
				<Button
					variant="link"
					className="text-white hover:text-gray-300 p-0 hover:no-underline cursor-pointer mb-4"
					onClick={onBack}
				>
					<ArrowLeft className="size-4 mr-1" />
					Back to Integrations
				</Button>
				{children}
			</div>
		</div>
	)
}

function ProChip({ children = "Pro" }: { children?: ReactNode }) {
	return (
		<span
			className={cn(
				dmSans125ClassName(),
				"ml-auto shrink-0 pl-2 text-[10px] font-semibold uppercase tracking-wide text-[#4BA0FA]",
			)}
		>
			{children}
		</span>
	)
}

function NewChip() {
	return (
		<span
			className={cn(
				dmSans125ClassName(),
				"shrink-0 rounded-full bg-[#4BA0FA]/12 px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-[0.08em] text-[#4BA0FA]",
			)}
		>
			New
		</span>
	)
}

function IconBox({
	children,
	size = "md",
}: {
	children: ReactNode
	size?: "sm" | "md"
}) {
	return (
		<div
			className={cn(
				"flex shrink-0 items-center justify-center rounded-[10px] bg-[#080B0F]",
				size === "sm" ? "size-8" : "size-8 sm:size-10",
				"shadow-[inset_1.5px_1.5px_4.5px_rgba(0,0,0,0.6)]",
			)}
		>
			{children}
		</div>
	)
}

const PLUGIN_COMMANDS: InstallStep[] = [
	{
		code: "npx supermemory plugin",
		copyLabel: "Install plugins",
		title: "Install plugins",
		description:
			"Detect Claude Code, Cursor, OpenCode, and Codex, install your selections, then approve OAuth once in the browser.",
	},
	{
		code: "npx supermemory plugin login",
		copyLabel: "Reconnect plugins",
		title: "Reconnect plugins",
		description:
			"Run browser OAuth again for plugins that are already installed, without reinstalling them.",
	},
	{
		code: "npx supermemory plugin uninstall",
		copyLabel: "Uninstall plugins",
		title: "Uninstall plugins",
		description:
			"Remove selected plugin integrations while keeping your credentials and memories.",
	},
]

const PLUGIN_COMMAND_CLIENTS = [
	"claude_code",
	"cursor",
	"codex",
	"opencode",
] as const

type PluginSetupTab = "agent" | "manual"

const PLUGIN_CLI_TARGETS: Partial<Record<string, string>> = {
	claude_code: "claude",
	codex: "codex",
	cursor: "cursor",
	opencode: "opencode",
}

function pluginAgentPrompt(plugin: PluginInfo): string {
	const cliTarget = PLUGIN_CLI_TARGETS[plugin.id]
	if (cliTarget) {
		return `Install and connect the Supermemory plugin for ${plugin.name} on this machine. Run \`npx supermemory plugin --only ${cliTarget}\`, complete the browser OAuth flow when it opens, then verify the plugin is installed and authenticated.`
	}

	const docsInstruction = plugin.docsUrl
		? ` Follow the official setup instructions at ${plugin.docsUrl}.`
		: " Follow its official setup instructions."
	return `Install and connect the Supermemory integration for ${plugin.name} on this machine.${docsInstruction} Complete authentication securely, then verify the integration is working.`
}

function PluginSetupMethodTabs({
	value,
	onChange,
}: {
	value: PluginSetupTab
	onChange: (value: PluginSetupTab) => void
}) {
	return (
		<div
			className={cn(
				"flex w-full flex-row gap-0.5 rounded-full bg-[#0D121A] p-0.5",
				"shadow-[inset_1.5px_1.5px_4.5px_rgba(0,0,0,0.5)]",
			)}
			role="tablist"
			aria-label="Setup method"
		>
			{(["agent", "manual"] as const).map((tab) => (
				<button
					key={tab}
					className={cn(
						"min-h-8 flex-1 rounded-full px-3 text-center text-[12px] font-medium transition-colors",
						value === tab
							? "bg-white/[0.10] text-[#FAFAFA]"
							: "text-[#A1A1AA] hover:text-[#FAFAFA]",
					)}
					onClick={() => onChange(tab)}
					role="tab"
					type="button"
					aria-selected={value === tab}
				>
					{tab === "agent" ? "Agent instructions" : "Manual instructions"}
				</button>
			))}
		</div>
	)
}

function PluginAgentInstructions({ plugin }: { plugin: PluginInfo }) {
	const prompt = pluginAgentPrompt(plugin)
	return (
		<div className="flex min-w-0 items-start gap-2 rounded-[10px] border border-white/[0.07] bg-[#0B0E13] px-3 py-2.5">
			<p className="min-w-0 flex-1 whitespace-pre-wrap break-words font-mono text-[12px] leading-[1.6] text-[#E4E4E7]">
				{prompt}
			</p>
			<CopyButton text={prompt} label="Agent instructions" />
		</div>
	)
}

function PluginCommandsDialog({
	open,
	onOpenChange,
}: {
	open: boolean
	onOpenChange: (open: boolean) => void
}) {
	return (
		<Dialog open={open} onOpenChange={onOpenChange}>
			<DialogContent
				showCloseButton={false}
				style={{
					boxShadow:
						"0 2.842px 14.211px 0 rgba(0,0,0,0.25), 0.711px 0.711px 0.711px 0 rgba(255,255,255,0.10) inset",
				}}
				className={cn(
					dmSans125ClassName(),
					"flex max-h-[88dvh] flex-col gap-3 overflow-hidden border border-white/[0.12] bg-[#1B1F24] p-0 px-3 pt-3 pb-4 text-[#FAFAFA] rounded-2xl md:px-4 sm:max-w-[620px] sm:rounded-[22px]",
				)}
			>
				<DialogTitle className="sr-only">
					Supermemory plugin commands
				</DialogTitle>
				<div className="flex shrink-0 items-center gap-3">
					<div
						role="img"
						aria-label="Claude Code, Cursor, Codex, and OpenCode"
						className="flex shrink-0 -space-x-2"
					>
						{PLUGIN_COMMAND_CLIENTS.map((pluginId) => {
							const plugin = PLUGIN_CATALOG[pluginId]
							if (!plugin) return null
							return (
								<span
									key={pluginId}
									className="flex size-8 items-center justify-center rounded-[9px] border border-white/[0.12] bg-[#0D121A] p-1.5 shadow-sm"
								>
									<Image
										src={plugin.icon}
										alt=""
										width={20}
										height={20}
										className="size-5 object-contain"
									/>
								</span>
							)
						})}
					</div>
					<div className="min-w-0 flex-1">
						<p className="text-[16px] font-semibold leading-tight text-[#FAFAFA]">
							Plugin commands
						</p>
						<p className="mt-0.5 text-[12px] text-[#A1A1AA]">
							Install, reconnect, or remove integrations from one CLI.
						</p>
					</div>
					<DialogPrimitive.Close
						type="button"
						aria-label="Close"
						className={cn(
							"flex size-7 shrink-0 items-center justify-center rounded-full bg-[#0D121A] transition-opacity hover:opacity-80 focus:outline-none",
							INSET,
						)}
					>
						<X className="size-4 text-[#737373]" />
					</DialogPrimitive.Close>
				</div>
				<div className="flex min-h-0 flex-1 flex-col overflow-y-auto">
					<div
						className={cn(
							"min-w-0 rounded-[14px] bg-[#14161A] p-3 sm:p-4",
							INSET,
						)}
					>
						<InstallSteps steps={PLUGIN_COMMANDS} />
					</div>
				</div>
				<div className="flex shrink-0 items-center justify-between gap-3 pt-1">
					<p className="text-[11px] text-[#737373]">
						Run these commands from your terminal.
					</p>
					<DialogPrimitive.Close asChild>
						<button
							type="button"
							className={cn(
								dmSans125ClassName(),
								"flex h-9 items-center gap-1.5 rounded-full bg-[#0D121A] px-5 text-[13px] font-medium text-[#FAFAFA] transition-opacity hover:opacity-80",
								INSET,
							)}
						>
							<Check className="size-3.5 text-[#4BA0FA]" /> Done
						</button>
					</DialogPrimitive.Close>
				</div>
			</DialogContent>
		</Dialog>
	)
}

type InfoUseCase = {
	title: string
	description: string
}

type InfoModalCloseReason = Parameters<
	typeof analytics.integrationInfoModalClosed
>[0]["close_reason"]

const MCP_INFO_USE_CASES: InfoUseCase[] = [
	{
		title: "Persistent assistant memory",
		description:
			"Store useful context during conversations and recall it later from this MCP client.",
	},
	{
		title: "Shared context across tools",
		description:
			"Use the same Supermemory account across MCP-compatible clients so memory follows the user between sessions.",
	},
	{
		title: "Profiles and project context",
		description:
			"Bring user profiles and project-scoped memories into supported AI clients when they need context.",
	},
]

const ITEM_INFO_USE_CASES: Record<string, InfoUseCase[]> = {
	"plugin-claude_code": [
		{
			title: "Session context injection",
			description:
				"Fetch relevant project memories, user preferences, and past interactions when Claude Code starts a session.",
		},
		{
			title: "Automatic coding capture",
			description:
				"Save useful tool activity like edits, new files, shell commands, and spawned tasks for future sessions.",
		},
	],
	"plugin-codex": [
		{
			title: "Recall before each prompt",
			description:
				"Inject relevant memories and profile context into Codex before each prompt.",
		},
		{
			title: "Capture after sessions",
			description:
				"Store conversation transcripts after a session, scoped to the current project and user.",
		},
		{
			title: "Explicit memory skills",
			description:
				"Use supermemory-search, supermemory-save, and supermemory-forget when memory needs direct control.",
		},
	],
	"plugin-opencode": [
		{
			title: "Project memory in OpenCode",
			description:
				"Inject preferences, project knowledge, and past interactions at the start of OpenCode sessions.",
		},
		{
			title: "Smart session capture",
			description:
				"Save memories from explicit phrases like remember or save this, and summarize long sessions during compaction.",
		},
	],
	"plugin-openclaw": [
		{
			title: "Memory across messaging channels",
			description:
				"Give OpenClaw memory across WhatsApp, Telegram, Discord, Slack, iMessage, and other channels.",
		},
		{
			title: "Auto-recall and auto-capture",
			description:
				"Inject relevant memories before AI turns and store conversation exchanges after turns.",
		},
		{
			title: "Direct memory tools",
			description:
				"Let the AI store, search, forget, and inspect profile memories during conversations.",
		},
	],
	"plugin-hermes": [
		{
			title: "Semantic memory for Hermes",
			description:
				"Add long-term memory, profile recall, search, and session-aware ingest to Hermes.",
		},
		{
			title: "Turn and session memory",
			description:
				"Prefetch relevant context before turns, capture completed turns, and ingest full sessions for richer graph updates.",
		},
		{
			title: "Organized containers",
			description:
				"Use profile-scoped memory and optional multi-container tags for work, personal, or project-specific context.",
		},
	],
	"google-drive": [
		{
			title: "Scoped Drive sync",
			description:
				"Sync selected Google Docs, Sheets, Slides, and PDFs after OAuth and the hosted file picker.",
		},
		{
			title: "Fresh knowledge base",
			description:
				"Keep selected Drive files updated in Supermemory, with scheduled and manual import support.",
		},
	],
	notion: [
		{
			title: "Workspace knowledge sync",
			description:
				"Sync Notion pages, databases, and blocks into Supermemory from connected workspaces.",
		},
		{
			title: "Rich Notion context",
			description:
				"Preserve rich formatting and database properties so Notion content remains useful for retrieval.",
		},
	],
	onedrive: [
		{
			title: "Microsoft 365 documents",
			description:
				"Sync Word documents, Excel spreadsheets, and PowerPoint presentations from OneDrive.",
		},
		{
			title: "Personal and business accounts",
			description:
				"Connect personal or business OneDrive accounts and keep Office files updated through sync.",
		},
	],
	chrome: [
		{
			title: "Save from the browser",
			description:
				"Capture webpages into Supermemory while browsing instead of manually copying content.",
		},
		{
			title: "Bring bookmarks into memory",
			description:
				"Import saved browser context so it can be searched and reused later.",
		},
	],
	shortcuts: [
		{
			title: "Quick mobile capture",
			description:
				"Add memories from iPhone, iPad, or Mac through Apple Shortcuts.",
		},
		{
			title: "Save without opening the app",
			description:
				"Send useful snippets and links into Supermemory from native Apple workflows.",
		},
	],
	raycast: [
		{
			title: "Fast desktop capture",
			description:
				"Add memories from Raycast on Mac without leaving the launcher.",
		},
		{
			title: "Search from Raycast",
			description:
				"Look up Supermemory content directly from your desktop command bar.",
		},
	],
	"x-bookmarks": [
		{
			title: "Import saved X posts",
			description:
				"Turn X/Twitter bookmarks into searchable Supermemory memories.",
		},
		{
			title: "Reuse social research",
			description:
				"Bring bookmarked threads, references, and ideas into the same memory layer as your other tools.",
		},
	],
}

function getInfoUseCases(id: string): InfoUseCase[] {
	return ITEM_INFO_USE_CASES[id] ?? MCP_INFO_USE_CASES
}

function ItemInfoButton({
	name,
	onClick,
}: {
	name: string
	onClick: () => void
}) {
	return (
		<button
			type="button"
			aria-label={`View ${name} use cases and docs`}
			title="Use cases and docs"
			onClick={(e) => {
				e.stopPropagation()
				onClick()
			}}
			className={cn(
				"absolute top-4 right-4 flex size-7 shrink-0 items-center justify-center rounded-full bg-[#0D121A] text-[#A1A1AA] opacity-0 transition-all hover:text-[#FAFAFA] focus-visible:opacity-100 focus-visible:outline-none group-hover:opacity-100 sm:size-8",
				"shadow-[inset_1.5px_1.5px_4.5px_rgba(0,0,0,0.7)]",
			)}
		>
			<Info className="size-3.5" />
		</button>
	)
}

function ItemInfoDialog({
	actionSlot,
	docsUrl,
	hideDismiss,
	icon,
	id,
	kind,
	name,
	onOpenChange,
	open,
}: {
	actionSlot: ReactNode
	docsUrl?: string
	hideDismiss?: boolean
	icon: ReactNode
	id: string
	kind: ItemKind
	name: string
	onOpenChange: (open: boolean) => void
	open: boolean
}) {
	const useCases = getInfoUseCases(id)
	const closeWithReason = (closeReason: InfoModalCloseReason) => {
		analytics.integrationInfoModalClosed({
			kind,
			id,
			name,
			close_reason: closeReason,
		})
		onOpenChange(false)
	}
	return (
		<Dialog
			open={open}
			onOpenChange={(nextOpen) => {
				if (nextOpen) {
					onOpenChange(true)
					return
				}
				closeWithReason("dismiss")
			}}
		>
			<DialogPrimitive.Portal>
				<DialogPrimitive.Overlay
					data-slot="dialog-overlay"
					onPointerDown={(e) => e.stopPropagation()}
					onClick={(e) => {
						e.stopPropagation()
						closeWithReason("dismiss")
					}}
					className="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50 backdrop-blur-[4px]"
				/>
				<DialogPrimitive.Content
					data-slot="dialog-content"
					onClick={(e) => e.stopPropagation()}
					onInteractOutside={(e) => e.preventDefault()}
					style={{
						boxShadow:
							"0 2.842px 14.211px 0 rgba(0,0,0,0.25), 0.711px 0.711px 0.711px 0 rgba(255,255,255,0.10) inset",
					}}
					className={cn(
						dmSans125ClassName(),
						"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] duration-100",
						"flex max-h-[88dvh] flex-col gap-3 overflow-hidden border border-white/[0.12] bg-[#1B1F24] p-0 px-3 pt-3 pb-4 text-[#FAFAFA] rounded-2xl md:px-4 sm:max-w-[560px] sm:rounded-[22px]",
					)}
				>
					<DialogTitle className="sr-only">
						{name} use cases and docs
					</DialogTitle>
					<div className="flex shrink-0 items-center gap-3">
						<IconBox>{icon}</IconBox>
						<div className="min-w-0 flex-1">
							<p className="truncate text-[16px] font-semibold leading-tight text-[#FAFAFA]">
								{name}
							</p>
							<p className="mt-0.5 truncate text-[12px] text-[#A1A1AA]">
								Use cases that apply to this Supermemory connection.
							</p>
						</div>
						<div className="flex shrink-0 items-center gap-2">
							{docsUrl && (
								<a
									href={docsUrl}
									target="_blank"
									rel="noopener noreferrer"
									className={cn(
										dmSans125ClassName(),
										"flex h-7 items-center gap-1.5 rounded-full bg-[#0D121A] px-3 text-[12px] text-[#A1A1AA] transition-colors hover:text-white",
										INSET,
									)}
								>
									<BookOpen className="size-3.5" /> Docs
								</a>
							)}
							<button
								type="button"
								aria-label="Close"
								onClick={() => closeWithReason("close_button")}
								className={cn(
									"flex size-7 items-center justify-center rounded-full bg-[#0D121A] transition-opacity hover:opacity-80 focus:outline-none",
									INSET,
								)}
							>
								<X className="size-4 text-[#737373]" />
							</button>
						</div>
					</div>
					<div className="flex min-h-0 flex-1 flex-col overflow-y-auto">
						<div
							className={cn(
								"min-w-0 rounded-[14px] bg-[#14161A] p-4 sm:p-5",
								INSET,
							)}
						>
							<div className="flex flex-col gap-5">
								{useCases.map((useCase, index) => (
									<div key={useCase.title} className="flex gap-3">
										<div className="flex flex-col items-center gap-1.5">
											<span
												className={cn(
													"flex size-[22px] shrink-0 items-center justify-center rounded-full bg-[#0D121A] text-[11px] font-semibold text-[#4BA0FA]",
													INSET,
												)}
											>
												{index + 1}
											</span>
											{index < useCases.length - 1 && (
												<span className="w-px flex-1 bg-white/[0.14]" />
											)}
										</div>
										<div className="min-w-0">
											<p className="text-[15px] font-semibold leading-tight text-[#FAFAFA]">
												{useCase.title}
											</p>
											<p className="mt-1 text-[13px] leading-relaxed text-[#A1A1AA]">
												{useCase.description}
											</p>
										</div>
									</div>
								))}
							</div>
						</div>
					</div>
					<div className="flex shrink-0 flex-wrap items-center justify-end gap-2 pt-1">
						{!hideDismiss && (
							<button
								type="button"
								onClick={() => closeWithReason("im_good")}
								className={cn(
									"px-3 py-2 text-[13px] font-medium text-[#737373] transition-colors hover:text-[#fafafa]",
									dmSansClassName(),
								)}
							>
								I'm good
							</button>
						)}
						{/* biome-ignore lint/a11y/noStaticElementInteractions: closes the info dialog after the nested action button runs. */}
						{/* biome-ignore lint/a11y/useKeyWithClickEvents: keyboard handling stays on the nested real button. */}
						<div onClick={() => closeWithReason("action")}>{actionSlot}</div>
					</div>
				</DialogPrimitive.Content>
			</DialogPrimitive.Portal>
		</Dialog>
	)
}

function DisconnectButton({ onConfirm }: { onConfirm: () => void }) {
	const [confirming, setConfirming] = useState(false)
	useEffect(() => {
		if (!confirming) return
		const t = setTimeout(() => setConfirming(false), 3000)
		return () => clearTimeout(t)
	}, [confirming])
	return (
		<button
			type="button"
			onClick={() => (confirming ? onConfirm() : setConfirming(true))}
			className={cn(
				dmSans125ClassName(),
				"shrink-0 rounded-md px-2 py-1 text-[11px] font-medium transition-colors",
				confirming
					? "bg-red-500/15 text-red-400"
					: "text-[#737373] hover:bg-white/5 hover:text-red-400",
			)}
		>
			{confirming ? "Confirm" : "Disconnect"}
		</button>
	)
}

function ActiveButton({
	count,
	lastActive,
	onClick,
}: {
	count: number
	lastActive?: string | null
	onClick: () => void
}) {
	return (
		<button
			type="button"
			onClick={onClick}
			className={cn(
				dmSans125ClassName(),
				"group flex shrink-0 cursor-pointer items-center gap-1.5 text-[12px] font-medium text-[#00AC3F] transition-colors sm:text-[13px]",
			)}
		>
			<span className="size-[7px] rounded-full bg-[#00AC3F]" />
			<span className="group-hover:underline">
				{count > 1 ? `${count} active` : "Active"}
			</span>
			{count <= 1 && lastActive && (
				<span className="text-[11px] font-normal text-[#737373]">
					· {formatRelativeTime(lastActive)}
				</span>
			)}
		</button>
	)
}

function McpConnectedPill({
	connectedAt,
	lastActive,
}: {
	connectedAt?: string | null
	lastActive?: string | null
}) {
	return (
		<span
			className={cn(
				dmSans125ClassName(),
				"flex shrink-0 items-center gap-1.5 text-[12px] font-medium text-[#00AC3F] sm:text-[13px]",
			)}
		>
			<span className="size-[7px] rounded-full bg-[#00AC3F]" />
			Connected
			{(lastActive ?? connectedAt) && (
				<span className="text-[11px] font-normal text-[#737373]">
					· {formatRelativeTime(lastActive ?? connectedAt)}
				</span>
			)}
		</span>
	)
}

function FinishSetupButton({ onClick }: { onClick: () => void }) {
	return (
		<PillButton onClick={onClick}>
			<span className="size-[7px] rounded-full bg-[#EAB308]" />
			Finish setup
		</PillButton>
	)
}

function ConnectionsCountPill({ count }: { count: number }) {
	return (
		<span
			className={cn(
				dmSans125ClassName(),
				"flex shrink-0 items-center gap-1.5 text-[12px] font-medium text-[#00AC3F] sm:text-[13px]",
			)}
		>
			<span className="size-[7px] rounded-full bg-[#00AC3F]" />
			{count > 1 ? `${count} connected` : "Connected"}
		</span>
	)
}

function ImportedPill({
	lastImportedAt,
}: {
	lastImportedAt: string | number | Date | null
}) {
	return (
		<span
			className={cn(
				dmSans125ClassName(),
				"flex shrink-0 items-center gap-1.5 text-[12px] font-medium text-[#00AC3F] sm:text-[13px]",
			)}
		>
			<span className="size-[7px] rounded-full bg-[#00AC3F]" />
			Imported
			{lastImportedAt && (
				<span className="text-[11px] font-normal text-[#737373]">
					· {formatRelativeTime(lastImportedAt)}
				</span>
			)}
		</span>
	)
}

const CONNECTOR_META: Record<
	ConnectorProvider,
	{ name: string; icon: ReactNode; documentLabel: string }
> = {
	"google-drive": {
		name: "Google Drive",
		icon: <GoogleDrive className="size-6" />,
		documentLabel: "documents",
	},
	notion: {
		name: "Notion",
		icon: <Notion className="size-6" />,
		documentLabel: "pages",
	},
	onedrive: {
		name: "OneDrive",
		icon: <OneDrive className="size-6" />,
		documentLabel: "documents",
	},
	granola: {
		name: "Granola",
		icon: <Granola className="size-6" />,
		documentLabel: "notes",
	},
}

interface PluginEntry {
	kind: "plugin"
	id: string
	name: string
	icon: ReactNode
	pro: boolean
	agentCount: number
	createdAt: string | null
	lastActive: string | null
	onManage: () => void
}

interface ConnectorEntry {
	kind: "connector"
	id: string
	name: string
	documentLabel: string
	icon: ReactNode
	pro: boolean
	provider: ConnectorProvider
	connection: Connection
	connectionCount: number
	email: string | null
	spaceName: string | null
	createdAt: string | null
	onManage: () => void
	onReconnect: () => void
}

interface McpEntry {
	kind: "mcp"
	id: string
	name: string
	icon: ReactNode
	connectionCount: number
	createdAt: string | null
	lastActive: string | null
	onManage: () => void
}

type RailEntry = PluginEntry | ConnectorEntry | McpEntry

function railConnectionMeta(connection: Connection) {
	const m = connection.metadata as Record<string, unknown> | undefined
	return {
		syncInProgress: m?.syncInProgress === true,
		lastSyncedAt:
			typeof m?.lastSyncedAt === "number" ? m.lastSyncedAt : undefined,
		documentCount: typeof m?.documentCount === "number" ? m.documentCount : 0,
	}
}

function RailDetail({ label, value }: { label: string; value: ReactNode }) {
	return (
		<div
			className={cn(
				dmSans125ClassName(),
				"flex items-center justify-between gap-3 text-[11px]",
			)}
		>
			<span className="shrink-0 text-[#737373]">{label}</span>
			<span className="min-w-0 truncate text-right text-[#A1A1AA]">
				{value}
			</span>
		</div>
	)
}

function RailAction({
	label,
	onClick,
	danger,
}: {
	label: string
	onClick: () => void
	danger?: boolean
}) {
	return (
		<button
			type="button"
			onClick={(e) => {
				e.stopPropagation()
				onClick()
			}}
			className={cn(
				dmSans125ClassName(),
				"rounded-md px-2.5 py-1 text-[11px] font-medium transition-colors",
				danger
					? "bg-[#EF4444]/15 text-[#EF4444] hover:bg-[#EF4444]/25"
					: "bg-[#0D121A] text-[#A1A1AA] hover:text-[#FAFAFA]",
			)}
		>
			{label}
		</button>
	)
}

function RailRow({
	icon,
	name,
	statusLine,
	expanded,
	onToggle,
	children,
}: {
	icon: ReactNode
	name: string
	statusLine: ReactNode
	expanded: boolean
	onToggle: () => void
	children: ReactNode
}) {
	return (
		<div
			className={cn(
				"overflow-hidden rounded-[12px] bg-[#14161A]",
				"shadow-[inset_2.42px_2.42px_4.263px_rgba(11,15,21,0.7)]",
			)}
		>
			<button
				type="button"
				onClick={onToggle}
				className="group flex w-full items-center gap-2.5 px-3 py-2.5 text-left transition-colors hover:bg-[#16181D]"
			>
				<IconBox size="sm">{icon}</IconBox>
				<div className="min-w-0 flex-1">
					<span
						className={cn(
							dmSans125ClassName(),
							"block min-w-0 truncate text-[13px] font-medium text-[#FAFAFA]",
						)}
					>
						{name}
					</span>
					<div className="mt-0.5 min-w-0">{statusLine}</div>
				</div>
				<ChevronDown
					className={cn(
						"size-4 shrink-0 text-[#525D6E] transition-transform group-hover:text-[#A1A1AA]",
						expanded && "rotate-180",
					)}
				/>
			</button>
			<AnimatePresence initial={false}>
				{expanded && (
					<motion.div
						initial={{ height: 0, opacity: 0 }}
						animate={{ height: "auto", opacity: 1 }}
						exit={{ height: 0, opacity: 0 }}
						transition={{ duration: 0.2, ease: [0.4, 0, 0.2, 1] }}
						className="overflow-hidden"
					>
						<div className="flex flex-col gap-2 border-t border-white/[0.06] px-3 py-3">
							{children}
						</div>
					</motion.div>
				)}
			</AnimatePresence>
		</div>
	)
}

function ActiveStatusDot() {
	return (
		<>
			<span className="size-[6px] shrink-0 rounded-full bg-[#00AC3F]" />
			<span
				className={cn(
					dmSans125ClassName(),
					"shrink-0 text-[11px] font-medium text-[#00AC3F]",
				)}
			>
				Active
			</span>
		</>
	)
}

function PluginRailRow({ entry }: { entry: PluginEntry }) {
	const [expanded, setExpanded] = useState(false)
	const lastTime = entry.lastActive ?? entry.createdAt
	const suffix = [
		entry.agentCount > 1 ? `${entry.agentCount} agents` : null,
		lastTime ? formatRelativeTime(lastTime) : null,
	]
		.filter(Boolean)
		.join(" · ")
	return (
		<RailRow
			icon={entry.icon}
			name={entry.name}
			expanded={expanded}
			onToggle={() => setExpanded((v) => !v)}
			statusLine={
				<div className="flex min-w-0 items-center gap-1.5">
					<ActiveStatusDot />
					{suffix && (
						<span
							className={cn(
								dmSans125ClassName(),
								"min-w-0 truncate text-[11px] text-[#737373]",
							)}
						>
							· {suffix}
						</span>
					)}
				</div>
			}
		>
			{entry.createdAt && (
				<RailDetail
					label="Connected"
					value={formatRelativeTime(entry.createdAt)}
				/>
			)}
			{entry.lastActive && (
				<RailDetail
					label="Last active"
					value={formatRelativeTime(entry.lastActive)}
				/>
			)}
			<RailDetail label="Agents" value={`${entry.agentCount} connected`} />
			<div className="mt-1 flex flex-wrap gap-1.5">
				<RailAction label="Manage" onClick={entry.onManage} />
			</div>
		</RailRow>
	)
}

const CONNECTOR_STATUS = {
	expired: { color: "#EF4444", label: "Expired" },
	syncing: { color: "#4BA0FA", label: "Syncing" },
	synced: { color: "#00AC3F", label: "Synced" },
	idle: { color: "#737373", label: "Connected" },
} as const

function ConnectorRailRow({ entry }: { entry: ConnectorEntry }) {
	const [expanded, setExpanded] = useState(false)
	const { needsReauth } = useConnectionHealth(entry.connection.id)
	const meta = railConnectionMeta(entry.connection)
	const status: keyof typeof CONNECTOR_STATUS = needsReauth
		? "expired"
		: meta.syncInProgress
			? "syncing"
			: meta.lastSyncedAt
				? "synced"
				: "idle"
	const { color, label } = CONNECTOR_STATUS[status]
	const statusParts = [
		status !== "syncing" && meta.documentCount > 0
			? String(meta.documentCount)
			: null,
		status === "synced" && meta.lastSyncedAt
			? compactRelativeTime(meta.lastSyncedAt)
			: null,
	].filter(Boolean)
	return (
		<RailRow
			icon={entry.icon}
			name={entry.name}
			expanded={expanded}
			onToggle={() => setExpanded((v) => !v)}
			statusLine={
				<div className="flex min-w-0 items-center gap-1.5">
					<span
						className={cn(
							"size-[6px] shrink-0 rounded-full",
							status === "syncing" && "animate-pulse",
						)}
						style={{ backgroundColor: color }}
					/>
					<span
						className={cn(
							dmSans125ClassName(),
							"shrink-0 text-[11px] font-medium",
						)}
						style={{ color }}
					>
						{label}
					</span>
					{statusParts.length > 0 && (
						<span
							className={cn(
								dmSans125ClassName(),
								"min-w-0 truncate text-[11px] text-[#737373]",
							)}
						>
							· {statusParts.join(" · ")}
						</span>
					)}
				</div>
			}
		>
			{entry.email && <RailDetail label="Account" value={entry.email} />}
			{entry.createdAt && (
				<RailDetail label="Added" value={formatRelativeTime(entry.createdAt)} />
			)}
			{meta.lastSyncedAt && (
				<RailDetail
					label="Last synced"
					value={formatRelativeTime(meta.lastSyncedAt)}
				/>
			)}
			{meta.documentCount > 0 && (
				<RailDetail
					label="Synced"
					value={`${meta.documentCount} ${entry.documentLabel}`}
				/>
			)}
			{entry.spaceName && <RailDetail label="Space" value={entry.spaceName} />}
			{needsReauth && (
				<RailDetail
					label="Status"
					value={<span className="text-[#EF4444]">Reconnect needed</span>}
				/>
			)}
			<div className="mt-1 flex flex-wrap gap-1.5">
				{needsReauth && (
					<RailAction label="Reconnect" danger onClick={entry.onReconnect} />
				)}
				<RailAction label="Manage" onClick={entry.onManage} />
			</div>
		</RailRow>
	)
}

function McpRailRow({ entry }: { entry: McpEntry }) {
	const [expanded, setExpanded] = useState(false)
	const lastTime = entry.lastActive ?? entry.createdAt
	const suffix = [
		entry.connectionCount > 1 ? `${entry.connectionCount} connections` : null,
		lastTime ? formatRelativeTime(lastTime) : null,
	]
		.filter(Boolean)
		.join(" · ")
	return (
		<RailRow
			icon={entry.icon}
			name={entry.name}
			expanded={expanded}
			onToggle={() => setExpanded((v) => !v)}
			statusLine={
				<div className="flex min-w-0 items-center gap-1.5">
					<ActiveStatusDot />
					{suffix && (
						<span
							className={cn(
								dmSans125ClassName(),
								"min-w-0 truncate text-[11px] text-[#737373]",
							)}
						>
							· {suffix}
						</span>
					)}
				</div>
			}
		>
			{entry.createdAt && (
				<RailDetail
					label="Connected"
					value={formatRelativeTime(entry.createdAt)}
				/>
			)}
			{entry.lastActive && (
				<RailDetail
					label="Last active"
					value={formatRelativeTime(entry.lastActive)}
				/>
			)}
			<RailDetail
				label="MCP keys"
				value={`${entry.connectionCount} connected`}
			/>
			<div className="mt-1 flex flex-wrap gap-1.5">
				<RailAction label="Manage" onClick={entry.onManage} />
			</div>
		</RailRow>
	)
}

const SKELETON_KEYS = ["s1", "s2", "s3", "s4", "s5"]

function RailSkeleton({ rows }: { rows: number }) {
	return (
		<div className="flex flex-col gap-2">
			{SKELETON_KEYS.slice(0, rows).map((k) => (
				<div
					key={k}
					className="flex items-center gap-3 rounded-[12px] bg-[#14161A] p-3"
				>
					<div className="size-8 shrink-0 animate-pulse rounded-md bg-white/[0.04]" />
					<div className="flex min-w-0 flex-1 flex-col gap-1.5">
						<div className="h-2.5 w-2/3 animate-pulse rounded bg-white/[0.06]" />
						<div className="h-2 w-2/5 animate-pulse rounded bg-white/[0.04]" />
					</div>
				</div>
			))}
		</div>
	)
}

function RailEmpty({
	icon,
	title,
	hint,
}: {
	icon: ReactNode
	title: string
	hint: string
}) {
	return (
		<div className="flex flex-col items-center gap-1.5 px-3 py-7 text-center">
			<div className="flex size-9 items-center justify-center rounded-full bg-[#0D121A] text-[#525D6E]">
				{icon}
			</div>
			<p
				className={cn(
					dmSans125ClassName(),
					"text-[12px] font-medium text-[#A1A1AA]",
				)}
			>
				{title}
			</p>
			<p className={cn(dmSans125ClassName(), "text-[11px] text-[#525D6E]")}>
				{hint}
			</p>
		</div>
	)
}

function ActiveConnectionsRail({
	entries,
	loading,
	className,
}: {
	entries: RailEntry[]
	loading?: boolean
	className?: string
}) {
	return (
		<aside
			className={cn(
				"flex flex-col gap-3 rounded-[14px] bg-[#191D24] p-4 sm:p-5",
				"shadow-[inset_2.42px_2.42px_4.263px_rgba(11,15,21,0.7)]",
				className,
			)}
		>
			<div className="flex items-center justify-between gap-2">
				<h3
					className={cn(
						dmSans125ClassName(),
						"text-[13px] font-semibold tracking-[-0.01em] text-[#FAFAFA]",
					)}
				>
					Active connections
				</h3>
				<div className="flex shrink-0 items-center gap-2">
					{loading && entries.length > 0 && (
						<Loader className="size-3.5 animate-spin text-[#525D6E]" />
					)}
					{entries.length > 0 && (
						<span
							className={cn(
								dmSans125ClassName(),
								"flex items-center gap-1.5 text-[12px] font-medium text-[#00AC3F]",
							)}
						>
							<span className="size-[7px] rounded-full bg-[#00AC3F]" />
							{entries.length}
						</span>
					)}
				</div>
			</div>
			{entries.length > 0 ? (
				<div className="flex flex-col gap-2">
					{entries.map((entry) =>
						entry.kind === "plugin" ? (
							<PluginRailRow key={entry.id} entry={entry} />
						) : entry.kind === "mcp" ? (
							<McpRailRow key={entry.id} entry={entry} />
						) : (
							<ConnectorRailRow key={entry.id} entry={entry} />
						),
					)}
				</div>
			) : loading ? (
				<RailSkeleton rows={3} />
			) : (
				<RailEmpty
					icon={<Zap className="size-4" />}
					title="No active connections yet"
					hint="Connect a tool below to see it here"
				/>
			)}
		</aside>
	)
}

type RecentDoc = z.infer<
	typeof DocumentsWithMemoriesResponseSchema
>["documents"][number]

function hostnameOf(url: string | null | undefined): string | null {
	if (!url) return null
	try {
		return new URL(url).hostname.replace(/^www\./, "")
	} catch {
		return null
	}
}

const CONNECTOR_SMALL_ICON: Record<ConnectorProvider, ReactNode> = {
	"google-drive": <GoogleDrive className="size-3.5" />,
	notion: <Notion className="size-3.5" />,
	onedrive: <OneDrive className="size-3.5" />,
	granola: <Granola className="size-3.5" />,
}

function pluginIconNode(iconSrc: string | null): ReactNode {
	if (!iconSrc) return <FileText className="size-3.5 text-[#737373]" />
	return (
		<Image
			src={iconSrc}
			alt=""
			width={14}
			height={14}
			className="size-3.5 rounded-sm"
		/>
	)
}

function resolveDocSource(
	doc: RecentDoc,
	connectionSource: Map<string, ConnectorProvider>,
): { label: string; icon: ReactNode } {
	const tags = (doc as { containerTags?: unknown }).containerTags
	if (Array.isArray(tags)) {
		for (const tag of tags) {
			if (typeof tag !== "string") continue
			const space = detectPluginSpace(tag)
			if (space) {
				return { label: space.label, icon: pluginIconNode(space.iconSrc) }
			}
		}
	}
	if (doc.connectionId) {
		const provider = connectionSource.get(doc.connectionId)
		if (provider) {
			return {
				label: CONNECTOR_META[provider].name,
				icon: CONNECTOR_SMALL_ICON[provider],
			}
		}
	}
	const cc = detectPluginSource(
		doc.metadata as Record<string, unknown> | null | undefined,
		doc.source,
	)
	if (cc) {
		return { label: cc.label, icon: pluginIconNode(cc.iconSrc) }
	}
	if (doc.source === "mcp") {
		return { label: "MCP", icon: <MCPIcon className="size-3.5" /> }
	}
	const type = (doc.type ?? "").toLowerCase()
	if (type.includes("notion")) {
		return { label: "Notion", icon: <Notion className="size-3.5" /> }
	}
	if (
		type.includes("google") ||
		type.includes("gdrive") ||
		type.includes("drive")
	) {
		return { label: "Google Drive", icon: <GoogleDrive className="size-3.5" /> }
	}
	if (type.includes("onedrive") || type.includes("microsoft")) {
		return { label: "OneDrive", icon: <OneDrive className="size-3.5" /> }
	}
	if (type.includes("granola")) {
		return { label: "Granola", icon: <Granola className="size-3.5" /> }
	}
	const host = hostnameOf(doc.url)
	if (host) {
		return { label: host, icon: <Globe className="size-3.5 text-[#737373]" /> }
	}
	return {
		label: "Note",
		icon: <FileText className="size-3.5 text-[#737373]" />,
	}
}

function docDisplayTitle(doc: RecentDoc, sourceLabel: string): string {
	const t = doc.title?.trim()
	if (t && !/^untitled/i.test(t)) return t
	const summary = typeof doc.summary === "string" ? doc.summary.trim() : ""
	if (summary) {
		const line = summary
			.split("\n")
			.find((l) => l.trim())
			?.trim()
		if (line) return line.length > 80 ? `${line.slice(0, 79)}…` : line
	}
	return `${sourceLabel} session`
}

function RecentDocRow({
	doc,
	connectionSource,
	onOpen,
}: {
	doc: RecentDoc
	connectionSource: Map<string, ConnectorProvider>
	onOpen: () => void
}) {
	const { label, icon } = resolveDocSource(doc, connectionSource)
	const title = docDisplayTitle(doc, label)
	return (
		<button
			type="button"
			onClick={onOpen}
			className="group flex w-full items-center gap-2.5 rounded-[10px] px-2 py-2 text-left transition-colors hover:bg-[#14161A]"
		>
			<span className="flex size-7 shrink-0 items-center justify-center rounded-md bg-[#0D121A] shadow-[inset_1.5px_1.5px_4.5px_rgba(0,0,0,0.5)]">
				{icon}
			</span>
			<div className="min-w-0 flex-1">
				<span
					className={cn(
						dmSans125ClassName(),
						"block min-w-0 truncate text-[12px] text-[#E5E5E5] transition-colors group-hover:text-white",
					)}
				>
					{title}
				</span>
				<span
					className={cn(
						dmSans125ClassName(),
						"mt-0.5 flex min-w-0 items-center gap-1 text-[10px] text-[#737373]",
					)}
				>
					<span className="truncate">{label}</span>
					<span className="shrink-0">·</span>
					<span className="shrink-0">{formatRelativeTime(doc.createdAt)}</span>
				</span>
			</div>
			{doc.url ? (
				<ExternalLink className="size-3 shrink-0 text-[#525D6E] transition-colors group-hover:text-[#A1A1AA]" />
			) : (
				<ArrowRight className="size-3 shrink-0 text-[#525D6E] transition-colors group-hover:text-[#A1A1AA]" />
			)}
		</button>
	)
}

function RecentlyAddedCard({
	docs,
	connectionSource,
	loading,
	onOpenDoc,
	onViewAll,
	className,
}: {
	docs: RecentDoc[]
	connectionSource: Map<string, ConnectorProvider>
	loading?: boolean
	onOpenDoc: (doc: RecentDoc) => void
	onViewAll: () => void
	className?: string
}) {
	return (
		<aside
			className={cn(
				"flex flex-col gap-2 rounded-[14px] bg-[#191D24] p-4 sm:p-5",
				"shadow-[inset_2.42px_2.42px_4.263px_rgba(11,15,21,0.7)]",
				className,
			)}
		>
			<div className="flex items-center justify-between gap-2">
				<h3
					className={cn(
						dmSans125ClassName(),
						"text-[13px] font-semibold tracking-[-0.01em] text-[#FAFAFA]",
					)}
				>
					Recently added
				</h3>
				{docs.length > 0 && (
					<button
						type="button"
						onClick={onViewAll}
						className={cn(
							dmSans125ClassName(),
							"flex shrink-0 items-center gap-1 text-[11px] text-[#737373] transition-colors hover:text-[#FAFAFA]",
						)}
					>
						View all
						<ArrowRight className="size-3" />
					</button>
				)}
			</div>
			{docs.length > 0 ? (
				<div className="scrollbar-none flex max-h-[320px] flex-col gap-0.5 overflow-y-auto">
					{docs.map((doc) => (
						<RecentDocRow
							key={doc.id ?? doc.customId}
							doc={doc}
							connectionSource={connectionSource}
							onOpen={() => onOpenDoc(doc)}
						/>
					))}
				</div>
			) : loading ? (
				<RailSkeleton rows={4} />
			) : (
				<RailEmpty
					icon={<FileText className="size-4" />}
					title="No memories yet"
					hint="Anything you save will show up here"
				/>
			)}
		</aside>
	)
}

type MobileActivityTab = "active" | "recent"

function MobileActivityPanel({
	entries,
	docs,
	connectionSource,
	activeLoading,
	recentsLoading,
	onOpenDoc,
	onViewAll,
}: {
	entries: RailEntry[]
	docs: RecentDoc[]
	connectionSource: Map<string, ConnectorProvider>
	activeLoading?: boolean
	recentsLoading?: boolean
	onOpenDoc: (doc: RecentDoc) => void
	onViewAll: () => void
}) {
	const [tab, setTab] = useState<MobileActivityTab>("active")
	const hasActiveTab = activeLoading || entries.length > 0
	const hasRecentTab = recentsLoading || docs.length > 0
	const showTabs = hasActiveTab && hasRecentTab
	const activeTab: MobileActivityTab =
		hasActiveTab && (tab === "active" || !hasRecentTab) ? "active" : "recent"

	useEffect(() => {
		if (!hasActiveTab && hasRecentTab && tab === "active") {
			setTab("recent")
		}
		if (!hasRecentTab && hasActiveTab && tab === "recent") {
			setTab("active")
		}
	}, [hasActiveTab, hasRecentTab, tab])

	const tabClass = (value: MobileActivityTab) =>
		cn(
			dmSans125ClassName(),
			"flex h-8 flex-1 items-center justify-center gap-1.5 rounded-full px-3 text-[12px] font-medium transition-colors",
			activeTab === value
				? "bg-white/[0.10] text-[#FAFAFA]"
				: "text-[#A1A1AA] hover:text-[#FAFAFA]",
		)

	return (
		<aside
			className={cn(
				"rounded-[14px] bg-[#191D24] p-3",
				"shadow-[inset_2.42px_2.42px_4.263px_rgba(11,15,21,0.7)]",
			)}
		>
			<div className="flex items-center justify-between gap-3">
				<h3
					className={cn(
						dmSans125ClassName(),
						"text-[13px] font-semibold tracking-[-0.01em] text-[#FAFAFA]",
					)}
				>
					Activity
				</h3>
				{activeTab === "recent" && docs.length > 0 && (
					<button
						type="button"
						onClick={onViewAll}
						className={cn(
							dmSans125ClassName(),
							"flex shrink-0 items-center gap-1 text-[11px] text-[#737373] transition-colors hover:text-[#FAFAFA]",
						)}
					>
						View all
						<ArrowRight className="size-3" />
					</button>
				)}
			</div>
			{showTabs && (
				<div
					className={cn(
						"mt-3 flex items-center gap-0.5 rounded-full bg-[#0D121A] p-0.5",
						"shadow-[inset_1.5px_1.5px_4.5px_rgba(0,0,0,0.5)]",
					)}
				>
					<button
						type="button"
						onClick={() => setTab("active")}
						className={tabClass("active")}
					>
						Active
						{entries.length > 0 && (
							<span className="text-[10px] font-semibold tabular-nums text-[#00AC3F]">
								{entries.length}
							</span>
						)}
					</button>
					<button
						type="button"
						onClick={() => setTab("recent")}
						className={tabClass("recent")}
					>
						Recent
						{docs.length > 0 && (
							<span className="text-[10px] font-semibold tabular-nums text-[#525D6E]">
								{docs.length}
							</span>
						)}
					</button>
				</div>
			)}
			<div className="mt-2.5">
				{activeTab === "active" ? (
					entries.length > 0 ? (
						<div className="scrollbar-none flex max-h-[158px] flex-col gap-2 overflow-y-auto pr-0.5">
							{entries.map((entry) =>
								entry.kind === "plugin" ? (
									<PluginRailRow key={entry.id} entry={entry} />
								) : entry.kind === "mcp" ? (
									<McpRailRow key={entry.id} entry={entry} />
								) : (
									<ConnectorRailRow key={entry.id} entry={entry} />
								),
							)}
						</div>
					) : activeLoading ? (
						<RailSkeleton rows={2} />
					) : (
						<RailEmpty
							icon={<Zap className="size-4" />}
							title="No active connections yet"
							hint="Connect a tool below to see it here"
						/>
					)
				) : docs.length > 0 ? (
					<div className="scrollbar-none flex max-h-[142px] flex-col gap-0.5 overflow-y-auto pr-0.5">
						{docs.map((doc) => (
							<RecentDocRow
								key={doc.id ?? doc.customId}
								doc={doc}
								connectionSource={connectionSource}
								onOpen={() => onOpenDoc(doc)}
							/>
						))}
					</div>
				) : recentsLoading ? (
					<RailSkeleton rows={3} />
				) : (
					<RailEmpty
						icon={<FileText className="size-4" />}
						title="No memories yet"
						hint="Anything you save will show up here"
					/>
				)}
			</div>
		</aside>
	)
}

function ItemCard({
	actionSlot,
	infoActionSlot,
	icon,
	id,
	kind,
	name,
	tagline,
	pro,
	max,
	isNew,
	docsUrl,
	leftIndicator,
	statusSlot,
	layoutClassName,
}: {
	actionSlot: ReactNode
	infoActionSlot?: ReactNode
	icon: ReactNode
	id: string
	kind: ItemKind
	name: string
	tagline: string
	pro?: boolean
	max?: boolean
	isNew?: boolean
	docsUrl?: string
	leftIndicator?: ReactNode
	statusSlot?: ReactNode
	layoutClassName?: string
}) {
	const [infoOpen, setInfoOpen] = useState(false)
	return (
		// biome-ignore lint/a11y/useSemanticElements: the card contains nested action buttons, so it cannot be a native button.
		<div
			role="button"
			tabIndex={0}
			onClick={() => setInfoOpen(true)}
			onKeyDown={(e) => {
				if (e.key === "Enter" || e.key === " ") {
					e.preventDefault()
					setInfoOpen(true)
				}
			}}
			className={cn(
				"group relative flex h-full cursor-pointer flex-row items-center gap-2.5 rounded-[10px] bg-[#14161A] px-2.5 py-2 transition-colors hover:bg-[#16181D] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#4BA0FA]/45 sm:flex-col sm:items-stretch sm:gap-4 sm:rounded-[12px] sm:p-4",
				"shadow-[inset_2.42px_2.42px_4.263px_rgba(11,15,21,0.7)]",
				id === "shortcuts" &&
					"max-sm:grid max-sm:grid-cols-[auto_minmax(0,1fr)] max-sm:items-center",
				layoutClassName,
			)}
		>
			<ItemInfoButton name={name} onClick={() => setInfoOpen(true)} />
			<ItemInfoDialog
				actionSlot={infoActionSlot ?? actionSlot}
				docsUrl={docsUrl}
				hideDismiss={id === "shortcuts"}
				icon={icon}
				id={id}
				kind={kind}
				name={name}
				open={infoOpen}
				onOpenChange={setInfoOpen}
			/>
			<div className="flex shrink-0 items-start justify-between gap-2">
				<IconBox>{icon}</IconBox>
			</div>
			<div
				className={cn(
					"flex min-w-0 flex-1 flex-row items-center justify-between gap-2 sm:flex-col sm:items-stretch sm:justify-end sm:gap-3",
					id === "shortcuts" && "max-sm:contents",
				)}
			>
				<div className="min-w-0 flex-1">
					<div className="flex min-w-0 items-center gap-1">
						{leftIndicator}
						<span
							className={cn(
								dmSans125ClassName(),
								"min-w-0 truncate text-[13px] font-medium text-[#FAFAFA] sm:text-[14px]",
							)}
						>
							{name}
						</span>
						{isNew && <NewChip />}
						{max ? <ProChip>Max</ProChip> : pro && <ProChip />}
					</div>
					<p
						className={cn(
							dmSans125ClassName(),
							"mt-1 hidden text-[12px] leading-snug text-[#A1A1AA] sm:line-clamp-2 sm:block",
						)}
					>
						{tagline}
					</p>
				</div>
				<div
					className={cn(
						"flex w-auto shrink-0 items-center justify-end gap-2 sm:w-full sm:justify-between",
						id === "shortcuts" &&
							"max-sm:col-span-2 max-sm:row-start-2 max-sm:w-full",
					)}
				>
					{/* biome-ignore lint/a11y/noStaticElementInteractions: stop card click from swallowing the status action. */}
					<div
						className="hidden min-w-0 flex-1 sm:flex"
						onClick={(e) => e.stopPropagation()}
						onKeyDown={(e) => e.stopPropagation()}
					>
						{statusSlot}
					</div>
					{/* biome-ignore lint/a11y/noStaticElementInteractions: stop card click from swallowing the primary action. */}
					<div
						className={cn(
							"flex shrink-0 justify-end [&>button]:!h-7 [&>button]:!min-w-[82px] [&>button]:!px-3 [&>button]:!text-[11px] sm:[&>button]:!h-9 sm:[&>button]:!min-w-[116px] sm:[&>button]:!px-5 sm:[&>button]:!text-[14px]",
							id === "shortcuts" &&
								"max-sm:w-full max-sm:shrink max-sm:[&>div]:w-full",
						)}
						onClick={(e) => e.stopPropagation()}
						onKeyDown={(e) => e.stopPropagation()}
					>
						{actionSlot}
					</div>
				</div>
			</div>
		</div>
	)
}

interface FeaturedPick {
	id: string
	name: string
	emoji?: string
	headline: string
	support: string
	tagline: string
	icon: ReactNode
	backdrop?: ReactNode
	docsUrl?: string
	ctaLabel: string
	onCta: () => void
}

const FEATURED_ROTATE_MS = 7000

function FeaturedHero({ picks }: { picks: FeaturedPick[] }) {
	const [index, setIndex] = useState(0)
	const [paused, setPaused] = useState(false)
	const [manualOverride, setManualOverride] = useState(false)

	useEffect(() => {
		if (picks.length <= 1) return
		if (paused || manualOverride) return
		const t = setInterval(() => {
			setIndex((i) => (i + 1) % picks.length)
		}, FEATURED_ROTATE_MS)
		return () => clearInterval(t)
	}, [picks.length, paused, manualOverride])

	if (picks.length === 0) return null
	const pick = picks[index] ?? picks[0]
	if (!pick) return null

	return (
		// biome-ignore lint/a11y/useSemanticElements: card wraps nested dot buttons, so it can't be a <button>
		<div
			role="button"
			tabIndex={0}
			onClick={pick.onCta}
			onKeyDown={(e) => {
				if (e.key === "Enter" || e.key === " ") {
					e.preventDefault()
					pick.onCta()
				}
			}}
			onMouseEnter={() => setPaused(true)}
			onMouseLeave={() => setPaused(false)}
			onFocus={() => setPaused(true)}
			onBlur={() => setPaused(false)}
			className={cn(
				"group relative flex w-full flex-col items-start justify-center overflow-hidden rounded-[14px] px-5 py-4 text-left cursor-pointer sm:px-6 sm:py-6",
				"bg-[#191D24]",
				"shadow-[inset_2.42px_2.42px_4.263px_rgba(11,15,21,0.7)]",
				"min-h-[150px] sm:min-h-[160px]",
			)}
		>
			{pick.backdrop && (
				<AnimatePresence mode="wait">
					<motion.div
						key={`bg-${pick.id}`}
						initial={{ opacity: 0, x: 12 }}
						animate={{ opacity: 1, x: 0 }}
						exit={{ opacity: 0, x: 8 }}
						transition={{ duration: 0.45, ease: [0.4, 0, 0.2, 1] }}
						aria-hidden
						className="pointer-events-none absolute inset-y-0 right-0 w-[72%] overflow-hidden sm:w-2/3"
					>
						<div className="absolute -right-16 -top-12 opacity-35 sm:right-0 sm:-top-4 sm:opacity-55">
							{pick.backdrop}
						</div>
						<div className="absolute inset-0 bg-gradient-to-l from-transparent via-[#191D24]/70 to-[#191D24]" />
						<div className="absolute inset-0 bg-gradient-to-t from-[#191D24]/60 via-transparent to-transparent" />
					</motion.div>
				</AnimatePresence>
			)}
			<div
				aria-hidden
				className="pointer-events-none absolute inset-0 opacity-[0.06] mix-blend-overlay"
				style={{
					backgroundImage:
						"url(\"data:image/svg+xml;utf8,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E\")",
				}}
			/>

			<span
				className={cn(
					dmSans125ClassName(),
					"relative z-1 mb-3 inline-flex items-center rounded-full px-2.5 py-1 text-[10px] font-bold uppercase tracking-[0.14em] text-[#06121A]",
					"shadow-[0_0_14px_rgba(54,253,253,0.30)]",
				)}
				style={{
					background:
						"linear-gradient(94deg, #369BFD 4.8%, #36FDFD 77.04%, #36FDB5 143.99%)",
				}}
			>
				Featured
			</span>
			{picks.length > 1 && (
				<div className="absolute right-5 top-5 sm:right-6 sm:top-6 z-1 flex shrink-0 items-center gap-1.5">
					{picks.map((p, i) => {
						const active = i === index
						return (
							<button
								key={p.id}
								type="button"
								aria-label={`Show featured ${p.name}`}
								onClick={(e) => {
									e.stopPropagation()
									setIndex(i)
									setManualOverride(true)
								}}
								className={cn(
									"rounded-full transition-all cursor-pointer",
									active
										? "w-3 h-1 bg-[#4BA0FA]"
										: "size-1 bg-[#2A3040] hover:bg-[#3A4455]",
								)}
							/>
						)
					})}
				</div>
			)}

			<AnimatePresence mode="wait">
				<motion.div
					key={pick.id}
					initial={{ opacity: 0, y: 4 }}
					animate={{ opacity: 1, y: 0 }}
					exit={{ opacity: 0, y: -3 }}
					transition={{ duration: 0.2, ease: [0.4, 0, 0.2, 1] }}
					className="relative flex max-w-[72%] flex-col gap-1.5 sm:max-w-[55%]"
				>
					<h3
						className={cn(
							dmSans125ClassName(),
							"text-[17px] font-semibold leading-tight tracking-[-0.15px] text-[#FAFAFA] sm:text-[18px]",
						)}
					>
						{pick.headline}
					</h3>
					<p
						className={cn(
							dmSans125ClassName(),
							"line-clamp-2 text-[12px] leading-snug text-[#A1A1AA] sm:text-[13px]",
						)}
					>
						<span className="font-medium text-[#CBD5E1]">
							{pick.emoji ? `${pick.emoji} ` : ""}
							{pick.name}
						</span>{" "}
						· {pick.support}
					</p>
				</motion.div>
			</AnimatePresence>
		</div>
	)
}

function SearchToggle({
	value,
	onChange,
	expanded,
	setExpanded,
}: {
	value: string
	onChange: (next: string) => void
	expanded: boolean
	setExpanded: (next: boolean) => void
}) {
	const inputRef = useRef<HTMLInputElement>(null)

	const open = () => {
		setExpanded(true)
		requestAnimationFrame(() => inputRef.current?.focus())
	}

	const close = () => {
		onChange("")
		setExpanded(false)
	}

	if (!expanded && !value) {
		return (
			<button
				type="button"
				aria-label="Search integrations"
				onClick={open}
				className={cn(
					"flex size-8 shrink-0 items-center justify-center rounded-full bg-[#0D121A] text-[#A1A1AA] transition-colors hover:text-[#FAFAFA]",
					"shadow-[inset_1.5px_1.5px_4.5px_rgba(0,0,0,0.5)]",
				)}
			>
				<Search className="size-3.5" />
			</button>
		)
	}

	return (
		<div
			className={cn(
				"flex h-8 min-w-0 flex-1 items-center gap-1.5 rounded-full bg-[#0D121A] px-3",
				"shadow-[inset_1.5px_1.5px_4.5px_rgba(0,0,0,0.5)]",
			)}
		>
			<Search className="size-3.5 shrink-0 text-[#A1A1AA]" />
			<input
				ref={inputRef}
				type="text"
				value={value}
				onChange={(e) => onChange(e.target.value)}
				onKeyDown={(e) => {
					if (e.key === "Escape") close()
				}}
				onBlur={() => {
					if (!value) setExpanded(false)
				}}
				placeholder="Search integrations"
				className={cn(
					dmSans125ClassName(),
					"min-w-0 flex-1 bg-transparent text-[12px] text-[#FAFAFA] placeholder:text-[#525D6E] focus:outline-none",
				)}
			/>
			{value && (
				<button
					type="button"
					aria-label="Clear search"
					onClick={close}
					className="shrink-0 text-[#737373] transition-colors hover:text-[#FAFAFA]"
				>
					<X className="size-3.5" />
				</button>
			)}
		</div>
	)
}

function CategoryFilterToggle({
	value,
	onChange,
	counts,
	compact,
}: {
	value: CategoryFilter
	onChange: (next: CategoryFilter) => void
	counts: Record<CategoryFilter, number>
	compact?: boolean
}) {
	const visible = compact
		? [value]
		: CATEGORY_VALUES.filter((v) => v === "all" || counts[v] > 0)
	return (
		<div
			className={cn(
				"scrollbar-none flex items-center gap-0.5 overflow-x-auto rounded-full bg-[#0D121A] p-0.5",
				"shadow-[inset_1.5px_1.5px_4.5px_rgba(0,0,0,0.5)]",
			)}
		>
			{visible.map((v) => {
				const active = value === v
				return (
					<button
						key={v}
						type="button"
						onClick={() => onChange(v)}
						className={cn(
							dmSans125ClassName(),
							"flex h-7 shrink-0 items-center gap-1.5 rounded-full px-3 text-[12px] font-medium transition-colors",
							active
								? "bg-white/[0.10] text-[#FAFAFA]"
								: "text-[#A1A1AA] hover:text-[#FAFAFA]",
						)}
					>
						{CATEGORY_LABEL[v]}
						{v !== "all" && (
							<span
								className={cn(
									"text-[10px] font-semibold tabular-nums",
									active ? "text-[#A1A1AA]" : "text-[#525D6E]",
								)}
							>
								{counts[v]}
							</span>
						)}
					</button>
				)
			})}
		</div>
	)
}

export function IntegrationsView({
	publicMode = false,
	onOpenDocument,
}: {
	publicMode?: boolean
	onOpenDocument?: (doc: RecentDoc) => void
}) {
	const { setViewMode } = useViewMode()
	const queryClient = useQueryClient()
	const { org } = useAuth()
	const { allProjects } = useContainerTags()
	const shortcutsConnect = useShortcutsConnect()
	const autumn = useCustomer({ queryOptions: { enabled: !publicMode } })
	const promoCode = usePromoCode()
	// connectorAccess covers pro-tier connectors (incl. company_brain orgs); plugins
	// stay on hasProProduct. See useConnectorAccess.
	const { hasPro: hasProProduct, connectorAccess } = useConnectorAccess({
		enabled: !publicMode,
	})
	const isAutumnLoading = !publicMode && autumn.isLoading

	const [connectingPlugin, setConnectingPlugin] = useState<string | null>(null)
	const [connectingProvider, setConnectingProvider] =
		useState<ConnectorProvider | null>(null)
	const [granolaModalOpen, setGranolaModalOpen] = useState(false)
	const [pluginCommandsOpen, setPluginCommandsOpen] = useState(false)
	const [newKey, setNewKey] = useState<{
		open: boolean
		key: string
		pluginId: string | null
		loading: boolean
	}>({ open: false, key: "", pluginId: null, loading: false })
	const [pluginSetupTab, setPluginSetupTab] = useState<PluginSetupTab>("agent")
	const openPluginSetup = useCallback((pluginId: string) => {
		setPluginSetupTab("agent")
		setNewKey({ open: true, key: "", pluginId, loading: false })
	}, [])
	const [connectedPluginId, setConnectedPluginId] = useState<string | null>(
		null,
	)

	const { data: pluginsData } = useQuery({
		queryFn: async () => {
			const API_URL =
				process.env.NEXT_PUBLIC_BACKEND_URL ?? "https://api.supermemory.ai"
			const res = await fetch(`${API_URL}/v3/auth/plugins`, {
				credentials: "include",
			})
			if (!res.ok) throw new Error("Failed to fetch plugins")
			return (await res.json()) as { plugins: string[] }
		},
		enabled: !publicMode,
		queryKey: ["plugins"],
	})

	const { data: connections = [], isLoading: connectionsLoading } = useQuery({
		queryKey: ["connections"],
		queryFn: async () => {
			const response = await $fetch("@post/connections/list", {
				body: { containerTags: [] },
			})
			if (response.error)
				throw new Error(response.error?.message || "Failed to load connections")
			return response.data as Connection[]
		},
		staleTime: 30 * 1000,
		enabled: !publicMode && connectorAccess,
	})

	const {
		data: apiKeys = [],
		refetch: refetchKeys,
		isLoading: apiKeysLoading,
	} = useQuery<ListedApiKey[]>({
		queryKey: ["api-keys", org?.id],
		queryFn: async () => {
			if (!org?.id) return []
			const API_URL =
				process.env.NEXT_PUBLIC_BACKEND_URL ?? "https://api.supermemory.ai"
			const res = await fetch(`${API_URL}/v3/auth/keys`, {
				credentials: "include",
			})
			if (!res.ok) return []
			const data = (await res.json()) as { keys?: ListedApiKey[] }
			return data.keys ?? []
		},
		enabled: !publicMode && !!org?.id,
		staleTime: 30 * 1000,
	})

	const { data: xBookmarksImport } = useQuery({
		queryKey: ["x-bookmarks-import-status"],
		queryFn: async () => {
			const response = await $fetch("@post/documents/documents", {
				body: {
					page: 1,
					limit: 1,
					sort: "createdAt",
					order: "desc",
					categories: ["tweet"],
				},
				disableValidation: true,
			})
			if (response.error)
				throw new Error(
					response.error?.message || "Failed to load X bookmarks status",
				)
			return {
				count: response.data?.pagination?.totalItems ?? 0,
				lastImportedAt: response.data?.documents?.[0]?.createdAt ?? null,
			}
		},
		staleTime: 5 * 60 * 1000,
		enabled: !publicMode,
	})

	const tweetCount = xBookmarksImport?.count ?? 0
	const lastTweetImportAt = xBookmarksImport?.lastImportedAt ?? null

	const keyPrefix = useCallback((key: ListedApiKey): string | null => {
		return key.start ?? (key.name?.startsWith("sm_") ? key.name : null)
	}, [])

	const { active: activePlugins, setup: setupPlugins } = useMemo(
		() => parsePluginAuthKeys(apiKeys, keyPrefix),
		[apiKeys, keyPrefix],
	)

	const activeMcpKeys = useMemo(
		() => parseMcpAuthKeys(apiKeys, keyPrefix),
		[apiKeys, keyPrefix],
	)

	const activePluginById = useMemo(() => {
		const map = new Map<string, ConnectedKey>()
		for (const key of activePlugins) {
			const existing = map.get(key.pluginId)
			if (!existing) {
				map.set(key.pluginId, key)
				continue
			}
			const a = key.lastRequest ? new Date(key.lastRequest).getTime() : 0
			const b = existing.lastRequest
				? new Date(existing.lastRequest).getTime()
				: 0
			if (a >= b) map.set(key.pluginId, key)
		}
		return map
	}, [activePlugins])

	const activeMcpKey = useMemo(() => {
		let latest: ConnectedMcpKey | null = null
		for (const key of activeMcpKeys) {
			if (!latest) {
				latest = key
				continue
			}
			const a = toMs(key.lastRequest ?? key.createdAt)
			const b = toMs(latest.lastRequest ?? latest.createdAt)
			if (a >= b) latest = key
		}
		return latest
	}, [activeMcpKeys])

	const activeCountByPlugin = useMemo(() => {
		const map = new Map<string, number>()
		for (const key of activePlugins) {
			map.set(key.pluginId, (map.get(key.pluginId) ?? 0) + 1)
		}
		return map
	}, [activePlugins])

	const setupPluginIds = useMemo(
		() => new Set(setupPlugins.map((k) => k.pluginId)),
		[setupPlugins],
	)

	const connectionsByProvider = useMemo(() => {
		const out: Record<ConnectorProvider, Connection[]> = {
			"google-drive": [],
			notion: [],
			onedrive: [],
			granola: [],
		}
		for (const c of connections) {
			const p = c.provider as ConnectorProvider
			if (p in out) out[p].push(c)
		}
		return out
	}, [connections])

	const connectionSource = useMemo(() => {
		const m = new Map<string, ConnectorProvider>()
		for (const c of connections) {
			const p = c.provider as ConnectorProvider
			if (p in CONNECTOR_META) m.set(c.id, p)
		}
		return m
	}, [connections])

	const createPluginKeyMutation = useMutation({
		mutationFn: async (pluginId: string) => {
			const API_URL =
				process.env.NEXT_PUBLIC_BACKEND_URL ?? "https://api.supermemory.ai"
			const params = new URLSearchParams({ client: pluginId })
			const res = await fetch(`${API_URL}/v3/auth/key?${params}`, {
				credentials: "include",
			})
			if (!res.ok) {
				const errorData = (await res.json().catch(() => ({}))) as {
					message?: string
				}
				throw new Error(errorData.message || "Failed to create plugin key")
			}
			return (await res.json()) as { key: string }
		},
		onMutate: (pluginId) => setConnectingPlugin(pluginId),
		onError: (err) => {
			setNewKey((s) => ({ ...s, loading: false }))
			toast.error("Failed to connect plugin", {
				description: err instanceof Error ? err.message : "Unknown error",
			})
		},
		onSettled: () => {
			setConnectingPlugin(null)
			queryClient.invalidateQueries({ queryKey: ["api-keys", org?.id] })
		},
		onSuccess: (data, pluginId) => {
			setNewKey((s) =>
				s.open && s.pluginId === pluginId
					? { ...s, key: data.key, loading: false }
					: s,
			)
		},
	})

	const generatePluginKey = () => {
		const pluginId = newKey.pluginId
		if (
			!pluginId ||
			newKey.key ||
			newKey.loading ||
			createPluginKeyMutation.isPending
		)
			return
		setNewKey((s) => ({ ...s, loading: true }))
		createPluginKeyMutation.mutate(pluginId)
	}

	const selectPluginSetupTab = (tab: PluginSetupTab) => {
		setPluginSetupTab(tab)
		if (tab === "manual") generatePluginKey()
	}

	const addConnectionMutation = useMutation({
		mutationFn: async (provider: ConnectorProvider) => {
			const response = await $fetch("@post/connections/:provider", {
				params: { provider },
				body: {
					redirectUrl: window.location.href,
					containerTags: [],
				},
			})
			if ("data" in response && response.data && !("error" in response.data)) {
				return response.data
			}
			throw new Error(response.error?.message || "Failed to connect")
		},
		onMutate: (provider) => {
			setConnectingProvider(provider)
			analytics.connectionAuthStarted({ provider })
		},
		onError: (err) => {
			setConnectingProvider(null)
			toast.error("Failed to connect", {
				description: err instanceof Error ? err.message : "Unknown error",
			})
		},
		onSuccess: (data) => {
			if (data?.authLink) {
				window.location.href = data.authLink
				return
			}
			setConnectingProvider(null)
			toast.error("Connect link missing — try again.")
		},
	})

	const handleRevokePluginKey = async (keyId: string) => {
		try {
			await authClient.apiKey.delete({ keyId })
			toast.success("Plugin disconnected")
			refetchKeys()
		} catch {
			toast.error("Failed to disconnect plugin")
		}
	}

	const handleUpgrade = useCallback(
		async (planId?: unknown) => {
			const checkoutPlanId = planId === "api_max" ? "api_max" : "api_pro"
			try {
				const result = await autumn.attach({
					planId: checkoutPlanId,
					discounts: promoCode.getDiscounts(),
					successUrl: `${window.location.origin}/integrations`,
				})
				promoCode.clear()
				if (result?.paymentUrl) {
					window.open(result.paymentUrl, "_self")
					return
				}
				autumn.refetch?.()
			} catch (error) {
				console.error(error)
				toast.error("Failed to start checkout. Please try again.")
			}
		},
		[autumn, promoCode],
	)

	const redirectToLogin = useCallback(() => {
		const loginUrl = new URL("/login", window.location.origin)
		loginUrl.searchParams.set("redirect", window.location.href)
		window.location.assign(loginUrl.toString())
	}, [])

	const availablePluginIds = publicMode
		? Object.keys(PLUGIN_CATALOG)
		: (pluginsData?.plugins ?? Object.keys(PLUGIN_CATALOG))
	const enabledPluginIds = new Set(
		availablePluginIds.filter((id) => PLUGIN_CATALOG[id]),
	)

	const [category, setCategory] = useQueryState("cat", catParam)
	const [, setAddDoc] = useQueryState("add", addDocumentParam)
	const [, setDocId] = useQueryState("doc", docParam)
	const [mcpClient, setMcpClient] = useQueryState("mcpClient", parseAsString)
	const [mcpModalOpen, setMcpModalOpen] = useState(false)
	const [search, setSearch] = useState("")
	const [searchExpanded, setSearchExpanded] = useState(false)

	const openMcpClient = (key: MCPClientKey) => {
		void setMcpClient(key)
		setMcpModalOpen(true)
	}

	// Deeplink: /integrations?connect=<plugin-id|provider> auto-opens that card's connect flow.
	const [connectTarget, setConnectTarget] = useQueryState(
		"connect",
		parseAsString,
	)
	// Tracks the last target we acted on; reset when the param clears so a fresh deeplink re-fires.
	const connectHandledRef = useRef<string | null>(null)
	useEffect(() => {
		if (!connectTarget) {
			connectHandledRef.current = null
			return
		}
		if (connectHandledRef.current === connectTarget) return
		const target = connectTarget
		const isPlugin = !!PLUGIN_CATALOG[target]
		const freeTier = isPlugin && isFreeTierPlugin(target)

		// Paid plugins and granola need the plan query before deciding upgrade-vs-connect.
		const needsPlan = (isPlugin && !freeTier) || target === "granola"
		if (needsPlan && isAutumnLoading) return

		// Defer to a macrotask and cancel on cleanup so React Strict Mode's mount→unmount→remount
		// fires this exactly once (on the surviving mount) instead of opening/minting twice.
		let cancelled = false
		const timer = setTimeout(() => {
			if (cancelled) return
			connectHandledRef.current = target

			if (publicMode) {
				redirectToLogin()
				return
			}

			if (isPlugin) {
				if (!freeTier && !hasProProduct) {
					void setConnectTarget(null)
					handleUpgrade("api_pro")
				} else {
					openPluginSetup(target)
				}
				return
			}

			if (target === "granola") {
				if (!connectorAccess) {
					void setConnectTarget(null)
					handleUpgrade("api_pro")
				} else {
					setGranolaModalOpen(true)
				}
				return
			}

			if (["notion", "google-drive", "onedrive"].includes(target)) {
				// The add-document modal is driven by its own ?add param, so clearing ?connect is safe.
				void setConnectTarget(null)
				void setAddDoc("connect")
			}
		}, 0)

		return () => {
			cancelled = true
			clearTimeout(timer)
		}
	}, [
		connectTarget,
		isAutumnLoading,
		hasProProduct,
		connectorAccess,
		publicMode,
		redirectToLogin,
		setConnectTarget,
		setAddDoc,
		handleUpgrade,
		openPluginSetup,
	])

	const closeMcpModal = () => {
		setMcpModalOpen(false)
		void setMcpClient(null)
	}

	const activeMcpClient = mcpClient
		? MCP_CLIENTS.find((c) => c.key === mcpClient)
		: undefined

	const allItems = useMemo<Item[]>(
		() =>
			SECTIONS.flatMap((s) => s.items(PLUGIN_CATALOG)).filter(
				(item) => item.kind !== "plugin" || enabledPluginIds.has(item.pluginId),
			),
		[enabledPluginIds],
	)

	const isItemConnected = useCallback(
		(item: Item): boolean => {
			if (publicMode) return false
			if (item.kind === "plugin") {
				return activePluginById.has(item.pluginId)
			}
			if (item.kind === "connector") {
				return connectionsByProvider[item.provider].length > 0
			}
			if (item.kind === "import") {
				return tweetCount > 0
			}
			return false
		},
		[activePluginById, connectionsByProvider, publicMode, tweetCount],
	)

	const counts = useMemo<Record<CategoryFilter, number>>(
		() => ({
			all: allItems.length,
			connected: allItems.filter(isItemConnected).length,
			plugins: allItems.filter((i) => itemCategory(i) === "plugins").length,
			"knowledge-bases": allItems.filter(
				(i) => itemCategory(i) === "knowledge-bases",
			).length,
			"apps-extensions": allItems.filter(
				(i) => itemCategory(i) === "apps-extensions",
			).length,
			"ai-clients": allItems.filter((i) => itemCategory(i) === "ai-clients")
				.length,
		}),
		[allItems, isItemConnected],
	)

	useEffect(() => {
		if (category !== "all" && counts[category] === 0) {
			void setCategory("all")
		}
	}, [category, counts, setCategory])

	const railEntries = useMemo<RailEntry[]>(() => {
		const getSpaceName = (tag?: string): string | null => {
			if (!tag) return null
			if (tag === DEFAULT_PROJECT_ID) return "Default"
			return allProjects.find((p) => p.containerTag === tag)?.name ?? null
		}
		const rows: Array<{ ts: number; entry: RailEntry }> = []
		for (const [pluginId, key] of activePluginById) {
			const plugin = PLUGIN_CATALOG[pluginId]
			if (!plugin) continue
			const count = activeCountByPlugin.get(pluginId) ?? 1
			rows.push({
				ts: toMs(key.lastRequest ?? key.createdAt),
				entry: {
					kind: "plugin",
					id: `plugin-${pluginId}`,
					name: plugin.name,
					icon: (
						<Image
							src={plugin.icon}
							alt={plugin.name}
							width={24}
							height={24}
							className="size-6 rounded"
						/>
					),
					pro: !FREE_TIER_PLUGIN_IDS.includes(pluginId),
					agentCount: count,
					createdAt: key.createdAt ?? null,
					lastActive: key.lastRequest ?? null,
					onManage: () => setConnectedPluginId(pluginId),
				},
			})
		}
		if (activeMcpKey) {
			rows.push({
				ts: toMs(activeMcpKey.lastRequest ?? activeMcpKey.createdAt),
				entry: {
					kind: "mcp",
					id: "mcp",
					name: "Supermemory MCP",
					icon: <MCPIcon className="size-6" />,
					connectionCount: activeMcpKeys.length,
					createdAt: activeMcpKey.createdAt ?? null,
					lastActive: activeMcpKey.lastRequest ?? null,
					onManage: () => {
						void setMcpClient("mcp-url")
						setMcpModalOpen(true)
					},
				},
			})
		}
		for (const provider of [
			"google-drive",
			"notion",
			"onedrive",
		] as ConnectorProvider[]) {
			const conns = connectionsByProvider[provider]
			const primary = conns[0]
			if (!primary) continue
			const meta = CONNECTOR_META[provider]
			const earliest = conns.reduce<string | null>((min, c) => {
				if (!min) return c.createdAt
				return c.createdAt < min ? c.createdAt : min
			}, null)
			const email = conns.find((c) => c.email)?.email ?? null
			rows.push({
				ts: toMs(earliest),
				entry: {
					kind: "connector",
					id: `connector-${provider}`,
					name: meta.name,
					documentLabel: meta.documentLabel,
					icon: meta.icon,
					pro: true,
					provider,
					connection: primary,
					connectionCount: conns.length,
					email,
					spaceName: getSpaceName(primary.containerTags?.[0]),
					createdAt: earliest,
					onManage: () => void setAddDoc("connect"),
					onReconnect: () => addConnectionMutation.mutate(provider),
				},
			})
		}
		rows.sort((a, b) => b.ts - a.ts)
		return rows.map((r) => r.entry)
	}, [
		activeMcpKey,
		activeMcpKeys.length,
		activePluginById,
		activeCountByPlugin,
		connectionsByProvider,
		allProjects,
		setAddDoc,
		setMcpClient,
		addConnectionMutation,
	])

	const hasActiveRail = railEntries.length > 0

	const { data: recentDocs = [], isLoading: recentsLoading } = useQuery({
		queryKey: ["integrations-recent-docs", org?.id],
		queryFn: async () => {
			const response = await $fetch("@post/documents/documents", {
				body: {
					page: 1,
					limit: 6,
					sort: "createdAt",
					order: "desc",
					containerTags: [],
				},
				disableValidation: true,
			})
			if (response.error) {
				throw new Error(
					response.error?.message || "Failed to load recent documents",
				)
			}
			const data = response.data as z.infer<
				typeof DocumentsWithMemoriesResponseSchema
			>
			return data.documents ?? []
		},
		enabled: !publicMode && !!org?.id,
		staleTime: 60 * 1000,
	})

	const railLoading =
		!publicMode && (apiKeysLoading || connectionsLoading || isAutumnLoading)
	const showRightColumn =
		!publicMode &&
		(hasActiveRail || recentDocs.length > 0 || railLoading || recentsLoading)

	const openRecentDoc = useCallback(
		(doc: RecentDoc) => {
			if (onOpenDocument) {
				onOpenDocument(doc)
				return
			}
			void setDocId(doc.id ?? doc.customId ?? null)
		},
		[onOpenDocument, setDocId],
	)

	const claudeCodeConnected = activePluginById.has("claude_code")
	const claudeCodeNeedsPro =
		!isAutumnLoading && !hasProProduct && !isFreeTierPlugin("claude_code")
	const mcpConnected = !!activeMcpKey

	const featuredPicks: FeaturedPick[] = [
		{
			id: "feat-poke",
			name: "Poke",
			emoji: "🌴",
			headline: "Your memory, one text away.",
			support: "recall and save anything by texting Poke",
			tagline: "Connect Poke to recall and save memories over text.",
			icon: (
				<Image
					src="/images/poke.png"
					alt="Poke"
					width={32}
					height={32}
					className="rounded"
				/>
			),
			backdrop: (
				<Image
					src="/images/poke.png"
					alt=""
					width={360}
					height={360}
					className="object-contain"
				/>
			),
			ctaLabel: "Connect",
			onCta: () => {
				if (publicMode) {
					redirectToLogin()
					return
				}
				window.open(POKE_RECIPE_URL, "_blank", "noopener,noreferrer")
			},
		},
		{
			id: "feat-mcp",
			name: "Supermemory MCP",
			headline: "Your AI tools forget everything between chats.",
			support: "one setup gives Cursor, Claude & ChatGPT your memory",
			tagline: "Plug your memory into any MCP client.",
			icon: <MCPIcon className="size-8" />,
			backdrop: (
				<Image
					src="/onboarding/mcp.png"
					alt=""
					width={380}
					height={380}
					className="object-contain"
				/>
			),
			docsUrl: "https://supermemory.ai/docs/supermemory-mcp/introduction",
			ctaLabel: mcpConnected ? "Connected" : "Connect",
			onCta: () => {
				if (publicMode) {
					redirectToLogin()
					return
				}
				void setMcpClient(null)
				setViewMode("mcp")
			},
		},
		{
			id: "feat-claude-code",
			name: "Claude Code plugin",
			headline: "Stop re-explaining your codebase every session.",
			support: "remembers your conventions, decisions & project context",
			tagline: "Long-term memory for your Claude Code sessions.",
			icon: (
				<Image
					src="/images/plugins/claude-code.svg"
					alt="Claude Code"
					width={32}
					height={32}
					className="rounded"
				/>
			),
			backdrop: (
				<Image
					src="/images/plugins/claude-code.svg"
					alt=""
					width={360}
					height={360}
					className="object-contain"
				/>
			),
			docsUrl: "https://supermemory.ai/docs/integrations/claude-code",
			ctaLabel: publicMode
				? "Connect"
				: claudeCodeConnected
					? "Active"
					: claudeCodeNeedsPro
						? "Upgrade"
						: "Connect",
			onCta: () => {
				if (publicMode) {
					redirectToLogin()
					return
				}
				if (claudeCodeConnected) return
				if (claudeCodeNeedsPro) {
					handleUpgrade("api_pro")
					return
				}
				openPluginSetup("claude_code")
			},
		},
		{
			id: "feat-chrome",
			name: "Chrome Extension",
			headline: "That article you'll “read later”? Gone by next week.",
			support: "save anything on the web in one click",
			tagline: "Save anything on the web, straight from your browser.",
			icon: <ChromeIcon className="size-8" />,
			backdrop: <ChromeIcon className="size-96" />,
			ctaLabel: "Connect",
			onCta: () => {
				if (publicMode) {
					redirectToLogin()
					return
				}
				window.open(CHROME_EXTENSION_URL, "_blank", "noopener,noreferrer")
				analytics.onboardingChromeExtensionClicked({ source: "integrations" })
			},
		},
	]

	const q = search.trim().toLowerCase()
	const visibleItems = allItems.filter((item) => {
		if (category === "connected" && !isItemConnected(item)) return false
		if (
			category !== "all" &&
			category !== "connected" &&
			itemCategory(item) !== category
		)
			return false
		if (q) {
			const hay = `${item.name} ${item.tagline}`.toLowerCase()
			if (!hay.includes(q)) return false
		}
		return true
	})

	const trackCard = (item: Item) =>
		analytics.integrationCardClicked({
			kind: item.kind,
			id: item.id,
			name: item.name,
		})

	const renderRight = (item: Item): ReactNode => {
		if (publicMode) {
			return (
				<PillButton
					onClick={() => {
						trackCard(item)
						redirectToLogin()
					}}
				>
					Connect
				</PillButton>
			)
		}

		switch (item.kind) {
			case "plugin": {
				const activeKey = activePluginById.get(item.pluginId)
				const needsProUpgrade =
					!isAutumnLoading && !hasProProduct && !isFreeTierPlugin(item.pluginId)
				if (activeKey) {
					const busy = connectingPlugin === item.pluginId
					return (
						<button
							type="button"
							aria-label={`Connect ${item.name} to another agent`}
							title="Connect another agent"
							onClick={() => {
								if (needsProUpgrade) {
									handleUpgrade("api_pro")
									return
								}
								trackCard(item)
								openPluginSetup(item.pluginId)
							}}
							disabled={!!connectingPlugin}
							className={cn(
								"flex size-8 shrink-0 items-center justify-center rounded-full bg-[#0D121A] text-[#A1A1AA] transition-colors hover:text-[#FAFAFA] disabled:opacity-50 sm:size-9",
								"shadow-[inset_1.5px_1.5px_4.5px_rgba(0,0,0,0.7)]",
							)}
						>
							{busy ? (
								<Loader className="size-3.5 animate-spin" />
							) : (
								<Plus className="size-4" />
							)}
						</button>
					)
				}
				if (setupPluginIds.has(item.pluginId)) {
					return (
						<FinishSetupButton
							onClick={() => {
								trackCard(item)
								openPluginSetup(item.pluginId)
							}}
						/>
					)
				}
				if (needsProUpgrade) {
					return (
						<PillButton onClick={() => handleUpgrade("api_pro")}>
							<Zap className="size-3.5 text-[#4BA0FA]" /> Upgrade
						</PillButton>
					)
				}
				const busy = connectingPlugin === item.pluginId
				return (
					<PillButton
						onClick={() => {
							trackCard(item)
							openPluginSetup(item.pluginId)
						}}
						disabled={!!connectingPlugin}
					>
						{busy ? (
							<>
								<Loader className="size-3.5 animate-spin" /> Connecting…
							</>
						) : (
							"Connect"
						)}
					</PillButton>
				)
			}
			case "connector": {
				const count = connectionsByProvider[item.provider].length
				const isGranola = item.provider === "granola"
				const needsPlanUpgrade = !isAutumnLoading && !connectorAccess
				if (count > 0) {
					return (
						<div className="flex w-full items-center justify-between gap-2">
							<button
								type="button"
								aria-label="Add another knowledge source"
								title="Add another knowledge source"
								onClick={() => {
									trackCard(item)
									if (isGranola) {
										if (!connectorAccess) {
											handleUpgrade("api_pro")
											return
										}
										setGranolaModalOpen(true)
										return
									}
									void setAddDoc("connect")
								}}
								className={cn(
									"flex size-8 shrink-0 items-center justify-center rounded-full bg-[#0D121A] text-[#A1A1AA] transition-colors hover:text-[#FAFAFA] sm:size-9",
									"shadow-[inset_1.5px_1.5px_4.5px_rgba(0,0,0,0.7)]",
								)}
							>
								<Plus className="size-4" />
							</button>
						</div>
					)
				}
				if (needsPlanUpgrade) {
					return (
						<PillButton onClick={() => handleUpgrade("api_pro")}>
							<Zap className="size-3.5 text-[#4BA0FA]" /> Upgrade
						</PillButton>
					)
				}
				const busy = connectingProvider === item.provider
				return (
					<PillButton
						onClick={() => {
							trackCard(item)
							if (isGranola) {
								if (!connectorAccess) {
									handleUpgrade("api_pro")
									return
								}
								setGranolaModalOpen(true)
								return
							}
							addConnectionMutation.mutate(item.provider)
						}}
						disabled={!!connectingProvider}
					>
						{busy ? (
							<>
								<Loader className="size-3.5 animate-spin" /> Connecting…
							</>
						) : (
							"Connect"
						)}
					</PillButton>
				)
			}
			case "client": {
				if (item.action.type === "external") {
					return (
						<PillButton
							onClick={() => {
								trackCard(item)
								window.open(
									(item.action as { type: "external"; href: string }).href,
									"_blank",
									"noopener,noreferrer",
								)
								if (item.id === "chrome") {
									analytics.onboardingChromeExtensionClicked({
										source: "integrations",
									})
								}
							}}
						>
							Connect
						</PillButton>
					)
				}
				if (item.id === "shortcuts") {
					return <ShortcutsConnectButtons controller={shortcutsConnect} />
				}
				return (
					<PillButton
						onClick={() => {
							trackCard(item)
							setViewMode(
								(item.action as { type: "view"; viewMode: ViewParamValue })
									.viewMode,
							)
						}}
					>
						Connect
					</PillButton>
				)
			}
			case "mcp-client":
				return (
					<button
						type="button"
						aria-label={`Connect ${item.name}`}
						title="Connect"
						onClick={() => {
							trackCard(item)
							openMcpClient(item.clientKey)
						}}
						className={cn(
							"flex size-8 shrink-0 items-center justify-center rounded-full bg-[#0D121A] text-[#A1A1AA] transition-colors hover:text-[#FAFAFA] sm:size-9",
							"shadow-[inset_1.5px_1.5px_4.5px_rgba(0,0,0,0.7)]",
						)}
					>
						<Plus className="size-4" />
					</button>
				)
			case "import":
				return (
					<PillButton
						onClick={() => {
							trackCard(item)
							setViewMode(item.viewMode)
						}}
					>
						Connect
					</PillButton>
				)
		}
	}

	const renderInfoRight = (item: Item): ReactNode => {
		if (publicMode) return renderRight(item)

		switch (item.kind) {
			case "plugin": {
				const activeKey = activePluginById.get(item.pluginId)
				const needsProUpgrade =
					!isAutumnLoading && !hasProProduct && !isFreeTierPlugin(item.pluginId)
				if (activeKey) {
					const busy = connectingPlugin === item.pluginId
					return (
						<PillButton
							onClick={() => {
								if (needsProUpgrade) {
									handleUpgrade("api_pro")
									return
								}
								trackCard(item)
								openPluginSetup(item.pluginId)
							}}
							disabled={!!connectingPlugin}
						>
							{busy ? (
								<>
									<Loader className="size-3.5 animate-spin" /> Connecting…
								</>
							) : (
								"Connect"
							)}
						</PillButton>
					)
				}
				return renderRight(item)
			}
			case "connector": {
				const count = connectionsByProvider[item.provider].length
				if (count > 0) {
					return (
						<PillButton
							onClick={() => {
								trackCard(item)
								void setAddDoc("connect")
							}}
						>
							Connect
						</PillButton>
					)
				}
				return renderRight(item)
			}
			case "client": {
				if (item.id === "shortcuts") {
					return <ShortcutsConnectButtons controller={shortcutsConnect} />
				}
				return renderRight(item)
			}
			default:
				return renderRight(item)
		}
	}

	const renderStatus = (item: Item): ReactNode => {
		if (publicMode) return null

		switch (item.kind) {
			case "plugin": {
				const activeKey = activePluginById.get(item.pluginId)
				if (!activeKey) return null
				return (
					<ActiveButton
						count={activeCountByPlugin.get(item.pluginId) ?? 0}
						lastActive={activeKey.lastRequest}
						onClick={() => {
							trackCard(item)
							setConnectedPluginId(item.pluginId)
						}}
					/>
				)
			}
			case "connector": {
				const count = connectionsByProvider[item.provider].length
				if (count <= 0) return null
				return <ConnectionsCountPill count={count} />
			}
			case "import": {
				if (tweetCount <= 0) return null
				return <ImportedPill lastImportedAt={lastTweetImportAt} />
			}
			default:
				return null
		}
	}

	const renderItemCard = (item: Item, layoutClassName?: string) => (
		<ItemCard
			key={item.id}
			actionSlot={renderRight(item)}
			infoActionSlot={renderInfoRight(item)}
			icon={item.icon}
			id={item.id}
			kind={item.kind}
			name={item.name}
			tagline={item.tagline}
			pro={item.pro}
			max={item.max}
			isNew={item.isNew}
			docsUrl={item.docsUrl}
			leftIndicator={renderLeftIndicator(item)}
			statusSlot={renderStatus(item)}
			layoutClassName={layoutClassName}
		/>
	)

	const renderLeftIndicator = (_item: Item): ReactNode => {
		return null
	}

	const dialogPlugin = newKey.pluginId
		? PLUGIN_CATALOG[newKey.pluginId]
		: undefined
	const connectedDialogPlugin = connectedPluginId
		? PLUGIN_CATALOG[connectedPluginId]
		: undefined
	const connectedDialogKeys = connectedPluginId
		? activePlugins.filter((key) => key.pluginId === connectedPluginId)
		: []
	const connectedDialogNeedsPro =
		!!connectedPluginId &&
		!isAutumnLoading &&
		!hasProProduct &&
		!isFreeTierPlugin(connectedPluginId)
	const pluginSteps = dialogPlugin?.installSteps ?? []
	const stepsEmbedKey = pluginSteps.some((s) => s.code?.includes("sm_..."))
	const skipGeneratedKeyStep = stepsEmbedKey || !!dialogPlugin?.usesOAuth
	const setupSteps: InstallStep[] = skipGeneratedKeyStep
		? pluginSteps
		: [
				{
					title: "Copy your API key",
					description:
						"You won't be able to see it again — store it somewhere safe.",
					code: newKey.key,
					copyLabel: "API key",
					secret: true,
				},
				...pluginSteps,
			]

	return (
		<div className="flex-1">
			{shortcutsConnect.dialog}
			<div
				className={cn(
					"mx-auto w-full",
					showRightColumn ? "max-w-[88rem]" : "max-w-5xl",
				)}
			>
				<div className="flex flex-col gap-5">
					{!q && <FeaturedHero picks={featuredPicks} />}
					{showRightColumn && (
						<div className="lg:hidden">
							<MobileActivityPanel
								entries={railEntries}
								docs={recentDocs}
								connectionSource={connectionSource}
								activeLoading={railLoading}
								recentsLoading={recentsLoading}
								onOpenDoc={openRecentDoc}
								onViewAll={() => setViewMode("list")}
							/>
						</div>
					)}

					<div
						className={cn(
							"flex flex-col gap-5",
							showRightColumn && "lg:flex-row lg:items-start lg:gap-4",
						)}
					>
						<div className="flex min-w-0 flex-1 flex-col gap-5">
							<div
								className={cn(
									"relative overflow-hidden rounded-[14px] bg-[#191D24] p-4 sm:p-6",
									"shadow-[inset_2.42px_2.42px_4.263px_rgba(11,15,21,0.7)]",
								)}
							>
								<div className="mb-4 flex items-center justify-between gap-2">
									<div className="min-w-0 shrink">
										<CategoryFilterToggle
											value={category}
											onChange={(v) => void setCategory(v)}
											counts={counts}
											compact={searchExpanded || !!search}
										/>
									</div>
									<SearchToggle
										value={search}
										onChange={setSearch}
										expanded={searchExpanded}
										setExpanded={setSearchExpanded}
									/>
								</div>
								{visibleItems.length === 0 ? (
									<p
										className={cn(
											dmSans125ClassName(),
											"py-6 text-center text-[13px] text-[#A1A1AA]",
										)}
									>
										{q
											? `No integrations match “${search}”.`
											: "Nothing in this category yet."}
									</p>
								) : q || category !== "all" ? (
									<div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
										{visibleItems.map((item) =>
											renderItemCard(
												item,
												item.id === "shortcuts"
													? "sm:w-max sm:min-w-full"
													: undefined,
											),
										)}
									</div>
								) : (
									<div className="flex flex-col gap-6">
										{SECTION_ORDER.map((cat) => {
											const items = visibleItems.filter(
												(i) => itemCategory(i) === cat,
											)
											if (items.length === 0) return null
											return (
												<SectionRail
													key={cat}
													label={CATEGORY_LABEL[cat]}
													labelSlot={
														cat === "plugins" ? (
															<button
																type="button"
																aria-haspopup="dialog"
																aria-expanded={pluginCommandsOpen}
																onClick={() => setPluginCommandsOpen(true)}
																className={cn(
																	dmSans125ClassName(),
																	"inline-flex items-center gap-1.5 rounded-full text-[10px] font-medium text-[#737373] transition-colors hover:text-[#FAFAFA] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[#4BA0FA]/60 sm:text-[11px]",
																)}
															>
																<span>Install plugins with one command</span>
																<NewChip />
															</button>
														) : null
													}
													headerSlot={
														cat === "ai-clients" && activeMcpKey ? (
															<McpConnectedPill
																connectedAt={activeMcpKey.createdAt}
																lastActive={activeMcpKey.lastRequest}
															/>
														) : null
													}
												>
													{items.map((item) => (
														<div
															key={item.id}
															className="w-full sm:shrink-0 sm:grow-0 sm:basis-[calc((100%_-_0.75rem)/2)] lg:basis-[calc((100%_-_1.5rem)/3)]"
														>
															{renderItemCard(item)}
														</div>
													))}
												</SectionRail>
											)
										})}
									</div>
								)}
							</div>
						</div>
						{showRightColumn && (
							<div className="hidden w-full lg:block lg:w-[320px] lg:shrink-0">
								<div className="flex flex-col gap-4 lg:sticky lg:top-2">
									<ActiveConnectionsRail
										entries={railEntries}
										loading={railLoading}
									/>
									<RecentlyAddedCard
										docs={recentDocs}
										connectionSource={connectionSource}
										loading={recentsLoading}
										onOpenDoc={openRecentDoc}
										onViewAll={() => setViewMode("list")}
									/>
								</div>
							</div>
						)}
					</div>
				</div>
			</div>

			<PluginCommandsDialog
				open={pluginCommandsOpen}
				onOpenChange={setPluginCommandsOpen}
			/>

			<Dialog
				open={newKey.open}
				onOpenChange={(open) => {
					setNewKey((s) => ({
						open,
						key: open ? s.key : "",
						pluginId: open ? s.pluginId : null,
						loading: open ? s.loading : false,
					}))
					if (!open) {
						setPluginSetupTab("agent")
						void setConnectTarget(null)
					}
				}}
			>
				<DialogContent
					showCloseButton={false}
					style={{
						boxShadow:
							"0 2.842px 14.211px 0 rgba(0,0,0,0.25), 0.711px 0.711px 0.711px 0 rgba(255,255,255,0.10) inset",
					}}
					className={cn(
						dmSans125ClassName(),
						"flex max-h-[88dvh] flex-col gap-3 overflow-hidden border border-white/[0.12] bg-[#1B1F24] p-0 px-3 pt-3 pb-4 rounded-2xl md:px-4 sm:max-w-[560px] sm:rounded-[22px]",
					)}
				>
					<DialogTitle className="sr-only">
						Set up {dialogPlugin?.name ?? "your plugin"}
					</DialogTitle>
					<div className="flex shrink-0 items-center gap-3">
						{dialogPlugin && (
							<IconBox>
								<Image
									src={dialogPlugin.icon}
									alt={dialogPlugin.name}
									width={24}
									height={24}
								/>
							</IconBox>
						)}
						<div className="min-w-0 flex-1">
							<p className="truncate text-[16px] font-semibold leading-tight text-[#FAFAFA]">
								Set up {dialogPlugin?.name ?? "your plugin"}
							</p>
							<p className="mt-0.5 truncate text-[12px] text-[#A1A1AA]">
								{pluginSetupTab === "agent"
									? "Copy this prompt into your coding agent."
									: newKey.loading
										? "Generating your key…"
										: "Follow these steps to finish manually."}
							</p>
						</div>
						<div className="flex shrink-0 items-center gap-2">
							{dialogPlugin?.docsUrl && (
								<a
									href={dialogPlugin.docsUrl}
									target="_blank"
									rel="noopener noreferrer"
									className={cn(
										dmSans125ClassName(),
										"flex h-7 items-center gap-1.5 rounded-full bg-[#0D121A] px-3 text-[12px] text-[#A1A1AA] transition-colors hover:text-white",
										INSET,
									)}
								>
									<BookOpen className="size-3.5" /> Docs
								</a>
							)}
							<DialogPrimitive.Close
								type="button"
								aria-label="Close"
								className={cn(
									"flex size-7 items-center justify-center rounded-full bg-[#0D121A] transition-opacity hover:opacity-80 focus:outline-none",
									INSET,
								)}
							>
								<X className="size-4 text-[#737373]" />
							</DialogPrimitive.Close>
						</div>
					</div>
					<div className="flex min-h-0 flex-1 flex-col overflow-y-auto">
						<div
							className={cn(
								"min-w-0 space-y-4 rounded-[14px] bg-[#14161A] p-4 sm:p-5",
								INSET,
							)}
						>
							<PluginSetupMethodTabs
								value={pluginSetupTab}
								onChange={selectPluginSetupTab}
							/>
							{pluginSetupTab === "agent" && dialogPlugin ? (
								<PluginAgentInstructions plugin={dialogPlugin} />
							) : newKey.loading ? (
								<div className="flex items-center justify-center gap-2 py-10 text-[13px] text-[#A1A1AA]">
									<Loader className="size-4 animate-spin" />
									Generating your key…
								</div>
							) : newKey.key ? (
								<InstallSteps steps={setupSteps} apiKey={newKey.key} />
							) : (
								<div className="flex flex-col items-center gap-3 py-8 text-center">
									<p className="text-[13px] text-[#A1A1AA]">
										We couldn&apos;t generate the key for the manual setup.
									</p>
									<PillButton onClick={generatePluginKey}>Try again</PillButton>
								</div>
							)}
						</div>
					</div>
					<div className="flex shrink-0 items-center justify-end">
						<button
							type="button"
							onClick={() => {
								setNewKey({
									open: false,
									key: "",
									pluginId: null,
									loading: false,
								})
								setPluginSetupTab("agent")
								void setConnectTarget(null)
							}}
							className={cn(
								dmSans125ClassName(),
								"flex h-9 items-center gap-1.5 rounded-full bg-[#0D121A] px-5 text-[13px] font-medium text-[#FAFAFA] transition-opacity hover:opacity-80",
								INSET,
							)}
						>
							<Check className="size-3.5 text-[#4BA0FA]" /> Done
						</button>
					</div>
				</DialogContent>
			</Dialog>

			<Dialog
				open={!!connectedPluginId}
				onOpenChange={(open) => {
					if (!open) setConnectedPluginId(null)
				}}
			>
				<DialogContent
					showCloseButton={false}
					style={{
						boxShadow:
							"0 2.842px 14.211px 0 rgba(0,0,0,0.25), 0.711px 0.711px 0.711px 0 rgba(255,255,255,0.10) inset",
					}}
					className={cn(
						dmSans125ClassName(),
						"flex max-h-[88dvh] flex-col gap-3 overflow-hidden border border-white/[0.12] bg-[#1B1F24] p-0 px-3 pt-3 pb-4 rounded-2xl md:px-4 sm:max-w-[520px] sm:rounded-[22px]",
					)}
				>
					<DialogTitle className="sr-only">
						{connectedDialogPlugin?.name ?? "Plugin"} connection
					</DialogTitle>
					<div className="flex shrink-0 items-center gap-3">
						{connectedDialogPlugin && (
							<IconBox>
								<Image
									src={connectedDialogPlugin.icon}
									alt={connectedDialogPlugin.name}
									width={24}
									height={24}
								/>
							</IconBox>
						)}
						<div className="min-w-0 flex-1">
							<p className="truncate text-[16px] font-semibold leading-tight text-[#FAFAFA]">
								{connectedDialogPlugin?.name ?? "Plugin"}
							</p>
							<p className="mt-0.5 flex items-center gap-1.5 text-[12px] text-[#00AC3F]">
								<span className="size-[7px] rounded-full bg-[#00AC3F]" />
								Active
								{activePluginById.get(connectedPluginId ?? "")?.lastRequest && (
									<span className="text-[#737373]">
										·{" "}
										{formatRelativeTime(
											activePluginById.get(connectedPluginId ?? "")
												?.lastRequest,
										)}
									</span>
								)}
							</p>
						</div>
						<div className="flex shrink-0 items-center gap-2">
							{connectedDialogPlugin?.docsUrl && (
								<a
									href={connectedDialogPlugin.docsUrl}
									target="_blank"
									rel="noopener noreferrer"
									className={cn(
										dmSans125ClassName(),
										"flex h-7 items-center gap-1.5 rounded-full bg-[#0D121A] px-3 text-[12px] text-[#A1A1AA] transition-colors hover:text-white",
										INSET,
									)}
								>
									<BookOpen className="size-3.5" /> Docs
								</a>
							)}
							<DialogPrimitive.Close
								type="button"
								aria-label="Close"
								className={cn(
									"flex size-7 items-center justify-center rounded-full bg-[#0D121A] transition-opacity hover:opacity-80 focus:outline-none",
									INSET,
								)}
							>
								<X className="size-4 text-[#737373]" />
							</DialogPrimitive.Close>
						</div>
					</div>
					<div
						className={cn(
							"flex min-w-0 flex-col gap-2 rounded-[14px] bg-[#14161A] p-4",
							INSET,
						)}
					>
						<p className="text-[11px] font-medium uppercase tracking-wide text-[#737373]">
							{connectedDialogKeys.length > 1
								? `${connectedDialogKeys.length} connections`
								: "Connection"}
						</p>
						{connectedDialogKeys.length > 0 ? (
							<div className="flex flex-col gap-1.5">
								{connectedDialogKeys.map((key) => (
									<div
										key={key.keyId}
										className="flex min-w-0 items-center justify-between gap-3 rounded-lg bg-[#0D121A]/70 px-3 py-2"
									>
										<span className="min-w-0 flex-1 truncate font-mono text-[12px] text-[#A1A1AA]">
											{key.keyStart ? `${key.keyStart}...` : "API key"}
										</span>
										<DisconnectButton
											onConfirm={() => void handleRevokePluginKey(key.keyId)}
										/>
									</div>
								))}
							</div>
						) : (
							<p className="text-[12px] text-[#A1A1AA]">
								No active connection was found.
							</p>
						)}
						<p className="mt-1 text-[12px] text-[#737373]">
							Connect this plugin to another agent to run them in parallel.
						</p>
					</div>
					<div className="flex shrink-0 items-center justify-between gap-2">
						{connectedDialogNeedsPro ? (
							<PillButton onClick={() => handleUpgrade("api_pro")}>
								<Zap className="size-3.5 text-[#4BA0FA]" /> Upgrade to connect
								more
							</PillButton>
						) : (
							<PillButton
								onClick={() => {
									if (!connectedPluginId) return
									const pluginId = connectedPluginId
									setConnectedPluginId(null)
									openPluginSetup(pluginId)
								}}
								disabled={!!connectingPlugin}
							>
								{connectingPlugin === connectedPluginId ? (
									<>
										<Loader className="size-3.5 animate-spin" /> Connecting…
									</>
								) : (
									<>
										<Plus className="size-3.5 text-[#4BA0FA]" /> Connect another
									</>
								)}
							</PillButton>
						)}
						<DialogPrimitive.Close asChild>
							<button
								type="button"
								className={cn(
									dmSans125ClassName(),
									"flex h-9 items-center gap-1.5 rounded-full bg-[#0D121A] px-5 text-[13px] font-medium text-[#FAFAFA] transition-opacity hover:opacity-80",
									INSET,
								)}
							>
								<Check className="size-3.5 text-[#4BA0FA]" /> Done
							</button>
						</DialogPrimitive.Close>
					</div>
				</DialogContent>
			</Dialog>

			<Dialog
				open={mcpModalOpen}
				onOpenChange={(open) => {
					if (!open) closeMcpModal()
					else setMcpModalOpen(true)
				}}
			>
				<DialogContent
					showCloseButton={false}
					style={{
						boxShadow:
							"0 2.842px 14.211px 0 rgba(0,0,0,0.25), 0.711px 0.711px 0.711px 0 rgba(255,255,255,0.10) inset",
					}}
					className={cn(
						dmSans125ClassName(),
						"flex max-h-[88dvh] flex-col gap-3 overflow-hidden border border-white/[0.12] bg-[#1B1F24] p-0 px-3 pt-3 pb-4 rounded-2xl md:px-4 sm:max-w-[640px] sm:rounded-[22px]",
					)}
				>
					<DialogTitle className="sr-only">
						Set up {activeMcpClient?.name ?? "MCP client"}
					</DialogTitle>
					<div className="flex shrink-0 items-center gap-3">
						<IconBox>
							{activeMcpClient && activeMcpClient.key !== "mcp-url" ? (
								<Image
									src={mcpClientIconSrc(activeMcpClient.key)}
									alt={activeMcpClient.name}
									width={24}
									height={24}
									unoptimized
									className="size-6 rounded object-contain"
								/>
							) : (
								<MCPIcon className="size-6" />
							)}
						</IconBox>
						<div className="min-w-0 flex-1">
							<p className="truncate text-[16px] font-semibold leading-tight text-[#FAFAFA]">
								Set up {activeMcpClient?.name ?? "MCP client"}
							</p>
							<p className="mt-0.5 truncate text-[12px] text-[#A1A1AA]">
								Connect supermemory MCP to{" "}
								{activeMcpClient?.name ?? "your client"}.
							</p>
						</div>
						<div className="flex shrink-0 items-center gap-2">
							<a
								href="https://supermemory.ai/docs/supermemory-mcp/introduction"
								target="_blank"
								rel="noopener noreferrer"
								className={cn(
									dmSans125ClassName(),
									"flex h-7 items-center gap-1.5 rounded-full bg-[#0D121A] px-3 text-[12px] text-[#A1A1AA] transition-colors hover:text-white",
									INSET,
								)}
							>
								<BookOpen className="size-3.5" /> Docs
							</a>
							<DialogPrimitive.Close
								type="button"
								aria-label="Close"
								className={cn(
									"flex size-7 items-center justify-center rounded-full bg-[#0D121A] transition-opacity hover:opacity-80 focus:outline-none",
									INSET,
								)}
							>
								<X className="size-4 text-[#737373]" />
							</DialogPrimitive.Close>
						</div>
					</div>
					<div className="flex min-h-0 flex-1 flex-col overflow-y-auto">
						<div
							className={cn(
								"min-w-0 rounded-[14px] bg-[#14161A] p-4 sm:p-5",
								INSET,
							)}
						>
							<MCPSteps variant="embedded" />
						</div>
					</div>
					<div className="flex shrink-0 items-center justify-end">
						<button
							type="button"
							onClick={closeMcpModal}
							className={cn(
								dmSans125ClassName(),
								"flex h-9 items-center gap-1.5 rounded-full bg-[#0D121A] px-5 text-[13px] font-medium text-[#FAFAFA] transition-opacity hover:opacity-80",
								INSET,
							)}
						>
							<Check className="size-3.5 text-[#4BA0FA]" /> Done
						</button>
					</div>
				</DialogContent>
			</Dialog>

			<GranolaConnectModal
				open={connectorAccess && granolaModalOpen}
				onOpenChange={(open) => {
					setGranolaModalOpen(open && connectorAccess)
					if (!open) void setConnectTarget(null)
				}}
			/>
		</div>
	)
}