From 02d7454ac9140047ebf3174b961b6d2c9471473d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cemal=20K=C4=B1l=C4=B1=C3=A7?=
 <cemalkilic@users.noreply.github.com>
Date: Thu, 21 May 2026 18:47:44 +0200
Subject: [PATCH 1/6] fix: allow email rate limit editing when send email hook
 is enabled (#46104)

## 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?

bug fix: allow email rate limit editing when send email hook is enabled

## What is the current behavior?

when send email hook is enabled, users can't customize the send email
rate limit.

## What is the new behavior?

when send email hook is enabled, users _can_ customize the send email
rate limit.

## Additional context
backend changes are already in place.


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

## Summary by CodeRabbit

* **Improvements**
* Expanded email rate limit configuration to support Send Email hooks in
addition to SMTP providers.
* Enhanced user guidance with updated messaging and navigation options
for configuring email delivery methods.

<!-- review_stack_entry_start -->

[![Review Change
Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46104?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack)

<!-- review_stack_entry_end -->

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../interfaces/Auth/RateLimits/RateLimits.tsx | 20 +++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/apps/studio/components/interfaces/Auth/RateLimits/RateLimits.tsx b/apps/studio/components/interfaces/Auth/RateLimits/RateLimits.tsx
index 43bb41cb0d27b..3888dcf5e7870 100644
--- a/apps/studio/components/interfaces/Auth/RateLimits/RateLimits.tsx
+++ b/apps/studio/components/interfaces/Auth/RateLimits/RateLimits.tsx
@@ -70,7 +70,9 @@ export const RateLimits = () => {
     },
   })
 
-  const canUpdateEmailLimit = authConfig?.EXTERNAL_EMAIL_ENABLED && isSmtpEnabled(authConfig)
+  const canUpdateEmailLimit =
+    authConfig?.EXTERNAL_EMAIL_ENABLED &&
+    (isSmtpEnabled(authConfig) || authConfig?.HOOK_SEND_EMAIL_ENABLED)
   const canUpdateSMSRateLimit = authConfig?.EXTERNAL_PHONE_ENABLED
   const canUpdateAnonymousUsersRateLimit = authConfig?.EXTERNAL_ANONYMOUS_USERS_ENABLED
   const canUpdateWeb3RateLimit = authConfig?.EXTERNAL_WEB3_SOLANA_ENABLED
@@ -271,19 +273,25 @@ export const RateLimits = () => {
                               ) : (
                                 <>
                                   <p className="font-medium">
-                                    Custom SMTP provider is required to update this configuration
+                                    Custom SMTP or Send Email hook is required to update this
+                                    configuration
                                   </p>
                                   <p className="mt-1">
-                                    The built-in email service has a fixed rate limit. You will need
-                                    to set up your own custom SMTP provider to update your email
-                                    rate limit
+                                    The built-in email service has a fixed rate limit. Set up a
+                                    custom SMTP provider or enable the Send Email hook to update
+                                    your email rate limit
                                   </p>
-                                  <div className="mt-3">
+                                  <div className="mt-3 flex gap-2">
                                     <Button asChild type="default" size="tiny">
                                       <Link href={`/project/${projectRef}/auth/smtp`}>
                                         View SMTP settings
                                       </Link>
                                     </Button>
+                                    <Button asChild type="default" size="tiny">
+                                      <Link href={`/project/${projectRef}/auth/hooks`}>
+                                        View hooks
+                                      </Link>
+                                    </Button>
                                   </div>
                                 </>
                               )}

From 90dd19b41b2a8db0c59899e3008df53d784a9a8f Mon Sep 17 00:00:00 2001
From: Gildas Garcia <1122076+djhi@users.noreply.github.com>
Date: Thu, 21 May 2026 20:55:40 +0200
Subject: [PATCH 2/6] chore: migrate Logs settings `Modal` to `Dialog` (#46229)

## Problem

Logs settings still uses the deprecated `Modal` for:
- saving queries
- prompt to upgrade

## Solution

- use `Dialog` instead

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

## Summary by CodeRabbit

* **Refactor**
* Modernized internal UI component structure for improved
maintainability and consistency.

<!-- review_stack_entry_start -->

[![Review Change
Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46229?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack)

<!-- review_stack_entry_end -->

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../Logs/Logs.UpdateSavedQueryModal.tsx       | 108 +++++++++++-------
 .../Settings/Logs/UpgradePrompt.tsx           | 100 ++++++++--------
 2 files changed, 121 insertions(+), 87 deletions(-)

diff --git a/apps/studio/components/interfaces/Settings/Logs/Logs.UpdateSavedQueryModal.tsx b/apps/studio/components/interfaces/Settings/Logs/Logs.UpdateSavedQueryModal.tsx
index fecd04e41a287..42f067006a7c0 100644
--- a/apps/studio/components/interfaces/Settings/Logs/Logs.UpdateSavedQueryModal.tsx
+++ b/apps/studio/components/interfaces/Settings/Logs/Logs.UpdateSavedQueryModal.tsx
@@ -1,7 +1,21 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useEffect } from 'react'
 import { SubmitHandler, useForm } from 'react-hook-form'
-import { Button, Form, FormControl, FormField, Input, Modal, Textarea } from 'ui'
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogSection,
+  DialogSectionSeparator,
+  DialogTitle,
+  Form,
+  FormControl,
+  FormField,
+  Input,
+  Textarea,
+} from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 import * as z from 'zod'
 
@@ -45,46 +59,56 @@ export const UpdateSavedQueryModal = ({
   }
 
   return (
-    <Modal visible={visible} onCancel={handleCancel} hideFooter header={header} size="medium">
-      <Form {...form}>
-        <form onSubmit={form.handleSubmit(onSubmit)} noValidate>
-          <Modal.Content>
-            <FormField
-              control={form.control}
-              name="name"
-              render={({ field }) => (
-                <FormItemLayout layout="vertical" label="Name">
-                  <FormControl>
-                    <Input {...field} placeholder="Enter text" />
-                  </FormControl>
-                </FormItemLayout>
-              )}
-            />
-          </Modal.Content>
-          <Modal.Content>
-            <FormField
-              control={form.control}
-              name="description"
-              render={({ field }) => (
-                <FormItemLayout layout="vertical" label="Description">
-                  <FormControl>
-                    <Textarea {...field} placeholder="Describe query" className="resize-none" />
-                  </FormControl>
-                </FormItemLayout>
-              )}
-            />
-          </Modal.Content>
-          <Modal.Separator />
-          <Modal.Content className="flex items-center justify-end gap-2">
-            <Button htmlType="reset" type="default" onClick={handleCancel} disabled={isSubmitting}>
-              Cancel
-            </Button>
-            <Button htmlType="submit" loading={isSubmitting} disabled={isSubmitting || !isDirty}>
-              Save query
-            </Button>
-          </Modal.Content>
-        </form>
-      </Form>
-    </Modal>
+    <Dialog open={visible} onOpenChange={handleCancel}>
+      <DialogContent size="medium">
+        <DialogHeader>
+          <DialogTitle>{header}</DialogTitle>
+        </DialogHeader>
+        <DialogSectionSeparator />
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} noValidate>
+            <DialogSection>
+              <FormField
+                control={form.control}
+                name="name"
+                render={({ field }) => (
+                  <FormItemLayout layout="vertical" label="Name">
+                    <FormControl>
+                      <Input {...field} placeholder="Enter text" />
+                    </FormControl>
+                  </FormItemLayout>
+                )}
+              />
+            </DialogSection>
+            <DialogSection>
+              <FormField
+                control={form.control}
+                name="description"
+                render={({ field }) => (
+                  <FormItemLayout layout="vertical" label="Description">
+                    <FormControl>
+                      <Textarea {...field} placeholder="Describe query" className="resize-none" />
+                    </FormControl>
+                  </FormItemLayout>
+                )}
+              />
+            </DialogSection>
+            <DialogFooter>
+              <Button
+                htmlType="reset"
+                type="default"
+                onClick={handleCancel}
+                disabled={isSubmitting}
+              >
+                Cancel
+              </Button>
+              <Button htmlType="submit" loading={isSubmitting} disabled={isSubmitting || !isDirty}>
+                Save query
+              </Button>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
   )
 }
diff --git a/apps/studio/components/interfaces/Settings/Logs/UpgradePrompt.tsx b/apps/studio/components/interfaces/Settings/Logs/UpgradePrompt.tsx
index ee45244719e79..b0e94e24f5738 100644
--- a/apps/studio/components/interfaces/Settings/Logs/UpgradePrompt.tsx
+++ b/apps/studio/components/interfaces/Settings/Logs/UpgradePrompt.tsx
@@ -1,5 +1,14 @@
 import Link from 'next/link'
-import { Button, Modal } from 'ui'
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogSection,
+  DialogSectionSeparator,
+  DialogTitle,
+} from 'ui'
 
 import { TIER_QUERY_LIMITS } from './Logs.constants'
 import { useSelectedOrganizationQuery } from '@/hooks/misc/useSelectedOrganization'
@@ -29,54 +38,55 @@ const UpgradePrompt: React.FC<Props> = ({
   const { data: organization } = useSelectedOrganizationQuery()
 
   return (
-    <Modal
-      hideFooter
-      visible={show}
-      size="medium"
-      header={title}
-      onCancel={() => setShowUpgradePrompt(false)}
-    >
-      <Modal.Content>
-        <div className="space-y-4">
-          <p className="text-sm">{description}</p>
-          <div className="border-control bg-surface-300 rounded-sm border">
-            <div className="flex items-center px-4 pt-2 pb-1">
-              <p className="text-foreground-light w-[40%] text-sm">Plan</p>
-              <p className="text-foreground-light w-[60%] text-sm">Retention duration</p>
-            </div>
-            <div className="py-1">
-              <div className="flex items-center px-4 py-1">
-                <p className="w-[40%] text-sm">Free</p>
-                <p className="w-[60%] text-sm">{TIER_QUERY_LIMITS.FREE.text}</p>
-              </div>
-              <div className="flex items-center px-4 py-1">
-                <p className="w-[40%] text-sm">Pro</p>
-                <p className="w-[60%] text-sm">{TIER_QUERY_LIMITS.PRO.text}</p>
-              </div>
-              <div className="flex items-center px-4 py-1">
-                <p className="w-[40%] text-sm">Team</p>
-                <p className="w-[60%] text-sm">{TIER_QUERY_LIMITS.TEAM.text}</p>
+    <Dialog open={show} onOpenChange={() => setShowUpgradePrompt(false)}>
+      <DialogContent size="medium">
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+        </DialogHeader>
+        <DialogSectionSeparator />
+        <DialogSection>
+          <div className="space-y-4">
+            <p className="text-sm">{description}</p>
+            <div className="border-control bg-surface-300 rounded-sm border">
+              <div className="flex items-center px-4 pt-2 pb-1">
+                <p className="text-foreground-light w-[40%] text-sm">Plan</p>
+                <p className="text-foreground-light w-[60%] text-sm">Retention duration</p>
               </div>
-              <div className="flex items-center px-4 py-1">
-                <p className="w-[40%] text-sm">Enterprise</p>
-                <p className="w-[60%] text-sm">{TIER_QUERY_LIMITS.ENTERPRISE.text}</p>
+              <div className="py-1">
+                <div className="flex items-center px-4 py-1">
+                  <p className="w-[40%] text-sm">Free</p>
+                  <p className="w-[60%] text-sm">{TIER_QUERY_LIMITS.FREE.text}</p>
+                </div>
+                <div className="flex items-center px-4 py-1">
+                  <p className="w-[40%] text-sm">Pro</p>
+                  <p className="w-[60%] text-sm">{TIER_QUERY_LIMITS.PRO.text}</p>
+                </div>
+                <div className="flex items-center px-4 py-1">
+                  <p className="w-[40%] text-sm">Team</p>
+                  <p className="w-[60%] text-sm">{TIER_QUERY_LIMITS.TEAM.text}</p>
+                </div>
+                <div className="flex items-center px-4 py-1">
+                  <p className="w-[40%] text-sm">Enterprise</p>
+                  <p className="w-[60%] text-sm">{TIER_QUERY_LIMITS.ENTERPRISE.text}</p>
+                </div>
               </div>
             </div>
           </div>
-        </div>
-      </Modal.Content>
-      <Modal.Separator />
-      <Modal.Content className="flex justify-end gap-3">
-        <Button type="default" onClick={() => setShowUpgradePrompt(false)}>
-          Close
-        </Button>
-        <Button asChild size="tiny">
-          <Link href={`/org/${organization?.slug}/billing?panel=subscriptionPlan&source=${source}`}>
-            Upgrade
-          </Link>
-        </Button>
-      </Modal.Content>
-    </Modal>
+        </DialogSection>
+        <DialogFooter className="flex justify-end gap-3">
+          <Button type="default" onClick={() => setShowUpgradePrompt(false)}>
+            Close
+          </Button>
+          <Button asChild size="tiny">
+            <Link
+              href={`/org/${organization?.slug}/billing?panel=subscriptionPlan&source=${source}`}
+            >
+              Upgrade
+            </Link>
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
   )
 }
 

From cadfc8731c4fecac7b106f58b32ade61281f0397 Mon Sep 17 00:00:00 2001
From: Jakub Andrzejewski <jakub.andrzejewski.dev@gmail.com>
Date: Thu, 21 May 2026 21:03:21 +0200
Subject: [PATCH 3/6] docs: realtime chat/infinite query vue&nuxt (#44426)

## 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?

This PR is the final PR for Supabase UI Vue&Nuxt with the Realtime Chat
and Infinite Query.

## Additional context

Initiative by Terry


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

## Summary by CodeRabbit

## Release Notes

* **New Features**
* Realtime Chat now available for Vue and Nuxt.js frameworks with full
documentation and composables
  * Added Infinite Query composable for Vue with comprehensive guides

* **Documentation**
  * New Realtime Chat documentation pages for Vue and Nuxt.js
  * New Infinite Query documentation for Vue
  * Updated framework support in documentation navigation

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Terry Sutton <saltcod@gmail.com>
Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 apps/ui-library/config/docs.ts                |  10 +-
 .../content/docs/nuxtjs/realtime-chat.mdx     | 128 ++++++++
 .../infinite-query.mdx}                       |   0
 .../content/docs/vue/infinite-query.mdx       | 281 ++++++++++++++++++
 .../content/docs/vue/realtime-chat.mdx        | 115 +++++++
 .../public/r/infinite-query-composable.json   |  19 ++
 .../public/r/realtime-chat-nuxtjs.json        |  41 +++
 .../public/r/realtime-chat-vue.json           |  41 +++
 apps/ui-library/public/r/registry.json        |  89 ++++++
 blocks/vue/package.json                       |   1 +
 .../vue/composables/useInfiniteQuery.ts       | 187 ++++++++++++
 .../infinite-query/vue/registry-item.json     |  14 +
 .../app/components/chat-message-item.vue      |  62 ++++
 .../nuxtjs/app/components/realtime-chat.vue   | 132 ++++++++
 .../nuxtjs/app/composables/useChatScroll.ts   |  21 ++
 .../nuxtjs/app/composables/useRealtimeChat.ts |  92 ++++++
 .../realtime-chat/nuxtjs/registry-item.json   |  30 ++
 .../vue/components/chat-message-item.vue      |  62 ++++
 .../vue/components/realtime-chat.vue          | 132 ++++++++
 .../vue/composables/useChatScroll.ts          |  21 ++
 .../vue/composables/useRealtimeChat.ts        |  92 ++++++
 .../realtime-chat/vue/registry-item.json      |  30 ++
 blocks/vue/registry/index.ts                  |   8 +-
 blocks/vue/registry/infinite-query.ts         |   5 +
 blocks/vue/registry/realtime-chat.ts          |   6 +
 pnpm-lock.yaml                                |   3 +
 26 files changed, 1615 insertions(+), 7 deletions(-)
 create mode 100644 apps/ui-library/content/docs/nuxtjs/realtime-chat.mdx
 rename apps/ui-library/content/docs/{infinite-query-hook.mdx => react/infinite-query.mdx} (100%)
 create mode 100644 apps/ui-library/content/docs/vue/infinite-query.mdx
 create mode 100644 apps/ui-library/content/docs/vue/realtime-chat.mdx
 create mode 100644 apps/ui-library/public/r/infinite-query-composable.json
 create mode 100644 apps/ui-library/public/r/realtime-chat-nuxtjs.json
 create mode 100644 apps/ui-library/public/r/realtime-chat-vue.json
 create mode 100644 blocks/vue/registry/default/infinite-query/vue/composables/useInfiniteQuery.ts
 create mode 100644 blocks/vue/registry/default/infinite-query/vue/registry-item.json
 create mode 100644 blocks/vue/registry/default/realtime-chat/nuxtjs/app/components/chat-message-item.vue
 create mode 100644 blocks/vue/registry/default/realtime-chat/nuxtjs/app/components/realtime-chat.vue
 create mode 100644 blocks/vue/registry/default/realtime-chat/nuxtjs/app/composables/useChatScroll.ts
 create mode 100644 blocks/vue/registry/default/realtime-chat/nuxtjs/app/composables/useRealtimeChat.ts
 create mode 100644 blocks/vue/registry/default/realtime-chat/nuxtjs/registry-item.json
 create mode 100644 blocks/vue/registry/default/realtime-chat/vue/components/chat-message-item.vue
 create mode 100644 blocks/vue/registry/default/realtime-chat/vue/components/realtime-chat.vue
 create mode 100644 blocks/vue/registry/default/realtime-chat/vue/composables/useChatScroll.ts
 create mode 100644 blocks/vue/registry/default/realtime-chat/vue/composables/useRealtimeChat.ts
 create mode 100644 blocks/vue/registry/default/realtime-chat/vue/registry-item.json
 create mode 100644 blocks/vue/registry/infinite-query.ts
 create mode 100644 blocks/vue/registry/realtime-chat.ts

diff --git a/apps/ui-library/config/docs.ts b/apps/ui-library/config/docs.ts
index 24a3ac0c1d6eb..77203ce9a6088 100644
--- a/apps/ui-library/config/docs.ts
+++ b/apps/ui-library/config/docs.ts
@@ -112,18 +112,18 @@ export const componentPages: SidebarNavGroup = {
     },
     {
       title: 'Realtime Chat',
-      supportedFrameworks: ['nextjs', 'react-router', 'tanstack', 'react'],
+      supportedFrameworks: ['nextjs', 'react-router', 'tanstack', 'react', 'vue', 'nuxtjs'],
       href: '/docs/nextjs/realtime-chat',
       items: [],
       commandItemLabel: 'Realtime Chat',
     },
     {
-      title: 'Infinite Query Hook',
-      supportedFrameworks: [],
-      href: '/docs/infinite-query-hook',
+      title: 'Infinite Query',
+      supportedFrameworks: ['react', 'vue'],
+      href: '/docs/react/infinite-query',
       new: true,
       items: [],
-      commandItemLabel: 'Infinite Query Hook',
+      commandItemLabel: 'Infinite Query',
     },
   ],
 }
diff --git a/apps/ui-library/content/docs/nuxtjs/realtime-chat.mdx b/apps/ui-library/content/docs/nuxtjs/realtime-chat.mdx
new file mode 100644
index 0000000000000..e1435d6941f35
--- /dev/null
+++ b/apps/ui-library/content/docs/nuxtjs/realtime-chat.mdx
@@ -0,0 +1,128 @@
+---
+title: Realtime Chat
+description: Real-time chat component for collaborative applications
+---
+
+<DualRealtimeChat />
+
+## Installation
+
+<BlockItem
+  name="realtime-chat-nuxtjs"
+  description="Renders a real-time chat interface for users in a shared room."
+/>
+
+## Folder structure
+
+This block assumes that you have already installed a Supabase client for Vue from the previous step.
+
+<RegistryBlock itemName="realtime-chat-nuxtjs" />
+
+## Introduction
+
+The Realtime Chat component provides a complete chat interface that enables users to exchange messages in real-time within a shared room.
+
+## How it works under the hood
+
+This chat component uses **Supabase Realtime Broadcast** to send and receive messages between connected clients.
+
+Messages sent through Broadcast are:
+
+- delivered in real time to other connected clients
+- **not stored** unless you handle persistence yourself
+- **not guaranteed** to arrive if the client disconnects
+- scoped to a specific `roomName`, which corresponds to a broadcast channel
+
+This design keeps latency extremely low, but it means you should use the `onMessage` callback if you want to store messages permanently or show chat history on page load.
+
+## Usage
+
+### Basic usage
+
+```html
+<script setup lang="ts">
+  import RealtimeChat from '@/components/realtime-chat.vue'
+</script>
+
+<template>
+  <RealtimeChat roomName="my-chat-room" username="john_doe" />
+</template>
+```
+
+### With initial messages
+
+```html
+<script setup lang="ts">
+  import RealtimeChat from '@/components/realtime-chat.vue'
+  import { useMessagesQuery } from '@/composables/use-messages-query'
+
+  const { data } = useMessagesQuery()
+</script>
+
+<template>
+  <RealtimeChat roomName="my-chat-room" username="john_doe" :messages="data ?? []" />
+</template>
+```
+
+### Storing messages
+
+```html
+<script setup lang="ts">
+  import RealtimeChat from '@/components/realtime-chat.vue'
+  import { useMessagesQuery } from '@/composables/use-messages-query'
+  import { storeMessages } from '@/lib/store-messages'
+  import type { ChatMessage } from '@/types'
+
+  const { data } = useMessagesQuery()
+
+  // Callback function for new messages
+  const handleMessage = async (messages: ChatMessage[]) => {
+    await storeMessages(messages)
+  }
+</script>
+
+<template>
+  <RealtimeChat
+    roomName="my-chat-room"
+    username="john_doe"
+    :messages="data ?? []"
+    :onMessage="handleMessage"
+  />
+</template>
+```
+
+## Features
+
+- Real-time message synchronization
+- Message persistence support with `onMessage` and `messages` props
+- Customizable message appearance
+- Automatic scroll-to-bottom on new messages
+- Room-based isolation for scoped conversations
+- Low-latency updates using Supabase Realtime
+
+## Props
+
+| Prop         | Type                                | Description                                                   |
+| ------------ | ----------------------------------- | ------------------------------------------------------------- |
+| `roomName`   | `string`                            | Unique identifier for the shared chat room.                   |
+| `username`   | `string`                            | Name of the current user; used to identify message senders.   |
+| `onMessage?` | `(messages: ChatMessage[]) => void` | Optional callback to handle messages, useful for persistence. |
+| `messages?`  | `ChatMessage[]`                     | Optional initial messages to display in the chat.             |
+
+### ChatMessage type
+
+```typescript
+interface ChatMessage {
+  id: string
+  content: string
+  user: {
+    name: string
+  }
+  createdAt: string
+}
+```
+
+## Further reading
+
+- [Realtime Broadcast](https://supabase.com/docs/guides/realtime/broadcast)
+- [Realtime authorization](https://supabase.com/docs/guides/realtime/authorization)
diff --git a/apps/ui-library/content/docs/infinite-query-hook.mdx b/apps/ui-library/content/docs/react/infinite-query.mdx
similarity index 100%
rename from apps/ui-library/content/docs/infinite-query-hook.mdx
rename to apps/ui-library/content/docs/react/infinite-query.mdx
diff --git a/apps/ui-library/content/docs/vue/infinite-query.mdx b/apps/ui-library/content/docs/vue/infinite-query.mdx
new file mode 100644
index 0000000000000..fd713011c63ea
--- /dev/null
+++ b/apps/ui-library/content/docs/vue/infinite-query.mdx
@@ -0,0 +1,281 @@
+---
+title: Infinite Query Composable
+description: Vue Composable for infinite lists, fetching data from Supabase.
+---
+
+<BlockPreview name="infinite-list-demo" />
+
+## Installation
+
+<BlockItem
+  name="infinite-query-composable"
+  description="Installs the Infinite List component and necessary Supabase client setup."
+/>
+
+## Folder structure
+
+<RegistryBlock itemName="infinite-query-composable" />
+
+## Introduction
+
+The Infinite Query Composable provides a single Vue Composable which will make it easier to load data progressively from your Supabase database. It handles data fetching and pagination state, It is meant to be used with infinite lists or tables.
+The Composable is fully typed, provided you have generated and setup your database types.
+
+## Adding types
+
+Before using this composable, we **highly** recommend you setup database types in your project. This will make the composable fully-typesafe. More info about generating Typescript types from database schema [here](https://supabase.com/docs/guides/api/rest/generating-types)
+
+## Props
+
+| Prop            | Type                                                      | Description                                                      |
+| --------------- | --------------------------------------------------------- | ---------------------------------------------------------------- |
+| `tableName`     | `string`                                                  | **Required.** The name of the Supabase table to fetch data from. |
+| `columns`       | `string`                                                  | Columns to select from the table. Defaults to `'*'`.             |
+| `pageSize`      | `number`                                                  | Number of items to fetch per page. Defaults to `20`.             |
+| `trailingQuery` | `(query: SupabaseSelectBuilder) => SupabaseSelectBuilder` | Function to apply filters or sorting to the Supabase query.      |
+
+## Return type
+
+data, count, isSuccess, isLoading, isFetching, error, hasMore, fetchNextPage
+
+| Prop            | Type          | Description                                                                         |
+| --------------- | ------------- | ----------------------------------------------------------------------------------- |
+| `data`          | `TableData[]` | An array of fetched items.                                                          |
+| `count`         | `number`      | Number of total items in the database. It takes `trailingQuery` into consideration. |
+| `isSuccess`     | `boolean`     | It's true if the last API call succeeded.                                           |
+| `isLoading`     | `boolean`     | It's true only for the initial fetch.                                               |
+| `isFetching`    | `boolean`     | It's true for the initial and all incremental fetches.                              |
+| `error`         | `any`         | The error from the last fetch.                                                      |
+| `hasMore`       | `boolean`     | Whether the query has finished fetching all items from the database                 |
+| `fetchNextPage` | `() => void`  | Sends a new request for the next items                                              |
+
+## Type safety
+
+The hook will use the typed defined on your Supabase client if they're setup ([more info](https://supabase.com/docs/reference/javascript/typescript-support)).
+
+The hook also supports an custom defined result type by using `useInfiniteQuery<T>`. For example, if you have a custom type for `Product`, you can use it like this `useInfiniteQuery<Product>`.
+
+## Usage
+
+### With sorting
+
+```vue
+<script setup lang="ts">
+import { useInfiniteQuery } from '@/composables/useInfiniteQuery.ts'
+
+const { data, fetchNextPage } = useInfiniteQuery({
+  tableName: 'products',
+  columns: '*',
+  pageSize: 10,
+  trailingQuery: (query) => query.order('created_at', { ascending: false }),
+})
+</script>
+
+<template>
+  <div>
+    <div v-for="item in data" :key="item.id">
+      <ProductCard :product="item" />
+    </div>
+    <Button @click="fetchNextPage">Load more products</Button>
+  </div>
+</template>
+```
+
+### With filtering on search params
+
+This example will filter based on a search param like `example.com/?q=hello`.
+
+```vue
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+
+import { useInfiniteQuery } from '@/hooks/use-infinite-query'
+
+const route = useRoute()
+const searchQuery = computed(() => route.query.q as string | undefined)
+
+const { data, isLoading, isFetching, fetchNextPage, count, isSuccess } = useInfiniteQuery({
+  tableName: 'products',
+  columns: '*',
+  pageSize: 10,
+  trailingQuery: (query) => {
+    if (searchQuery.value && searchQuery.value.length > 0) {
+      query = query.ilike('name', `%${searchQuery.value}%`)
+    }
+    return query
+  },
+})
+</script>
+
+<template>
+  <div>
+    <div v-for="item in data" :key="item.id">
+      <ProductCard :product="item" />
+    </div>
+    <Button @click="fetchNextPage">Load more products</Button>
+  </div>
+</template>
+```
+
+## Reusable components
+
+### Infinite list (fetches as you scroll)
+
+The following component abstracts the composable into a component. It includes few utility components for no results and end of the list.
+
+```vue
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+
+import {
+  SupabaseQueryHandler,
+  SupabaseTableData,
+  SupabaseTableName,
+  useInfiniteQuery,
+} from '@/hooks/use-infinite-query'
+import { cn } from '@/lib/utils'
+
+interface InfiniteListProps<TableName extends SupabaseTableName> {
+  tableName: TableName
+  columns?: string
+  pageSize?: number
+  trailingQuery?: SupabaseQueryHandler<TableName>
+  renderItem: (item: SupabaseTableData<TableName>, index: number) => any
+  className?: string
+  renderNoResults?: () => any
+  renderEndMessage?: () => any
+  renderSkeleton?: (count: number) => any
+}
+
+const props = defineProps<InfiniteListProps<any>>()
+
+const { data, isFetching, hasMore, fetchNextPage, isSuccess } = useInfiniteQuery({
+  tableName: props.tableName,
+  columns: props.columns,
+  pageSize: props.pageSize,
+  trailingQuery: props.trailingQuery,
+})
+
+const scrollContainerRef = ref<HTMLElement | null>(null)
+const loadMoreSentinelRef = ref<HTMLElement | null>(null)
+
+let observer: IntersectionObserver | null = null
+
+onMounted(() => {
+  observer = new IntersectionObserver(
+    (entries) => {
+      if (entries[0].isIntersecting && hasMore && !isFetching) {
+        fetchNextPage()
+      }
+    },
+    {
+      root: scrollContainerRef.value,
+      threshold: 0.1,
+      rootMargin: '0px 0px 100px 0px',
+    }
+  )
+
+  if (loadMoreSentinelRef.value) {
+    observer.observe(loadMoreSentinelRef.value)
+  }
+})
+
+onBeforeUnmount(() => {
+  observer?.disconnect()
+})
+</script>
+
+<template>
+  <div ref="scrollContainerRef" :class="cn('relative h-full overflow-auto', className)">
+    <div>
+      <template v-if="isSuccess && data.length === 0">
+        <slot name="no-results">
+          <div class="text-center text-muted-foreground py-10">No results.</div>
+        </slot>
+      </template>
+
+      <template v-for="(item, index) in data" :key="index">
+        <slot :item="item" :index="index" />
+      </template>
+
+      <template v-if="isFetching">
+        <slot name="skeleton" :count="pageSize" />
+      </template>
+
+      <div ref="loadMoreSentinelRef" style="height: 1px" />
+
+      <template v-if="!hasMore && data.length > 0">
+        <slot name="end">
+          <div class="text-center text-muted-foreground py-4 text-sm">You've reached the end.</div>
+        </slot>
+      </template>
+    </div>
+  </div>
+</template>
+```
+
+Use the `InfiniteList` component with the [Todo List](https://supabase.com/dashboard/project/_/sql/quickstarts) quickstart.
+
+Add `<InfiniteListDemo />` to a page to see it in action.
+Ensure the [Checkbox](https://ui.shadcn.com/docs/components/checkbox) component from shadcn/ui is installed, and [regenerate/download](https://supabase.com/docs/guides/api/rest/generating-types) types after running the quickstart.
+
+```vue
+<script setup lang="ts">
+import { InfiniteList } from './infinite-component'
+import { Checkbox } from '@/components/ui/checkbox'
+import { SupabaseQueryHandler } from '@/hooks/use-infinite-query'
+import { Database } from '@/lib/supabase.types'
+
+type TodoTask = Database['public']['Tables']['todos']['Row']
+
+const renderTodoItem = (todo: TodoTask) => {
+  return (
+    <div
+      key={todo.id}
+      className="border-b py-3 px-4 hover:bg-muted flex items-center justify-between"
+    >
+      <div className="flex items-center gap-3">
+        <Checkbox modelValue={todo.is_complete ?? false} />
+        <div>
+          <span className="font-medium text-sm text-foreground">{todo.task}</span>
+          <div className="text-sm text-muted-foreground">
+            {new Date(todo.inserted_at).toLocaleDateString()}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const orderByInsertedAt: SupabaseQueryHandler<'todos'> = (query) => {
+  return query.order('inserted_at', { ascending: false })
+}
+</script>
+
+<template>
+  <div class="bg-background h-[600px]">
+    <InfiniteList
+      tableName="todos"
+      :renderItem="renderTodoItem"
+      :pageSize="3"
+      :trailingQuery="orderByInsertedAt"
+    />
+  </div>
+</template>
+```
+
+<Callout>
+  The Todo List table has Row Level Security (RLS) enabled by default. Feel free disable it
+  temporarily while testing. With RLS enabled, you will get an [empty
+  array](https://supabase.com/docs/guides/troubleshooting/why-is-my-select-returning-an-empty-data-array-and-i-have-data-in-the-table-xvOPgx)
+  of results by default. [Read
+  more](https://supabase.com/docs/guides/database/postgres/row-level-security) about RLS.
+</Callout>
+
+## Further reading
+
+- [Generating Typescript types from the database](https://supabase.com/docs/reference/javascript/typescript-support)
+- [Supabase Database API](https://supabase.com/docs/reference/javascript/select)
+- [Supabase Pagination](https://supabase.com/docs/reference/javascript/select#pagination)
+- [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)
diff --git a/apps/ui-library/content/docs/vue/realtime-chat.mdx b/apps/ui-library/content/docs/vue/realtime-chat.mdx
new file mode 100644
index 0000000000000..2fc60e7f0c9c9
--- /dev/null
+++ b/apps/ui-library/content/docs/vue/realtime-chat.mdx
@@ -0,0 +1,115 @@
+---
+title: Realtime Chat
+description: Real-time chat component for collaborative applications
+---
+
+<DualRealtimeChat />
+
+## Installation
+
+<BlockItem
+  name="realtime-chat-vue"
+  description="Renders a real-time chat interface for users in a shared room."
+/>
+
+## Folder structure
+
+This block assumes that you have already installed a Supabase client for Vue from the previous step.
+
+<RegistryBlock itemName="realtime-chat-vue" />
+
+## Introduction
+
+The Realtime Chat component provides a complete chat interface that enables users to exchange messages in real-time within a shared room.
+
+## Usage
+
+### Basic usage
+
+```html
+<script setup lang="ts">
+  import RealtimeChat from '@/components/realtime-chat.vue'
+</script>
+
+<template>
+  <RealtimeChat roomName="my-chat-room" username="john_doe" />
+</template>
+```
+
+### With initial messages
+
+```html
+<script setup lang="ts">
+  import RealtimeChat from '@/components/realtime-chat.vue'
+  import { useMessagesQuery } from '@/composables/use-messages-query'
+
+  const { data } = useMessagesQuery()
+</script>
+
+<template>
+  <RealtimeChat roomName="my-chat-room" username="john_doe" :messages="data ?? []" />
+</template>
+```
+
+### Storing messages
+
+```html
+<script setup lang="ts">
+  import RealtimeChat from '@/components/realtime-chat.vue'
+  import { useMessagesQuery } from '@/composables/use-messages-query'
+  import { storeMessages } from '@/lib/store-messages'
+  import type { ChatMessage } from '@/types'
+
+  const { data } = useMessagesQuery()
+
+  // Callback function for new messages
+  const handleMessage = async (messages: ChatMessage[]) => {
+    await storeMessages(messages)
+  }
+</script>
+
+<template>
+  <RealtimeChat
+    roomName="my-chat-room"
+    username="john_doe"
+    :messages="data ?? []"
+    :onMessage="handleMessage"
+  />
+</template>
+```
+
+## Features
+
+- Real-time message synchronization
+- Message persistence support with `onMessage` and `messages` props
+- Customizable message appearance
+- Automatic scroll-to-bottom on new messages
+- Room-based isolation for scoped conversations
+- Low-latency updates using Supabase Realtime
+
+## Props
+
+| Prop         | Type                                | Description                                                   |
+| ------------ | ----------------------------------- | ------------------------------------------------------------- |
+| `roomName`   | `string`                            | Unique identifier for the shared chat room.                   |
+| `username`   | `string`                            | Name of the current user; used to identify message senders.   |
+| `onMessage?` | `(messages: ChatMessage[]) => void` | Optional callback to handle messages, useful for persistence. |
+| `messages?`  | `ChatMessage[]`                     | Optional initial messages to display in the chat.             |
+
+### ChatMessage type
+
+```typescript
+interface ChatMessage {
+  id: string
+  content: string
+  user: {
+    name: string
+  }
+  createdAt: string
+}
+```
+
+## Further reading
+
+- [Realtime Broadcast](https://supabase.com/docs/guides/realtime/broadcast)
+- [Realtime authorization](https://supabase.com/docs/guides/realtime/authorization)
diff --git a/apps/ui-library/public/r/infinite-query-composable.json b/apps/ui-library/public/r/infinite-query-composable.json
new file mode 100644
index 0000000000000..c1003d9239c51
--- /dev/null
+++ b/apps/ui-library/public/r/infinite-query-composable.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "infinite-query-composable",
+  "type": "registry:component",
+  "title": "Infinite Query for Vue and Supabase",
+  "description": "Vue Composable for infinite lists, fetching data from Supabase.",
+  "dependencies": [
+    "@supabase/supabase-js@latest",
+    "@supabase/postgrest-js@*"
+  ],
+  "files": [
+    {
+      "path": "registry/default/infinite-query/vue/composables/useInfiniteQuery.ts",
+      "content": "import { PostgrestQueryBuilder, type PostgrestClientOptions } from '@supabase/postgrest-js'\nimport { type SupabaseClient } from '@supabase/supabase-js'\nimport { computed, onMounted, reactive, toRefs, watch } from 'vue'\n\n// @ts-ignore\nimport { createClient } from '@/lib/supabase/client'\n\nconst supabase = createClient()\n\ntype SupabaseClientType = typeof supabase\n\ntype IfAny<T, Y, N> = 0 extends 1 & T ? Y : N\n\ntype Database =\n  SupabaseClientType extends SupabaseClient<infer U>\n    ? IfAny<\n        U,\n        {\n          public: {\n            Tables: Record<string, any>\n            Views: Record<string, any>\n            Functions: Record<string, any>\n          }\n        },\n        U\n      >\n    : {\n        public: {\n          Tables: Record<string, any>\n          Views: Record<string, any>\n          Functions: Record<string, any>\n        }\n      }\n\ntype DatabaseSchema = Database['public']\ntype SupabaseTableName = keyof DatabaseSchema['Tables']\ntype SupabaseTableData<T extends SupabaseTableName> = DatabaseSchema['Tables'][T]['Row']\n\ntype DefaultClientOptions = PostgrestClientOptions\n\ntype SupabaseSelectBuilder<T extends SupabaseTableName> = ReturnType<\n  PostgrestQueryBuilder<\n    DefaultClientOptions,\n    DatabaseSchema,\n    DatabaseSchema['Tables'][T],\n    T\n  >['select']\n>\n\nexport type SupabaseQueryHandler<T extends SupabaseTableName> = (\n  query: SupabaseSelectBuilder<T>\n) => SupabaseSelectBuilder<T>\n\nexport interface UseInfiniteQueryProps<T extends SupabaseTableName> {\n  tableName: T\n  columns?: string\n  pageSize?: number\n  trailingQuery?: SupabaseQueryHandler<T>\n}\n\ninterface State<TData> {\n  data: TData[]\n  count: number\n  isSuccess: boolean\n  isLoading: boolean\n  isFetching: boolean\n  error: Error | null\n  hasInitialFetch: boolean\n  requestCounter: number\n}\n\n// --------------------\n// Composable\n// --------------------\n\nexport function useInfiniteQuery<\n  TData extends SupabaseTableData<T>,\n  T extends SupabaseTableName = SupabaseTableName,\n>(props: UseInfiniteQueryProps<T>) {\n  const state = reactive<State<TData>>({\n    data: [],\n    count: 0,\n    isSuccess: false,\n    isLoading: false,\n    isFetching: false,\n    error: null,\n    hasInitialFetch: false,\n    requestCounter: 0,\n  })\n\n  const pageSize = computed(() => props.pageSize ?? 20)\n  const columns = computed(() => props.columns ?? '*')\n\n  const fetchPage = async (skip: number) => {\n    // Capture the current request token to validate this request later\n    const requestToken = state.requestCounter\n\n    if (state.hasInitialFetch && (state.isFetching || state.data.length >= state.count)) {\n      return\n    }\n\n    // Early return if request has been invalidated\n    if (requestToken !== state.requestCounter) {\n      return\n    }\n\n    state.isFetching = true\n\n    let query = supabase\n      .from(props.tableName)\n      .select(columns.value, { count: 'exact' }) as unknown as SupabaseSelectBuilder<T>\n\n    if (props.trailingQuery) {\n      query = props.trailingQuery(query)\n    }\n\n    const { data, count, error } = await query.range(skip, skip + pageSize.value - 1)\n\n    // Verify that this request is still valid before mutating state\n    if (requestToken !== state.requestCounter) {\n      state.isFetching = false\n      return\n    }\n\n    if (error) {\n      console.error(error)\n      state.error = error\n    } else {\n      state.data.push(...(data as TData[]))\n      state.count = count || 0\n      state.isSuccess = true\n      state.error = null\n    }\n\n    state.isFetching = false\n  }\n\n  const fetchNextPage = async () => {\n    if (state.isFetching) return\n    await fetchPage(state.data.length)\n  }\n\n  const reset = () => {\n    state.data = []\n    state.count = 0\n    state.isSuccess = false\n    state.error = null\n    state.hasInitialFetch = false\n    state.isFetching = false\n    state.requestCounter++\n  }\n\n  const initialize = async () => {\n    state.isLoading = true\n    reset()\n\n    await fetchNextPage()\n\n    state.isLoading = false\n    state.hasInitialFetch = true\n  }\n\n  // React-style deps → Vue watch\n  watch(\n    () => [props.tableName, props.columns, props.pageSize],\n    () => {\n      if (state.hasInitialFetch) {\n        initialize()\n      }\n    }\n  )\n\n  onMounted(() => {\n    if (!state.hasInitialFetch) {\n      initialize()\n    }\n  })\n\n  const hasMore = computed(() => state.count > state.data.length)\n\n  return {\n    ...toRefs(state),\n    hasMore,\n    fetchNextPage,\n    refresh: initialize,\n  }\n}\n",
+      "type": "registry:component",
+      "target": "composables/useInfiniteQuery.ts"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/ui-library/public/r/realtime-chat-nuxtjs.json b/apps/ui-library/public/r/realtime-chat-nuxtjs.json
new file mode 100644
index 0000000000000..8c84e2c84251e
--- /dev/null
+++ b/apps/ui-library/public/r/realtime-chat-nuxtjs.json
@@ -0,0 +1,41 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "realtime-chat-nuxtjs",
+  "type": "registry:block",
+  "title": "Realtime Chat",
+  "description": "Component which provides a realtime chat interface.",
+  "dependencies": [
+    "@supabase/supabase-js@latest",
+    "lucide-vue-next@latest"
+  ],
+  "registryDependencies": [
+    "button",
+    "input"
+  ],
+  "files": [
+    {
+      "path": "registry/default/realtime-chat/nuxtjs/app/components/realtime-chat.vue",
+      "content": "<script setup lang=\"ts\">\nimport { ref, computed, watch } from 'vue'\nimport { Send } from 'lucide-vue-next'\n\nimport ChatMessageItem from './chat-message-item.vue'\nimport { useChatScroll } from '../composables/useChatScroll'\nimport {\n  useRealtimeChat,\n  type ChatMessage,\n} from '../composables/useRealtimeChat'\n  // @ts-ignore\nimport Button from '@/components/ui/Button.vue'\n  // @ts-ignore\nimport Input from '@/components/ui/Input.vue'\n\ninterface RealtimeChatProps {\n  roomName: string\n  username: string\n  onMessage?: (messages: ChatMessage[]) => void\n  messages?: ChatMessage[]\n}\n\nconst props = defineProps<RealtimeChatProps>()\n\nconst initialMessages = computed(() => props.messages ?? [])\n\nconst { containerRef, scrollToBottom } = useChatScroll()\n\nconst { messages: realtimeMessages, sendMessage, isConnected } =\n  useRealtimeChat({\n    roomName: props.roomName,\n    username: props.username,\n  })\n\nconst newMessage = ref('')\n\n/**\n * Merge + dedupe + sort\n */\nconst allMessages = computed<ChatMessage[]>(() => {\n  const merged = [...initialMessages.value, ...realtimeMessages.value]\n\n  const unique = merged.filter(\n    (message, index, self) =>\n      index === self.findIndex((m) => m.id === message.id)\n  )\n\n  return unique.sort((a, b) =>\n    a.createdAt.localeCompare(b.createdAt)\n  )\n})\n\n/**\n * Emit messages to parent if callback provided\n */\nwatch(allMessages, (messages) => {\n  if (props.onMessage) {\n    props.onMessage(messages)\n  }\n\n  scrollToBottom()\n}, { flush: 'post' })\n\nfunction handleSendMessage() {\n  if (!newMessage.value.trim() || !isConnected.value) return\n\n  sendMessage(newMessage.value)\n  newMessage.value = ''\n}\n</script>\n\n<template>\n  <div class=\"flex flex-col h-full w-full bg-background text-foreground antialiased\">\n    <!-- Messages -->\n    <div\n      ref=\"containerRef\"\n      class=\"flex-1 overflow-y-auto p-4 space-y-4\"\n    >\n      <div\n        v-if=\"allMessages.length === 0\"\n        class=\"text-center text-sm text-muted-foreground\"\n      >\n        No messages yet. Start the conversation!\n      </div>\n\n      <div class=\"space-y-1\">\n        <div\n          v-for=\"(message, index) in allMessages\"\n          :key=\"message.id\"\n          class=\"animate-in fade-in slide-in-from-bottom-4 duration-300\"\n        >\n          <ChatMessageItem\n            :message=\"message\"\n            :isOwnMessage=\"message.user.name === props.username\"\n            :showHeader=\"\n              !allMessages[index - 1] ||\n              allMessages[index - 1].user.name !== message.user.name\n            \"\n          />\n        </div>\n      </div>\n    </div>\n\n    <!-- Input -->\n    <form\n      @submit.prevent=\"handleSendMessage\"\n      class=\"flex w-full gap-2 border-t border-border p-4\"\n    >\n      <Input\n        v-model=\"newMessage\"\n        :disabled=\"!isConnected\"\n        type=\"text\"\n        placeholder=\"Type a message...\"\n        :class=\"[\n          'rounded-full bg-background text-sm transition-all duration-300',\n          isConnected && newMessage.trim()\n            ? 'w-[calc(100%-36px)]'\n            : 'w-full',\n        ]\"\n      />\n\n      <Button\n        v-if=\"isConnected && newMessage.trim()\"\n        type=\"submit\"\n        :disabled=\"!isConnected\"\n        class=\"aspect-square rounded-full animate-in fade-in slide-in-from-right-4 duration-300\"\n      >\n        <Send class=\"size-4\" />\n      </Button>\n    </form>\n  </div>\n</template>\n",
+      "type": "registry:component",
+      "target": "app/components/realtime-chat.vue"
+    },
+    {
+      "path": "registry/default/realtime-chat/nuxtjs/app/components/chat-message-item.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport type { ChatMessage } from '../composables/useRealtimeChat'\n\nconst props = defineProps<{\n  message: ChatMessage\n  isOwnMessage: boolean\n  showHeader: boolean\n}>()\n\nconst containerClasses = computed(() => [\n  'flex mt-2',\n  props.isOwnMessage ? 'justify-end' : 'justify-start',\n])\n\nconst wrapperClasses = computed(() => [\n  'max-w-[75%] w-fit flex flex-col gap-1',\n  props.isOwnMessage ? 'items-end' : '',\n])\n\nconst headerClasses = computed(() => [\n  'flex items-center gap-2 text-xs px-3',\n  props.isOwnMessage ? 'justify-end flex-row-reverse' : '',\n])\n\nconst bubbleClasses = computed(() => [\n  'py-2 px-3 rounded-xl text-sm w-fit',\n  props.isOwnMessage\n    ? 'bg-primary text-primary-foreground'\n    : 'bg-muted text-foreground',\n])\n\nconst formattedTime = computed(() =>\n  new Date(props.message.createdAt).toLocaleTimeString('en-US', {\n    hour: '2-digit',\n    minute: '2-digit',\n    hour12: true,\n  })\n)\n</script>\n\n<template>\n  <div :class=\"containerClasses\">\n    <div :class=\"wrapperClasses\">\n      <!-- Header -->\n      <div v-if=\"showHeader\" :class=\"headerClasses\">\n        <span class=\"font-medium\">\n          {{ message.user.name }}\n        </span>\n\n        <span class=\"text-foreground/50 text-xs\">\n          {{ formattedTime }}\n        </span>\n      </div>\n\n      <!-- Message Bubble -->\n      <div :class=\"bubbleClasses\">\n        {{ message.content }}\n      </div>\n    </div>\n  </div>\n</template>\n",
+      "type": "registry:component",
+      "target": "app/components/chat-message-item.vue"
+    },
+    {
+      "path": "registry/default/realtime-chat/nuxtjs/app/composables/useChatScroll.ts",
+      "content": "import { ref } from 'vue'\n\nexport function useChatScroll() {\n  const containerRef = ref<HTMLDivElement | null>(null)\n\n  function scrollToBottom() {\n    if (!containerRef.value) return\n\n    const container = containerRef.value\n\n    container.scrollTo({\n      top: container.scrollHeight,\n      behavior: 'smooth',\n    })\n  }\n\n  return {\n    containerRef,\n    scrollToBottom,\n  }\n}\n",
+      "type": "registry:component",
+      "target": "app/composables/useChatScroll.ts"
+    },
+    {
+      "path": "registry/default/realtime-chat/nuxtjs/app/composables/useRealtimeChat.ts",
+      "content": "import { onUnmounted, ref, watch } from 'vue'\n\n// @ts-ignore\nimport { createClient } from '@/lib/supabase/client'\n\ninterface UseRealtimeChatProps {\n  roomName: string\n  username: string\n}\n\nexport interface ChatMessage {\n  id: string\n  content: string\n  user: {\n    name: string\n  }\n  createdAt: string\n}\n\nconst EVENT_MESSAGE_TYPE = 'message'\n\nexport function useRealtimeChat(props: UseRealtimeChatProps) {\n  const supabase = createClient()\n\n  const messages = ref<ChatMessage[]>([])\n  const channel = ref<ReturnType<typeof supabase.channel> | null>(null)\n  const isConnected = ref(false)\n\n  function cleanup() {\n    if (channel.value) {\n      supabase.removeChannel(channel.value)\n      channel.value = null\n    }\n  }\n\n  function setupChannel() {\n    if (!props.roomName) return\n\n    const newChannel = supabase.channel(props.roomName)\n\n    newChannel\n      .on('broadcast', { event: EVENT_MESSAGE_TYPE }, (payload: { payload: ChatMessage }) => {\n        messages.value.push(payload.payload as ChatMessage)\n      })\n      .subscribe((status: string) => {\n        isConnected.value = status === 'SUBSCRIBED'\n      })\n\n    channel.value = newChannel\n  }\n\n  watch(\n    () => props.roomName,\n    () => {\n      cleanup()\n      setupChannel()\n    },\n    { immediate: true }\n  )\n\n  onUnmounted(() => {\n    cleanup()\n  })\n\n  async function sendMessage(content: string) {\n    if (!channel.value || !isConnected.value) return\n\n    const message: ChatMessage = {\n      id: crypto.randomUUID(),\n      content,\n      user: {\n        name: props.username,\n      },\n      createdAt: new Date().toISOString(),\n    }\n\n    // Optimistic update\n    messages.value.push(message)\n\n    await channel.value.send({\n      type: 'broadcast',\n      event: EVENT_MESSAGE_TYPE,\n      payload: message,\n    })\n  }\n\n  return {\n    messages,\n    sendMessage,\n    isConnected,\n  }\n}\n",
+      "type": "registry:component",
+      "target": "app/composables/useRealtimeChat.ts"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/ui-library/public/r/realtime-chat-vue.json b/apps/ui-library/public/r/realtime-chat-vue.json
new file mode 100644
index 0000000000000..09b3b18e66d26
--- /dev/null
+++ b/apps/ui-library/public/r/realtime-chat-vue.json
@@ -0,0 +1,41 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "realtime-chat-vue",
+  "type": "registry:block",
+  "title": "Realtime Chat",
+  "description": "Component which provides a realtime chat interface.",
+  "dependencies": [
+    "@supabase/supabase-js@latest",
+    "lucide-vue-next@latest"
+  ],
+  "registryDependencies": [
+    "button",
+    "input"
+  ],
+  "files": [
+    {
+      "path": "registry/default/realtime-chat/vue/components/realtime-chat.vue",
+      "content": "<script setup lang=\"ts\">\nimport { ref, computed, watch } from 'vue'\nimport { Send } from 'lucide-vue-next'\n\nimport ChatMessageItem from './chat-message-item.vue'\nimport { useChatScroll } from '../composables/useChatScroll'\nimport {\n  useRealtimeChat,\n  type ChatMessage,\n} from '../composables/useRealtimeChat'\n  // @ts-ignore\nimport Button from '@/components/ui/Button.vue'\n  // @ts-ignore\nimport Input from '@/components/ui/Input.vue'\n\ninterface RealtimeChatProps {\n  roomName: string\n  username: string\n  onMessage?: (messages: ChatMessage[]) => void\n  messages?: ChatMessage[]\n}\n\nconst props = defineProps<RealtimeChatProps>()\n\nconst initialMessages = computed(() => props.messages ?? [])\n\nconst { containerRef, scrollToBottom } = useChatScroll()\n\nconst { messages: realtimeMessages, sendMessage, isConnected } =\n  useRealtimeChat({\n    roomName: props.roomName,\n    username: props.username,\n  })\n\nconst newMessage = ref('')\n\n/**\n * Merge + dedupe + sort\n */\nconst allMessages = computed<ChatMessage[]>(() => {\n  const merged = [...initialMessages.value, ...realtimeMessages.value]\n\n  const unique = merged.filter(\n    (message, index, self) =>\n      index === self.findIndex((m) => m.id === message.id)\n  )\n\n  return unique.sort((a, b) =>\n    a.createdAt.localeCompare(b.createdAt)\n  )\n})\n\n/**\n * Emit messages to parent if callback provided\n */\nwatch(allMessages, (messages) => {\n  if (props.onMessage) {\n    props.onMessage(messages)\n  }\n\n  scrollToBottom()\n}, { flush: 'post' })\n\nfunction handleSendMessage() {\n  if (!newMessage.value.trim() || !isConnected.value) return\n\n  sendMessage(newMessage.value)\n  newMessage.value = ''\n}\n</script>\n\n<template>\n  <div class=\"flex flex-col h-full w-full bg-background text-foreground antialiased\">\n    <!-- Messages -->\n    <div\n      ref=\"containerRef\"\n      class=\"flex-1 overflow-y-auto p-4 space-y-4\"\n    >\n      <div\n        v-if=\"allMessages.length === 0\"\n        class=\"text-center text-sm text-muted-foreground\"\n      >\n        No messages yet. Start the conversation!\n      </div>\n\n      <div class=\"space-y-1\">\n        <div\n          v-for=\"(message, index) in allMessages\"\n          :key=\"message.id\"\n          class=\"animate-in fade-in slide-in-from-bottom-4 duration-300\"\n        >\n          <ChatMessageItem\n            :message=\"message\"\n            :isOwnMessage=\"message.user.name === props.username\"\n            :showHeader=\"\n              !allMessages[index - 1] ||\n              allMessages[index - 1].user.name !== message.user.name\n            \"\n          />\n        </div>\n      </div>\n    </div>\n\n    <!-- Input -->\n    <form\n      @submit.prevent=\"handleSendMessage\"\n      class=\"flex w-full gap-2 border-t border-border p-4\"\n    >\n      <Input\n        v-model=\"newMessage\"\n        :disabled=\"!isConnected\"\n        type=\"text\"\n        placeholder=\"Type a message...\"\n        :class=\"[\n          'rounded-full bg-background text-sm transition-all duration-300',\n          isConnected && newMessage.trim()\n            ? 'w-[calc(100%-36px)]'\n            : 'w-full',\n        ]\"\n      />\n\n      <Button\n        v-if=\"isConnected && newMessage.trim()\"\n        type=\"submit\"\n        :disabled=\"!isConnected\"\n        class=\"aspect-square rounded-full animate-in fade-in slide-in-from-right-4 duration-300\"\n      >\n        <Send class=\"size-4\" />\n      </Button>\n    </form>\n  </div>\n</template>\n",
+      "type": "registry:component",
+      "target": "components/realtime-chat.vue"
+    },
+    {
+      "path": "registry/default/realtime-chat/vue/components/chat-message-item.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport type { ChatMessage } from '../composables/useRealtimeChat'\n\nconst props = defineProps<{\n  message: ChatMessage\n  isOwnMessage: boolean\n  showHeader: boolean\n}>()\n\nconst containerClasses = computed(() => [\n  'flex mt-2',\n  props.isOwnMessage ? 'justify-end' : 'justify-start',\n])\n\nconst wrapperClasses = computed(() => [\n  'max-w-[75%] w-fit flex flex-col gap-1',\n  props.isOwnMessage ? 'items-end' : '',\n])\n\nconst headerClasses = computed(() => [\n  'flex items-center gap-2 text-xs px-3',\n  props.isOwnMessage ? 'justify-end flex-row-reverse' : '',\n])\n\nconst bubbleClasses = computed(() => [\n  'py-2 px-3 rounded-xl text-sm w-fit',\n  props.isOwnMessage\n    ? 'bg-primary text-primary-foreground'\n    : 'bg-muted text-foreground',\n])\n\nconst formattedTime = computed(() =>\n  new Date(props.message.createdAt).toLocaleTimeString('en-US', {\n    hour: '2-digit',\n    minute: '2-digit',\n    hour12: true,\n  })\n)\n</script>\n\n<template>\n  <div :class=\"containerClasses\">\n    <div :class=\"wrapperClasses\">\n      <!-- Header -->\n      <div v-if=\"showHeader\" :class=\"headerClasses\">\n        <span class=\"font-medium\">\n          {{ message.user.name }}\n        </span>\n\n        <span class=\"text-foreground/50 text-xs\">\n          {{ formattedTime }}\n        </span>\n      </div>\n\n      <!-- Message Bubble -->\n      <div :class=\"bubbleClasses\">\n        {{ message.content }}\n      </div>\n    </div>\n  </div>\n</template>\n",
+      "type": "registry:component",
+      "target": "components/chat-message-item.vue"
+    },
+    {
+      "path": "registry/default/realtime-chat/vue/composables/useChatScroll.ts",
+      "content": "import { ref } from 'vue'\n\nexport function useChatScroll() {\n  const containerRef = ref<HTMLDivElement | null>(null)\n\n  function scrollToBottom() {\n    if (!containerRef.value) return\n\n    const container = containerRef.value\n\n    container.scrollTo({\n      top: container.scrollHeight,\n      behavior: 'smooth',\n    })\n  }\n\n  return {\n    containerRef,\n    scrollToBottom,\n  }\n}\n",
+      "type": "registry:component",
+      "target": "composables/useChatScroll.ts"
+    },
+    {
+      "path": "registry/default/realtime-chat/vue/composables/useRealtimeChat.ts",
+      "content": "import { onUnmounted, ref, watch } from 'vue'\n\n// @ts-ignore\nimport { createClient } from '@/lib/supabase/client'\n\ninterface UseRealtimeChatProps {\n  roomName: string\n  username: string\n}\n\nexport interface ChatMessage {\n  id: string\n  content: string\n  user: {\n    name: string\n  }\n  createdAt: string\n}\n\nconst EVENT_MESSAGE_TYPE = 'message'\n\nexport function useRealtimeChat(props: UseRealtimeChatProps) {\n  const supabase = createClient()\n\n  const messages = ref<ChatMessage[]>([])\n  const channel = ref<ReturnType<typeof supabase.channel> | null>(null)\n  const isConnected = ref(false)\n\n  function cleanup() {\n    if (channel.value) {\n      supabase.removeChannel(channel.value)\n      channel.value = null\n    }\n  }\n\n  function setupChannel() {\n    if (!props.roomName) return\n\n    const newChannel = supabase.channel(props.roomName)\n\n    newChannel\n      .on('broadcast', { event: EVENT_MESSAGE_TYPE }, (payload: { payload: ChatMessage }) => {\n        messages.value.push(payload.payload as ChatMessage)\n      })\n      .subscribe((status: string) => {\n        isConnected.value = status === 'SUBSCRIBED'\n      })\n\n    channel.value = newChannel\n  }\n\n  watch(\n    () => props.roomName,\n    () => {\n      cleanup()\n      setupChannel()\n    },\n    { immediate: true }\n  )\n\n  onUnmounted(() => {\n    cleanup()\n  })\n\n  async function sendMessage(content: string) {\n    if (!channel.value || !isConnected.value) return\n\n    const message: ChatMessage = {\n      id: crypto.randomUUID(),\n      content,\n      user: {\n        name: props.username,\n      },\n      createdAt: new Date().toISOString(),\n    }\n\n    // Optimistic update\n    messages.value.push(message)\n\n    await channel.value.send({\n      type: 'broadcast',\n      event: EVENT_MESSAGE_TYPE,\n      payload: message,\n    })\n  }\n\n  return {\n    messages,\n    sendMessage,\n    isConnected,\n  }\n}\n",
+      "type": "registry:component",
+      "target": "composables/useRealtimeChat.ts"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/ui-library/public/r/registry.json b/apps/ui-library/public/r/registry.json
index f9168973a6d0a..f6785bf6c4b7d 100644
--- a/apps/ui-library/public/r/registry.json
+++ b/apps/ui-library/public/r/registry.json
@@ -2406,6 +2406,95 @@
         "@supabase/supabase-js@latest"
       ]
     },
+    {
+      "name": "realtime-chat-nuxtjs",
+      "type": "registry:block",
+      "title": "Realtime Chat",
+      "description": "Component which provides a realtime chat interface.",
+      "registryDependencies": [
+        "button",
+        "input"
+      ],
+      "files": [
+        {
+          "path": "registry/default/realtime-chat/nuxtjs/app/components/realtime-chat.vue",
+          "type": "registry:component",
+          "target": "app/components/realtime-chat.vue"
+        },
+        {
+          "path": "registry/default/realtime-chat/nuxtjs/app/components/chat-message-item.vue",
+          "type": "registry:component",
+          "target": "app/components/chat-message-item.vue"
+        },
+        {
+          "path": "registry/default/realtime-chat/nuxtjs/app/composables/useChatScroll.ts",
+          "type": "registry:component",
+          "target": "app/composables/useChatScroll.ts"
+        },
+        {
+          "path": "registry/default/realtime-chat/nuxtjs/app/composables/useRealtimeChat.ts",
+          "type": "registry:component",
+          "target": "app/composables/useRealtimeChat.ts"
+        }
+      ],
+      "dependencies": [
+        "@supabase/supabase-js@latest",
+        "lucide-vue-next@latest"
+      ]
+    },
+    {
+      "name": "realtime-chat-vue",
+      "type": "registry:block",
+      "title": "Realtime Chat",
+      "description": "Component which provides a realtime chat interface.",
+      "registryDependencies": [
+        "button",
+        "input"
+      ],
+      "files": [
+        {
+          "path": "registry/default/realtime-chat/vue/components/realtime-chat.vue",
+          "type": "registry:component",
+          "target": "components/realtime-chat.vue"
+        },
+        {
+          "path": "registry/default/realtime-chat/vue/components/chat-message-item.vue",
+          "type": "registry:component",
+          "target": "components/chat-message-item.vue"
+        },
+        {
+          "path": "registry/default/realtime-chat/vue/composables/useChatScroll.ts",
+          "type": "registry:component",
+          "target": "composables/useChatScroll.ts"
+        },
+        {
+          "path": "registry/default/realtime-chat/vue/composables/useRealtimeChat.ts",
+          "type": "registry:component",
+          "target": "composables/useRealtimeChat.ts"
+        }
+      ],
+      "dependencies": [
+        "@supabase/supabase-js@latest",
+        "lucide-vue-next@latest"
+      ]
+    },
+    {
+      "name": "infinite-query-composable",
+      "type": "registry:component",
+      "title": "Infinite Query for Vue and Supabase",
+      "description": "Vue Composable for infinite lists, fetching data from Supabase.",
+      "files": [
+        {
+          "path": "registry/default/infinite-query/vue/composables/useInfiniteQuery.ts",
+          "type": "registry:component",
+          "target": "composables/useInfiniteQuery.ts"
+        }
+      ],
+      "dependencies": [
+        "@supabase/supabase-js@latest",
+        "@supabase/postgrest-js@*"
+      ]
+    },
     {
       "$schema": "https://ui.shadcn.com/schema/registry-item.json",
       "name": "ai-editor-rules",
diff --git a/blocks/vue/package.json b/blocks/vue/package.json
index 86649e560378a..15fa3ed73f70a 100644
--- a/blocks/vue/package.json
+++ b/blocks/vue/package.json
@@ -10,6 +10,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
+    "@supabase/postgrest-js": "catalog:",
     "@supabase/ssr": "catalog:",
     "@supabase/supabase-js": "catalog:",
     "@vueuse/core": "^14.1.0",
diff --git a/blocks/vue/registry/default/infinite-query/vue/composables/useInfiniteQuery.ts b/blocks/vue/registry/default/infinite-query/vue/composables/useInfiniteQuery.ts
new file mode 100644
index 0000000000000..c6d6e9152a7cd
--- /dev/null
+++ b/blocks/vue/registry/default/infinite-query/vue/composables/useInfiniteQuery.ts
@@ -0,0 +1,187 @@
+import { PostgrestQueryBuilder, type PostgrestClientOptions } from '@supabase/postgrest-js'
+import { type SupabaseClient } from '@supabase/supabase-js'
+import { computed, onMounted, reactive, toRefs, watch } from 'vue'
+
+// @ts-ignore
+import { createClient } from '@/lib/supabase/client'
+
+const supabase = createClient()
+
+type SupabaseClientType = typeof supabase
+
+type IfAny<T, Y, N> = 0 extends 1 & T ? Y : N
+
+type Database =
+  SupabaseClientType extends SupabaseClient<infer U>
+    ? IfAny<
+        U,
+        {
+          public: {
+            Tables: Record<string, any>
+            Views: Record<string, any>
+            Functions: Record<string, any>
+          }
+        },
+        U
+      >
+    : {
+        public: {
+          Tables: Record<string, any>
+          Views: Record<string, any>
+          Functions: Record<string, any>
+        }
+      }
+
+type DatabaseSchema = Database['public']
+type SupabaseTableName = keyof DatabaseSchema['Tables']
+type SupabaseTableData<T extends SupabaseTableName> = DatabaseSchema['Tables'][T]['Row']
+
+type DefaultClientOptions = PostgrestClientOptions
+
+type SupabaseSelectBuilder<T extends SupabaseTableName> = ReturnType<
+  PostgrestQueryBuilder<
+    DefaultClientOptions,
+    DatabaseSchema,
+    DatabaseSchema['Tables'][T],
+    T
+  >['select']
+>
+
+export type SupabaseQueryHandler<T extends SupabaseTableName> = (
+  query: SupabaseSelectBuilder<T>
+) => SupabaseSelectBuilder<T>
+
+export interface UseInfiniteQueryProps<T extends SupabaseTableName> {
+  tableName: T
+  columns?: string
+  pageSize?: number
+  trailingQuery?: SupabaseQueryHandler<T>
+}
+
+interface State<TData> {
+  data: TData[]
+  count: number
+  isSuccess: boolean
+  isLoading: boolean
+  isFetching: boolean
+  error: Error | null
+  hasInitialFetch: boolean
+  requestCounter: number
+}
+
+// --------------------
+// Composable
+// --------------------
+
+export function useInfiniteQuery<
+  TData extends SupabaseTableData<T>,
+  T extends SupabaseTableName = SupabaseTableName,
+>(props: UseInfiniteQueryProps<T>) {
+  const state = reactive<State<TData>>({
+    data: [],
+    count: 0,
+    isSuccess: false,
+    isLoading: false,
+    isFetching: false,
+    error: null,
+    hasInitialFetch: false,
+    requestCounter: 0,
+  })
+
+  const pageSize = computed(() => props.pageSize ?? 20)
+  const columns = computed(() => props.columns ?? '*')
+
+  const fetchPage = async (skip: number) => {
+    // Capture the current request token to validate this request later
+    const requestToken = state.requestCounter
+
+    if (state.hasInitialFetch && (state.isFetching || state.data.length >= state.count)) {
+      return
+    }
+
+    // Early return if request has been invalidated
+    if (requestToken !== state.requestCounter) {
+      return
+    }
+
+    state.isFetching = true
+
+    let query = supabase
+      .from(props.tableName)
+      .select(columns.value, { count: 'exact' }) as unknown as SupabaseSelectBuilder<T>
+
+    if (props.trailingQuery) {
+      query = props.trailingQuery(query)
+    }
+
+    const { data, count, error } = await query.range(skip, skip + pageSize.value - 1)
+
+    // Verify that this request is still valid before mutating state
+    if (requestToken !== state.requestCounter) {
+      state.isFetching = false
+      return
+    }
+
+    if (error) {
+      console.error(error)
+      state.error = error
+    } else {
+      state.data.push(...(data as TData[]))
+      state.count = count || 0
+      state.isSuccess = true
+      state.error = null
+    }
+
+    state.isFetching = false
+  }
+
+  const fetchNextPage = async () => {
+    if (state.isFetching) return
+    await fetchPage(state.data.length)
+  }
+
+  const reset = () => {
+    state.data = []
+    state.count = 0
+    state.isSuccess = false
+    state.error = null
+    state.hasInitialFetch = false
+    state.isFetching = false
+    state.requestCounter++
+  }
+
+  const initialize = async () => {
+    state.isLoading = true
+    reset()
+
+    await fetchNextPage()
+
+    state.isLoading = false
+    state.hasInitialFetch = true
+  }
+
+  // React-style deps → Vue watch
+  watch(
+    () => [props.tableName, props.columns, props.pageSize],
+    () => {
+      if (state.hasInitialFetch) {
+        initialize()
+      }
+    }
+  )
+
+  onMounted(() => {
+    if (!state.hasInitialFetch) {
+      initialize()
+    }
+  })
+
+  const hasMore = computed(() => state.count > state.data.length)
+
+  return {
+    ...toRefs(state),
+    hasMore,
+    fetchNextPage,
+    refresh: initialize,
+  }
+}
diff --git a/blocks/vue/registry/default/infinite-query/vue/registry-item.json b/blocks/vue/registry/default/infinite-query/vue/registry-item.json
new file mode 100644
index 0000000000000..8cea2bbad606d
--- /dev/null
+++ b/blocks/vue/registry/default/infinite-query/vue/registry-item.json
@@ -0,0 +1,14 @@
+{
+  "name": "infinite-query-composable",
+  "type": "registry:component",
+  "title": "Infinite Query for Vue and Supabase",
+  "description": "Vue Composable for infinite lists, fetching data from Supabase.",
+  "files": [
+    {
+      "path": "registry/default/infinite-query/vue/composables/useInfiniteQuery.ts",
+      "type": "registry:component",
+      "target": "composables/useInfiniteQuery.ts"
+    }
+  ],
+  "dependencies": ["@supabase/supabase-js@latest", "@supabase/postgrest-js@*"]
+}
diff --git a/blocks/vue/registry/default/realtime-chat/nuxtjs/app/components/chat-message-item.vue b/blocks/vue/registry/default/realtime-chat/nuxtjs/app/components/chat-message-item.vue
new file mode 100644
index 0000000000000..a2c7453c85f1e
--- /dev/null
+++ b/blocks/vue/registry/default/realtime-chat/nuxtjs/app/components/chat-message-item.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { ChatMessage } from '../composables/useRealtimeChat'
+
+const props = defineProps<{
+  message: ChatMessage
+  isOwnMessage: boolean
+  showHeader: boolean
+}>()
+
+const containerClasses = computed(() => [
+  'flex mt-2',
+  props.isOwnMessage ? 'justify-end' : 'justify-start',
+])
+
+const wrapperClasses = computed(() => [
+  'max-w-[75%] w-fit flex flex-col gap-1',
+  props.isOwnMessage ? 'items-end' : '',
+])
+
+const headerClasses = computed(() => [
+  'flex items-center gap-2 text-xs px-3',
+  props.isOwnMessage ? 'justify-end flex-row-reverse' : '',
+])
+
+const bubbleClasses = computed(() => [
+  'py-2 px-3 rounded-xl text-sm w-fit',
+  props.isOwnMessage
+    ? 'bg-primary text-primary-foreground'
+    : 'bg-muted text-foreground',
+])
+
+const formattedTime = computed(() =>
+  new Date(props.message.createdAt).toLocaleTimeString('en-US', {
+    hour: '2-digit',
+    minute: '2-digit',
+    hour12: true,
+  })
+)
+</script>
+
+<template>
+  <div :class="containerClasses">
+    <div :class="wrapperClasses">
+      <!-- Header -->
+      <div v-if="showHeader" :class="headerClasses">
+        <span class="font-medium">
+          {{ message.user.name }}
+        </span>
+
+        <span class="text-foreground/50 text-xs">
+          {{ formattedTime }}
+        </span>
+      </div>
+
+      <!-- Message Bubble -->
+      <div :class="bubbleClasses">
+        {{ message.content }}
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/blocks/vue/registry/default/realtime-chat/nuxtjs/app/components/realtime-chat.vue b/blocks/vue/registry/default/realtime-chat/nuxtjs/app/components/realtime-chat.vue
new file mode 100644
index 0000000000000..b6469cfb21aef
--- /dev/null
+++ b/blocks/vue/registry/default/realtime-chat/nuxtjs/app/components/realtime-chat.vue
@@ -0,0 +1,132 @@
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import { Send } from 'lucide-vue-next'
+
+import ChatMessageItem from './chat-message-item.vue'
+import { useChatScroll } from '../composables/useChatScroll'
+import {
+  useRealtimeChat,
+  type ChatMessage,
+} from '../composables/useRealtimeChat'
+  // @ts-ignore
+import Button from '@/components/ui/Button.vue'
+  // @ts-ignore
+import Input from '@/components/ui/Input.vue'
+
+interface RealtimeChatProps {
+  roomName: string
+  username: string
+  onMessage?: (messages: ChatMessage[]) => void
+  messages?: ChatMessage[]
+}
+
+const props = defineProps<RealtimeChatProps>()
+
+const initialMessages = computed(() => props.messages ?? [])
+
+const { containerRef, scrollToBottom } = useChatScroll()
+
+const { messages: realtimeMessages, sendMessage, isConnected } =
+  useRealtimeChat({
+    roomName: props.roomName,
+    username: props.username,
+  })
+
+const newMessage = ref('')
+
+/**
+ * Merge + dedupe + sort
+ */
+const allMessages = computed<ChatMessage[]>(() => {
+  const merged = [...initialMessages.value, ...realtimeMessages.value]
+
+  const unique = merged.filter(
+    (message, index, self) =>
+      index === self.findIndex((m) => m.id === message.id)
+  )
+
+  return unique.sort((a, b) =>
+    a.createdAt.localeCompare(b.createdAt)
+  )
+})
+
+/**
+ * Emit messages to parent if callback provided
+ */
+watch(allMessages, (messages) => {
+  if (props.onMessage) {
+    props.onMessage(messages)
+  }
+
+  scrollToBottom()
+}, { flush: 'post' })
+
+function handleSendMessage() {
+  if (!newMessage.value.trim() || !isConnected.value) return
+
+  sendMessage(newMessage.value)
+  newMessage.value = ''
+}
+</script>
+
+<template>
+  <div class="flex flex-col h-full w-full bg-background text-foreground antialiased">
+    <!-- Messages -->
+    <div
+      ref="containerRef"
+      class="flex-1 overflow-y-auto p-4 space-y-4"
+    >
+      <div
+        v-if="allMessages.length === 0"
+        class="text-center text-sm text-muted-foreground"
+      >
+        No messages yet. Start the conversation!
+      </div>
+
+      <div class="space-y-1">
+        <div
+          v-for="(message, index) in allMessages"
+          :key="message.id"
+          class="animate-in fade-in slide-in-from-bottom-4 duration-300"
+        >
+          <ChatMessageItem
+            :message="message"
+            :isOwnMessage="message.user.name === props.username"
+            :showHeader="
+              !allMessages[index - 1] ||
+              allMessages[index - 1].user.name !== message.user.name
+            "
+          />
+        </div>
+      </div>
+    </div>
+
+    <!-- Input -->
+    <form
+      @submit.prevent="handleSendMessage"
+      class="flex w-full gap-2 border-t border-border p-4"
+    >
+      <Input
+        v-model="newMessage"
+        :disabled="!isConnected"
+        type="text"
+        placeholder="Type a message..."
+        :class="[
+          'rounded-full bg-background text-sm transition-all duration-300',
+          isConnected && newMessage.trim()
+            ? 'w-[calc(100%-36px)]'
+            : 'w-full',
+        ]"
+      />
+
+      <Button
+        v-if="isConnected && newMessage.trim()"
+        type="submit"
+        :disabled="!isConnected"
+        class="aspect-square rounded-full animate-in fade-in slide-in-from-right-4 duration-300"
+      >
+        <Send class="size-4" />
+      </Button>
+    </form>
+  </div>
+</template>
diff --git a/blocks/vue/registry/default/realtime-chat/nuxtjs/app/composables/useChatScroll.ts b/blocks/vue/registry/default/realtime-chat/nuxtjs/app/composables/useChatScroll.ts
new file mode 100644
index 0000000000000..5ca670f1dc480
--- /dev/null
+++ b/blocks/vue/registry/default/realtime-chat/nuxtjs/app/composables/useChatScroll.ts
@@ -0,0 +1,21 @@
+import { ref } from 'vue'
+
+export function useChatScroll() {
+  const containerRef = ref<HTMLDivElement | null>(null)
+
+  function scrollToBottom() {
+    if (!containerRef.value) return
+
+    const container = containerRef.value
+
+    container.scrollTo({
+      top: container.scrollHeight,
+      behavior: 'smooth',
+    })
+  }
+
+  return {
+    containerRef,
+    scrollToBottom,
+  }
+}
diff --git a/blocks/vue/registry/default/realtime-chat/nuxtjs/app/composables/useRealtimeChat.ts b/blocks/vue/registry/default/realtime-chat/nuxtjs/app/composables/useRealtimeChat.ts
new file mode 100644
index 0000000000000..094caa2f2012e
--- /dev/null
+++ b/blocks/vue/registry/default/realtime-chat/nuxtjs/app/composables/useRealtimeChat.ts
@@ -0,0 +1,92 @@
+import { onUnmounted, ref, watch } from 'vue'
+
+// @ts-ignore
+import { createClient } from '@/lib/supabase/client'
+
+interface UseRealtimeChatProps {
+  roomName: string
+  username: string
+}
+
+export interface ChatMessage {
+  id: string
+  content: string
+  user: {
+    name: string
+  }
+  createdAt: string
+}
+
+const EVENT_MESSAGE_TYPE = 'message'
+
+export function useRealtimeChat(props: UseRealtimeChatProps) {
+  const supabase = createClient()
+
+  const messages = ref<ChatMessage[]>([])
+  const channel = ref<ReturnType<typeof supabase.channel> | null>(null)
+  const isConnected = ref(false)
+
+  function cleanup() {
+    if (channel.value) {
+      supabase.removeChannel(channel.value)
+      channel.value = null
+    }
+  }
+
+  function setupChannel() {
+    if (!props.roomName) return
+
+    const newChannel = supabase.channel(props.roomName)
+
+    newChannel
+      .on('broadcast', { event: EVENT_MESSAGE_TYPE }, (payload: { payload: ChatMessage }) => {
+        messages.value.push(payload.payload as ChatMessage)
+      })
+      .subscribe((status: string) => {
+        isConnected.value = status === 'SUBSCRIBED'
+      })
+
+    channel.value = newChannel
+  }
+
+  watch(
+    () => props.roomName,
+    () => {
+      cleanup()
+      setupChannel()
+    },
+    { immediate: true }
+  )
+
+  onUnmounted(() => {
+    cleanup()
+  })
+
+  async function sendMessage(content: string) {
+    if (!channel.value || !isConnected.value) return
+
+    const message: ChatMessage = {
+      id: crypto.randomUUID(),
+      content,
+      user: {
+        name: props.username,
+      },
+      createdAt: new Date().toISOString(),
+    }
+
+    // Optimistic update
+    messages.value.push(message)
+
+    await channel.value.send({
+      type: 'broadcast',
+      event: EVENT_MESSAGE_TYPE,
+      payload: message,
+    })
+  }
+
+  return {
+    messages,
+    sendMessage,
+    isConnected,
+  }
+}
diff --git a/blocks/vue/registry/default/realtime-chat/nuxtjs/registry-item.json b/blocks/vue/registry/default/realtime-chat/nuxtjs/registry-item.json
new file mode 100644
index 0000000000000..e0aabffb85d53
--- /dev/null
+++ b/blocks/vue/registry/default/realtime-chat/nuxtjs/registry-item.json
@@ -0,0 +1,30 @@
+{
+  "name": "realtime-chat-nuxtjs",
+  "type": "registry:block",
+  "title": "Realtime Chat",
+  "description": "Component which provides a realtime chat interface.",
+  "registryDependencies": ["button", "input"],
+  "files": [
+    {
+      "path": "registry/default/realtime-chat/nuxtjs/app/components/realtime-chat.vue",
+      "type": "registry:component",
+      "target": "app/components/realtime-chat.vue"
+    },
+    {
+      "path": "registry/default/realtime-chat/nuxtjs/app/components/chat-message-item.vue",
+      "type": "registry:component",
+      "target": "app/components/chat-message-item.vue"
+    },
+    {
+      "path": "registry/default/realtime-chat/nuxtjs/app/composables/useChatScroll.ts",
+      "type": "registry:component",
+      "target": "app/composables/useChatScroll.ts"
+    },
+    {
+      "path": "registry/default/realtime-chat/nuxtjs/app/composables/useRealtimeChat.ts",
+      "type": "registry:component",
+      "target": "app/composables/useRealtimeChat.ts"
+    }
+  ],
+  "dependencies": ["@supabase/supabase-js@latest", "lucide-vue-next@latest"]
+}
diff --git a/blocks/vue/registry/default/realtime-chat/vue/components/chat-message-item.vue b/blocks/vue/registry/default/realtime-chat/vue/components/chat-message-item.vue
new file mode 100644
index 0000000000000..a2c7453c85f1e
--- /dev/null
+++ b/blocks/vue/registry/default/realtime-chat/vue/components/chat-message-item.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { ChatMessage } from '../composables/useRealtimeChat'
+
+const props = defineProps<{
+  message: ChatMessage
+  isOwnMessage: boolean
+  showHeader: boolean
+}>()
+
+const containerClasses = computed(() => [
+  'flex mt-2',
+  props.isOwnMessage ? 'justify-end' : 'justify-start',
+])
+
+const wrapperClasses = computed(() => [
+  'max-w-[75%] w-fit flex flex-col gap-1',
+  props.isOwnMessage ? 'items-end' : '',
+])
+
+const headerClasses = computed(() => [
+  'flex items-center gap-2 text-xs px-3',
+  props.isOwnMessage ? 'justify-end flex-row-reverse' : '',
+])
+
+const bubbleClasses = computed(() => [
+  'py-2 px-3 rounded-xl text-sm w-fit',
+  props.isOwnMessage
+    ? 'bg-primary text-primary-foreground'
+    : 'bg-muted text-foreground',
+])
+
+const formattedTime = computed(() =>
+  new Date(props.message.createdAt).toLocaleTimeString('en-US', {
+    hour: '2-digit',
+    minute: '2-digit',
+    hour12: true,
+  })
+)
+</script>
+
+<template>
+  <div :class="containerClasses">
+    <div :class="wrapperClasses">
+      <!-- Header -->
+      <div v-if="showHeader" :class="headerClasses">
+        <span class="font-medium">
+          {{ message.user.name }}
+        </span>
+
+        <span class="text-foreground/50 text-xs">
+          {{ formattedTime }}
+        </span>
+      </div>
+
+      <!-- Message Bubble -->
+      <div :class="bubbleClasses">
+        {{ message.content }}
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/blocks/vue/registry/default/realtime-chat/vue/components/realtime-chat.vue b/blocks/vue/registry/default/realtime-chat/vue/components/realtime-chat.vue
new file mode 100644
index 0000000000000..b6469cfb21aef
--- /dev/null
+++ b/blocks/vue/registry/default/realtime-chat/vue/components/realtime-chat.vue
@@ -0,0 +1,132 @@
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import { Send } from 'lucide-vue-next'
+
+import ChatMessageItem from './chat-message-item.vue'
+import { useChatScroll } from '../composables/useChatScroll'
+import {
+  useRealtimeChat,
+  type ChatMessage,
+} from '../composables/useRealtimeChat'
+  // @ts-ignore
+import Button from '@/components/ui/Button.vue'
+  // @ts-ignore
+import Input from '@/components/ui/Input.vue'
+
+interface RealtimeChatProps {
+  roomName: string
+  username: string
+  onMessage?: (messages: ChatMessage[]) => void
+  messages?: ChatMessage[]
+}
+
+const props = defineProps<RealtimeChatProps>()
+
+const initialMessages = computed(() => props.messages ?? [])
+
+const { containerRef, scrollToBottom } = useChatScroll()
+
+const { messages: realtimeMessages, sendMessage, isConnected } =
+  useRealtimeChat({
+    roomName: props.roomName,
+    username: props.username,
+  })
+
+const newMessage = ref('')
+
+/**
+ * Merge + dedupe + sort
+ */
+const allMessages = computed<ChatMessage[]>(() => {
+  const merged = [...initialMessages.value, ...realtimeMessages.value]
+
+  const unique = merged.filter(
+    (message, index, self) =>
+      index === self.findIndex((m) => m.id === message.id)
+  )
+
+  return unique.sort((a, b) =>
+    a.createdAt.localeCompare(b.createdAt)
+  )
+})
+
+/**
+ * Emit messages to parent if callback provided
+ */
+watch(allMessages, (messages) => {
+  if (props.onMessage) {
+    props.onMessage(messages)
+  }
+
+  scrollToBottom()
+}, { flush: 'post' })
+
+function handleSendMessage() {
+  if (!newMessage.value.trim() || !isConnected.value) return
+
+  sendMessage(newMessage.value)
+  newMessage.value = ''
+}
+</script>
+
+<template>
+  <div class="flex flex-col h-full w-full bg-background text-foreground antialiased">
+    <!-- Messages -->
+    <div
+      ref="containerRef"
+      class="flex-1 overflow-y-auto p-4 space-y-4"
+    >
+      <div
+        v-if="allMessages.length === 0"
+        class="text-center text-sm text-muted-foreground"
+      >
+        No messages yet. Start the conversation!
+      </div>
+
+      <div class="space-y-1">
+        <div
+          v-for="(message, index) in allMessages"
+          :key="message.id"
+          class="animate-in fade-in slide-in-from-bottom-4 duration-300"
+        >
+          <ChatMessageItem
+            :message="message"
+            :isOwnMessage="message.user.name === props.username"
+            :showHeader="
+              !allMessages[index - 1] ||
+              allMessages[index - 1].user.name !== message.user.name
+            "
+          />
+        </div>
+      </div>
+    </div>
+
+    <!-- Input -->
+    <form
+      @submit.prevent="handleSendMessage"
+      class="flex w-full gap-2 border-t border-border p-4"
+    >
+      <Input
+        v-model="newMessage"
+        :disabled="!isConnected"
+        type="text"
+        placeholder="Type a message..."
+        :class="[
+          'rounded-full bg-background text-sm transition-all duration-300',
+          isConnected && newMessage.trim()
+            ? 'w-[calc(100%-36px)]'
+            : 'w-full',
+        ]"
+      />
+
+      <Button
+        v-if="isConnected && newMessage.trim()"
+        type="submit"
+        :disabled="!isConnected"
+        class="aspect-square rounded-full animate-in fade-in slide-in-from-right-4 duration-300"
+      >
+        <Send class="size-4" />
+      </Button>
+    </form>
+  </div>
+</template>
diff --git a/blocks/vue/registry/default/realtime-chat/vue/composables/useChatScroll.ts b/blocks/vue/registry/default/realtime-chat/vue/composables/useChatScroll.ts
new file mode 100644
index 0000000000000..5ca670f1dc480
--- /dev/null
+++ b/blocks/vue/registry/default/realtime-chat/vue/composables/useChatScroll.ts
@@ -0,0 +1,21 @@
+import { ref } from 'vue'
+
+export function useChatScroll() {
+  const containerRef = ref<HTMLDivElement | null>(null)
+
+  function scrollToBottom() {
+    if (!containerRef.value) return
+
+    const container = containerRef.value
+
+    container.scrollTo({
+      top: container.scrollHeight,
+      behavior: 'smooth',
+    })
+  }
+
+  return {
+    containerRef,
+    scrollToBottom,
+  }
+}
diff --git a/blocks/vue/registry/default/realtime-chat/vue/composables/useRealtimeChat.ts b/blocks/vue/registry/default/realtime-chat/vue/composables/useRealtimeChat.ts
new file mode 100644
index 0000000000000..094caa2f2012e
--- /dev/null
+++ b/blocks/vue/registry/default/realtime-chat/vue/composables/useRealtimeChat.ts
@@ -0,0 +1,92 @@
+import { onUnmounted, ref, watch } from 'vue'
+
+// @ts-ignore
+import { createClient } from '@/lib/supabase/client'
+
+interface UseRealtimeChatProps {
+  roomName: string
+  username: string
+}
+
+export interface ChatMessage {
+  id: string
+  content: string
+  user: {
+    name: string
+  }
+  createdAt: string
+}
+
+const EVENT_MESSAGE_TYPE = 'message'
+
+export function useRealtimeChat(props: UseRealtimeChatProps) {
+  const supabase = createClient()
+
+  const messages = ref<ChatMessage[]>([])
+  const channel = ref<ReturnType<typeof supabase.channel> | null>(null)
+  const isConnected = ref(false)
+
+  function cleanup() {
+    if (channel.value) {
+      supabase.removeChannel(channel.value)
+      channel.value = null
+    }
+  }
+
+  function setupChannel() {
+    if (!props.roomName) return
+
+    const newChannel = supabase.channel(props.roomName)
+
+    newChannel
+      .on('broadcast', { event: EVENT_MESSAGE_TYPE }, (payload: { payload: ChatMessage }) => {
+        messages.value.push(payload.payload as ChatMessage)
+      })
+      .subscribe((status: string) => {
+        isConnected.value = status === 'SUBSCRIBED'
+      })
+
+    channel.value = newChannel
+  }
+
+  watch(
+    () => props.roomName,
+    () => {
+      cleanup()
+      setupChannel()
+    },
+    { immediate: true }
+  )
+
+  onUnmounted(() => {
+    cleanup()
+  })
+
+  async function sendMessage(content: string) {
+    if (!channel.value || !isConnected.value) return
+
+    const message: ChatMessage = {
+      id: crypto.randomUUID(),
+      content,
+      user: {
+        name: props.username,
+      },
+      createdAt: new Date().toISOString(),
+    }
+
+    // Optimistic update
+    messages.value.push(message)
+
+    await channel.value.send({
+      type: 'broadcast',
+      event: EVENT_MESSAGE_TYPE,
+      payload: message,
+    })
+  }
+
+  return {
+    messages,
+    sendMessage,
+    isConnected,
+  }
+}
diff --git a/blocks/vue/registry/default/realtime-chat/vue/registry-item.json b/blocks/vue/registry/default/realtime-chat/vue/registry-item.json
new file mode 100644
index 0000000000000..1616512c2d734
--- /dev/null
+++ b/blocks/vue/registry/default/realtime-chat/vue/registry-item.json
@@ -0,0 +1,30 @@
+{
+  "name": "realtime-chat-vue",
+  "type": "registry:block",
+  "title": "Realtime Chat",
+  "description": "Component which provides a realtime chat interface.",
+  "registryDependencies": ["button", "input"],
+  "files": [
+    {
+      "path": "registry/default/realtime-chat/vue/components/realtime-chat.vue",
+      "type": "registry:component",
+      "target": "components/realtime-chat.vue"
+    },
+    {
+      "path": "registry/default/realtime-chat/vue/components/chat-message-item.vue",
+      "type": "registry:component",
+      "target": "components/chat-message-item.vue"
+    },
+    {
+      "path": "registry/default/realtime-chat/vue/composables/useChatScroll.ts",
+      "type": "registry:component",
+      "target": "composables/useChatScroll.ts"
+    },
+    {
+      "path": "registry/default/realtime-chat/vue/composables/useRealtimeChat.ts",
+      "type": "registry:component",
+      "target": "composables/useRealtimeChat.ts"
+    }
+  ],
+  "dependencies": ["@supabase/supabase-js@latest", "lucide-vue-next@latest"]
+}
diff --git a/blocks/vue/registry/index.ts b/blocks/vue/registry/index.ts
index 5493d9b8a46ef..4c53e55a21307 100644
--- a/blocks/vue/registry/index.ts
+++ b/blocks/vue/registry/index.ts
@@ -1,10 +1,12 @@
 import { clients } from './clients'
+import { currentUserAvatar } from './current-user-avatar'
 import { dropzone } from './dropzone'
+import { infiniteQuery } from './infinite-query'
 import { passwordBasedAuth } from './password-based-auth'
+import { realtimeAvatarStack } from './realtime-avatar-stack'
+import { realtimeChat } from './realtime-chat'
 import { realtimeCursor } from './realtime-cursor'
 import { socialAuth } from './social-auth'
-import { currentUserAvatar } from './current-user-avatar'
-import { realtimeAvatarStack } from './realtime-avatar-stack'
 
 const blocks = [
   ...clients,
@@ -14,6 +16,8 @@ const blocks = [
   ...realtimeCursor,
   ...currentUserAvatar,
   ...realtimeAvatarStack,
+  ...realtimeChat,
+  ...infiniteQuery,
 ]
 
 export { blocks }
diff --git a/blocks/vue/registry/infinite-query.ts b/blocks/vue/registry/infinite-query.ts
new file mode 100644
index 0000000000000..16e8eb8477b73
--- /dev/null
+++ b/blocks/vue/registry/infinite-query.ts
@@ -0,0 +1,5 @@
+import { type Registry } from 'shadcn/schema'
+
+import vue from './default/infinite-query/vue/registry-item.json' with { type: 'json' }
+
+export const infiniteQuery = [vue] as Registry['items']
diff --git a/blocks/vue/registry/realtime-chat.ts b/blocks/vue/registry/realtime-chat.ts
new file mode 100644
index 0000000000000..bb01c123b6e4f
--- /dev/null
+++ b/blocks/vue/registry/realtime-chat.ts
@@ -0,0 +1,6 @@
+import { type RegistryItem } from 'shadcn/schema'
+
+import nuxtjs from './default/realtime-chat/nuxtjs/registry-item.json' with { type: 'json' }
+import vue from './default/realtime-chat/vue/registry-item.json' with { type: 'json' }
+
+export const realtimeChat = [nuxtjs, vue] as RegistryItem[]
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a7c2dacf1813f..b548120ac989e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1892,6 +1892,9 @@ importers:
 
   blocks/vue:
     dependencies:
+      '@supabase/postgrest-js':
+        specifier: 'catalog:'
+        version: 2.106.0
       '@supabase/ssr':
         specifier: 'catalog:'
         version: 0.10.2(@supabase/supabase-js@2.106.0)

From 6dabfde2967b8643078fa56141549893c7f820f2 Mon Sep 17 00:00:00 2001
From: Charis <26616127+charislam@users.noreply.github.com>
Date: Thu, 21 May 2026 15:24:20 -0400
Subject: [PATCH 4/6] perf(studio): virtualize rendering, memoize nodes/edges,
 and O(1) FK lookup in Schema Visualizer (#46235)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Towards [FE-3428](https://linear.app/supabase/issue/FE-3428).

## Summary

Cheap render-cost fixes so the Schema Visualizer stays responsive at
400+ tables. No data-layer or API changes — pure render-side work,
isolated to the Schema Visualizer.

- Enable `onlyRenderVisibleElements` on `<ReactFlow>` so xyflow skips
mounting nodes and edges outside the viewport.
- Memoize `TableNode` (custom comparator) and `DefaultEdge` so they
don't re-render on unrelated state changes (pan/zoom, theme toggle,
parent re-renders).
- Drop `resolvedTheme` from the layout effect deps — theme is purely
visual; toggling it no longer re-runs Dagre and replaces every
node/edge.
- `handleSelectionChange` now (a) skips `setEdges` entirely when no
edge's `animated` flipped, and (b) preserves the object reference for
untouched edges so memoized edges don't re-render.
- Precompute a `Map<tableName, …>` lookup in `getGraphDataFromTables` so
FK handle resolution is O(1) per relationship instead of scanning every
table+column.

A follow-up PR will add a `useInfiniteTablesQuery` and switch both the
Schema Visualizer and Database > Tables list onto it for progressive
loading and infinite scroll.

## Caveats

- `TableNode` reads `selectedEdge` from context, so selecting an edge
still re-renders all visible `TableNode`s via context propagation. The
memo guards against props-driven re-renders (pan/zoom/theme).

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

## Summary by CodeRabbit

* **Refactor**
* Optimized database schema graph rendering with improved component
caching and efficient relationship lookups.
* Enhanced visual element rendering to reduce unnecessary re-renders for
large schemas.

<!-- review_stack_entry_start -->

[![Review Change
Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46235?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack)

<!-- review_stack_entry_end -->

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../Database/Schemas/DefaultEdge.tsx          |  6 +-
 .../Database/Schemas/SchemaGraph.tsx          | 31 +++++------
 .../Database/Schemas/SchemaTableNode.tsx      | 21 ++++++-
 .../Database/Schemas/Schemas.utils.ts         | 55 ++++++++-----------
 4 files changed, 58 insertions(+), 55 deletions(-)

diff --git a/apps/studio/components/interfaces/Database/Schemas/DefaultEdge.tsx b/apps/studio/components/interfaces/Database/Schemas/DefaultEdge.tsx
index 692a98db90756..8c17aac26c742 100644
--- a/apps/studio/components/interfaces/Database/Schemas/DefaultEdge.tsx
+++ b/apps/studio/components/interfaces/Database/Schemas/DefaultEdge.tsx
@@ -8,7 +8,7 @@ import {
   useReactFlow,
 } from '@xyflow/react'
 import { ArrowLeft, ArrowRight } from 'lucide-react'
-import { useState } from 'react'
+import { memo, useState } from 'react'
 import { Badge, cn } from 'ui'
 
 import { useSchemaGraphContext } from './SchemaGraphContext'
@@ -16,7 +16,7 @@ import { EdgeData } from './Schemas.constants'
 import { useQuerySchemaState } from '@/hooks/misc/useSchemaQueryState'
 import { useStaticEffectEvent } from '@/hooks/useStaticEffectEvent'
 
-export const DefaultEdge = ({
+const DefaultEdgeComponent = ({
   id,
   animated,
   data,
@@ -73,6 +73,8 @@ export const DefaultEdge = ({
   )
 }
 
+export const DefaultEdge = memo(DefaultEdgeComponent)
+
 const EdgeRelationInfo = ({
   data,
   source,
diff --git a/apps/studio/components/interfaces/Database/Schemas/SchemaGraph.tsx b/apps/studio/components/interfaces/Database/Schemas/SchemaGraph.tsx
index 450ea08914ac1..1632d7323a9ed 100644
--- a/apps/studio/components/interfaces/Database/Schemas/SchemaGraph.tsx
+++ b/apps/studio/components/interfaces/Database/Schemas/SchemaGraph.tsx
@@ -187,14 +187,17 @@ export const SchemaGraph = () => {
       }
 
       const selectedNodeIds = new Set(params.nodes.map((n) => n.id))
-      reactFlowInstance.setEdges(
-        reactFlowInstance.getEdges().map((edge) => ({
-          ...edge,
-          animated:
-            selectedNodeIds.size > 0 &&
-            (selectedNodeIds.has(edge.source) || selectedNodeIds.has(edge.target)),
-        }))
-      )
+      const currentEdges = reactFlowInstance.getEdges()
+      let hasChanges = false
+      const nextEdges = currentEdges.map((edge) => {
+        const shouldAnimate =
+          selectedNodeIds.size > 0 &&
+          (selectedNodeIds.has(edge.source) || selectedNodeIds.has(edge.target))
+        if (edge.animated === shouldAnimate) return edge
+        hasChanges = true
+        return { ...edge, animated: shouldAnimate }
+      })
+      if (hasChanges) reactFlowInstance.setEdges(nextEdges)
     }
   )
 
@@ -253,16 +256,7 @@ export const SchemaGraph = () => {
         }
       })
     }
-  }, [
-    isSuccessTables,
-    isSuccessSchemas,
-    tables,
-    reactFlowInstance,
-    ref,
-    resolvedTheme,
-    schemas,
-    selectedSchema,
-  ])
+  }, [isSuccessTables, isSuccessSchemas, tables, reactFlowInstance, ref, schemas, selectedSchema])
 
   const schemaGraphContext = useMemo<SchemaGraphContextType>(
     () => ({
@@ -470,6 +464,7 @@ export const SchemaGraph = () => {
                   fitView
                   minZoom={0.8}
                   maxZoom={1.8}
+                  onlyRenderVisibleElements
                   proOptions={{ hideAttribution: true }}
                   onNodeDragStop={saveNodePositions}
                   onSelectionChange={handleSelectionChange}
diff --git a/apps/studio/components/interfaces/Database/Schemas/SchemaTableNode.tsx b/apps/studio/components/interfaces/Database/Schemas/SchemaTableNode.tsx
index 1d296f1f11635..46b0451df17f8 100644
--- a/apps/studio/components/interfaces/Database/Schemas/SchemaTableNode.tsx
+++ b/apps/studio/components/interfaces/Database/Schemas/SchemaTableNode.tsx
@@ -13,6 +13,7 @@ import {
   Table2,
 } from 'lucide-react'
 import { useRouter } from 'next/router'
+import { memo } from 'react'
 import { toast } from 'sonner'
 import {
   Button,
@@ -41,13 +42,15 @@ import { formatSql } from '@/lib/formatSql'
 export const TABLE_NODE_WIDTH = 320
 export const TABLE_NODE_ROW_HEIGHT = 40
 
-export const TableNode = ({
+type TableNodeOwnProps = NodeProps<Node<TableNodeData>> & { placeholder?: boolean }
+
+const TableNodeComponent = ({
   id,
   data,
   targetPosition,
   sourcePosition,
   placeholder,
-}: NodeProps<Node<TableNodeData>> & { placeholder?: boolean }) => {
+}: TableNodeOwnProps) => {
   // Important styles is a nasty hack to use Handles (required for edges calculations), but do not show them in the UI.
   // ref: https://github.com/wbkd/react-flow/discussions/2698
   const hiddenNodeConnector = 'h-px! w-px! min-w-0! min-h-0! cursor-grab! border-0! opacity-0!'
@@ -358,3 +361,17 @@ export const TableNode = ({
     </article>
   )
 }
+
+// Custom comparator: xyflow re-renders nodes on selection/drag with new prop
+// objects; only the listed props affect rendered output. Selection-driven styling
+// (highlighted edges) is read from context inside the component, so we can safely
+// ignore xyflow's `selected`/`dragging`/etc. here.
+export const TableNode = memo(
+  TableNodeComponent,
+  (prev, next) =>
+    prev.id === next.id &&
+    prev.data === next.data &&
+    prev.targetPosition === next.targetPosition &&
+    prev.sourcePosition === next.sourcePosition &&
+    prev.placeholder === next.placeholder
+)
diff --git a/apps/studio/components/interfaces/Database/Schemas/Schemas.utils.ts b/apps/studio/components/interfaces/Database/Schemas/Schemas.utils.ts
index 7089fae809365..b7a72e7825a60 100644
--- a/apps/studio/components/interfaces/Database/Schemas/Schemas.utils.ts
+++ b/apps/studio/components/interfaces/Database/Schemas/Schemas.utils.ts
@@ -66,6 +66,25 @@ export async function getGraphDataFromTables(
     'id'
   )
 
+  // Precompute name → { tableId, columnsByName } lookup so each relationship
+  // resolves its source/target handles in O(1) instead of scanning every table+column.
+  const tablesByName = new Map<string, { tableId: number; columnsByName: Map<string, string> }>()
+  for (const table of tables) {
+    const columnsByName = new Map<string, string>()
+    for (const column of table.columns || []) {
+      columnsByName.set(column.name, column.id)
+    }
+    tablesByName.set(table.name, { tableId: table.id, columnsByName })
+  }
+
+  const findHandleIds = (tableName: string, columnName: string): [string?, string?] => {
+    const entry = tablesByName.get(tableName)
+    if (!entry) return []
+    const columnId = entry.columnsByName.get(columnName)
+    if (columnId === undefined) return []
+    return [String(entry.tableId), columnId]
+  }
+
   for (const rel of uniqueRelationships) {
     // TODO: Support [external->this] relationship?
     if (rel.source_schema !== currentSchema) {
@@ -96,11 +115,7 @@ export async function getGraphDataFromTables(
         })
       }
 
-      const [source, sourceHandle] = findTablesHandleIds(
-        tables,
-        rel.source_table_name,
-        rel.source_column_name
-      )
+      const [source, sourceHandle] = findHandleIds(rel.source_table_name, rel.source_column_name)
 
       if (source) {
         edges.push({
@@ -124,16 +139,8 @@ export async function getGraphDataFromTables(
       continue
     }
 
-    const [source, sourceHandle] = findTablesHandleIds(
-      tables,
-      rel.source_table_name,
-      rel.source_column_name
-    )
-    const [target, targetHandle] = findTablesHandleIds(
-      tables,
-      rel.target_table_name,
-      rel.target_column_name
-    )
+    const [source, sourceHandle] = findHandleIds(rel.source_table_name, rel.source_column_name)
+    const [target, targetHandle] = findHandleIds(rel.target_table_name, rel.target_column_name)
 
     // We do not support [external->this] flow currently.
     if (source && target) {
@@ -165,24 +172,6 @@ export async function getGraphDataFromTables(
     : getLayoutedElementsViaDagre(nodes, edges)
 }
 
-function findTablesHandleIds(
-  tables: PGTable[],
-  table_name: string,
-  column_name: string
-): [string?, string?] {
-  for (const table of tables) {
-    if (table_name !== table.name) continue
-
-    for (const column of table.columns || []) {
-      if (column_name !== column.name) continue
-
-      return [String(table.id), column.id]
-    }
-  }
-
-  return []
-}
-
 export const getLayoutedElementsViaDagre = (nodes: Node<TableNodeData>[], edges: Edge[]) => {
   const dagreGraph = new dagre.graphlib.Graph()
   dagreGraph.setDefaultEdgeLabel(() => ({}))

From 8349ae5fce77ce6dd2fc435902fc3708506f9178 Mon Sep 17 00:00:00 2001
From: Pedro Rodrigues <44656907+Rodriguespn@users.noreply.github.com>
Date: Thu, 21 May 2026 21:50:34 +0100
Subject: [PATCH 5/6] fix: remove invalid Codex MCP config from connect sheet
 and docs (#46230)

## Summary

Two surfaces were showing invalid Codex config keys that don't exist in
Codex's schema (which uses `additionalProperties: false`), causing
validation errors for users who followed the setup steps.

- **Studio Connect Sheet** (`connect.schema.ts`): removes the "Enable
remote MCP client support" step, which told users to add
`[mcp]\nremote_mcp_client_enabled = true` to `~/.codex/config.toml`.
Deletes the dead content component and updates tests.
- **Docs MCP panel** (`ui-patterns/McpUrlBuilder/constants.tsx`):
removes the `[features]\nrmcp_client = true` config block from the Codex
`alternateInstructions`. Keeps the valid authenticate (`codex mcp login
supabase`) and verify (`/mcp`) steps.

Closes
[AI-548](https://linear.app/supabase/issue/AI-548/bug-studio-mcp-connect-flow-shows-invalid-codex-config-guidance)
Fixes #43893

## Root cause

Both invalid keys were introduced in #42374 (Feb 2026). A full search
through the [`openai/codex`](https://github.com/openai/codex) git
history confirms neither `remote_mcp_client_enabled` nor `rmcp_client`
ever existed in any version of the codebase (neither the TypeScript CLI
nor the Rust rewrite).

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../ConnectSheet/connect.schema.test.ts       |  4 ----
 .../interfaces/ConnectSheet/connect.schema.ts | 15 +--------------
 .../steps/mcp/codex/enable-remote/content.tsx | 19 -------------------
 .../src/McpUrlBuilder/constants.tsx           | 12 +-----------
 4 files changed, 2 insertions(+), 48 deletions(-)
 delete mode 100644 apps/studio/components/interfaces/ConnectSheet/content/steps/mcp/codex/enable-remote/content.tsx

diff --git a/apps/studio/components/interfaces/ConnectSheet/connect.schema.test.ts b/apps/studio/components/interfaces/ConnectSheet/connect.schema.test.ts
index ca1df29f66097..447cf52485526 100644
--- a/apps/studio/components/interfaces/ConnectSheet/connect.schema.test.ts
+++ b/apps/studio/components/interfaces/ConnectSheet/connect.schema.test.ts
@@ -328,7 +328,6 @@ describe('connect.schema:steps resolution', () => {
       const steps = resolveSteps(connectSchema, state)
 
       expect(steps.find((s) => s.id === 'codex-add-server')).toBeDefined()
-      expect(steps.find((s) => s.id === 'codex-enable-remote')).toBeDefined()
       expect(steps.find((s) => s.id === 'codex-authenticate')).toBeDefined()
       expect(steps.find((s) => s.id === 'codex-verify')).toBeDefined()
     })
@@ -445,9 +444,6 @@ describe('connect.schema:step content paths', () => {
     expect(steps.find((s) => s.id === 'codex-add-server')?.content).toBe(
       'steps/mcp/codex/add-server'
     )
-    expect(steps.find((s) => s.id === 'codex-enable-remote')?.content).toBe(
-      'steps/mcp/codex/enable-remote'
-    )
     expect(steps.find((s) => s.id === 'codex-authenticate')?.content).toBe(
       'steps/mcp/codex/authenticate'
     )
diff --git a/apps/studio/components/interfaces/ConnectSheet/connect.schema.ts b/apps/studio/components/interfaces/ConnectSheet/connect.schema.ts
index 04200614e2969..6ee7fe32cf1ae 100644
--- a/apps/studio/components/interfaces/ConnectSheet/connect.schema.ts
+++ b/apps/studio/components/interfaces/ConnectSheet/connect.schema.ts
@@ -123,13 +123,6 @@ const codexAddServerStep: StepDefinition = {
   content: 'steps/mcp/codex/add-server',
 }
 
-const codexEnableRemoteStep: StepDefinition = {
-  id: 'codex-enable-remote',
-  title: 'Enable remote MCP client support',
-  description: 'Add this to your ~/.codex/config.toml file.',
-  content: 'steps/mcp/codex/enable-remote',
-}
-
 const codexAuthenticateStep: StepDefinition = {
   id: 'codex-authenticate',
   title: 'Authenticate',
@@ -387,13 +380,7 @@ export const connectSchema: ConnectSchema = {
       orm: [ormInstallStep, ormConfigureStep, skillsInstallStep],
       mcp: {
         mcpClient: {
-          codex: [
-            codexAddServerStep,
-            codexEnableRemoteStep,
-            codexAuthenticateStep,
-            codexVerifyStep,
-            skillsInstallStep,
-          ],
+          codex: [codexAddServerStep, codexAuthenticateStep, codexVerifyStep, skillsInstallStep],
           'claude-code': [claudeAddServerStep, claudeAuthenticateStep, skillsInstallStep],
           DEFAULT: [mcpConfigureStep, skillsInstallStep],
         },
diff --git a/apps/studio/components/interfaces/ConnectSheet/content/steps/mcp/codex/enable-remote/content.tsx b/apps/studio/components/interfaces/ConnectSheet/content/steps/mcp/codex/enable-remote/content.tsx
deleted file mode 100644
index 5f57b5de8a441..0000000000000
--- a/apps/studio/components/interfaces/ConnectSheet/content/steps/mcp/codex/enable-remote/content.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { CodeBlock } from 'ui-patterns/CodeBlock'
-
-import type { StepContentProps } from '@/components/interfaces/ConnectSheet/Connect.types'
-
-function CodexEnableRemoteContent(_props: StepContentProps) {
-  const configContent = `[mcp]
-remote_mcp_client_enabled = true`
-
-  return (
-    <CodeBlock
-      className="[&_code]:text-foreground"
-      value={configContent}
-      hideLineNumbers
-      language="toml"
-    />
-  )
-}
-
-export default CodexEnableRemoteContent
diff --git a/packages/ui-patterns/src/McpUrlBuilder/constants.tsx b/packages/ui-patterns/src/McpUrlBuilder/constants.tsx
index 6b73ce26f257e..1864aa3d221ea 100644
--- a/packages/ui-patterns/src/McpUrlBuilder/constants.tsx
+++ b/packages/ui-patterns/src/McpUrlBuilder/constants.tsx
@@ -195,17 +195,7 @@ export const MCP_CLIENTS: McpClient[] = [
     },
     alternateInstructions: (_config, onCopy) => (
       <div className="space-y-2">
-        <p className="text-xs text-foreground-light">
-          After adding the server, enable remote MCP client support by adding this to your{' '}
-          <code>~/.codex/config.toml</code>:
-        </p>
-        <CodeBlock
-          value={`[features]\nrmcp_client = true`}
-          focusable={false}
-          className="block"
-          onCopyCallback={() => onCopy('config')}
-        />
-        <p className="text-xs text-foreground-light">Then authenticate:</p>
+        <p className="text-xs text-foreground-light">Authenticate with the MCP server:</p>
         <CodeBlock
           value="codex mcp login supabase"
           language="bash"

From 8719bb6dad118f70c406975dd26be454a4639334 Mon Sep 17 00:00:00 2001
From: "Andrey A." <56412611+aantti@users.noreply.github.com>
Date: Thu, 21 May 2026 23:19:29 +0200
Subject: [PATCH 6/6] fix(self-hosted): suppress requests to non-existent apis
 (#46177)

---
 .../AdvisorButton.self-hosted.test.tsx        | 70 +++++++++++++++++++
 .../layouts/AppLayout/AdvisorButton.tsx       |  9 +--
 .../AppLayout/FlyDeprecationBanner.tsx        |  4 +-
 3 files changed, 77 insertions(+), 6 deletions(-)
 create mode 100644 apps/studio/components/layouts/AppLayout/AdvisorButton.self-hosted.test.tsx

diff --git a/apps/studio/components/layouts/AppLayout/AdvisorButton.self-hosted.test.tsx b/apps/studio/components/layouts/AppLayout/AdvisorButton.self-hosted.test.tsx
new file mode 100644
index 0000000000000..9b575085b849d
--- /dev/null
+++ b/apps/studio/components/layouts/AppLayout/AdvisorButton.self-hosted.test.tsx
@@ -0,0 +1,70 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { AdvisorButton } from '@/components/layouts/AppLayout/AdvisorButton'
+import { render } from '@/tests/helpers'
+
+const {
+  mockUseProjectLintsQuery,
+  mockUseNotificationsV2Query,
+  mockUseAdvisorSignals,
+  mockToggleSidebar,
+} = vi.hoisted(() => ({
+  mockUseProjectLintsQuery: vi.fn(),
+  mockUseNotificationsV2Query: vi.fn(),
+  mockUseAdvisorSignals: vi.fn(),
+  mockToggleSidebar: vi.fn(),
+}))
+
+vi.mock('@/data/lint/lint-query', () => ({
+  useProjectLintsQuery: mockUseProjectLintsQuery,
+}))
+
+vi.mock('@/data/notifications/notifications-v2-query', () => ({
+  useNotificationsV2Query: mockUseNotificationsV2Query,
+}))
+
+vi.mock('@/components/ui/AdvisorPanel/useAdvisorSignals', () => ({
+  useAdvisorSignals: mockUseAdvisorSignals,
+}))
+
+vi.mock('@/lib/constants', async (importOriginal) => ({
+  ...(await importOriginal<typeof import('@/lib/constants')>()),
+  IS_PLATFORM: false,
+}))
+
+vi.mock('@/state/sidebar-manager-state', () => ({
+  useSidebarManagerSnapshot: () => ({
+    toggleSidebar: mockToggleSidebar,
+    activeSidebar: undefined,
+  }),
+}))
+
+describe('AdvisorButton on self-hosted', () => {
+  beforeEach(() => {
+    mockUseProjectLintsQuery.mockReturnValue({ data: [], isPending: false, isError: false })
+    mockUseNotificationsV2Query.mockReturnValue({
+      data: { pages: [[]] },
+      isPending: false,
+      isError: false,
+    })
+    mockUseAdvisorSignals.mockReturnValue({
+      data: [],
+      isPending: false,
+      isError: false,
+      dismissSignal: vi.fn(),
+    })
+  })
+
+  afterEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('disables the notifications query so no request is made to the platform endpoint', () => {
+    render(<AdvisorButton projectRef="project-ref" />)
+
+    expect(mockUseNotificationsV2Query).toHaveBeenCalledWith(
+      { filters: {}, limit: 20 },
+      { enabled: false }
+    )
+  })
+})
diff --git a/apps/studio/components/layouts/AppLayout/AdvisorButton.tsx b/apps/studio/components/layouts/AppLayout/AdvisorButton.tsx
index d9a1cb532f4c7..65cf75c02c01f 100644
--- a/apps/studio/components/layouts/AppLayout/AdvisorButton.tsx
+++ b/apps/studio/components/layouts/AppLayout/AdvisorButton.tsx
@@ -7,6 +7,7 @@ import { useAdvisorSignals } from '@/components/ui/AdvisorPanel/useAdvisorSignal
 import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
 import { useProjectLintsQuery } from '@/data/lint/lint-query'
 import { useNotificationsV2Query } from '@/data/notifications/notifications-v2-query'
+import { IS_PLATFORM } from '@/lib/constants'
 import { useTrack } from '@/lib/telemetry/track'
 import { useSidebarManagerSnapshot } from '@/state/sidebar-manager-state'
 
@@ -17,10 +18,10 @@ export const AdvisorButton = ({ projectRef }: { projectRef?: string }) => {
   const { data: lints } = useProjectLintsQuery({ projectRef })
   const { data: signalItems } = useAdvisorSignals({ projectRef })
 
-  const { data: notificationsData } = useNotificationsV2Query({
-    filters: {},
-    limit: 20,
-  })
+  const { data: notificationsData } = useNotificationsV2Query(
+    { filters: {}, limit: 20 },
+    { enabled: IS_PLATFORM }
+  )
   const notifications = useMemo(() => {
     return notificationsData?.pages.flatMap((page) => page) ?? []
   }, [notificationsData?.pages])
diff --git a/apps/studio/components/layouts/AppLayout/FlyDeprecationBanner.tsx b/apps/studio/components/layouts/AppLayout/FlyDeprecationBanner.tsx
index b4517d5447c8e..3ee91192d7368 100644
--- a/apps/studio/components/layouts/AppLayout/FlyDeprecationBanner.tsx
+++ b/apps/studio/components/layouts/AppLayout/FlyDeprecationBanner.tsx
@@ -1,4 +1,4 @@
-import { LOCAL_STORAGE_KEYS } from 'common'
+import { IS_PLATFORM, LOCAL_STORAGE_KEYS } from 'common'
 import { useRouter } from 'next/router'
 import { useEffect, useRef, type ReactNode } from 'react'
 import {
@@ -44,7 +44,7 @@ export const FlyDeprecationBanner = () => {
   const isExpired = Date.now() >= BANNER_EXPIRES_AT.getTime()
   const onSignIn = router.pathname.startsWith('/sign-in')
 
-  const shouldEvaluate = !isExpired && !onSignIn && isSuccess && !acknowledged
+  const shouldEvaluate = IS_PLATFORM && !isExpired && !onSignIn && isSuccess && !acknowledged
 
   const { isReady, primaries, branches } = useFlyDeprecationProjects({ enabled: shouldEvaluate })