From ebe65cea3b992d94ef46f2b3d9fd8c36d4eae500 Mon Sep 17 00:00:00 2001
From: 2witstudios <2witstudios@gmail.com>
Date: Fri, 13 Mar 2026 10:06:48 -0500
Subject: [PATCH 1/2] fix: restore Google Calendar to settings and integrations
 pages

Google Calendar uses its own standalone DB table and OAuth flow, not the
generic integrations provider system. Commit 4f882963 replaced its
dedicated settings entry with a generic "Service Connections" entry,
making it unreachable from the UI.

Re-add Google Calendar entry to settings page, add a status card to the
integrations hub using a new useGoogleCalendarStatus hook (reuses
existing API endpoint), and remove dead code that tried to link Google
Calendar from the generic connections list.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../src/app/settings/integrations/page.tsx    | 83 +++++++++++++------
 apps/web/src/app/settings/page.tsx            |  9 +-
 apps/web/src/hooks/useIntegrations.ts         | 23 +++++
 3 files changed, 89 insertions(+), 26 deletions(-)

diff --git a/apps/web/src/app/settings/integrations/page.tsx b/apps/web/src/app/settings/integrations/page.tsx
index b178b4bad8..b0d455305a 100644
--- a/apps/web/src/app/settings/integrations/page.tsx
+++ b/apps/web/src/app/settings/integrations/page.tsx
@@ -12,9 +12,9 @@ import {
   SelectValue,
 } from '@/components/ui/select';
 import { Skeleton } from '@/components/ui/skeleton';
-import { ArrowLeft, Cable, Plug2, Loader2, ExternalLink, AlertCircle, Package, Clock } from 'lucide-react';
+import { ArrowLeft, Cable, Calendar, Plug2, Loader2, AlertCircle, Package, Clock, CheckCircle2 } from 'lucide-react';
 import { toast } from 'sonner';
-import { useProviders, useUserConnections, useAvailableBuiltins } from '@/hooks/useIntegrations';
+import { useProviders, useUserConnections, useAvailableBuiltins, useGoogleCalendarStatus } from '@/hooks/useIntegrations';
 import { IntegrationStatusBadge } from '@/components/integrations/IntegrationStatusBadge';
 import { ConnectIntegrationDialog } from '@/components/integrations/ConnectIntegrationDialog';
 import { DisconnectWithAgentCount } from '@/components/integrations/DisconnectConfirmDialog';
@@ -34,6 +34,7 @@ export default function IntegrationsSettingsPage() {
   const { connections, isLoading: loadingConnections, error: connectionsError, mutate: mutateConnections } = useUserConnections();
 
   const { builtins, isLoading: loadingBuiltins, error: builtinsError, mutate: mutateBuiltins } = useAvailableBuiltins();
+  const { connected: gcalConnected, connection: gcalConnection, isLoading: gcalLoading } = useGoogleCalendarStatus();
 
   const [connectProvider, setConnectProvider] = useState<SafeProvider | null>(null);
   const [disconnectConnection, setDisconnectConnection] = useState<SafeConnection | null>(null);
@@ -103,13 +104,6 @@ export default function IntegrationsSettingsPage() {
 
   const isLoading = loadingProviders || loadingConnections;
 
-  const getProviderDetailHref = (connection: SafeConnection) => {
-    if (connection.provider?.slug === 'google-calendar') {
-      return '/settings/integrations/google-calendar';
-    }
-    return null;
-  };
-
   return (
     <div className="container mx-auto px-4 py-10 sm:px-6 lg:px-10 max-w-2xl">
       <div className="mb-8">
@@ -129,6 +123,61 @@ export default function IntegrationsSettingsPage() {
       </div>
 
       <div className="space-y-6">
+        {/* Google Calendar */}
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <Calendar className="h-5 w-5" />
+              Google Calendar
+            </CardTitle>
+            <CardDescription>
+              Sync events with Google Calendar.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            {gcalLoading ? (
+              <Skeleton className="h-16 w-full" />
+            ) : gcalConnected && gcalConnection ? (
+              <div className="flex items-center justify-between p-3 border rounded-lg bg-card">
+                <div className="flex items-center gap-3 min-w-0">
+                  <CheckCircle2 className="h-5 w-5 text-green-500 flex-shrink-0" />
+                  <div className="min-w-0">
+                    <span className="font-medium">Connected</span>
+                    <p className="text-xs text-muted-foreground truncate">
+                      {gcalConnection.googleEmail}
+                    </p>
+                  </div>
+                </div>
+                <Button
+                  size="sm"
+                  variant="outline"
+                  onClick={() => router.push('/settings/integrations/google-calendar')}
+                >
+                  Manage
+                </Button>
+              </div>
+            ) : (
+              <div className="flex items-center justify-between p-3 border rounded-lg bg-card">
+                <div className="flex items-center gap-3 min-w-0">
+                  <Calendar className="h-5 w-5 text-muted-foreground flex-shrink-0" />
+                  <div className="min-w-0">
+                    <span className="font-medium">Not connected</span>
+                    <p className="text-xs text-muted-foreground">
+                      Connect your Google Calendar to sync events.
+                    </p>
+                  </div>
+                </div>
+                <Button
+                  size="sm"
+                  onClick={() => router.push('/settings/integrations/google-calendar')}
+                >
+                  Set up
+                </Button>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+
         {/* Connected Integrations */}
         <Card>
           <CardHeader>
@@ -161,10 +210,8 @@ export default function IntegrationsSettingsPage() {
                   <ConnectionRow
                     key={connection.id}
                     connection={connection}
-                    detailHref={getProviderDetailHref(connection)}
                     updatingVisibility={updatingVisibility === connection.id}
                     onVisibilityChange={(v) => handleVisibilityChange(connection.id, v)}
-                    onDetail={(href) => router.push(href)}
                     onDisconnect={() => setDisconnectConnection(connection)}
                   />
                 ))}
@@ -334,17 +381,13 @@ function formatRelativeTime(dateStr: string): string {
 
 function ConnectionRow({
   connection,
-  detailHref,
   updatingVisibility,
   onVisibilityChange,
-  onDetail,
   onDisconnect,
 }: {
   connection: SafeConnection;
-  detailHref: string | null;
   updatingVisibility: boolean;
   onVisibilityChange: (visibility: string) => void;
-  onDetail: (href: string) => void;
   onDisconnect: () => void;
 }) {
   const accountInfo = connection.accountMetadata;
@@ -400,16 +443,6 @@ function ConnectionRow({
             </SelectContent>
           </Select>
         )}
-        {detailHref && (
-          <Button
-            variant="ghost"
-            size="sm"
-            aria-label={`${connection.name} details`}
-            onClick={() => onDetail(detailHref)}
-          >
-            <ExternalLink className="h-3.5 w-3.5" />
-          </Button>
-        )}
         <Button
           variant="ghost"
           size="sm"
diff --git a/apps/web/src/app/settings/page.tsx b/apps/web/src/app/settings/page.tsx
index 382e142c2e..d62fcd8200 100644
--- a/apps/web/src/app/settings/page.tsx
+++ b/apps/web/src/app/settings/page.tsx
@@ -6,7 +6,7 @@ import { useMCP } from "@/hooks/useMCP";
 import { useAuth } from "@/hooks/useAuth";
 import { useBillingVisibility } from "@/hooks/useBillingVisibility";
 import { Button } from "@/components/ui/button";
-import { User, Plug2, Key, ArrowLeft, CreditCard, Bell, Shield, ChevronRight, Keyboard, Sparkles, Eye, Cable } from "lucide-react";
+import { User, Plug2, Key, ArrowLeft, CreditCard, Bell, Shield, ChevronRight, Keyboard, Sparkles, Eye, Cable, Calendar } from "lucide-react";
 
 interface SettingsItem {
   title: string;
@@ -132,6 +132,13 @@ export default function SettingsPage() {
     {
       title: "Integrations",
       items: filterItems([
+        {
+          title: "Google Calendar",
+          description: "Sync events with Google Calendar",
+          icon: Calendar,
+          href: "/settings/integrations/google-calendar",
+          available: true,
+        },
         {
           title: "Service Connections",
           description: "Connect external APIs and services to your AI assistants",
diff --git a/apps/web/src/hooks/useIntegrations.ts b/apps/web/src/hooks/useIntegrations.ts
index c3ba4a1912..412780b778 100644
--- a/apps/web/src/hooks/useIntegrations.ts
+++ b/apps/web/src/hooks/useIntegrations.ts
@@ -86,6 +86,29 @@ export function useConnectionGrantCount(connectionId: string | null) {
   return { count: data?.total ?? 0, error, isLoading };
 }
 
+export function useGoogleCalendarStatus() {
+  const { data, error, isLoading } = useSWR<{
+    connected: boolean;
+    connection: {
+      status: string;
+      googleEmail: string;
+      lastSyncAt: string | null;
+    } | null;
+    syncedEventCount: number;
+  }>(
+    '/api/integrations/google-calendar/status',
+    fetcher,
+    { revalidateOnFocus: false }
+  );
+  return {
+    connected: data?.connected ?? false,
+    connection: data?.connection ?? null,
+    syncedEventCount: data?.syncedEventCount ?? 0,
+    error,
+    isLoading,
+  };
+}
+
 export function useIntegrationAuditLogs(driveId: string | null, params: AuditLogsParams = {}) {
   const searchParams = new URLSearchParams();
   if (params.limit != null) searchParams.set('limit', String(params.limit));

From 662f5dcc6229240769fe28c96cfc6b16671e8cea Mon Sep 17 00:00:00 2001
From: 2witstudios <2witstudios@gmail.com>
Date: Fri, 13 Mar 2026 10:21:40 -0500
Subject: [PATCH 2/2] fix: show error state when Google Calendar status fetch
 fails

When the /status endpoint returns a transient error, the card now shows
an explicit error message instead of falsely displaying "Not connected"
which could send users through unnecessary re-setup.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 apps/web/src/app/settings/integrations/page.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/app/settings/integrations/page.tsx b/apps/web/src/app/settings/integrations/page.tsx
index b0d455305a..a24e1491bf 100644
--- a/apps/web/src/app/settings/integrations/page.tsx
+++ b/apps/web/src/app/settings/integrations/page.tsx
@@ -34,7 +34,7 @@ export default function IntegrationsSettingsPage() {
   const { connections, isLoading: loadingConnections, error: connectionsError, mutate: mutateConnections } = useUserConnections();
 
   const { builtins, isLoading: loadingBuiltins, error: builtinsError, mutate: mutateBuiltins } = useAvailableBuiltins();
-  const { connected: gcalConnected, connection: gcalConnection, isLoading: gcalLoading } = useGoogleCalendarStatus();
+  const { connected: gcalConnected, connection: gcalConnection, error: gcalError, isLoading: gcalLoading } = useGoogleCalendarStatus();
 
   const [connectProvider, setConnectProvider] = useState<SafeProvider | null>(null);
   const [disconnectConnection, setDisconnectConnection] = useState<SafeConnection | null>(null);
@@ -137,6 +137,11 @@ export default function IntegrationsSettingsPage() {
           <CardContent>
             {gcalLoading ? (
               <Skeleton className="h-16 w-full" />
+            ) : gcalError ? (
+              <div className="flex items-center gap-2 p-4 text-sm text-destructive bg-destructive/10 rounded-lg">
+                <AlertCircle className="h-4 w-4" />
+                <span>Failed to load Google Calendar status</span>
+              </div>
             ) : gcalConnected && gcalConnection ? (
               <div className="flex items-center justify-between p-3 border rounded-lg bg-card">
                 <div className="flex items-center gap-3 min-w-0">