From c97bc6282d36101920910116a2e9ffad07a031c4 Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Wed, 15 Jul 2026 13:35:32 +0800
Subject: [PATCH 1/3] Adjust AIAssistantHeader (#47912)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Context

As per PR title, just adjusting the Assistant's header a little to
improve the UX

### Before
<img width="442" height="71" alt="image"
src="https://github.com/user-attachments/assets/c714e264-7724-451a-aeaf-7ced456d0639"
/>

### After
<img width="438" height="77" alt="image"
src="https://github.com/user-attachments/assets/11467bf2-7306-4ec9-80e0-2aadd959eff1"
/>

## Changes involved
- Shift permission settings into "More" dropdown
- Chat selection is now "history"
- Added keyboard shortcuts for history and copy chat ID
<img width="185" height="95" alt="image"
src="https://github.com/user-attachments/assets/fc1c9bdc-9180-48ba-940f-2f39fef53a1d"
/>
<img width="287" height="159" alt="image"
src="https://github.com/user-attachments/assets/8f597306-9ea0-4282-884b-722bab16e4d0"
/>
- Chat name is now clickable to directly edit it
  - Saves on Enter or on blur
  - Resets on Esc
<img width="433" height="70" alt="image"
src="https://github.com/user-attachments/assets/f0c6fb4a-c368-4722-97a2-22ae94cc5511"
/>
<img width="439" height="64" alt="image"
src="https://github.com/user-attachments/assets/1eb21aaf-3979-433a-acc2-378b47b79e94"
/>


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

* **New Features**
* Added keyboard shortcuts to toggle the AI Assistant chat history and
copy the active chat ID.
* Added shortcut hint pills to AI Assistant tooltips and the “More
options” menu.
* Enabled inline editing of the active chat name with save/cancel and
blur support.
* **Improvements**
* Refreshed AI Assistant header actions and icons (including “New chat”
and menu controls) for clearer navigation.
  * Updated onboarding header styling with an assistant icon/animation.
  * Standardized shortcut rendering in tooltip pill formatting.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../AIAssistantChatSelector.tsx               |  35 +++--
 .../ui/AIAssistantPanel/AIAssistantHeader.tsx | 139 ++++++++++++------
 .../ui/AIAssistantPanel/AIOnboarding.tsx      |   5 +-
 apps/studio/components/ui/ShortcutTooltip.tsx |  23 ++-
 apps/studio/state/shortcuts/registry.ts       |  14 ++
 5 files changed, 150 insertions(+), 66 deletions(-)

diff --git a/apps/studio/components/ui/AIAssistantPanel/AIAssistantChatSelector.tsx b/apps/studio/components/ui/AIAssistantPanel/AIAssistantChatSelector.tsx
index 9e648c51b69e3..e5631c81b38d0 100644
--- a/apps/studio/components/ui/AIAssistantPanel/AIAssistantChatSelector.tsx
+++ b/apps/studio/components/ui/AIAssistantPanel/AIAssistantChatSelector.tsx
@@ -1,4 +1,4 @@
-import { Check, ChevronDown, Edit, Plus, Trash, X } from 'lucide-react'
+import { Check, Edit, History, Plus, Trash, X } from 'lucide-react'
 import { useState } from 'react'
 import {
   Button,
@@ -17,7 +17,10 @@ import {
   ScrollArea,
 } from 'ui'
 
+import { ShortcutTooltip } from '../ShortcutTooltip'
 import { useAiAssistantStateSnapshot } from '@/state/ai-assistant-state'
+import { SHORTCUT_IDS } from '@/state/shortcuts/registry'
+import { useShortcut } from '@/state/shortcuts/useShortcut'
 
 interface AIAssistantChatSelectorProps {
   disabled?: boolean
@@ -25,7 +28,6 @@ interface AIAssistantChatSelectorProps {
 
 export const AIAssistantChatSelector = ({ disabled = false }: AIAssistantChatSelectorProps) => {
   const snap = useAiAssistantStateSnapshot()
-  const currentChat = snap.activeChat?.name
 
   const [chatSelectorOpen, setChatSelectorOpen] = useState(false)
   const [editingChatId, setEditingChatId] = useState<string | null>(null)
@@ -33,6 +35,8 @@ export const AIAssistantChatSelector = ({ disabled = false }: AIAssistantChatSel
 
   const chats = Object.entries(snap.chats)
 
+  useShortcut(SHORTCUT_IDS.AI_ASSISTANT_TOGGLE_HISTORY, () => setChatSelectorOpen((prev) => !prev))
+
   const handleSelectChat = (id: string) => {
     snap.selectChat(id)
     setChatSelectorOpen(false)
@@ -78,17 +82,22 @@ export const AIAssistantChatSelector = ({ disabled = false }: AIAssistantChatSel
 
   return (
     <Popover open={chatSelectorOpen} onOpenChange={setChatSelectorOpen}>
-      <PopoverTrigger asChild>
-        <Button
-          variant="text"
-          size="tiny"
-          iconRight={<ChevronDown size={14} />}
-          className="max-w-64 truncate"
-        >
-          {currentChat}
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className="w-[250px] p-0" align="center">
+      <ShortcutTooltip
+        side="bottom"
+        label="History"
+        shortcutId={SHORTCUT_IDS.AI_ASSISTANT_TOGGLE_HISTORY}
+      >
+        <PopoverTrigger asChild>
+          <Button
+            aria-label="History"
+            variant="text"
+            size="tiny"
+            className="h-7 w-7 p-0"
+            icon={<History />}
+          />
+        </PopoverTrigger>
+      </ShortcutTooltip>
+      <PopoverContent className="w-[250px] p-0" align="end">
         <Command>
           <CommandInput className="text-xs" placeholder="Search chats..." />
           <CommandList>
diff --git a/apps/studio/components/ui/AIAssistantPanel/AIAssistantHeader.tsx b/apps/studio/components/ui/AIAssistantPanel/AIAssistantHeader.tsx
index 4f1af019a10d0..131c071d8ae06 100644
--- a/apps/studio/components/ui/AIAssistantPanel/AIAssistantHeader.tsx
+++ b/apps/studio/components/ui/AIAssistantPanel/AIAssistantHeader.tsx
@@ -1,22 +1,24 @@
-import { Clipboard, Ellipsis, Plus, Settings, X } from 'lucide-react'
-import { useState } from 'react'
+import { Clipboard, Edit, MessageCirclePlus, MoreVertical, Settings, X } from 'lucide-react'
+import { KeyboardEvent, useState } from 'react'
+import { toast } from 'sonner'
 import {
-  AiIconAnimation,
   Button,
   copyToClipboard,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
+  DropdownMenuSeparator,
   DropdownMenuTrigger,
+  Input,
 } from 'ui'
 import { Admonition } from 'ui-patterns/admonition'
 
 import { ButtonTooltip } from '../ButtonTooltip'
-import { ShortcutTooltip } from '../ShortcutTooltip'
+import { ShortcutPills, ShortcutTooltip } from '../ShortcutTooltip'
 import { AIAssistantChatSelector } from './AIAssistantChatSelector'
 import { AIOptInModal } from './AIOptInModal'
 import { useAiAssistantStateSnapshot } from '@/state/ai-assistant-state'
-import { SHORTCUT_IDS } from '@/state/shortcuts/registry'
+import { SHORTCUT_DEFINITIONS, SHORTCUT_IDS } from '@/state/shortcuts/registry'
 import { useShortcut } from '@/state/shortcuts/useShortcut'
 
 interface AIAssistantHeaderProps {
@@ -39,36 +41,80 @@ export const AIAssistantHeader = ({
   aiOptInLevel,
 }: AIAssistantHeaderProps) => {
   const snap = useAiAssistantStateSnapshot()
+  const [value, setValue] = useState(snap.activeChat?.name)
+  const [isEditingName, setIsEditingName] = useState(false)
   const [isOptInModalOpen, setIsOptInModalOpen] = useState(false)
 
+  const handleCopyChatId = () => {
+    copyToClipboard(snap.activeChatId ?? '', () => {
+      toast.success(`Copied chat ID for ${snap.activeChat?.name}`)
+    })
+  }
+
+  const handleSaveName = () => {
+    if (snap.activeChatId && value?.trim()) {
+      snap.renameChat(snap.activeChatId, value.trim())
+    }
+    setIsEditingName(false)
+  }
+
+  const handleKeyDownInput = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Escape') {
+      e.preventDefault()
+      e.stopPropagation()
+      setIsEditingName(false)
+      setValue(snap.activeChat?.name)
+    } else if (e.key === 'Enter') {
+      e.preventDefault()
+      e.stopPropagation()
+      handleSaveName()
+    }
+  }
+
+  const handleBlurInput = () => {
+    if (isEditingName) handleSaveName()
+  }
+
+  useShortcut(SHORTCUT_IDS.AI_ASSISTANT_COPY_CHAT_ID, handleCopyChatId, {
+    enabled: !isChatLoading,
+  })
+
   useShortcut(SHORTCUT_IDS.AI_ASSISTANT_OPEN_PERMISSIONS, () => setIsOptInModalOpen(true), {
     enabled: !isChatLoading,
   })
 
   return (
     <div className="z-30 sticky top-0">
-      <div className="border-b border-b-muted flex items-center bg-card gap-x-4 pl-4 pr-3 min-h-(--header-height)">
-        <div className="text-sm flex-1 flex items-center">
-          <AiIconAnimation size={18} allowHoverEffect={false} />
-          <span className="text-border-stronger dark:text-border-strong ml-2">
-            <svg
-              viewBox="0 0 24 24"
-              width="16"
-              height="16"
-              stroke="currentColor"
-              strokeWidth="1"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              fill="none"
-              shapeRendering="geometricPrecision"
+      <div className="border-b border-b-muted flex items-center bg-card gap-x-4 px-3 min-h-(--header-height)">
+        <div className="text-sm flex-1 min-w-0 flex items-center gap-x-1">
+          {isEditingName ? (
+            <Input
+              autoFocus
+              value={value}
+              size="tiny"
+              onChange={(e) => setValue(e.target.value)}
+              onKeyDown={handleKeyDownInput}
+              onBlur={handleBlurInput}
+            />
+          ) : (
+            <Button
+              variant="text"
+              className="group min-w-0"
+              iconRight={<Edit className="transition opacity-0 group-hover:opacity-100" />}
+              onClick={() => {
+                setValue(snap.activeChat?.name)
+                setIsEditingName(true)
+              }}
             >
-              <path d="M16 3.549L7.12 20.600" />
-            </svg>
-          </span>
-          <AIAssistantChatSelector />
+              {snap.activeChat?.name}
+            </Button>
+          )}
         </div>
-        <div className="flex items-center gap-x-4">
+
+        <div className="flex items-center gap-x-4 shrink-0">
           <div className="flex items-center">
+            <AIAssistantChatSelector />
+
             <ShortcutTooltip
               side="bottom"
               label="New chat"
@@ -78,41 +124,47 @@ export const AIAssistantHeader = ({
                 variant="text"
                 aria-label="New chat"
                 size="tiny"
-                icon={<Plus strokeWidth={1.5} />}
+                icon={<MessageCirclePlus />}
                 onClick={onNewChat}
                 className="h-7 w-7 p-0"
               />
             </ShortcutTooltip>
 
-            <ShortcutTooltip side="bottom" shortcutId={SHORTCUT_IDS.AI_ASSISTANT_OPEN_PERMISSIONS}>
-              <Button
-                variant="text"
-                aria-label="Permission settings"
-                size="tiny"
-                icon={<Settings strokeWidth={1.5} />}
-                onClick={() => setIsOptInModalOpen(true)}
-                className="h-7 w-7 p-0"
-                disabled={isChatLoading}
-              />
-            </ShortcutTooltip>
-
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
                 <ButtonTooltip
                   variant="text"
                   size="tiny"
-                  icon={<Ellipsis strokeWidth={1.5} />}
+                  icon={<MoreVertical />}
                   className="h-7 w-7 p-0"
+                  disabled={isChatLoading}
                   tooltip={{ content: { side: 'bottom', text: 'More options' } }}
                 />
               </DropdownMenuTrigger>
-              <DropdownMenuContent align="end" className="w-40">
+              <DropdownMenuContent align="end" className="w-60">
+                <DropdownMenuItem className="justify-between" onClick={handleCopyChatId}>
+                  <div className="flex items-center gap-x-2">
+                    <Clipboard size={14} />
+                    <span>Copy chat ID</span>
+                  </div>
+                  <ShortcutPills
+                    sequence={SHORTCUT_DEFINITIONS[SHORTCUT_IDS.AI_ASSISTANT_COPY_CHAT_ID].sequence}
+                  />
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
                 <DropdownMenuItem
-                  className="gap-x-2"
-                  onClick={() => copyToClipboard(snap.activeChatId ?? '')}
+                  className="justify-between"
+                  onClick={() => setIsOptInModalOpen(true)}
                 >
-                  <Clipboard size={14} strokeWidth={1.5} />
-                  <span>Copy chat ID</span>
+                  <div className="flex items-center gap-x-2">
+                    <Settings size={14} />
+                    <span>Permission settings</span>
+                  </div>
+                  <ShortcutPills
+                    sequence={
+                      SHORTCUT_DEFINITIONS[SHORTCUT_IDS.AI_ASSISTANT_OPEN_PERMISSIONS].sequence
+                    }
+                  />
                 </DropdownMenuItem>
               </DropdownMenuContent>
             </DropdownMenu>
@@ -133,6 +185,7 @@ export const AIAssistantHeader = ({
           </div>
         </div>
       </div>
+
       {showMetadataWarning && (
         <Admonition
           type="default"
diff --git a/apps/studio/components/ui/AIAssistantPanel/AIOnboarding.tsx b/apps/studio/components/ui/AIAssistantPanel/AIOnboarding.tsx
index 5af5011c89891..ad8b3b94ccf5a 100644
--- a/apps/studio/components/ui/AIAssistantPanel/AIOnboarding.tsx
+++ b/apps/studio/components/ui/AIAssistantPanel/AIOnboarding.tsx
@@ -1,7 +1,7 @@
 import { useParams } from 'common'
 import { motion } from 'framer-motion'
 import { BarChart, FileText, Shield } from 'lucide-react'
-import { Button, Skeleton } from 'ui'
+import { AiIconAnimation, Button, Skeleton } from 'ui'
 
 import { codeSnippetPrompts, defaultPrompts } from './AIAssistant.prompts'
 import type { SqlSnippet } from './AIAssistant.types'
@@ -48,12 +48,13 @@ export const AIOnboarding = ({
       <div className="w-full flex-1 max-h-full min-h-full px-4 flex flex-col gap-0">
         <div className="mt-auto w-full space-y-6 py-8 ">
           <motion.h2
-            className="heading-section text-foreground mx-4"
+            className="heading-section text-foreground mx-4 flex items-center gap-x-3"
             initial={{ y: 5, opacity: 0 }}
             animate={{ y: 0, opacity: 1 }}
             transition={{ duration: 0.3 }}
           >
             How can I assist you?
+            <AiIconAnimation size={18} allowHoverEffect={false} />
           </motion.h2>
           {suggestions?.prompts?.length ? (
             <div>
diff --git a/apps/studio/components/ui/ShortcutTooltip.tsx b/apps/studio/components/ui/ShortcutTooltip.tsx
index 5b8c3b70889b4..23bc80df5b7aa 100644
--- a/apps/studio/components/ui/ShortcutTooltip.tsx
+++ b/apps/studio/components/ui/ShortcutTooltip.tsx
@@ -1,3 +1,4 @@
+import { HotkeySequence } from '@tanstack/react-hotkeys'
 import { TooltipContentProps } from '@ui/components/shadcn/ui/tooltip'
 import { Fragment, useState, type ReactNode } from 'react'
 import { KeyboardShortcut, Tooltip, TooltipContent, TooltipTrigger } from 'ui'
@@ -65,15 +66,21 @@ export const ShortcutTooltip = ({
         className="flex items-center gap-2"
       >
         <span>{label}</span>
-        <span className="flex items-center gap-1">
-          {def.sequence.map((step, i) => (
-            <Fragment key={i}>
-              {i > 0 && <span className="text-foreground-lighter text-[11px]">then</span>}
-              <KeyboardShortcut keys={hotkeyToKeys(step)} />
-            </Fragment>
-          ))}
-        </span>
+        <ShortcutPills sequence={def.sequence} />
       </TooltipContent>
     </Tooltip>
   )
 }
+
+export const ShortcutPills = ({ sequence }: { sequence: HotkeySequence }) => {
+  return (
+    <span className="flex items-center gap-1">
+      {sequence.map((step, i) => (
+        <Fragment key={i}>
+          {i > 0 && <span className="text-foreground-lighter text-[11px]">then</span>}
+          <KeyboardShortcut keys={hotkeyToKeys(step)} />
+        </Fragment>
+      ))}
+    </span>
+  )
+}
diff --git a/apps/studio/state/shortcuts/registry.ts b/apps/studio/state/shortcuts/registry.ts
index 9945b09edf438..6f9ddc54950b4 100644
--- a/apps/studio/state/shortcuts/registry.ts
+++ b/apps/studio/state/shortcuts/registry.ts
@@ -71,6 +71,8 @@ export const SHORTCUT_IDS = {
   COMMAND_MENU_OPEN: 'command-menu.open',
   AI_ASSISTANT_TOGGLE: 'ai-assistant.toggle',
   AI_ASSISTANT_NEW_CHAT: 'ai-assistant.new-chat',
+  AI_ASSISTANT_COPY_CHAT_ID: 'ai-assistant.copy-chat-id',
+  AI_ASSISTANT_TOGGLE_HISTORY: 'ai-assistant.toggle-history',
   AI_ASSISTANT_OPEN_PERMISSIONS: 'ai-assistant.open-permissions',
   AI_ASSISTANT_CANCEL_EDIT: 'ai-assistant.cancel-edit',
   INLINE_EDITOR_TOGGLE: 'inline-editor.toggle',
@@ -261,6 +263,18 @@ export const SHORTCUT_DEFINITIONS: Record<ShortcutId, ShortcutDefinition> = {
     sequence: ['A', 'N'],
     showInSettings: false,
   },
+  [SHORTCUT_IDS.AI_ASSISTANT_COPY_CHAT_ID]: {
+    id: SHORTCUT_IDS.AI_ASSISTANT_COPY_CHAT_ID,
+    label: 'Copy chat ID',
+    sequence: ['A', 'C'],
+    showInSettings: false,
+  },
+  [SHORTCUT_IDS.AI_ASSISTANT_TOGGLE_HISTORY]: {
+    id: SHORTCUT_IDS.AI_ASSISTANT_TOGGLE_HISTORY,
+    label: 'Toggle chat history',
+    sequence: ['A', 'Y'],
+    showInSettings: false,
+  },
   [SHORTCUT_IDS.AI_ASSISTANT_OPEN_PERMISSIONS]: {
     id: SHORTCUT_IDS.AI_ASSISTANT_OPEN_PERMISSIONS,
     label: 'Permission settings',

From c9eb33abc7a53c4647a589213bf64ae0aab71618 Mon Sep 17 00:00:00 2001
From: Riccardo Busetti <riccardo.busetti@supabase.io>
Date: Wed, 15 Jul 2026 08:20:59 +0200
Subject: [PATCH 2/3] feat(pipelines): Add new cost estimation dialog (#47915)

---
 .../AnalyticsBucket/AnalyticsBucket.utils.ts  |   8 +-
 .../AnalyticsBucket/Fields.tsx                |   8 +-
 .../BigQuery/BigQuery.utils.ts                |   2 +-
 .../DestinationForm/BigQuery/Fields.tsx       |   2 +-
 .../DestinationForm/DestinationForm.schema.ts |  19 +-
 .../DestinationForm.utils.test.ts             |  38 +--
 .../DuckLake/DuckLake.utils.ts                |  14 +-
 .../DestinationForm/DuckLake/Fields.tsx       |   8 +-
 .../DestinationForm/PipelineCostDialog.tsx    | 248 ++++++++++++++++++
 .../DestinationForm/index.tsx                 | 116 ++++----
 .../ReadReplicaPricingDialog.tsx              |  79 +++---
 .../Database/Replication/DestinationRow.tsx   |  12 +-
 .../Database/Replication/Destinations.tsx     |  18 +-
 .../Organization/Usage/Usage.constants.tsx    |  14 +-
 .../Usage/UsageSection/DiskUsage.tsx          | 112 ++++----
 .../data/replication/cost-estimate-query.ts   |  57 ++++
 apps/studio/data/replication/keys.ts          |  14 +
 packages/api-types/types/platform.d.ts        | 150 +++++++++++
 18 files changed, 725 insertions(+), 194 deletions(-)
 create mode 100644 apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/PipelineCostDialog.tsx
 create mode 100644 apps/studio/data/replication/cost-estimate-query.ts

diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/AnalyticsBucket/AnalyticsBucket.utils.ts b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/AnalyticsBucket/AnalyticsBucket.utils.ts
index f516a8ba8ece8..3aeb5cd90606e 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/AnalyticsBucket/AnalyticsBucket.utils.ts
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/AnalyticsBucket/AnalyticsBucket.utils.ts
@@ -22,8 +22,8 @@ type AnalyticsBucketValidationOptions = {
 // Fields that are always required regardless of the namespace / access key selections.
 const ANALYTICS_BUCKET_REQUIRED_FIELDS: AnalyticsBucketValidationIssue[] = [
   { path: 'warehouseName', message: 'Bucket is required' },
-  { path: 's3Region', message: 'S3 Region is required' },
-  { path: 's3AccessKeyId', message: 'S3 Access Key ID is required' },
+  { path: 's3Region', message: 'S3 region is required' },
+  { path: 's3AccessKeyId', message: 'S3 access key ID is required' },
 ]
 
 export const getAnalyticsBucketValidationIssues = (
@@ -53,7 +53,7 @@ export const getAnalyticsBucketValidationIssues = (
     data.s3SecretAccessKey?.trim().length &&
     !data.s3AccessKeyId?.trim().length
   ) {
-    issues.push({ path: 's3AccessKeyId', message: 'S3 Access Key ID is required' })
+    issues.push({ path: 's3AccessKeyId', message: 'S3 access key ID is required' })
   }
 
   const currentS3AccessKeyId = data.s3AccessKeyId?.trim()
@@ -69,7 +69,7 @@ export const getAnalyticsBucketValidationIssues = (
     (!options.secretsOptional || hasChangedStoredS3AccessKey) &&
     !data.s3SecretAccessKey?.trim().length
   ) {
-    issues.push({ path: 's3SecretAccessKey', message: 'S3 Secret Access Key is required' })
+    issues.push({ path: 's3SecretAccessKey', message: 'S3 secret access key is required' })
   }
 
   return issues
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/AnalyticsBucket/Fields.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/AnalyticsBucket/Fields.tsx
index ad1022650094d..eb674d27ea529 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/AnalyticsBucket/Fields.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/AnalyticsBucket/Fields.tsx
@@ -255,7 +255,7 @@ export const AnalyticsBucketFields = ({
             name="newNamespaceName"
             render={({ field }) => (
               <FormItemLayout
-                label="New Namespace Name"
+                label="New namespace name"
                 layout="horizontal"
                 description="A unique name for the new namespace"
               >
@@ -273,7 +273,7 @@ export const AnalyticsBucketFields = ({
           render={({ field }) => (
             <FormItemLayout
               layout="horizontal"
-              label="Catalog Token"
+              label="Catalog token"
               description={
                 editMode ? (
                   'Stored catalog token is hidden and kept automatically.'
@@ -315,7 +315,7 @@ export const AnalyticsBucketFields = ({
           render={({ field }) => (
             <FormItemLayout
               layout="horizontal"
-              label="S3 Access Key ID"
+              label="S3 access key ID"
               description={
                 <div className="flex flex-col gap-y-2">
                   <p>
@@ -403,7 +403,7 @@ export const AnalyticsBucketFields = ({
             render={({ field }) => (
               <FormItemLayout
                 layout="horizontal"
-                label="S3 Secret Access Key"
+                label="S3 secret access key"
                 className="relative"
                 description={
                   editMode
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/BigQuery/BigQuery.utils.ts b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/BigQuery/BigQuery.utils.ts
index dc3a7a78672de..7b9e1c25a366d 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/BigQuery/BigQuery.utils.ts
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/BigQuery/BigQuery.utils.ts
@@ -10,7 +10,7 @@ export type BigQueryValidationIssue = {
 const BIGQUERY_REQUIRED_FIELDS: { path: BigQueryFieldPath; message: string }[] = [
   { path: 'projectId', message: 'Project ID is required' },
   { path: 'datasetId', message: 'Dataset ID is required' },
-  { path: 'serviceAccountKey', message: 'Service Account Key is required' },
+  { path: 'serviceAccountKey', message: 'Service account key is required' },
 ]
 
 export const getBigQueryValidationIssues = (
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/BigQuery/Fields.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/BigQuery/Fields.tsx
index ec22267509bdd..9e7db5d75cfd9 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/BigQuery/Fields.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/BigQuery/Fields.tsx
@@ -54,7 +54,7 @@ export const BigQueryFields = ({
           render={({ field }) => (
             <FormItemLayout
               layout="horizontal"
-              label="Service Account Key"
+              label="Service account key"
               description={
                 editMode
                   ? 'Stored credentials are hidden. Enter new credentials to replace them.'
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DestinationForm.schema.ts b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DestinationForm.schema.ts
index eb926f0cb2095..08d16837a9d3f 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DestinationForm.schema.ts
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DestinationForm.schema.ts
@@ -6,23 +6,27 @@ export const DestinationPanelFormSchema = z.object({
   // Common fields
   name: z.string().min(1, 'Name is required'),
   publicationName: z.string().min(1, 'Publication is required'),
-  maxFillMs: z.number().min(1, 'Max Fill milliseconds should be greater than 0').int().optional(),
+  maxFillMs: z.number().min(1, 'Max fill milliseconds must be greater than 0').int().optional(),
   maxTableSyncWorkers: z
     .number()
-    .min(1, 'Max table sync workers should be greater than 0')
+    .min(1, 'Max table sync workers must be greater than 0')
     .int()
     .optional(),
   maxCopyConnectionsPerTable: z
     .number()
     .int()
-    .min(1, 'Max copy connections per table should be greater than 0')
+    .min(1, 'Max copy connections per table must be greater than 0')
     .optional(),
   invalidatedSlotBehavior: z.enum(['error', 'recreate']).optional(),
   // BigQuery fields
   projectId: z.string().optional(),
   datasetId: z.string().optional(),
   serviceAccountKey: z.string().optional(),
-  connectionPoolSize: z.number().int().min(1).optional(),
+  connectionPoolSize: z
+    .number()
+    .int()
+    .min(1, 'Connection pool size must be greater than 0')
+    .optional(),
   maxStalenessMins: z.number().nonnegative().optional(),
   // Analytics Bucket fields, only warehouse name and namespace are visible + editable fields
   warehouseName: z.string().optional(),
@@ -43,7 +47,12 @@ export const DestinationPanelFormSchema = z.object({
   // DuckLake "Custom parameters" fields
   ducklakeCatalogUrl: z.string().optional(),
   ducklakeDataPath: z.string().optional(),
-  ducklakePoolSize: z.number().int().min(1).max(6).optional(),
+  ducklakePoolSize: z
+    .number()
+    .int()
+    .min(1, 'Pool size must be greater than 0')
+    .max(6, 'Pool size must be 6 or less')
+    .optional(),
   ducklakeS3AccessKeyId: z.string().optional(),
   ducklakeS3SecretAccessKey: z.string().optional(),
   ducklakeS3Region: z.string().optional(),
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DestinationForm.utils.test.ts b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DestinationForm.utils.test.ts
index a97b212062647..a1ca8a6837111 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DestinationForm.utils.test.ts
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DestinationForm.utils.test.ts
@@ -150,10 +150,10 @@ describe('DestinationForm.utils DuckLake', () => {
     expect(issues).toEqual([
       { path: 'ducklakeCatalogUrl', message: 'Catalog URL is required' },
       { path: 'ducklakeDataPath', message: 'Data path is required' },
-      { path: 'ducklakeS3AccessKeyId', message: 'S3 Access Key ID is required' },
-      { path: 'ducklakeS3SecretAccessKey', message: 'S3 Secret Access Key is required' },
-      { path: 'ducklakeS3Region', message: 'S3 Region is required' },
-      { path: 'ducklakeS3Endpoint', message: 'S3 Endpoint is required' },
+      { path: 'ducklakeS3AccessKeyId', message: 'S3 access key ID is required' },
+      { path: 'ducklakeS3SecretAccessKey', message: 'S3 secret access key is required' },
+      { path: 'ducklakeS3Region', message: 'S3 region is required' },
+      { path: 'ducklakeS3Endpoint', message: 'S3 endpoint is required' },
     ])
   })
 
@@ -189,7 +189,7 @@ describe('DestinationForm.utils DuckLake', () => {
     )
 
     expect(issues).toEqual([
-      { path: 'ducklakeS3SecretAccessKey', message: 'S3 Secret Access Key is required' },
+      { path: 'ducklakeS3SecretAccessKey', message: 'S3 secret access key is required' },
     ])
   })
 
@@ -207,10 +207,10 @@ describe('DestinationForm.utils DuckLake', () => {
     expect(issues).toEqual([
       { path: 'ducklakeCatalogUrl', message: 'Catalog URL is required' },
       { path: 'ducklakeDataPath', message: 'Data path is required' },
-      { path: 'ducklakeS3AccessKeyId', message: 'S3 Access Key ID is required' },
-      { path: 'ducklakeS3SecretAccessKey', message: 'S3 Secret Access Key is required' },
-      { path: 'ducklakeS3Region', message: 'S3 Region is required' },
-      { path: 'ducklakeS3Endpoint', message: 'S3 Endpoint is required' },
+      { path: 'ducklakeS3AccessKeyId', message: 'S3 access key ID is required' },
+      { path: 'ducklakeS3SecretAccessKey', message: 'S3 secret access key is required' },
+      { path: 'ducklakeS3Region', message: 'S3 region is required' },
+      { path: 'ducklakeS3Endpoint', message: 'S3 endpoint is required' },
     ])
   })
 
@@ -236,7 +236,7 @@ describe('DestinationForm.utils DuckLake', () => {
       },
       {
         path: 'ducklakeS3Endpoint',
-        message: 'S3 endpoint should not contain the protocol scheme',
+        message: 'S3 endpoint must not contain the protocol scheme',
       },
       {
         path: 'ducklakeMetadataSchema',
@@ -451,7 +451,7 @@ describe('DestinationForm.utils BigQuery', () => {
     expect(issues).toEqual([
       { path: 'projectId', message: 'Project ID is required' },
       { path: 'datasetId', message: 'Dataset ID is required' },
-      { path: 'serviceAccountKey', message: 'Service Account Key is required' },
+      { path: 'serviceAccountKey', message: 'Service account key is required' },
     ])
   })
 
@@ -465,7 +465,7 @@ describe('DestinationForm.utils BigQuery', () => {
     expect(issues).toEqual([
       { path: 'projectId', message: 'Project ID is required' },
       { path: 'datasetId', message: 'Dataset ID is required' },
-      { path: 'serviceAccountKey', message: 'Service Account Key is required' },
+      { path: 'serviceAccountKey', message: 'Service account key is required' },
     ])
   })
 
@@ -506,10 +506,10 @@ describe('DestinationForm.utils Analytics Bucket', () => {
 
     expect(issues).toEqual([
       { path: 'warehouseName', message: 'Bucket is required' },
-      { path: 's3Region', message: 'S3 Region is required' },
-      { path: 's3AccessKeyId', message: 'S3 Access Key ID is required' },
+      { path: 's3Region', message: 'S3 region is required' },
+      { path: 's3AccessKeyId', message: 'S3 access key ID is required' },
       { path: 'namespace', message: 'Namespace is required' },
-      { path: 's3SecretAccessKey', message: 'S3 Secret Access Key is required' },
+      { path: 's3SecretAccessKey', message: 'S3 secret access key is required' },
     ])
   })
 
@@ -525,10 +525,10 @@ describe('DestinationForm.utils Analytics Bucket', () => {
 
     expect(issues).toEqual([
       { path: 'warehouseName', message: 'Bucket is required' },
-      { path: 's3Region', message: 'S3 Region is required' },
-      { path: 's3AccessKeyId', message: 'S3 Access Key ID is required' },
+      { path: 's3Region', message: 'S3 region is required' },
+      { path: 's3AccessKeyId', message: 'S3 access key ID is required' },
       { path: 'namespace', message: 'Namespace is required' },
-      { path: 's3SecretAccessKey', message: 'S3 Secret Access Key is required' },
+      { path: 's3SecretAccessKey', message: 'S3 secret access key is required' },
     ])
   })
 
@@ -604,7 +604,7 @@ describe('DestinationForm.utils Analytics Bucket', () => {
     )
 
     expect(issues).toEqual([
-      { path: 's3SecretAccessKey', message: 'S3 Secret Access Key is required' },
+      { path: 's3SecretAccessKey', message: 'S3 secret access key is required' },
     ])
   })
 
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DuckLake/DuckLake.utils.ts b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DuckLake/DuckLake.utils.ts
index 5ce2046942f23..8f5080273e536 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DuckLake/DuckLake.utils.ts
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DuckLake/DuckLake.utils.ts
@@ -63,10 +63,10 @@ const DUCKLAKE_SUPABASE_REQUIRED_FIELDS: DucklakeValidationIssue[] = [
 const DUCKLAKE_CUSTOM_REQUIRED_FIELDS: DucklakeValidationIssue[] = [
   { path: 'ducklakeCatalogUrl', message: 'Catalog URL is required' },
   { path: 'ducklakeDataPath', message: 'Data path is required' },
-  { path: 'ducklakeS3AccessKeyId', message: 'S3 Access Key ID is required' },
-  { path: 'ducklakeS3SecretAccessKey', message: 'S3 Secret Access Key is required' },
-  { path: 'ducklakeS3Region', message: 'S3 Region is required' },
-  { path: 'ducklakeS3Endpoint', message: 'S3 Endpoint is required' },
+  { path: 'ducklakeS3AccessKeyId', message: 'S3 access key ID is required' },
+  { path: 'ducklakeS3SecretAccessKey', message: 'S3 secret access key is required' },
+  { path: 'ducklakeS3Region', message: 'S3 region is required' },
+  { path: 'ducklakeS3Endpoint', message: 'S3 endpoint is required' },
 ]
 
 const DUCKLAKE_CUSTOM_SECRET_FIELDS = new Set<DucklakeFieldPath>([
@@ -113,7 +113,7 @@ export const getDucklakeValidationIssues = (
   ) {
     issues.push({
       path: 'ducklakeS3AccessKeyId',
-      message: 'S3 Access Key ID is required',
+      message: 'S3 access key ID is required',
     })
   }
 
@@ -124,7 +124,7 @@ export const getDucklakeValidationIssues = (
   ) {
     issues.push({
       path: 'ducklakeS3SecretAccessKey',
-      message: 'S3 Secret Access Key is required',
+      message: 'S3 secret access key is required',
     })
   }
 
@@ -157,7 +157,7 @@ export const getDucklakeValidationIssues = (
   ) {
     issues.push({
       path: 'ducklakeS3Endpoint',
-      message: 'S3 endpoint should not contain the protocol scheme',
+      message: 'S3 endpoint must not contain the protocol scheme',
     })
   }
 
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DuckLake/Fields.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DuckLake/Fields.tsx
index b49b57ec47b9e..263d70410ad93 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DuckLake/Fields.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DuckLake/Fields.tsx
@@ -476,7 +476,7 @@ const DuckLakeCustomFields = ({
           render={({ field }) => (
             <FormItemLayout
               layout="horizontal"
-              label="S3 Access Key ID"
+              label="S3 access key ID"
               description={
                 editMode
                   ? 'Stored access key ID is hidden. Enter a new key ID to replace it.'
@@ -500,7 +500,7 @@ const DuckLakeCustomFields = ({
           render={({ field }) => (
             <FormItemLayout
               layout="horizontal"
-              label="S3 Secret Access Key"
+              label="S3 secret access key"
               description={
                 editMode
                   ? 'Stored secret access key is hidden. Enter a new secret to replace it.'
@@ -532,7 +532,7 @@ const DuckLakeCustomFields = ({
           render={({ field }) => (
             <FormItemLayout
               layout="horizontal"
-              label="S3 Region"
+              label="S3 region"
               description="Required region for the object storage provider"
             >
               <FormControl>
@@ -548,7 +548,7 @@ const DuckLakeCustomFields = ({
           render={({ field }) => (
             <FormItemLayout
               layout="horizontal"
-              label="S3 Endpoint"
+              label="S3 endpoint"
               description="Required endpoint without the protocol scheme, for example `127.0.0.1:5000/s3`"
             >
               <FormControl>
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/PipelineCostDialog.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/PipelineCostDialog.tsx
new file mode 100644
index 0000000000000..124b6f442d257
--- /dev/null
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/PipelineCostDialog.tsx
@@ -0,0 +1,248 @@
+import { useEffect } from 'react'
+import {
+  Button,
+  Card,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogSection,
+  DialogSectionSeparator,
+  DialogTitle,
+  Table,
+  TableBody,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from 'ui'
+import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
+
+import { useReplicationCostEstimateQuery } from '@/data/replication/cost-estimate-query'
+import { useLatest } from '@/hooks/misc/useLatest'
+import { formatBytes, formatCurrency } from '@/lib/helpers'
+
+const MAX_VISIBLE_TABLES = 10
+
+interface PipelineCostDialogProps {
+  open: boolean
+  isConfirming: boolean
+  projectRef?: string
+  sourceId?: number
+  publicationName?: string
+  onOpenChange: (open: boolean) => void
+  onConfirm: () => void
+}
+
+/**
+ * Shows an estimate of what the pipeline will cost (one-time initial copy, hourly pipeline
+ * fee, and the usage-based streaming rate).
+ *
+ * This should be a non-blocking enhancement - so if there's an error while fetching the
+ * pricing estimate, we skip this gate rather than block the user from creating pipeline
+ */
+export const PipelineCostDialog = ({
+  open,
+  isConfirming,
+  projectRef,
+  sourceId,
+  publicationName,
+  onOpenChange,
+  onConfirm,
+}: PipelineCostDialogProps) => {
+  const onConfirmRef = useLatest(onConfirm)
+
+  const {
+    data: estimate,
+    isLoading,
+    isError,
+    isSuccess,
+  } = useReplicationCostEstimateQuery({ projectRef, sourceId, publicationName }, { enabled: open })
+
+  const tables = estimate?.table_copy.tables ?? []
+  const tableCount = tables.length
+  const visibleTables = tables.slice(0, MAX_VISIBLE_TABLES)
+  const hiddenTableCount = tableCount - visibleTables.length
+  const hasRowFilteredTables = tables.some((table) => table.is_row_filtered)
+
+  const firstMonthTotal =
+    (estimate?.table_copy.total_cost ?? 0) + (estimate?.pipeline.monthly_cost ?? 0)
+
+  useEffect(() => {
+    if (open && isError) onConfirmRef.current()
+  }, [open, isError, onConfirmRef])
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent size="large">
+        <DialogHeader>
+          <DialogTitle>Confirm to create and start pipeline</DialogTitle>
+          <DialogDescription>
+            Review the estimated costs before you create and start the pipeline.
+          </DialogDescription>
+        </DialogHeader>
+
+        <DialogSectionSeparator />
+
+        {/* Review these costs before you create and start the pipeline. */}
+        {isLoading || isError ? (
+          <DialogSection className="py-6">
+            <GenericSkeletonLoader className="w-full" />
+          </DialogSection>
+        ) : (
+          isSuccess &&
+          estimate && (
+            <>
+              <DialogSection className="flex flex-col gap-y-5">
+                <p className="text-sm text-foreground-light">
+                  This pipeline will replicate{' '}
+                  <span className="text-foreground">
+                    {tableCount} {tableCount === 1 ? 'table' : 'tables'}
+                  </span>
+                  {publicationName ? (
+                    <>
+                      {' '}
+                      from the{' '}
+                      <span className="text-foreground" translate="no">
+                        {publicationName}
+                      </span>{' '}
+                      publication
+                    </>
+                  ) : null}
+                  .
+                </p>
+
+                <div className="flex flex-col gap-y-2">
+                  <p className="text-sm font-medium text-foreground">Initial table copy</p>
+
+                  {tableCount > 0 ? (
+                    <Card>
+                      <Table>
+                        <TableHeader className="[&_th]:h-auto [&_th]:py-2">
+                          <TableRow>
+                            <TableHead>Table</TableHead>
+                            <TableHead className="text-right">Est. size</TableHead>
+                            <TableHead className="text-right" translate="no">
+                              Est. cost ({formatCurrency(estimate.table_copy.rate_per_gb)}/GB)
+                            </TableHead>
+                          </TableRow>
+                        </TableHeader>
+                        <TableBody className="[&_td]:py-2">
+                          {visibleTables.map((table) => (
+                            <TableRow key={`${table.schema}.${table.name}`}>
+                              <TableCell className="font-mono text-xs" translate="no">
+                                {table.schema}.{table.name}
+                              </TableCell>
+                              <TableCell className="text-right text-xs">
+                                {formatBytes(table.estimated_bytes)}
+                              </TableCell>
+                              <TableCell className="text-right font-mono text-xs" translate="no">
+                                {formatCurrency(table.estimated_cost)}
+                              </TableCell>
+                            </TableRow>
+                          ))}
+                          {hiddenTableCount > 0 && (
+                            <TableRow>
+                              <TableCell colSpan={3} className="text-xs text-foreground-lighter">
+                                +{hiddenTableCount} more{' '}
+                                {hiddenTableCount === 1 ? 'table' : 'tables'}
+                              </TableCell>
+                            </TableRow>
+                          )}
+                        </TableBody>
+                        <TableFooter>
+                          <TableRow>
+                            <TableCell className="py-2">Total</TableCell>
+                            <TableCell className="text-right py-2 text-xs">
+                              {formatBytes(estimate.table_copy.total_bytes)}
+                            </TableCell>
+                            <TableCell className="text-right py-2 font-mono" translate="no">
+                              {formatCurrency(estimate.table_copy.total_cost)}
+                            </TableCell>
+                          </TableRow>
+                        </TableFooter>
+                      </Table>
+                    </Card>
+                  ) : (
+                    <p className="text-sm text-foreground-light">
+                      This publication has no tables to copy.
+                    </p>
+                  )}
+                </div>
+              </DialogSection>
+
+              <DialogSectionSeparator />
+
+              <DialogSection className="flex flex-col gap-y-5">
+                <div className="flex flex-col gap-y-2">
+                  <p className="text-sm font-medium text-foreground">Ongoing</p>
+                  <div className="flex items-center justify-between gap-x-4 text-sm">
+                    <span className="text-foreground-light">Active pipeline</span>
+                    <span className="shrink-0 text-right font-mono text-foreground" translate="no">
+                      ${estimate.pipeline.hourly_cost}/hour{' '}
+                      <span className="text-foreground-lighter">
+                        (~{formatCurrency(estimate.pipeline.monthly_cost)}/month)
+                      </span>
+                    </span>
+                  </div>
+                  <div className="flex items-center justify-between gap-x-4 text-sm">
+                    <span className="text-foreground-light">Streaming changes</span>
+                    <span className="shrink-0 text-right font-mono text-foreground" translate="no">
+                      {formatCurrency(estimate.streaming.rate_per_gb)}/GB
+                    </span>
+                  </div>
+                  <p className="text-xs text-foreground-lighter">
+                    Streaming is billed on the volume of changes replicated after the initial copy,
+                    so the total depends on how often your data changes.
+                  </p>
+                </div>
+
+                <div className="flex flex-col gap-y-2">
+                  <div className="flex items-center justify-between gap-x-6 rounded-md border bg-surface-100 px-4 py-3">
+                    <div className="min-w-0">
+                      <p className="text-sm font-medium text-foreground">
+                        Estimated first month total
+                      </p>
+                      <p className="text-xs text-foreground-lighter">
+                        Initial copy + first pipeline fee, excluding usage-based streaming
+                      </p>
+                    </div>
+                    <span
+                      className="shrink-0 text-right font-mono text-lg font-semibold text-foreground"
+                      translate="no"
+                    >
+                      {formatCurrency(firstMonthTotal)}
+                      {hasRowFilteredTables ? '*' : null}
+                    </span>
+                  </div>
+
+                  {hasRowFilteredTables && (
+                    <p className="text-xs text-foreground-lighter">
+                      *Tables with row filters may cost less than shown.
+                    </p>
+                  )}
+                </div>
+              </DialogSection>
+            </>
+          )
+        )}
+
+        <DialogFooter>
+          <Button variant="default" disabled={isConfirming} onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button
+            variant="primary"
+            loading={isConfirming}
+            disabled={isConfirming || isLoading || isError}
+            onClick={onConfirm}
+          >
+            Create and start pipeline
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/index.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/index.tsx
index 8a89bbde4c32d..cd419005366a6 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/index.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/index.tsx
@@ -40,6 +40,7 @@ import { getDucklakeValidationIssues } from './DuckLake/DuckLake.utils'
 import { DuckLakeFields } from './DuckLake/Fields'
 import { NewPublicationPanel } from './NewPublicationPanel'
 import { NoDestinationsAvailable } from './NoDestinationsAvailable'
+import { PipelineCostDialog } from './PipelineCostDialog'
 import { PublicationSelection } from './PublicationSelection'
 import { SnowflakeFields } from './Snowflake/Fields'
 import { getSnowflakeValidationIssues } from './Snowflake/Snowflake.utils'
@@ -84,6 +85,7 @@ export const DestinationForm = ({
   const { can: canReadAPIKeys } = useAsyncCheckPermissions(PermissionAction.SECRETS_READ, '*')
 
   const [showValidationWarningsDialog, setShowValidationWarningsDialog] = useState(false)
+  const [showCostDialog, setShowCostDialog] = useState(false)
   const [publicationPanelVisible, setPublicationPanelVisible] = useState(false)
   const [newBucketSheetVisible, setNewBucketSheetVisible] = useState(false)
   const [pendingFormValues, setPendingFormValues] = useState<z.infer<typeof FormSchema> | null>(
@@ -231,65 +233,77 @@ export const DestinationForm = ({
     }
   }
 
+  // Stages the form values and opens the cost-estimation dialog, which is the final gate before
+  // a pipeline is created and started.
+  const openCostDialog = (data: z.infer<typeof FormSchema>) => {
+    setPendingFormValues(data)
+    setShowCostDialog(true)
+  }
+
   const onSubmit = async (data: z.infer<typeof FormSchema>) => {
-    if (!editMode) {
-      const previousValidationFailures = allValidationFailures
-      const previousWarnings = previousValidationFailures.filter(
-        (f) => f.failure_type === 'warning'
-      )
-      const previousFailuresAreOnlyWarnings =
-        hasRunValidation &&
-        previousValidationFailures.length > 0 &&
-        previousValidationFailures.every((f) => f.failure_type === 'warning')
-
-      const validationResult = await validateConfiguration({
+    // Editing an existing pipeline doesn't incur a new initial copy, so it skips the cost gate.
+    if (editMode) {
+      await submitPipeline({
         data,
-        onValidationFail: () => {
-          setTimeout(() => {
-            validationSectionRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' })
-          }, 100)
-        },
+        existingDestination,
+        onSuccess: () => form.reset(defaultValues),
+        onClose,
       })
-      if (!validationResult.canContinue) {
-        // Critical failures shown inline — stop so user can fix them
-        return
-      }
-
-      const hasWarnings = validationResult.warnings.length > 0
-      const warningsUnchanged =
-        previousFailuresAreOnlyWarnings &&
-        areValidationFailuresEqual(previousWarnings, validationResult.warnings)
-
-      // Open the confirmation dialog when validation is clean, or when warnings are unchanged on
-      // resubmit. New/changed warnings are shown inline so the user can review and submit again.
-      if (hasWarnings) {
-        if (warningsUnchanged) {
-          setPendingFormValues(data)
-          setShowValidationWarningsDialog(true)
-        }
-        return
-      }
+      return
     }
 
-    await submitPipeline({
+    const previousValidationFailures = allValidationFailures
+    const previousWarnings = previousValidationFailures.filter((f) => f.failure_type === 'warning')
+    const previousFailuresAreOnlyWarnings =
+      hasRunValidation &&
+      previousValidationFailures.length > 0 &&
+      previousValidationFailures.every((f) => f.failure_type === 'warning')
+
+    const validationResult = await validateConfiguration({
       data,
-      existingDestination,
-      onSuccess: () => form.reset(defaultValues),
-      onClose,
+      onValidationFail: () => {
+        setTimeout(() => {
+          validationSectionRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' })
+        }, 100)
+      },
     })
+    if (!validationResult.canContinue) {
+      // Critical failures shown inline — stop so user can fix them
+      return
+    }
+
+    const hasWarnings = validationResult.warnings.length > 0
+    const warningsUnchanged =
+      previousFailuresAreOnlyWarnings &&
+      areValidationFailuresEqual(previousWarnings, validationResult.warnings)
+
+    // Open the warnings confirmation when there are warnings (and they're unchanged on resubmit),
+    // otherwise go straight to the cost dialog. New/changed warnings are shown inline so the user
+    // can review and submit again.
+    if (hasWarnings) {
+      if (warningsUnchanged) {
+        setPendingFormValues(data)
+        setShowValidationWarningsDialog(true)
+      }
+      return
+    }
+
+    openCostDialog(data)
   }
 
-  const handleValidationWarningsDialogChange = (open: boolean) => {
-    setShowValidationWarningsDialog(open)
-    if (!open) setPendingFormValues(null)
+  // Confirming the warnings advances to the cost dialog rather than submitting directly, so the
+  // cost estimate is always the last thing shown before the pipeline starts.
+  const handleValidationWarningsConfirm = () => {
+    if (!pendingFormValues) return
+    setShowValidationWarningsDialog(false)
+    openCostDialog(pendingFormValues)
   }
 
-  const handleValidationWarningsConfirm = async () => {
+  const handleCostConfirm = async () => {
     if (!pendingFormValues) return
 
     const values = pendingFormValues
-    setPendingFormValues(null)
-    setShowValidationWarningsDialog(false)
+    setShowCostDialog(false)
 
     await submitPipeline({
       data: values,
@@ -452,11 +466,21 @@ export const DestinationForm = ({
 
       <ValidationWarningsDialog
         open={showValidationWarningsDialog}
-        onOpenChange={handleValidationWarningsDialogChange}
+        onOpenChange={setShowValidationWarningsDialog}
         isLoading={isSaving}
         warningCount={validationWarnings.length}
         onConfirm={handleValidationWarningsConfirm}
       />
+
+      <PipelineCostDialog
+        open={showCostDialog}
+        isConfirming={isSaving}
+        projectRef={projectRef}
+        sourceId={sourceId}
+        publicationName={pendingFormValues?.publicationName}
+        onOpenChange={setShowCostDialog}
+        onConfirm={handleCostConfirm}
+      />
     </>
   )
 }
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/ReadReplicaForm/ReadReplicaPricingDialog.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/ReadReplicaForm/ReadReplicaPricingDialog.tsx
index a6e643e5660ef..6cf774e2c9691 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/ReadReplicaForm/ReadReplicaPricingDialog.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/ReadReplicaForm/ReadReplicaPricingDialog.tsx
@@ -1,4 +1,5 @@
 import {
+  Card,
   cn,
   Dialog,
   DialogContent,
@@ -57,48 +58,52 @@ export const ReadReplicaPricingDialog = () => {
                 Read replicas will match the compute size of your primary database and will include
                 25% more disk size than the primary database to accommodate WAL files.
               </p>
+
               <p className="text-foreground-light text-sm">
                 The additional cost for the replica breaks down to:
               </p>
-              <Table>
-                <TableHeader className="font-mono uppercase text-xs [&_th]:h-auto [&_th]:pb-2 [&_th]:pt-4">
-                  <TableRow>
-                    <TableHead className="w-[140px] pl-0">Item</TableHead>
-                    <TableHead>Description</TableHead>
-                    <TableHead className="text-right pr-0">Cost (/month)</TableHead>
-                  </TableRow>
-                </TableHeader>
-                <TableBody className="[&_td]:py-0 [&_tr]:h-[50px] [&_tr]:border-dotted">
-                  <TableRow>
-                    <TableCell className="pl-0">Compute size</TableCell>
-                    <TableCell>{compute.label}</TableCell>
-                    <TableCell className="text-right font-mono pr-0" translate="no">
-                      {compute.cost}
-                    </TableCell>
-                  </TableRow>
-                  <TableRow>
-                    <TableCell className="pl-0">Disk size</TableCell>
-                    <TableCell>{disk.label}</TableCell>
-                    <TableCell className="text-right font-mono pr-0" translate="no">
-                      {disk.cost}
-                    </TableCell>
-                  </TableRow>
-                  <TableRow>
-                    <TableCell className="pl-0">IOPS</TableCell>
-                    <TableCell>{iops.label}</TableCell>
-                    <TableCell className="text-right font-mono pr-0" translate="no">
-                      {iops.cost}
-                    </TableCell>
-                  </TableRow>
-                  {disk.type === 'gp3' && (
+
+              <Card className="mt-2">
+                <Table>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead className="w-[140px]">Item</TableHead>
+                      <TableHead>Description</TableHead>
+                      <TableHead className="text-right">Cost (/month)</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody className="[&_td]:py-0 [&_tr]:h-[50px] [&_tr]:border-dotted">
+                    <TableRow>
+                      <TableCell>Compute size</TableCell>
+                      <TableCell>{compute.label}</TableCell>
+                      <TableCell className="text-right font-mono" translate="no">
+                        {compute.cost}
+                      </TableCell>
+                    </TableRow>
+                    <TableRow>
+                      <TableCell>Disk size</TableCell>
+                      <TableCell>{disk.label}</TableCell>
+                      <TableCell className="text-right font-mono" translate="no">
+                        {disk.cost}
+                      </TableCell>
+                    </TableRow>
                     <TableRow>
-                      <TableCell className="pl-0">Throughput</TableCell>
-                      <TableCell>{throughput.label}</TableCell>
-                      <TableCell className="text-right font-mono pr-0">{throughput.cost}</TableCell>
+                      <TableCell>IOPS</TableCell>
+                      <TableCell>{iops.label}</TableCell>
+                      <TableCell className="text-right font-mono" translate="no">
+                        {iops.cost}
+                      </TableCell>
                     </TableRow>
-                  )}
-                </TableBody>
-              </Table>
+                    {disk.type === 'gp3' && (
+                      <TableRow>
+                        <TableCell>Throughput</TableCell>
+                        <TableCell>{throughput.label}</TableCell>
+                        <TableCell className="text-right font-mono">{throughput.cost}</TableCell>
+                      </TableRow>
+                    )}
+                  </TableBody>
+                </Table>
+              </Card>
             </>
           ) : (
             <p className="text-foreground-light text-sm">
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationRow.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationRow.tsx
index a07c74aaf093c..47bf80dedb8d2 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationRow.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationRow.tsx
@@ -167,11 +167,15 @@ export const DestinationRow = ({ destinationId }: DestinationRowProps) => {
             {isPipelineLoading ? (
               <ShimmeringLoader />
             ) : (
-              <div>
-                <p>
-                  {type} (Pipeline ID: {pipeline?.id})
+              <div className="flex flex-col gap-y-0.5">
+                <p className="text-sm font-medium text-foreground truncate">
+                  {destinationName || type}
                 </p>
-                <p className="text-foreground-lighter">{destinationName}</p>
+                <div className="flex items-center gap-x-1.5 text-xs text-foreground-lighter">
+                  <span className="font-mono">#{pipeline?.id}</span>
+                  <span aria-hidden>&middot;</span>
+                  <span>{type}</span>
+                </div>
               </div>
             )}
           </TableCell>
diff --git a/apps/studio/components/interfaces/Database/Replication/Destinations.tsx b/apps/studio/components/interfaces/Database/Replication/Destinations.tsx
index b137bb7723409..398b08c23e005 100644
--- a/apps/studio/components/interfaces/Database/Replication/Destinations.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/Destinations.tsx
@@ -1,6 +1,7 @@
 import { useQueryClient } from '@tanstack/react-query'
 import { useParams } from 'common'
-import { MoreVertical, Plus, Search, X } from 'lucide-react'
+import { ChartArea, MoreVertical, Plus, Search, X } from 'lucide-react'
+import Link from 'next/link'
 import { parseAsStringEnum, useQueryState } from 'nuqs'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import {
@@ -46,6 +47,7 @@ import { useReplicationPipelinesQuery } from '@/data/replication/pipelines-query
 import { useReplicationSourcesQuery } from '@/data/replication/sources-query'
 import { checkLocalETLNotSetUp } from '@/data/replication/utils'
 import { useIsFeatureEnabled } from '@/hooks/misc/useIsFeatureEnabled'
+import { useSelectedOrganizationQuery } from '@/hooks/misc/useSelectedOrganization'
 import { DOCS_URL } from '@/lib/constants'
 import { SHORTCUT_IDS } from '@/state/shortcuts/registry'
 import { useShortcut } from '@/state/shortcuts/useShortcut'
@@ -53,6 +55,7 @@ import { useShortcut } from '@/state/shortcuts/useShortcut'
 export const Destinations = () => {
   const queryClient = useQueryClient()
   const { ref: projectRef } = useParams()
+  const { data: organization } = useSelectedOrganizationQuery()
 
   const etlEnableBigQuery = useIsETLBigQueryPrivateAlpha()
   const etlEnableIceberg = useIsETLIcebergPrivateAlpha()
@@ -232,6 +235,7 @@ export const Destinations = () => {
               actions={
                 filterString.length > 0 && (
                   <Button
+                    aria-label="Clear filter"
                     variant="text"
                     icon={<X />}
                     className="p-0 h-5 w-5"
@@ -258,11 +262,21 @@ export const Destinations = () => {
                 Add destination
               </Button>
             </Shortcut>
+            {organization?.slug && (
+              <Button asChild variant="default" icon={<ChartArea />}>
+                <Link href={`/org/${organization.slug}/usage#pipeline-backfill-data`}>Usage</Link>
+              </Button>
+            )}
             <DocsButton href={`${DOCS_URL}/guides/database/replication`} />
             {canDisablePipelines && (
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
-                  <Button variant="default" icon={<MoreVertical />} className="w-7" />
+                  <Button
+                    aria-label="More actions"
+                    variant="default"
+                    icon={<MoreVertical />}
+                    className="w-7"
+                  />
                 </DropdownMenuTrigger>
                 <DropdownMenuContent align="end" className="w-52">
                   <DropdownMenuItem onClick={() => setShowDisablePipelinesDialog(true)}>
diff --git a/apps/studio/components/interfaces/Organization/Usage/Usage.constants.tsx b/apps/studio/components/interfaces/Organization/Usage/Usage.constants.tsx
index 80dcd50351215..bdbc8cb3a4ac5 100644
--- a/apps/studio/components/interfaces/Organization/Usage/Usage.constants.tsx
+++ b/apps/studio/components/interfaces/Organization/Usage/Usage.constants.tsx
@@ -418,7 +418,12 @@ export const USAGE_CATEGORIES: (subscription?: OrgSubscription) => CategoryMeta[
           description:
             'Total amount of backfill/initial copy data processed across all projects.\nBilling is based on the total amount of backfill/initial copy data processed in Gigabyte.',
           chartDescription: 'The data refreshes every hour.',
-          links: [],
+          links: [
+            {
+              name: 'Pipelines',
+              url: `${DOCS_URL}/guides/database/replication/pipelines`,
+            },
+          ],
         },
         {
           anchor: 'pipeline-replicated-data',
@@ -429,7 +434,12 @@ export const USAGE_CATEGORIES: (subscription?: OrgSubscription) => CategoryMeta[
           description:
             'Total amount of replicated data processed across all projects.\nBilling is based on the total amount of replicated data processed in Gigabyte.',
           chartDescription: 'The data refreshes every hour.',
-          links: [],
+          links: [
+            {
+              name: 'Pipelines',
+              url: `${DOCS_URL}/guides/database/replication/pipelines`,
+            },
+          ],
         },
       ],
     },
diff --git a/apps/studio/components/interfaces/Organization/Usage/UsageSection/DiskUsage.tsx b/apps/studio/components/interfaces/Organization/Usage/UsageSection/DiskUsage.tsx
index 9875d5abfe228..6f30631ff4f44 100644
--- a/apps/studio/components/interfaces/Organization/Usage/UsageSection/DiskUsage.tsx
+++ b/apps/studio/components/interfaces/Organization/Usage/UsageSection/DiskUsage.tsx
@@ -1,7 +1,6 @@
-import MotionNumber from '@number-flow/react'
 import Link from 'next/link'
 import { useMemo } from 'react'
-import { Alert, AlertDescription, AlertTitle, Button, CriticalIcon } from 'ui'
+import { Alert, AlertDescription, AlertTitle, Button, cn, CriticalIcon } from 'ui'
 import { InfoTooltip } from 'ui-patterns/info-tooltip'
 import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
 
@@ -119,8 +118,8 @@ export const DiskUsage = ({
                 <p className="text-xs">8 GB GP3 disk per project</p>
               </div>
 
-              <div className="flex items-center justify-between">
-                <p className="text-xs text-foreground-light">Overages in period</p>
+              <div className="flex items-center justify-between py-1">
+                <p className="text-xs text-foreground-light">Overage in period</p>
                 <p className="text-xs">
                   {(gp3UsageInPeriod?.usage ?? 0).toLocaleString()} GP3 GB-Hrs
                   {io2UsageInPeriod?.usage
@@ -153,65 +152,62 @@ export const DiskUsage = ({
                   </Panel>
                 )}
 
-                {relevantProjects.map((project, idx) => {
-                  const primaryDiskUsage = project.databases
-                    .filter((it) => it.type === 'PRIMARY')
-                    .reduce((acc, curr) => acc + (curr.disk_volume_size_gb ?? 8), 0)
-                  const replicaDbs = project.databases.filter((it) => it.type !== 'PRIMARY')
-                  const replicaDiskUsage = replicaDbs.reduce(
-                    (acc, curr) => acc + (curr.disk_volume_size_gb ?? 8),
-                    0
-                  )
-
-                  const totalDiskUsage = primaryDiskUsage + replicaDiskUsage
-
-                  return (
-                    <div
-                      key={`usage-project-${project.ref}`}
-                      className={idx !== relevantProjects.length - 1 ? 'border-b pb-2' : ''}
-                    >
-                      <div className="flex justify-between">
-                        <span className="text-foreground-light flex items-center gap-2">
-                          {project.name}
-                        </span>
-                        <Button asChild variant="default" size={'tiny'}>
+                <div className="flex flex-col gap-y-2">
+                  {relevantProjects.map((project, idx) => {
+                    const primaryDiskUsage = project.databases
+                      .filter((it) => it.type === 'PRIMARY')
+                      .reduce((acc, curr) => acc + (curr.disk_volume_size_gb ?? 8), 0)
+                    const replicaDbs = project.databases.filter((it) => it.type !== 'PRIMARY')
+                    const replicaDiskUsage = replicaDbs.reduce(
+                      (acc, curr) => acc + (curr.disk_volume_size_gb ?? 8),
+                      0
+                    )
+
+                    const totalDiskUsage = primaryDiskUsage + replicaDiskUsage
+
+                    return (
+                      <div
+                        key={`usage-project-${project.ref}`}
+                        className={cn(
+                          'flex items-center justify-between',
+                          idx !== relevantProjects.length - 1 && 'border-b pb-2'
+                        )}
+                      >
+                        <div>
+                          <p className="text-foreground-light text-sm flex items-center gap-2">
+                            {project.name}
+                          </p>
+                          <div className="flex items-center gap-x-2">
+                            <span className="text-foreground-lighter text-sm flex items-center gap-2">
+                              {totalDiskUsage} GB Disk provisioned
+                            </span>
+                            <InfoTooltip side="right">
+                              <p>{primaryDiskUsage} GB for Primary Database</p>
+                              {replicaDbs.length > 0 && (
+                                <>
+                                  <p>
+                                    {replicaDiskUsage} GB for {replicaDbs.length} Read{' '}
+                                    {replicaDbs.length === 1 ? 'Replica' : 'Replicas'}
+                                  </p>
+                                  <p className="mt-1">
+                                    Read replicas have their own disk and use 25% more disk to
+                                    account for WAL files.
+                                  </p>
+                                </>
+                              )}
+                            </InfoTooltip>
+                          </div>
+                        </div>
+
+                        <Button asChild variant="default" size="tiny">
                           <Link href={`/project/${project.ref}/settings/compute-and-disk`}>
                             Manage Disk
                           </Link>
                         </Button>
                       </div>
-                      <div className="flex flex-col gap-2">
-                        <div className="flex items-center h-6 gap-3">
-                          <span className="text-foreground-light text-sm font-mono flex items-center gap-2">
-                            <span className="text-foreground font-semibold mt-[-2px]">
-                              <MotionNumber
-                                value={totalDiskUsage}
-                                style={{ lineHeight: 0.8 }}
-                                className="font-mono"
-                              />
-                            </span>{' '}
-                            GB Disk provisioned
-                          </span>
-                          <InfoTooltip side="top">
-                            <p>{primaryDiskUsage} GB for Primary Database</p>
-                            {replicaDbs.length > 0 && (
-                              <>
-                                <p>
-                                  {replicaDiskUsage} GB for {replicaDbs.length} Read{' '}
-                                  {replicaDbs.length === 1 ? 'Replica' : 'Replicas'}
-                                </p>
-                                <p className="mt-1">
-                                  Read replicas have their own disk and use 25% more disk to account
-                                  for WAL files.
-                                </p>
-                              </>
-                            )}
-                          </InfoTooltip>
-                        </div>
-                      </div>
-                    </div>
-                  )
-                })}
+                    )
+                  })}
+                </div>
               </div>
             ) : (
               <Panel>
diff --git a/apps/studio/data/replication/cost-estimate-query.ts b/apps/studio/data/replication/cost-estimate-query.ts
new file mode 100644
index 0000000000000..bf94c379fc05f
--- /dev/null
+++ b/apps/studio/data/replication/cost-estimate-query.ts
@@ -0,0 +1,57 @@
+import { useQuery } from '@tanstack/react-query'
+
+import { replicationKeys } from './keys'
+import { get, handleError } from '@/data/fetchers'
+import type { ResponseError, UseCustomQueryOptions } from '@/types'
+
+type ReplicationCostEstimateParams = {
+  projectRef?: string
+  sourceId?: number
+  publicationName?: string
+}
+
+async function fetchReplicationCostEstimate(
+  { projectRef, sourceId, publicationName }: ReplicationCostEstimateParams,
+  signal?: AbortSignal
+) {
+  if (!projectRef) throw new Error('projectRef is required')
+  if (!sourceId) throw new Error('sourceId is required')
+  if (!publicationName) throw new Error('publicationName is required')
+
+  const { data, error } = await get(
+    '/platform/replication/{ref}/sources/{source_id}/publications/{publication_name}/cost-estimate',
+    {
+      params: {
+        path: { ref: projectRef, source_id: sourceId, publication_name: publicationName },
+      },
+      signal,
+    }
+  )
+  if (error) {
+    handleError(error)
+  }
+
+  return data
+}
+
+export type ReplicationCostEstimateData = Awaited<ReturnType<typeof fetchReplicationCostEstimate>>
+
+export const useReplicationCostEstimateQuery = <TData = ReplicationCostEstimateData>(
+  { projectRef, sourceId, publicationName }: ReplicationCostEstimateParams,
+  {
+    enabled = true,
+    ...options
+  }: UseCustomQueryOptions<ReplicationCostEstimateData, ResponseError, TData> = {}
+) =>
+  useQuery<ReplicationCostEstimateData, ResponseError, TData>({
+    queryKey: replicationKeys.costEstimate(projectRef, sourceId, publicationName),
+    queryFn: ({ signal }) =>
+      fetchReplicationCostEstimate({ projectRef, sourceId, publicationName }, signal),
+    enabled:
+      enabled &&
+      typeof projectRef !== 'undefined' &&
+      typeof sourceId !== 'undefined' &&
+      typeof publicationName !== 'undefined' &&
+      publicationName.length > 0,
+    ...options,
+  })
diff --git a/apps/studio/data/replication/keys.ts b/apps/studio/data/replication/keys.ts
index e8fb182760a61..c61f4d1a589b4 100644
--- a/apps/studio/data/replication/keys.ts
+++ b/apps/studio/data/replication/keys.ts
@@ -8,6 +8,20 @@ export const replicationKeys = {
     ['projects', projectRef, 'sources', source_id, 'publications'] as const,
   tables: (projectRef: string | undefined, source_id: number | undefined) =>
     ['projects', projectRef, 'sources', source_id, 'tables'] as const,
+  costEstimate: (
+    projectRef: string | undefined,
+    source_id: number | undefined,
+    publicationName: string | undefined
+  ) =>
+    [
+      'projects',
+      projectRef,
+      'sources',
+      source_id,
+      'publications',
+      publicationName,
+      'cost-estimate',
+    ] as const,
   pipelines: (projectRef: string | undefined) => ['projects', projectRef, 'pipelines'] as const,
   pipelineById: (projectRef: string | undefined, pipelineId: number | undefined) =>
     ['projects', projectRef, 'pipelines', pipelineId] as const,
diff --git a/packages/api-types/types/platform.d.ts b/packages/api-types/types/platform.d.ts
index 7e76984317855..f3fa019f0466a 100644
--- a/packages/api-types/types/platform.d.ts
+++ b/packages/api-types/types/platform.d.ts
@@ -4075,6 +4075,26 @@ export interface paths {
     patch?: never
     trace?: never
   }
+  '/platform/replication/{ref}/sources/{source_id}/publications/{publication_name}/cost-estimate': {
+    parameters: {
+      query?: never
+      header?: never
+      path?: never
+      cookie?: never
+    }
+    /**
+     * Estimate replication cost for a publication
+     * @description Estimate the cost of replicating a publication's tables. Returns the flat per-pipeline fee, a per-table breakdown of the one-time initial-copy cost derived from the tables’ on-disk size, and the usage-based streaming rate. Requires bearer auth and an active, healthy project.
+     */
+    get: operations['ReplicationSourcesController_getCostEstimate']
+    put?: never
+    post?: never
+    delete?: never
+    options?: never
+    head?: never
+    patch?: never
+    trace?: never
+  }
   '/platform/replication/{ref}/sources/{source_id}/tables': {
     parameters: {
       query?: never
@@ -10879,6 +10899,81 @@ export interface components {
         name: string
       }
     }
+    CostEstimateResponse: {
+      /**
+       * @description Currency of all amounts
+       * @example usd
+       * @enum {string}
+       */
+      currency: 'usd'
+      /** @description Recurring per-pipeline cost */
+      pipeline: {
+        /**
+         * @description Hourly rate charged per active pipeline
+         * @example 0.053
+         */
+        hourly_cost: number
+        /**
+         * @description Projected monthly cost for an active pipeline, based on an average 730-hour month. Pipelines are billed hourly, so this is an estimate, not a metered amount.
+         * @example 38.69
+         */
+        monthly_cost: number
+      }
+      /** @description Usage-based streaming cost, expressed as a rate */
+      streaming: {
+        /**
+         * @description Usage-based streaming rate per GB. Actual cost depends on the change volume.
+         * @example 3
+         */
+        rate_per_gb: number
+      }
+      /** @description One-time cost for the initial table copy */
+      table_copy: {
+        /**
+         * @description One-time initial-copy rate per GB
+         * @example 0.6
+         */
+        rate_per_gb: number
+        /** @description Per-table initial-copy cost estimate */
+        tables: {
+          /**
+           * @description Estimated on-disk size of the table in bytes
+           * @example 10960896
+           */
+          estimated_bytes: number
+          /**
+           * @description Estimated one-time initial-copy cost for the table, in the response currency
+           * @example 0.01
+           */
+          estimated_cost: number
+          /**
+           * @description Whether this table has a row filter. The estimate does not account for how many rows the filter excludes, so the actual replicated volume may be lower than shown.
+           * @example false
+           */
+          is_row_filtered: boolean
+          /**
+           * @description Table name
+           * @example orders
+           */
+          name: string
+          /**
+           * @description Table schema
+           * @example public
+           */
+          schema: string
+        }[]
+        /**
+         * @description Total estimated bytes across all tables
+         * @example 11911168
+         */
+        total_bytes: number
+        /**
+         * @description Total estimated one-time initial-copy cost
+         * @example 0.01
+         */
+        total_cost: number
+      }
+    }
     ReplicationPublicationsResponse: {
       /** @description List of publications */
       publications: {
@@ -28217,6 +28312,61 @@ export interface operations {
       }
     }
   }
+  ReplicationSourcesController_getCostEstimate: {
+    parameters: {
+      query?: never
+      header?: never
+      path: {
+        /** @description Publication name */
+        publication_name: string
+        /** @description Project ref */
+        ref: string
+        /** @description Source id */
+        source_id: number
+      }
+      cookie?: never
+    }
+    requestBody?: never
+    responses: {
+      /** @description Cost estimate for replicating the publication. */
+      200: {
+        headers: {
+          [name: string]: unknown
+        }
+        content: {
+          'application/json': components['schemas']['CostEstimateResponse']
+        }
+      }
+      /** @description Unauthorized */
+      401: {
+        headers: {
+          [name: string]: unknown
+        }
+        content?: never
+      }
+      /** @description Forbidden action */
+      403: {
+        headers: {
+          [name: string]: unknown
+        }
+        content?: never
+      }
+      /** @description Rate limit exceeded */
+      429: {
+        headers: {
+          [name: string]: unknown
+        }
+        content?: never
+      }
+      /** @description Unexpected error while estimating replication cost. */
+      500: {
+        headers: {
+          [name: string]: unknown
+        }
+        content?: never
+      }
+    }
+  }
   ReplicationSourcesController_createPublication: {
     parameters: {
       query?: never

From 66691ad9ce54894f16a36237ae3e8df45760e1a5 Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Wed, 15 Jul 2026 17:19:02 +0800
Subject: [PATCH 3/3] Joshen/fe 3384 prevent ai assistant chat panel from
 closing after query (#47951)

## Context

2 problems that this PR addresses - but these are in general due to the
mobile UI behaviour
- Sidebars (e.g Help Panel, Advisor Panel, etc) closes whenever there's
a route change
- This is happening because of `StudioMobileSheetNav`'s
`handleOpenChange` interfering with the sidebar visible state
- Am opting to not render `StudioMobileSheetNav` at all unless on mobile
- On mobile, if you're on the Advisor Panel, clicking the "Menu" button
closes the mobile sheet
- Clicking on the Menu button seems to be triggering `MobileSheetNav`'s
`onOpenChange`
- My suspicion is because of state asymmetry between two independent
stores (MobileSheetContext and SidebarManagerState - these 2 are a bit
too complex imo)
- Am opting to skip calling `onOpenChange` in `StudioMobileSheetNav` if
the click target is within the Floating toolbar

## To test
- [x] Desktop: Have the assistant panel open and change routes, panel
should stay open
- [x] Mobile: Open the assistant panel, then switch to the menu, panel
should stay open

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

## Summary by CodeRabbit

* **Bug Fixes**
* Improved mobile navigation interactions so the navigation sheet
remains open while toolbar actions are being selected.
* Mobile navigation now displays only on smaller screens, preventing it
from appearing at medium and larger breakpoints.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../FloatingMobileToolbar.tsx                   |  1 +
 .../NavigationBar/StudioMobileSheetNav.tsx      | 17 ++++++++++++++---
 .../src/MobileSheetNav/MobileSheetNav.tsx       |  5 ++++-
 3 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/apps/studio/components/layouts/Navigation/FloatingMobileToolbar/FloatingMobileToolbar.tsx b/apps/studio/components/layouts/Navigation/FloatingMobileToolbar/FloatingMobileToolbar.tsx
index 30547a2ba0b31..da5b728cf82de 100644
--- a/apps/studio/components/layouts/Navigation/FloatingMobileToolbar/FloatingMobileToolbar.tsx
+++ b/apps/studio/components/layouts/Navigation/FloatingMobileToolbar/FloatingMobileToolbar.tsx
@@ -50,6 +50,7 @@ export const FloatingMobileToolbar = ({ hideMobileMenu }: { hideMobileMenu?: boo
       onPointerMove={drag.handlePointerMove}
     >
       <div
+        id="mobile-nav-actions"
         className={cn(
           'flex pointer-events-auto cursor-grab active:cursor-grabbing flex-row items-center justify-between w-auto rounded-full',
           'bg-overlay/80 backdrop-blur-md px-2.5 py-2 gap-2',
diff --git a/apps/studio/components/layouts/Navigation/NavigationBar/StudioMobileSheetNav.tsx b/apps/studio/components/layouts/Navigation/NavigationBar/StudioMobileSheetNav.tsx
index ad3ae93e0907c..ecb828944ee29 100644
--- a/apps/studio/components/layouts/Navigation/NavigationBar/StudioMobileSheetNav.tsx
+++ b/apps/studio/components/layouts/Navigation/NavigationBar/StudioMobileSheetNav.tsx
@@ -1,3 +1,4 @@
+import { useBreakpoint } from 'common'
 import type { ReactNode } from 'react'
 import { CommandWrapper } from 'ui-patterns/CommandMenu'
 import { MobileSheetNav } from 'ui-patterns/MobileSheetNav'
@@ -37,7 +38,8 @@ function getSheetChildren(
   return null
 }
 
-const StudioMobileSheetNav = () => {
+export const StudioMobileSheetNav = () => {
+  const isMobile = useBreakpoint('md')
   const { content, setContent } = useMobileSheet()
   const { activeSidebar } = useSidebarManagerSnapshot()
   const sheetChildren = getSheetChildren(content, activeSidebar ?? null)
@@ -49,15 +51,24 @@ const StudioMobileSheetNav = () => {
     }
   }
 
+  if (!isMobile) return null
+
   return (
     <MobileSheetNav
       open={content !== null}
       onOpenChange={handleOpenChange}
       shouldCloseOnViewportResize={!activeSidebar}
+      onPointerDownOutside={(event) => {
+        // Buttons in the floating toolbar (#mobile-nav-actions) render outside this sheet, so
+        // Radix treats taps on them as an outside click and closes the sheet before the button's
+        // own onClick runs. Those buttons already manage the sheet themselves, so don't let
+        // Radix's outside-dismiss pre-empt them.
+        if ((event.target as HTMLElement | null)?.closest('#mobile-nav-actions')) {
+          event.preventDefault()
+        }
+      }}
     >
       {sheetChildren}
     </MobileSheetNav>
   )
 }
-
-export { StudioMobileSheetNav }
diff --git a/packages/ui-patterns/src/MobileSheetNav/MobileSheetNav.tsx b/packages/ui-patterns/src/MobileSheetNav/MobileSheetNav.tsx
index 3d29ab996f133..47ebc96ae86ce 100644
--- a/packages/ui-patterns/src/MobileSheetNav/MobileSheetNav.tsx
+++ b/packages/ui-patterns/src/MobileSheetNav/MobileSheetNav.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useRouter } from 'next/router'
-import { useEffect } from 'react'
+import { ComponentProps, useEffect } from 'react'
 import { ErrorBoundary } from 'react-error-boundary'
 import { useWindowSize } from 'react-use'
 import { CommandEmpty, Sheet, SheetContent } from 'ui'
@@ -14,6 +14,7 @@ const MobileSheetNav: React.FC<{
   className?: string
   shouldCloseOnRouteChange?: boolean
   shouldCloseOnViewportResize?: boolean
+  onPointerDownOutside?: ComponentProps<typeof SheetContent>['onPointerDownOutside']
 }> = ({
   children,
   open = false,
@@ -21,6 +22,7 @@ const MobileSheetNav: React.FC<{
   className,
   shouldCloseOnRouteChange = true,
   shouldCloseOnViewportResize = true,
+  onPointerDownOutside,
 }) => {
   const router = useRouter()
   const { width } = useWindowSize()
@@ -48,6 +50,7 @@ const MobileSheetNav: React.FC<{
         showClose={false}
         size="full"
         side="bottom"
+        onPointerDownOutside={onPointerDownOutside}
         className={cn(
           'rounded-t-lg bg-background overflow-hidden overflow-y-scroll h-[85dvh] md:max-h-[500px]',
           className