fix(realtime): display banner when realtime has been suspended by admin (#50497)

## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.

YES

## What kind of change does this PR introduce?

If Realtime's admin_suspended_at is set we display a banner.

## What is the current behavior?

REAL-1095

## What is the new behavior?

<img width="1160" height="442" alt="Screenshot 2026-09-17 at 12 06
30 pm"
src="https://github.com/user-attachments/assets/f5abe900-a163-48c9-ab55-945fc62df0d1"
/>


## Additional context

Depends on https://github.com/supabase/platform/pull/38476


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

## Summary by CodeRabbit

- **New Features**
- Added a notice to Realtime settings when the service is suspended,
with instructions to contact support.
- **Bug Fixes**
- Improved invitation resending and role updates for roles without a
linked base role.
- **Tests**
- Added coverage to verify the suspension notice appears only when
applicable.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>

apps/studio/components/interfaces/Organization/TeamSettings/MemberActions.tsx

@@ -134,7 +134,7 @@ export const MemberActions = ({ member }: MemberActionsProps) => {
 
           const projectScopedRole = projectScopedRoles.find((role) => role.id === roleId)
 
-          if (projectScopedRole !== undefined) {
+          if (projectScopedRole !== undefined && projectScopedRole.base_role_id) {
             const projects = projectScopedRole.projects.map(({ ref }) => ref)
             inviteMember({
               slug,

apps/studio/components/interfaces/Organization/TeamSettings/UpdateRolesPanel/UpdateRolesPanel.utils.ts

@@ -143,14 +143,15 @@ export const deriveRoleChangeActions = (
       return toRemove.push(role.id)
     }
 
-    const projectsToAddToRole = (groupByAddedRoles[role.base_role_id]?.map((r) => r.ref) ??
+    const projectsToAddToRole = (groupByAddedRoles[role.base_role_id ?? '']?.map((r) => r.ref) ??
       []) as string[]
     const projectsToRemoveFromRole = (groupByRemovedRoles[role.id]?.map((r) => r.ref) ??
       []) as string[]
     const projectsUpdatingFromRole = (groupByUpdatingFromRoles[role.id]?.map((r) => r.ref) ??
       []) as string[]
-    const projectsUpdatingToRole = (groupByUpdatingToRoles[role.base_role_id]?.map((r) => r.ref) ??
-      []) as string[]
+    const projectsUpdatingToRole = (groupByUpdatingToRoles[role.base_role_id ?? '']?.map(
+      (r) => r.ref
+    ) ?? []) as string[]
     const projectRefsAppliedUpdated = projectRefsApplied
       .filter((x) => !projectsToRemoveFromRole.includes(x))
       .filter((x) => !projectsUpdatingFromRole.includes(x))

apps/studio/components/interfaces/Realtime/Inspector/EmptyRealtime.tsx

@@ -1,9 +1,11 @@
 import Link from 'next/link'
 import { AiIconAnimation, Button, Card, cn } from 'ui'
 
+import { SuspensionNotice } from '../../Settings/SuspensionNotice'
 import { AnimatedCursors } from './AnimatedCursors'
 import { SIDEBAR_KEYS } from '@/components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider'
 import { DocsButton } from '@/components/ui/DocsButton'
+import { useRealtimeConfigurationQuery } from '@/data/realtime/realtime-config-query'
 import { DOCS_URL } from '@/lib/constants'
 import { useAiAssistantStateSnapshot } from '@/state/ai-assistant-state'
 import { useSidebarManagerSnapshot } from '@/state/sidebar-manager-state'
@@ -15,6 +17,9 @@ export const EmptyRealtime = ({ projectRef }: { projectRef: string }) => {
   const aiSnap = useAiAssistantStateSnapshot()
   const { openSidebar } = useSidebarManagerSnapshot()
 
+  const { data } = useRealtimeConfigurationQuery({ projectRef })
+  const isSuspended = Boolean(data?.admin_suspended_at)
+
   const handleCreateTriggerWithAssistant = () => {
     openSidebar(SIDEBAR_KEYS.AI_ASSISTANT)
     aiSnap.newChat({
@@ -26,17 +31,21 @@ export const EmptyRealtime = ({ projectRef }: { projectRef: string }) => {
   return (
     <div className="flex grow items-center justify-center p-12 @container">
       <div className="w-full max-w-4xl flex flex-col items-center gap-0">
-        <div className="text-center mb-12">
+        <div className={cn('text-center', !isSuspended && 'mb-12')}>
           <AnimatedCursors />
           <h2 className="heading-section mb-1">Create realtime experiences</h2>
           <p className="text-foreground-light mb-6">
             Send your first realtime message from your database, application code or edge function
           </p>
-          <Button icon={<AiIconAnimation />} onClick={handleCreateTriggerWithAssistant}>
-            Set up realtime for me
-          </Button>
+          {!isSuspended && (
+            <Button icon={<AiIconAnimation />} onClick={handleCreateTriggerWithAssistant}>
+              Set up realtime for me
+            </Button>
+          )}
         </div>
 
+        {isSuspended && <SuspensionNotice suspendedAt={data?.admin_suspended_at} />}
+
         <Card className="grid grid-cols-1 @xl:grid-cols-3 bg divide-x mb-8">
           <div className="flex flex-col h-full p-6">
             <div className="flex items-center gap-3 mb-2">

apps/studio/components/interfaces/Realtime/RealtimeSettings.test.tsx

@@ -66,6 +66,7 @@ const REALTIME_CONFIG = {
   presence_enabled: true,
   private_only: false,
   suspend: false,
+  admin_suspended_at: null,
 } as const satisfies RealtimeConfigurationData
 
 const buildRealtimeEntitlements = (
@@ -269,4 +270,31 @@ describe('RealtimeSettings', () => {
     expect(await screen.findByText('Cannot exceed 50,000 concurrent clients')).toBeInTheDocument()
     expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
   })
+
+  test('shows a suspension banner when Realtime has been admin-suspended', async () => {
+    addAPIMock({
+      method: 'get',
+      path: '/platform/projects/:ref/config/realtime',
+      response: () =>
+        HttpResponse.json<RealtimeConfigurationData>({
+          ...REALTIME_CONFIG,
+          admin_suspended_at: '2026-01-01T00:00:00+00:00',
+        }),
+    })
+
+    customRender(<RealtimeSettings />)
+
+    expect(
+      await screen.findByText('Supabase has suspended Realtime for this project')
+    ).toBeInTheDocument()
+  })
+
+  test('does not show a suspension banner when Realtime has not been admin-suspended', async () => {
+    customRender(<RealtimeSettings />)
+
+    await screen.findByLabelText('Postgres Changes connection pool size')
+    expect(
+      screen.queryByText('Supabase has suspended Realtime for this project')
+    ).not.toBeInTheDocument()
+  })
 })

apps/studio/components/interfaces/Realtime/RealtimeSettings.tsx

@@ -26,6 +26,7 @@ import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
 import * as z from 'zod'
 
+import { SuspensionNotice } from '../Settings/SuspensionNotice'
 import { AlertError } from '@/components/ui/AlertError'
 import { ToggleSpendCapButton } from '@/components/ui/ToggleSpendCapButton'
 import { UpgradePlanButton } from '@/components/ui/UpgradePlanButton'
@@ -67,9 +68,7 @@ export const RealtimeSettings = () => {
     projectRef: project?.ref,
     connectionString: project?.connectionString,
   })
-  const { data, error, isError, isPending } = useRealtimeConfigurationQuery({
-    projectRef,
-  })
+  const { data, error, isError, isPending } = useRealtimeConfigurationQuery({ projectRef })
 
   const { data: policies, isSuccess: isSuccessPolicies } = useDatabasePoliciesQuery({
     projectRef,
@@ -119,6 +118,7 @@ export const RealtimeSettings = () => {
   const isFreePlan = organization?.plan.id === 'free'
   const isUsageBillingEnabled = organization?.usage_billing_enabled
   const isRealtimeDisabled = data?.suspend ?? REALTIME_DEFAULT_CONFIG.suspend
+  const isAdminSuspended = Boolean(data?.admin_suspended_at)
   // Check if RLS policies exist for realtime.messages table
   const realtimeMessagesPolicies = policies?.filter(
     (policy) => policy.schema === 'realtime' && policy.table === 'messages'
@@ -325,6 +325,8 @@ export const RealtimeSettings = () => {
 
   return (
     <>
+      {isAdminSuspended && <SuspensionNotice suspendedAt={data?.admin_suspended_at} />}
+
       <Form {...form}>
         <form id={formId} onSubmit={form.handleSubmit(onSubmit)}>
           {isError ? (

apps/studio/components/interfaces/Settings/SuspensionNotice.tsx

@@ -0,0 +1,36 @@
+import { useParams } from 'common'
+import { Admonition } from 'ui-patterns/Admonition'
+import { TimestampInfo } from 'ui-patterns/TimestampInfo'
+
+import { ContactSupportButton } from '@/components/ui/AlertError'
+
+export const SuspensionNotice = ({ suspendedAt }: { suspendedAt?: string | null }) => {
+  const { ref } = useParams()
+
+  return (
+    <Admonition
+      layout="horizontal"
+      className="mb-4"
+      type="warning"
+      title="Supabase has suspended Realtime for this project"
+      description={
+        <>
+          Suspended since{' '}
+          <TimestampInfo
+            className="text-sm"
+            labelFormat="DD MMM HH:mm:ss"
+            utcTimestamp={suspendedAt ?? ''}
+          />{' '}
+          due to suspected unusual or excessive usage. <br />
+          Contact support for details or to restore access.
+        </>
+      }
+      actions={
+        <ContactSupportButton
+          projectRef={ref}
+          subject="Enquiry on realtime suspension for project"
+        />
+      }
+    />
+  )
+}

apps/studio/data/realtime/realtime-config-query.ts

@@ -25,6 +25,7 @@ export const REALTIME_DEFAULT_CONFIG = {
   max_payload_size_in_kb: 100,
   suspend: false,
   presence_enabled: true,
+  admin_suspended_at: null,
 } as const satisfies RealtimeConfigResponse
 
 export async function getRealtimeConfiguration(