From 900cecb3c57de38a6343c2173becc8e8e9c6b252 Mon Sep 17 00:00:00 2001 From: Sreeram Sreedhar Date: Mon, 25 May 2026 22:44:36 -0400 Subject: [PATCH 1/7] initial commit --- apps/web/components/settings/sync-utils.ts | 2 ++ packages/lib/api.ts | 3 ++- packages/ui/assets/icons.tsx | 11 +++++++++++ 3 files changed, 15 insertions(+), 1 deletion(-) diff --git a/apps/web/components/settings/sync-utils.ts b/apps/web/components/settings/sync-utils.ts index 25a683ba8..f1285e5bb 100644 --- a/apps/web/components/settings/sync-utils.ts +++ b/apps/web/components/settings/sync-utils.ts @@ -42,6 +42,7 @@ export const PROVIDER_DISPLAY_NAMES: Record = { github: "GitHub", "web-crawler": "Web Crawler", s3: "S3", + granola: "Granola", } /** Provider type union matching the backend import endpoint */ @@ -53,3 +54,4 @@ export type ImportProvider = | "github" | "web-crawler" | "s3" + | "granola" diff --git a/packages/lib/api.ts b/packages/lib/api.ts index 76d62fda9..e478670a8 100644 --- a/packages/lib/api.ts +++ b/packages/lib/api.ts @@ -90,7 +90,7 @@ export const apiSchema = createSchema({ redirectsTo: z.string().optional(), }), params: z.object({ - provider: z.enum(["google-drive", "notion", "onedrive"]), + provider: z.enum(["google-drive", "notion", "onedrive", "granola"]), }), }, @@ -158,6 +158,7 @@ export const apiSchema = createSchema({ "github", "web-crawler", "s3", + "granola", ]), }), }, diff --git a/packages/ui/assets/icons.tsx b/packages/ui/assets/icons.tsx index 9c30d2e3e..597d6a31d 100644 --- a/packages/ui/assets/icons.tsx +++ b/packages/ui/assets/icons.tsx @@ -362,3 +362,14 @@ export const ClaudeDesktopIcon = ({ className }: { className?: string }) => { ) } + +export const Granola = ({ className }: { className?: string }) => ( + + Granola + + +) From 70848859ac318a7309a69ad3b2e0c4e5e6fe14ae Mon Sep 17 00:00:00 2001 From: Sreeram Sreedhar Date: Mon, 25 May 2026 22:56:22 -0400 Subject: [PATCH 2/7] =?UTF-8?q?GranolaConnectModal=20=E2=80=94=20API-key?= =?UTF-8?q?=20entry=20dialog?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/web/components/granola-connect-modal.tsx | 222 ++++++++++++++++++ 1 file changed, 222 insertions(+) create mode 100644 apps/web/components/granola-connect-modal.tsx diff --git a/apps/web/components/granola-connect-modal.tsx b/apps/web/components/granola-connect-modal.tsx new file mode 100644 index 000000000..866e09906 --- /dev/null +++ b/apps/web/components/granola-connect-modal.tsx @@ -0,0 +1,222 @@ +"use client" + +import * as DialogPrimitive from "@radix-ui/react-dialog" +import { useMutation, useQueryClient } from "@tanstack/react-query" +import { Loader2, X } from "lucide-react" +import { useEffect, useState } from "react" +import { toast } from "sonner" +import { $fetch } from "@lib/api" +import { cn } from "@lib/utils" +import { Dialog, DialogContent, DialogTitle } from "@ui/components/dialog" +import { Granola } from "@ui/assets/icons" +import { dmSans125ClassName } from "@/lib/fonts" +import { INSET } from "./integrations/install-steps" + +function GranolaIconBox() { + return ( +
+ +
+ ) +} + +export function GranolaConnectModal({ + open, + onOpenChange, + containerTags, + onSuccess, +}: { + open: boolean + onOpenChange: (open: boolean) => void + containerTags?: string[] + onSuccess?: () => void +}) { + const queryClient = useQueryClient() + const [apiKey, setApiKey] = useState("") + const [errorMessage, setErrorMessage] = useState(null) + + // Reset form whenever the modal opens. + useEffect(() => { + if (open) { + setApiKey("") + setErrorMessage(null) + } + }, [open]) + + const connectMutation = useMutation({ + mutationFn: async (key: string) => { + const response = await $fetch("@post/connections/:provider", { + params: { provider: "granola" }, + body: { + containerTags, + metadata: { apiKey: key }, + redirectUrl: window.location.href, + }, + }) + if (response.error) { + const msg = + (response.error as { message?: string })?.message || + "Failed to connect" + throw new Error(msg) + } + return response.data + }, + onSuccess: () => { + toast.success("Granola connected") + queryClient.invalidateQueries({ queryKey: ["connections"] }) + onSuccess?.() + onOpenChange(false) + }, + onError: (error) => { + setErrorMessage( + error instanceof Error ? error.message : "Failed to connect", + ) + }, + }) + + const trimmedKey = apiKey.trim() + const canConnect = trimmedKey.length > 0 && !connectMutation.isPending + + const handleConnect = () => { + setErrorMessage(null) + connectMutation.mutate(trimmedKey) + } + + return ( + + + Connect Granola + +
+ +
+

+ Connect Granola +

+

+ Paste your API key to sync meeting notes. +

+
+ + + +
+ +
+ + { + setApiKey(e.target.value) + if (errorMessage) setErrorMessage(null) + }} + onKeyDown={(e) => { + if (e.key === "Enter" && canConnect) handleConnect() + }} + placeholder="grn_..." + className={cn( + dmSans125ClassName(), + "w-full rounded-[10px] bg-[#0D121A] px-3 py-2.5 text-[13px] text-[#FAFAFA] placeholder:text-[#52525B] outline-none border border-white/[0.06] focus:border-white/[0.16]", + )} + /> +

+ Create one in Granola → Settings → Connectors → API keys. + Requires a Business or Enterprise plan. +

+ {errorMessage && ( +

+ {errorMessage} +

+ )} +
+ +
+ + +
+ + + ) +} From 7920fd715da736cd1a5d9dc586e9eee16520fcf9 Mon Sep 17 00:00:00 2001 From: Sreeram Sreedhar Date: Mon, 25 May 2026 22:59:28 -0400 Subject: [PATCH 3/7] add-document dropdown --- .../components/add-document/connections.tsx | 32 +++++++++++++++++-- 1 file changed, 30 insertions(+), 2 deletions(-) diff --git a/apps/web/components/add-document/connections.tsx b/apps/web/components/add-document/connections.tsx index 7aa0250d5..610217b5f 100644 --- a/apps/web/components/add-document/connections.tsx +++ b/apps/web/components/add-document/connections.tsx @@ -4,7 +4,7 @@ import { $fetch } from "@lib/api" import { hasActivePlan } from "@lib/queries" import type { ConnectionResponseSchema } from "@repo/validation/api" import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query" -import { GoogleDrive, Notion, OneDrive } from "@ui/assets/icons" +import { GoogleDrive, Granola, Notion, OneDrive } from "@ui/assets/icons" import { useCustomer } from "autumn-js/react" import { Check, @@ -31,6 +31,7 @@ import { DropdownMenuItem, DropdownMenuTrigger, } from "@ui/components/dropdown-menu" +import { GranolaConnectModal } from "@/components/granola-connect-modal" import { RemoveConnectionDialog } from "@/components/remove-connection-dialog" import { SyncStatusBadge } from "@/components/settings/sync-status-badge" import { SyncHistoryPanel } from "@/components/settings/sync-history-panel" @@ -48,7 +49,7 @@ const GDRIVE_SCOPE_LABELS: Record = { type Connection = z.infer -type ConnectorProvider = "google-drive" | "notion" | "onedrive" +type ConnectorProvider = "google-drive" | "notion" | "onedrive" | "granola" const CONNECTORS: Record< ConnectorProvider, @@ -77,6 +78,12 @@ const CONNECTORS: Record< documentLabel: "documents", icon: OneDrive, }, + granola: { + title: "Granola", + description: "Sync AI meeting notes and transcripts", + documentLabel: "notes", + icon: Granola, + }, } as const /** Extract typed metadata from a connection, with runtime validation. */ @@ -302,6 +309,7 @@ export function ConnectContent({ selectedProject }: ConnectContentProps) { const isProUser = hasActivePlan(autumn.data?.subscriptions, "api_pro") const [connectingProvider, setConnectingProvider] = useState(null) + const [granolaModalOpen, setGranolaModalOpen] = useState(false) const [gdriveSyncScope, setGdriveSyncScope] = useState("scoped") const [isUpgrading, setIsUpgrading] = useState(false) @@ -753,6 +761,20 @@ export function ConnectContent({ selectedProject }: ConnectContentProps) { + setGranolaModalOpen(true)} + className="flex items-start gap-2.5 px-3 py-2.5 rounded-md cursor-pointer text-white opacity-60 hover:opacity-100 hover:bg-[#293952]/40 focus:bg-[#293952]/40 focus:opacity-100" + > + +
+ + Granola + + + Meeting notes & transcripts + +
+ @@ -879,6 +901,12 @@ export function ConnectContent({ selectedProject }: ConnectContentProps) { }} isDeleting={deleteConnectionMutation.isPending} /> + + ) } From 4453f7678d564c80c64aa84ee62e515f8ef96adb Mon Sep 17 00:00:00 2001 From: Sreeram Sreedhar Date: Mon, 25 May 2026 23:02:20 -0400 Subject: [PATCH 4/7] render Granola connections in settings page --- apps/web/components/settings/connections-mcp.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/apps/web/components/settings/connections-mcp.tsx b/apps/web/components/settings/connections-mcp.tsx index 26412728f..bf608b1e1 100644 --- a/apps/web/components/settings/connections-mcp.tsx +++ b/apps/web/components/settings/connections-mcp.tsx @@ -4,7 +4,7 @@ import { dmSans125ClassName } from "@/lib/fonts" import { cn } from "@lib/utils" import { $fetch } from "@lib/api" import { hasActivePlan } from "@lib/queries" -import { GoogleDrive, Notion, OneDrive } from "@ui/assets/icons" +import { GoogleDrive, Granola, Notion, OneDrive } from "@ui/assets/icons" import { useCustomer } from "autumn-js/react" import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query" import { @@ -68,6 +68,12 @@ const CONNECTORS = { icon: OneDrive, documentLabel: "documents", }, + granola: { + title: "Granola", + description: "Sync AI meeting notes and transcripts", + icon: Granola, + documentLabel: "notes", + }, } as const type ConnectorProvider = keyof typeof CONNECTORS From 8692c13f8d5d4a8b89a8811b24fa0dbd69a90691 Mon Sep 17 00:00:00 2001 From: Sreeram Sreedhar Date: Mon, 25 May 2026 23:27:00 -0400 Subject: [PATCH 5/7] schema fix --- packages/lib/api.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/lib/api.ts b/packages/lib/api.ts index e478670a8..551095811 100644 --- a/packages/lib/api.ts +++ b/packages/lib/api.ts @@ -84,8 +84,10 @@ export const apiSchema = createSchema({ redirectUrl: z.string().optional(), }), output: z.object({ - authLink: z.string(), - expiresIn: z.string(), + // authLink/expiresIn are present for OAuth providers (Drive/Notion/OneDrive) + // but absent for credential-based ones like Granola where there's no redirect. + authLink: z.string().optional(), + expiresIn: z.string().optional(), id: z.string(), redirectsTo: z.string().optional(), }), From 594c921a016704ec70bc45ad9b551e8101549eee Mon Sep 17 00:00:00 2001 From: Sreeram Sreedhar Date: Mon, 25 May 2026 23:33:00 -0400 Subject: [PATCH 6/7] fix --- apps/web/components/add-document/connections.tsx | 7 +++++-- apps/web/components/settings/connections-mcp.tsx | 7 +++++-- apps/web/components/settings/sync-utils.ts | 9 ++++++++- 3 files changed, 18 insertions(+), 5 deletions(-) diff --git a/apps/web/components/add-document/connections.tsx b/apps/web/components/add-document/connections.tsx index 610217b5f..e81a36b3a 100644 --- a/apps/web/components/add-document/connections.tsx +++ b/apps/web/components/add-document/connections.tsx @@ -37,7 +37,10 @@ import { SyncStatusBadge } from "@/components/settings/sync-status-badge" import { SyncHistoryPanel } from "@/components/settings/sync-history-panel" import { useConnectionHealth } from "@/hooks/use-connection-health" import { useTriggerSync } from "@/hooks/use-trigger-sync" -import { formatRelativeTime } from "@/components/settings/sync-utils" +import { + formatRelativeTime, + getConnectionSubtitle, +} from "@/components/settings/sync-utils" import type { ImportProvider } from "@/components/settings/sync-utils" type GDriveSyncScope = "scoped" | "full" @@ -169,7 +172,7 @@ function ConnectionRow({ "truncate text-[14px] text-[#737373]", )} > - {connection.email || "Unknown"} + {getConnectionSubtitle(connection)}
diff --git a/apps/web/components/settings/connections-mcp.tsx b/apps/web/components/settings/connections-mcp.tsx index bf608b1e1..08e79fa32 100644 --- a/apps/web/components/settings/connections-mcp.tsx +++ b/apps/web/components/settings/connections-mcp.tsx @@ -33,7 +33,10 @@ import { SyncStatusBadge } from "@/components/settings/sync-status-badge" import { SyncHistoryPanel } from "@/components/settings/sync-history-panel" import { useConnectionHealth } from "@/hooks/use-connection-health" import { useTriggerSync } from "@/hooks/use-trigger-sync" -import { formatRelativeTime } from "@/components/settings/sync-utils" +import { + formatRelativeTime, + getConnectionSubtitle, +} from "@/components/settings/sync-utils" import type { ImportProvider } from "@/components/settings/sync-utils" type Connection = z.infer @@ -237,7 +240,7 @@ function ConnectionRow({ "font-medium text-[16px] tracking-[-0.16px] text-[#737373]", )} > - {connection.email || "Unknown"} + {getConnectionSubtitle(connection)}
diff --git a/apps/web/components/settings/sync-utils.ts b/apps/web/components/settings/sync-utils.ts index f1285e5bb..7028b545d 100644 --- a/apps/web/components/settings/sync-utils.ts +++ b/apps/web/components/settings/sync-utils.ts @@ -45,7 +45,14 @@ export const PROVIDER_DISPLAY_NAMES: Record = { granola: "Granola", } -/** Provider type union matching the backend import endpoint */ +export function getConnectionSubtitle(conn: { + provider: string + email?: string | null +}): string { + if (conn.provider === "granola") return "Granola workspace" + return conn.email || "Unknown" +} + export type ImportProvider = | "google-drive" | "notion" From acf2e8bff4a41d951a89232159ed11bf272cc35b Mon Sep 17 00:00:00 2001 From: "claude[bot]" <41898282+claude[bot]@users.noreply.github.com> Date: Tue, 26 May 2026 03:37:05 +0000 Subject: [PATCH 7/7] fix: biome formatting Co-Authored-By: Claude Opus 4.5 --- apps/web/components/granola-connect-modal.tsx | 4 ++-- packages/ui/assets/icons.tsx | 6 +++++- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/apps/web/components/granola-connect-modal.tsx b/apps/web/components/granola-connect-modal.tsx index 866e09906..0a7d89ef5 100644 --- a/apps/web/components/granola-connect-modal.tsx +++ b/apps/web/components/granola-connect-modal.tsx @@ -174,8 +174,8 @@ export function GranolaConnectModal({ "mt-2 text-[11px] leading-snug text-[#737373]", )} > - Create one in Granola → Settings → Connectors → API keys. - Requires a Business or Enterprise plan. + Create one in Granola → Settings → Connectors → API keys. Requires a + Business or Enterprise plan.

{errorMessage && (

( xmlns="http://www.w3.org/2000/svg" > Granola - + )