From 7c2bd19cd86c4b9befd9081b2a7465e695c12080 Mon Sep 17 00:00:00 2001
From: ved015 <122012786+ved015@users.noreply.github.com>
Date: Tue, 9 Jun 2026 15:29:38 +0000
Subject: [PATCH 1/2] Update integrations info modal (#1065)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
## Summary
- Replace percard Docs links with hover only info buttons and card click info modals
- Add doc backed use cases inside setupstyle info modals, with Docs access and the same card action in the footer
- Track all info modal close behavior through one analytics event with a close reason
- Keep Active/Connected status in the card footer, align the info icon to the card action margin, and fix the Settings modal Integrations linkout
Normal no hovering
On hovering
Info modal
---
apps/web/components/integrations-view.tsx | 571 +++++++++++++++---
.../components/settings/settings-content.tsx | 5 +-
.../components/settings/settings-modal.tsx | 1 -
apps/web/lib/analytics.ts | 6 +
apps/web/lib/plugin-catalog.ts | 10 +-
5 files changed, 498 insertions(+), 95 deletions(-)
diff --git a/apps/web/components/integrations-view.tsx b/apps/web/components/integrations-view.tsx
index 97466f356..566f0a36a 100644
--- a/apps/web/components/integrations-view.tsx
+++ b/apps/web/components/integrations-view.tsx
@@ -3,7 +3,7 @@
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
import { useCustomer } from "autumn-js/react"
import { cn } from "@lib/utils"
-import { dmSans125ClassName } from "@/lib/fonts"
+import { dmSansClassName, dmSans125ClassName } from "@/lib/fonts"
import { hasActivePlan } from "@lib/queries"
import { $fetch } from "@lib/api"
import { authClient } from "@lib/auth"
@@ -23,6 +23,7 @@ import {
ArrowRight,
BookOpen,
Check,
+ Info,
Loader,
Plus,
Search,
@@ -338,7 +339,7 @@ const SECTIONS: Array<{
className="size-6 rounded object-contain"
/>
),
- docsUrl: "https://docs.supermemory.ai/supermemory-mcp/introduction",
+ docsUrl: "https://supermemory.ai/docs/supermemory-mcp/introduction",
})),
},
{
@@ -381,6 +382,7 @@ const SECTIONS: Array<{
simpleTitle: "Your Docs, Sheets and Slides, searchable",
icon: ,
pro: true,
+ docsUrl: "https://supermemory.ai/docs/connectors/google-drive",
},
{
kind: "connector",
@@ -391,6 +393,7 @@ const SECTIONS: Array<{
simpleTitle: "All your Notion pages, in supermemory",
icon: ,
pro: true,
+ docsUrl: "https://supermemory.ai/docs/connectors/notion",
},
{
kind: "connector",
@@ -401,6 +404,7 @@ const SECTIONS: Array<{
simpleTitle: "Your OneDrive files, ready to recall",
icon: ,
pro: true,
+ docsUrl: "https://supermemory.ai/docs/connectors/onedrive",
},
],
},
@@ -531,22 +535,369 @@ function IconBox({ children }: { children: ReactNode }) {
)
}
-function DocsLink({ href }: { href: string }) {
+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 = {
+ "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 (
- e.stopPropagation()}
+
+
+
+ )
+}
+
+function ItemInfoDialog({
+ actionSlot,
+ docsUrl,
+ icon,
+ id,
+ kind,
+ name,
+ onOpenChange,
+ open,
+}: {
+ actionSlot: ReactNode
+ docsUrl?: string
+ 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 (
+
)
}
@@ -629,43 +980,61 @@ function ConnectionsCountPill({ count }: { count: number }) {
}
function ItemCard({
+ actionSlot,
icon,
+ id,
+ kind,
name,
tagline,
pro,
isNew,
docsUrl,
leftIndicator,
- rightSlot,
+ statusSlot,
}: {
+ actionSlot: ReactNode
icon: ReactNode
+ id: string
+ kind: ItemKind
name: string
tagline: string
pro?: boolean
isNew?: boolean
docsUrl?: string
leftIndicator?: ReactNode
- rightSlot: ReactNode
+ statusSlot?: ReactNode
}) {
+ const [infoOpen, setInfoOpen] = useState(false)
return (
+ // biome-ignore lint/a11y/useSemanticElements: the card contains nested action buttons, so it cannot be a native button.
- ),
- onOpen: () => {
- track("mcp")
- void router.push("/?view=integrations")
- },
- },
- {
- id: "coding-claude-supermemory",
- title: "Claude Supermemory",
- description:
- "Persistent memory for Claude Code — context and decisions across sessions.",
- icon: spotlightPluginCornerIcon(
- "/images/plugins/claude-code.svg",
- "Claude Supermemory",
- ),
- pro: true,
- onOpen: () => {
- track("plugin_claude_supermemory")
- openPluginsPanel()
- },
- },
- {
- id: "coding-opencode",
- title: "OpenCode",
- description:
- "Memory layer for OpenCode — search past sessions and inject context.",
- icon: spotlightPluginCornerIcon(
- "/images/plugins/opencode.svg",
- "OpenCode",
- ),
- pro: true,
- onOpen: () => {
- track("plugin_opencode")
- openPluginsPanel()
- },
- },
- {
- id: "connections",
- title: "Connections",
- description:
- "Link Notion, Google Drive, or OneDrive to import your docs",
- icon: spotlightConnectionsIcon,
- pro: true,
- onOpen: () => {
- track("connections")
- void router.push("/?add=connect")
- },
- },
- ],
- productivity: [
- {
- id: "chrome",
- title: "Chrome Extension",
- description:
- "Save any webpage, import bookmarks, sync ChatGPT memories",
- icon: 
,
- onOpen: () => {
- track("import_x")
- void router.push("/?view=import")
- },
- },
- ],
- agents: [
- {
- id: "agents-openclaw",
- title: "OpenClaw",
- description:
- "Multi-platform memory for OpenClaw — Telegram, WhatsApp, Discord, Slack, and more.",
- icon: spotlightPluginCornerIcon(
- "/images/plugins/openclaw.svg",
- "OpenClaw",
- ),
- pro: true,
- onOpen: () => {
- track("plugin_openclaw")
- openPluginsPanel()
- },
- },
- {
- id: "agents-hermes",
- title: "Hermes",
- description:
- "Memory layer for the Hermes agent — recall, capture, and user profile.",
- icon: spotlightPluginCornerIcon("/images/plugins/hermes.svg", "Hermes"),
- onOpen: () => {
- track("plugin_hermes")
- openPluginsPanel()
- },
- },
- {
- id: "agents-claude-supermemory",
- title: "Claude Supermemory",
- description:
- "Persistent memory for Claude Code — context and decisions across sessions.",
- icon: spotlightPluginCornerIcon(
- "/images/plugins/claude-code.svg",
- "Claude Supermemory",
- ),
- pro: true,
- onOpen: () => {
- track("plugin_claude_supermemory")
- openPluginsPanel()
- },
- },
- {
- id: "agents-opencode",
- title: "OpenCode",
- description:
- "Memory layer for OpenCode — search past sessions and inject context.",
- icon: spotlightPluginCornerIcon(
- "/images/plugins/opencode.svg",
- "OpenCode",
- ),
- pro: true,
- onOpen: () => {
- track("plugin_opencode")
- openPluginsPanel()
- },
- },
- {
- id: "console-api",
- title: "Console & API",
- description:
- "API keys, orgs, and the hosted API for production agent workloads",
- icon: