From 8d59e69da4f7a014118e0d21405bba00eb264e6c Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Fri, 28 Aug 2026 12:49:35 +0800
Subject: [PATCH 1/8] Add support for running only selected query in
 QueryEditor (#49651)

## Context

As per PR title - this behaviour currently exists in the SQL Editor so
just bringing it over to the Explorer, applies to both QueryTab and
QueryCell since they use the same QueryEditor component

"Run" button also updates to "Run selected" for clarity when a specific
portion of the code editor is selected

<img width="1387" height="958" alt="image"
src="https://github.com/user-attachments/assets/7e652951-3c07-4f8d-851b-bb9219d0c1f2"
/>


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

* **New Features**
* Run only the selected SQL when text is highlighted in the query
editor.
  * Run the full query when no text is selected.
  * Updated the run button label and tooltip to reflect the action.

* **Bug Fixes**
  * Improved query execution for empty or collapsed selections.
  * Corrected selection state when reopening the query editor.

* **Tests**
* Added coverage for selected-text, full-query, and editor reopening
scenarios.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../interfaces/Explorer/QueryEditor/index.tsx |  43 ++++--
 .../Explorer/__tests__/QueryTab.test.tsx      | 124 +++++++++++++++++-
 .../components/ui/CodeEditor/CodeEditor.tsx   |  15 +--
 .../ui/CodeEditor/CodeEditor.utils.test.ts    |  51 +++++++
 .../ui/CodeEditor/CodeEditor.utils.ts         |  13 ++
 5 files changed, 219 insertions(+), 27 deletions(-)
 create mode 100644 apps/studio/components/ui/CodeEditor/CodeEditor.utils.test.ts

diff --git a/apps/studio/components/interfaces/Explorer/QueryEditor/index.tsx b/apps/studio/components/interfaces/Explorer/QueryEditor/index.tsx
index ccafb2762fd73..3e46de3d5c57d 100644
--- a/apps/studio/components/interfaces/Explorer/QueryEditor/index.tsx
+++ b/apps/studio/components/interfaces/Explorer/QueryEditor/index.tsx
@@ -2,7 +2,7 @@ import { useMonaco } from '@monaco-editor/react'
 import { acceptUntrustedSql, untrustedSql, type UntrustedSqlFragment } from '@supabase/pg-meta'
 import { useFlag } from 'common'
 import { CodeSquare, Eye, EyeOff, Play } from 'lucide-react'
-import type { editor as monacoEditor } from 'monaco-editor'
+import type { editor as monacoEditor, Selection } from 'monaco-editor'
 import {
   forwardRef,
   useEffect,
@@ -46,6 +46,7 @@ import { useAddDefinitions } from '@/components/interfaces/SQLEditor/useAddDefin
 import { ResizableAIWidget } from '@/components/ui/AIEditor/ResizableAIWidget'
 import { getEditorSelectionParts, type EditorSelection } from '@/components/ui/AIEditor/utils'
 import { CodeEditor } from '@/components/ui/CodeEditor/CodeEditor'
+import { getEditorValueOrSelection } from '@/components/ui/CodeEditor/CodeEditor.utils'
 import { DiffEditor } from '@/components/ui/DiffEditor'
 import {
   type DatabaseSourceParameters,
@@ -195,6 +196,7 @@ export const QueryEditor = forwardRef<QueryEditorHandle, QueryEditorProps>(funct
   const [promptState, setPromptState] = useState<(EditorSelection & { isOpen: boolean }) | null>(
     null
   )
+  const [hasSelection, setHasSelection] = useState(false)
 
   const dialect = query._tag === 'logs' ? 'clickhouse' : 'postgres'
   const { requestCompletion, isCompletionLoading } = useQueryEditorAi({ dialect })
@@ -237,13 +239,6 @@ export const QueryEditor = forwardRef<QueryEditorHandle, QueryEditorProps>(funct
   const isExecuting = isExecutingSql || isExecutingLogs
   const isBusy = isLoadingProject || isResolvingDatabase || isExecuting
 
-  /**
-   * The user's run gesture, and therefore the promotion point for this query's SQL. The
-   * raw text comes straight off the editor, so it is (re)branded untrusted here — the
-   * editor boundary — and promoted in the same handler. Which pair of helpers applies is
-   * decided by `query._tag`, the same discriminant that picks the execution endpoint, so
-   * Postgres SQL cannot reach the analytics wire or vice versa.
-   */
   const handleRunQuery = async ({
     rawSql = sql,
     shouldForce = false,
@@ -409,13 +404,17 @@ export const QueryEditor = forwardRef<QueryEditorHandle, QueryEditorProps>(funct
             <ExplorerToolbarAction
               loading={isExecuting}
               icon={<Play />}
-              tooltip="Run query"
+              tooltip={hasSelection ? 'Run selected query' : 'Run query'}
               disabled={
                 isBusy || pendingProposal !== null || isRunDisabled || sql.trim().length === 0
               }
-              onClick={() => handleRunQuery()}
+              onClick={() => {
+                const editorInstance = editorInstanceRef.current
+                const rawSql = editorInstance ? getEditorValueOrSelection(editorInstance) : sql
+                handleRunQuery({ rawSql })
+              }}
             >
-              Run
+              {hasSelection ? 'Run selected' : 'Run'}
             </ExplorerToolbarAction>
           </ExplorerToolbarActions>
         </ExplorerToolbar>
@@ -447,7 +446,10 @@ export const QueryEditor = forwardRef<QueryEditorHandle, QueryEditorProps>(funct
                 placeholderClassName="top-[13px]"
                 className={variant === 'embedded' ? 'h-44' : undefined}
                 actions={{
-                  runQuery: { enabled: !isRunDisabled, callback: handleRunQuery },
+                  runQuery: {
+                    enabled: !isRunDisabled,
+                    callback: (rawSql: string) => handleRunQuery({ rawSql }),
+                  },
                 }}
                 options={{
                   minimap: { enabled: false },
@@ -458,6 +460,23 @@ export const QueryEditor = forwardRef<QueryEditorHandle, QueryEditorProps>(funct
                   editor.onDidBlurEditorWidget(() => onSqlCommitRef.current?.(sqlRef.current))
                   editorInstanceRef.current = editor
 
+                  const updateHasSelection = (selection: Selection | null | undefined) => {
+                    const noSelection =
+                      !selection ||
+                      (selection.startLineNumber === selection.endLineNumber &&
+                        selection.startColumn === selection.endColumn)
+                    setHasSelection(!noSelection)
+                  }
+
+                  // A remount (e.g. toggling "Show query" off then on) creates a fresh
+                  // editor with no listener history, so `hasSelection` must be read from
+                  // this instance directly rather than left at whatever the previous
+                  // editor instance last reported.
+                  updateHasSelection(editor.getSelection())
+                  editor.onDidChangeCursorSelection(({ selection }) =>
+                    updateHasSelection(selection)
+                  )
+
                   editor.addAction({
                     id: 'generate-sql',
                     label: 'Generate SQL',
diff --git a/apps/studio/components/interfaces/Explorer/__tests__/QueryTab.test.tsx b/apps/studio/components/interfaces/Explorer/__tests__/QueryTab.test.tsx
index 70224e3f4ff8b..a7ddb608be280 100644
--- a/apps/studio/components/interfaces/Explorer/__tests__/QueryTab.test.tsx
+++ b/apps/studio/components/interfaces/Explorer/__tests__/QueryTab.test.tsx
@@ -1,6 +1,7 @@
 import { act, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { HttpResponse } from 'msw'
+import { useEffect, useRef } from 'react'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { ExplorerQueryTab } from '../ExplorerQueryTab'
@@ -14,6 +15,8 @@ import { setupSqlEditorMocks } from '@/tests/lib/sql-editor-test-utils'
 const testContext = vi.hoisted(() => ({
   flags: { otelLegacyLogs: true } as Record<string, boolean>,
   params: { ref: 'default', id: 'query-test' } as { ref?: string; id?: string },
+  /** Simulated editor selection — the mocked CodeEditor's fake editor reads this. */
+  selectedText: undefined as string | undefined,
 }))
 
 vi.mock('common', async (importOriginal) => {
@@ -30,16 +33,51 @@ vi.mock('@/components/ui/CodeEditor/CodeEditor', () => ({
   CodeEditor: ({
     value,
     onInputChange,
+    onMount,
   }: {
     value: string
     onInputChange?: (value: string | undefined) => void
-  }) => (
-    <textarea
-      aria-label="SQL editor"
-      value={value}
-      onChange={(e) => onInputChange?.(e.target.value)}
-    />
-  ),
+    onMount?: (editor: any, monaco: any) => void
+  }) => {
+    // Kept fresh via a ref (rather than closed over) so the fake editor's
+    // `getValue` reflects edits made after mount, same as the real editor would.
+    const valueRef = useRef(value)
+    valueRef.current = value
+
+    useEffect(() => {
+      const hasSelection = testContext.selectedText !== undefined
+      // Matches this instance's selection at the moment it mounts — a fresh editor
+      // instance (e.g. after "Show query" remounts it) has no memory of a prior
+      // instance's selection, so this must be read fresh rather than carried over.
+      const selection = hasSelection
+        ? { startLineNumber: 1, endLineNumber: 2, startColumn: 1, endColumn: 5 }
+        : null
+
+      onMount?.(
+        {
+          getValue: () => valueRef.current,
+          getSelection: () => selection,
+          getModel: () => ({ getValueInRange: () => testContext.selectedText }),
+          onDidBlurEditorWidget: () => () => {},
+          // Intentionally never invoked here — the real editor only fires this on a
+          // subsequent user-driven selection change, not eagerly on mount. Tests that
+          // need to simulate a live selection change should call this directly.
+          onDidChangeCursorSelection: () => ({ dispose: () => {} }),
+          addAction: () => {},
+        },
+        { KeyMod: { CtrlCmd: 1, Shift: 2 }, KeyCode: { KeyK: 3, Enter: 4 } }
+      )
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [])
+
+    return (
+      <textarea
+        aria-label="SQL editor"
+        value={value}
+        onChange={(e) => onInputChange?.(e.target.value)}
+      />
+    )
+  },
 }))
 
 vi.mock('../QueryEditor/QuerySourceMenu', () => ({
@@ -132,6 +170,7 @@ beforeEach(() => {
   setupSqlEditorMocks()
   testContext.flags.otelLegacyLogs = true
   testContext.params = { ref: 'default', id: 'query-test' }
+  testContext.selectedText = undefined
   explorerQueryState.removeDraft({ id: 'query-test', projectRef: 'default' })
 })
 
@@ -389,4 +428,75 @@ describe('QueryTab execution', () => {
     expect(executedQueries[0]).toContain('create table foo (id int)')
     expect(executedQueries[0]).toContain('ALTER TABLE foo ENABLE ROW LEVEL SECURITY;')
   })
+
+  it('runs only the selected text, not the full editor content, when there is an active selection', async () => {
+    createDraft({ _tag: 'database' }, 'select 1;\nselect 2;')
+    testContext.selectedText = 'select 2;'
+
+    // Background prefetches (intellisense keywords/functions/schemas/table-columns, event
+    // triggers) hit this same generic pg-meta query endpoint, distinguished from an actual
+    // run by their non-empty `key` search param — an executed query's `key` is `''`.
+    const executedQueries: string[] = []
+    addAPIMock({
+      method: 'post',
+      path: '/platform/pg-meta/:ref/query',
+      response: async ({ request }) => {
+        const key = new URL(request.url).searchParams.get('key')
+        if (key !== '') return HttpResponse.json([])
+        const { query } = (await request.json()) as { query: string }
+        executedQueries.push(query)
+        return HttpResponse.json([])
+      },
+    })
+
+    renderQueryTab()
+    const runButton = await screen.findByRole('button', { name: 'Run selected' })
+    await waitFor(() => expect(runButton).toBeEnabled())
+    await userEvent.click(runButton)
+
+    await waitFor(() => expect(executedQueries).toHaveLength(1))
+    expect(executedQueries[0]).toContain('select 2')
+    expect(executedQueries[0]).not.toContain('select 1')
+  })
+
+  it('drops the stale "Run selected" state once the query panel is hidden and shown again', async () => {
+    createDraft({ _tag: 'database' }, 'select 1;\nselect 2;')
+    testContext.selectedText = 'select 2;'
+
+    const executedQueries: string[] = []
+    addAPIMock({
+      method: 'post',
+      path: '/platform/pg-meta/:ref/query',
+      response: async ({ request }) => {
+        const key = new URL(request.url).searchParams.get('key')
+        if (key !== '') return HttpResponse.json([])
+        const { query } = (await request.json()) as { query: string }
+        executedQueries.push(query)
+        return HttpResponse.json([])
+      },
+    })
+
+    renderQueryTab()
+    expect(await screen.findByRole('button', { name: 'Run selected' })).toBeInTheDocument()
+
+    // Hiding the query panel unmounts CodeEditor entirely. Simulate the selection being
+    // gone by the time it's shown again (a fresh editor instance has no selection yet).
+    const hideQueryButton = document.querySelector('.lucide-eye-off')?.closest('button')
+    expect(hideQueryButton).toBeInstanceOf(HTMLButtonElement)
+    await userEvent.click(hideQueryButton as HTMLButtonElement)
+    testContext.selectedText = undefined
+
+    const showQueryButton = document.querySelector('.lucide-eye')?.closest('button')
+    expect(showQueryButton).toBeInstanceOf(HTMLButtonElement)
+    await userEvent.click(showQueryButton as HTMLButtonElement)
+
+    const runButton = await screen.findByRole('button', { name: 'Run' })
+    expect(screen.queryByRole('button', { name: 'Run selected' })).not.toBeInTheDocument()
+
+    await userEvent.click(runButton)
+
+    await waitFor(() => expect(executedQueries).toHaveLength(1))
+    expect(executedQueries[0]).toContain('select 1')
+    expect(executedQueries[0]).toContain('select 2')
+  })
 })
diff --git a/apps/studio/components/ui/CodeEditor/CodeEditor.tsx b/apps/studio/components/ui/CodeEditor/CodeEditor.tsx
index ffd6e738af7c0..cf36124858a6a 100644
--- a/apps/studio/components/ui/CodeEditor/CodeEditor.tsx
+++ b/apps/studio/components/ui/CodeEditor/CodeEditor.tsx
@@ -6,7 +6,11 @@ import { RefObject, useEffect, useRef, useState } from 'react'
 import { cn } from 'ui'
 import { useSetCommandMenuOpen } from 'ui-patterns/CommandMenu'
 
-import { alignEditor, BASE_MONACO_EDITOR_OPTIONS } from './CodeEditor.utils'
+import {
+  alignEditor,
+  BASE_MONACO_EDITOR_OPTIONS,
+  getEditorValueOrSelection,
+} from './CodeEditor.utils'
 import { Markdown } from '@/components/interfaces/Markdown'
 import { useLatest } from '@/hooks/misc/useLatest'
 import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
@@ -162,13 +166,8 @@ export const CodeEditor = ({
         contextMenuGroupId: 'operation',
         contextMenuOrder: 0,
         run: () => {
-          const selection = editorRef?.current?.getSelection()
-          if (!selection) return
-
-          const selectedValue = editorRef?.current?.getModel()?.getValueInRange(selection)
-          const editorValue = editorRef?.current?.getValue()
-
-          runQueryCallbackRef.current(selectedValue || editorValue)
+          if (!editorRef.current) return
+          runQueryCallbackRef.current(getEditorValueOrSelection(editorRef.current))
         },
       })
     }
diff --git a/apps/studio/components/ui/CodeEditor/CodeEditor.utils.test.ts b/apps/studio/components/ui/CodeEditor/CodeEditor.utils.test.ts
new file mode 100644
index 0000000000000..0a032c5c044f7
--- /dev/null
+++ b/apps/studio/components/ui/CodeEditor/CodeEditor.utils.test.ts
@@ -0,0 +1,51 @@
+import type { editor } from 'monaco-editor'
+import { describe, expect, it } from 'vitest'
+
+import { getEditorValueOrSelection } from './CodeEditor.utils'
+
+const buildEditor = ({
+  value,
+  selectedValue,
+  hasSelection,
+}: {
+  value: string
+  selectedValue?: string
+  hasSelection: boolean
+}): editor.IStandaloneCodeEditor => {
+  return {
+    getValue: () => value,
+    getSelection: () => (hasSelection ? {} : null),
+    getModel: () => ({ getValueInRange: () => selectedValue }),
+  } as unknown as editor.IStandaloneCodeEditor
+}
+
+describe('getEditorValueOrSelection', () => {
+  it('returns the selected text when there is a non-empty selection', () => {
+    const editorInstance = buildEditor({
+      value: 'select * from a;\nselect * from b;',
+      selectedValue: 'select * from b;',
+      hasSelection: true,
+    })
+
+    expect(getEditorValueOrSelection(editorInstance)).toBe('select * from b;')
+  })
+
+  it('falls back to the full value when there is no selection', () => {
+    const editorInstance = buildEditor({
+      value: 'select * from a;',
+      hasSelection: false,
+    })
+
+    expect(getEditorValueOrSelection(editorInstance)).toBe('select * from a;')
+  })
+
+  it('falls back to the full value when the selection is collapsed (empty range)', () => {
+    const editorInstance = buildEditor({
+      value: 'select * from a;',
+      selectedValue: '',
+      hasSelection: true,
+    })
+
+    expect(getEditorValueOrSelection(editorInstance)).toBe('select * from a;')
+  })
+})
diff --git a/apps/studio/components/ui/CodeEditor/CodeEditor.utils.ts b/apps/studio/components/ui/CodeEditor/CodeEditor.utils.ts
index 8f3b0c5aab691..a64c6c0866b45 100644
--- a/apps/studio/components/ui/CodeEditor/CodeEditor.utils.ts
+++ b/apps/studio/components/ui/CodeEditor/CodeEditor.utils.ts
@@ -28,3 +28,16 @@ export const alignEditor = (editor: editor.IStandaloneCodeEditor) => {
     })
   })
 }
+
+/**
+ * The text a "run" gesture should act on: the current selection if there is one
+ * (a collapsed cursor has an empty range, so `getValueInRange` returns `''` and
+ * this falls through), otherwise the full editor value.
+ */
+export const getEditorValueOrSelection = (
+  editor: editor.IStandaloneCodeEditor
+): string | undefined => {
+  const selection = editor.getSelection()
+  const selectedValue = selection ? editor.getModel()?.getValueInRange(selection) : undefined
+  return selectedValue || editor.getValue()
+}

From 02bb456647d84ec519e8b162809c7120d3fa9ef9 Mon Sep 17 00:00:00 2001
From: Danny White <3104761+dnywh@users.noreply.github.com>
Date: Fri, 28 Aug 2026 17:37:08 +1000
Subject: [PATCH 2/8] fix(studio): clarify pipeline form guidance (#49666)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## What kind of change does this PR introduce?

UI copy improvement for the current pipeline creation sheet.

## What is the current behavior?

Several pipeline fields use ambiguous labels or omit useful guidance.
Validation messages also use inconsistent punctuation.

## What is the new behavior?

- Explains how the pipeline name is used
- Clarifies invalidated replication slot behaviour
- Explains that BigQuery maximum staleness is optional
- Makes pipeline validation messages consistent

## To test

1. Open a project, then go to Database → Replication and select Add
destination.
2. Confirm Name explains that it identifies the pipeline in Supabase.
3. Expand Advanced settings and confirm Invalidated slot behaviour uses
Block startup and Recreate slot.
4. Select BigQuery and confirm Maximum staleness explains that leaving
it blank gives the freshest results.
5. Submit incomplete destination settings and confirm validation
messages end with full stops.

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

* **New Features**
* Replication slot behavior options now use clearer labels: “Block
startup” and “Recreate slot.”
* Added guidance explaining that the pipeline name identifies the
pipeline in Supabase.
  * Improved the BigQuery maximum-staleness description and display.

* **Bug Fixes**
* Standardized replication destination validation messages with
consistent punctuation.
  * Clarified the ClickHouse HTTPS validation message.
  * Updated validation tests to reflect the improved error messages.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../DestinationForm/AdvancedSettings.tsx      |  16 ++-
 .../AnalyticsBucket/AnalyticsBucket.utils.ts  |  14 +--
 .../BigQuery/BigQuery.schema.ts               |   6 +-
 .../BigQuery/BigQuery.utils.ts                |   8 +-
 .../ClickHouse/ClickHouse.utils.ts            |  12 +-
 .../DestinationForm/DestinationForm.schema.ts |  14 +--
 .../DestinationForm.utils.test.ts             | 104 +++++++++---------
 .../DestinationForm/DestinationForm.utils.ts  |   4 +-
 .../DestinationForm/DestinationNameInput.tsx  |   6 +-
 .../DuckLake/DuckLake.schema.ts               |   4 +-
 .../DuckLake/DuckLake.utils.ts                |  30 ++---
 .../DestinationForm/DuckLake/Fields.tsx       |   2 +-
 .../Snowflake/Snowflake.utils.ts              |  10 +-
 .../DestinationForm/useDestinationForm.ts     |   4 +-
 14 files changed, 122 insertions(+), 112 deletions(-)

diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/AdvancedSettings.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/AdvancedSettings.tsx
index d004564c635a1..877915b1e54e8 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/AdvancedSettings.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/AdvancedSettings.tsx
@@ -28,6 +28,11 @@ import {
 } from './DestinationForm.constants'
 import { type DestinationPanelSchemaType } from './DestinationForm.schema'
 
+const INVALIDATED_SLOT_BEHAVIOR_LABELS = {
+  error: 'Block startup',
+  recreate: 'Recreate slot',
+}
+
 export const AdvancedSettings = ({
   type,
   form,
@@ -153,16 +158,18 @@ export const AdvancedSettings = ({
                 >
                   <FormControl>
                     <Select value={field.value ?? 'error'} onValueChange={field.onChange}>
-                      <SelectTrigger className="capitalize">{field.value ?? 'error'}</SelectTrigger>
+                      <SelectTrigger>
+                        {INVALIDATED_SLOT_BEHAVIOR_LABELS[field.value ?? 'error']}
+                      </SelectTrigger>
                       <SelectContent>
                         <SelectItem value="error" className="[&>span]:top-2.5">
-                          <p>Error</p>
+                          <p>Block startup</p>
                           <p className="text-foreground-lighter">
                             Blocks startup for manual recovery.
                           </p>
                         </SelectItem>
                         <SelectItem value="recreate" className="[&>span]:top-2.5">
-                          <p>Recreate</p>
+                          <p>Recreate slot</p>
                           <p className="text-foreground-lighter">
                             Replaces destination tables and runs a new, billable initial sync.
                           </p>
@@ -222,7 +229,7 @@ export const AdvancedSettings = ({
                         </div>
                       }
                       layout="horizontal"
-                      description="How old query results can be while BigQuery applies ongoing changes."
+                      description="Set the maximum age of query results while BigQuery applies ongoing changes, or leave blank for the freshest results."
                     >
                       <FormControl>
                         <InputGroup>
@@ -233,7 +240,6 @@ export const AdvancedSettings = ({
                             step={1}
                             value={field.value ?? ''}
                             onChange={handleNumberChange(field)}
-                            placeholder="Default: None (Freshest results)"
                           />
                           <InputGroupAddon align="inline-end">
                             <InputGroupText>minutes</InputGroupText>
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 3aeb5cd90606e..d443262582e26 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
@@ -21,9 +21,9 @@ 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: 'warehouseName', message: 'Bucket is required.' },
+  { path: 's3Region', message: 'S3 region is required.' },
+  { path: 's3AccessKeyId', message: 'S3 access key ID is required.' },
 ]
 
 export const getAnalyticsBucketValidationIssues = (
@@ -43,8 +43,8 @@ export const getAnalyticsBucketValidationIssues = (
   if (!hasValidNamespace) {
     issues.push(
       isCreatingNewNamespace
-        ? { path: 'newNamespaceName', message: 'Namespace name is required' }
-        : { path: 'namespace', message: 'Namespace is required' }
+        ? { path: 'newNamespaceName', message: 'Namespace name is required.' }
+        : { path: 'namespace', message: 'Namespace is required.' }
     )
   }
 
@@ -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/BigQuery/BigQuery.schema.ts b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/BigQuery/BigQuery.schema.ts
index abd86b79faf9d..b6fa2279c4915 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/BigQuery/BigQuery.schema.ts
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/BigQuery/BigQuery.schema.ts
@@ -7,11 +7,11 @@ export const BigQueryFormSchema = z.object({
   connectionPoolSize: z
     .number()
     .int()
-    .min(1, 'Connection pool size must be greater than 0')
+    .min(1, 'Connection pool size must be greater than 0.')
     .optional(),
   maxStalenessMins: z
     .number()
-    .int('Maximum staleness must be a whole number of minutes')
-    .min(0, 'Maximum staleness must be 0 or greater')
+    .int('Maximum staleness must be a whole number of minutes.')
+    .min(0, 'Maximum staleness must be 0 or greater.')
     .optional(),
 })
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 5bc5181d1558a..423632f5c4fe8 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
@@ -7,14 +7,14 @@ export type BigQueryValidationIssue = {
   message: string
 }
 
-export const BIGQUERY_SERVICE_ACCOUNT_JSON_MESSAGE = 'Service account key must be valid JSON'
+export const BIGQUERY_SERVICE_ACCOUNT_JSON_MESSAGE = 'Service account key must be valid JSON.'
 
 const BIGQUERY_REQUIRED_FIELDS: {
   path: Exclude<BigQueryFieldPath, 'serviceAccountKey'>
   message: string
 }[] = [
-  { path: 'projectId', message: 'Project ID is required' },
-  { path: 'datasetId', message: 'Dataset ID is required' },
+  { path: 'projectId', message: 'Project ID is required.' },
+  { path: 'datasetId', message: 'Dataset ID is required.' },
 ]
 
 const isValidJsonString = (value: string) => {
@@ -39,7 +39,7 @@ export const getBigQueryValidationIssues = (
 
   if (!serviceAccountKey) {
     if (!secretsOptional) {
-      issues.push({ path: 'serviceAccountKey', message: 'Service account key is required' })
+      issues.push({ path: 'serviceAccountKey', message: 'Service account key is required.' })
     }
     return issues
   }
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/ClickHouse/ClickHouse.utils.ts b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/ClickHouse/ClickHouse.utils.ts
index e36d47f4c1860..ec3ba9a117f04 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/ClickHouse/ClickHouse.utils.ts
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/ClickHouse/ClickHouse.utils.ts
@@ -64,26 +64,26 @@ export const getClickHouseValidationIssues = (
   const issues: ClickHouseValidationIssue[] = []
 
   if (!data.clickhouseUrl?.length) {
-    issues.push({ path: 'clickhouseUrl', message: 'URL is required' })
+    issues.push({ path: 'clickhouseUrl', message: 'URL is required.' })
   } else {
     let parsed: URL | undefined
 
     try {
       parsed = new URL(data.clickhouseUrl)
     } catch {
-      issues.push({ path: 'clickhouseUrl', message: 'ClickHouse URL must be a valid URL' })
+      issues.push({ path: 'clickhouseUrl', message: 'ClickHouse URL must be a valid URL.' })
     }
 
     if (parsed) {
       if (parsed.protocol !== 'https:') {
-        issues.push({ path: 'clickhouseUrl', message: 'ClickHouse URL must use https://' })
+        issues.push({ path: 'clickhouseUrl', message: 'ClickHouse URL must use HTTPS.' })
       } else {
         const host = parsed.hostname.replace(/^\[|\]$/g, '')
 
         if (isClickHouseHostInternal(host)) {
           issues.push({
             path: 'clickhouseUrl',
-            message: 'ClickHouse URL must not target an internal address',
+            message: 'ClickHouse URL must not target an internal address.',
           })
         }
       }
@@ -91,11 +91,11 @@ export const getClickHouseValidationIssues = (
   }
 
   if (!data.clickhouseUser?.length) {
-    issues.push({ path: 'clickhouseUser', message: 'User is required' })
+    issues.push({ path: 'clickhouseUser', message: 'User is required.' })
   }
 
   if (!data.clickhouseDatabase?.length) {
-    issues.push({ path: 'clickhouseDatabase', message: 'Database is required' })
+    issues.push({ path: 'clickhouseDatabase', message: 'Database is required.' })
   }
 
   return issues
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 9bfdd084c6bcb..dd260642b0f15 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
@@ -7,8 +7,8 @@ import { DuckLakeFormSchema } from './DuckLake/DuckLake.schema'
 import { SnowflakeFormSchema } from './Snowflake/Snowflake.schema'
 
 const CommonFormSchema = z.object({
-  name: z.string().min(1, 'Name is required'),
-  publicationName: z.string().min(1, 'Publication is required'),
+  name: z.string().min(1, 'Name is required.'),
+  publicationName: z.string().min(1, 'Publication is required.'),
   tableSyncCopyMode: z.enum([
     'include_all_tables',
     'skip_all_tables',
@@ -18,18 +18,18 @@ const CommonFormSchema = z.object({
   tableSyncCopyTableIds: z.array(z.string()),
   maxFillMs: z
     .number()
-    .int('Batch wait time must be a whole number of milliseconds')
-    .min(0, 'Batch wait time must be 0 or greater')
+    .int('Batch wait time must be a whole number of milliseconds.')
+    .min(0, 'Batch wait time must be 0 or greater.')
     .optional(),
   maxTableSyncWorkers: z
     .number()
-    .min(1, 'Max table sync workers must be greater than 0')
-    .int('Max table sync workers must be a whole number')
+    .min(1, 'Max table sync workers must be greater than 0.')
+    .int('Max table sync workers must be a whole number.')
     .optional(),
   maxCopyConnectionsPerTable: z
     .number()
     .int()
-    .min(1, 'Max copy connections per table must be greater than 0')
+    .min(1, 'Max copy connections per table must be greater than 0.')
     .optional(),
   invalidatedSlotBehavior: z.enum(['error', 'recreate']).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 05470fe0dea77..1e69cba9d97a5 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
@@ -306,12 +306,12 @@ 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: '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.' },
     ])
   })
 
@@ -347,7 +347,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.' },
     ])
   })
 
@@ -363,12 +363,12 @@ 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: '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.' },
     ])
   })
 
@@ -386,19 +386,19 @@ describe('DestinationForm.utils DuckLake', () => {
     expect(issues).toEqual([
       {
         path: 'ducklakeCatalogUrl',
-        message: 'DuckLake catalog URL must be a PostgreSQL-compatible URL',
+        message: 'DuckLake catalog URL must be a PostgreSQL-compatible URL.',
       },
       {
         path: 'ducklakeDataPath',
-        message: 'DuckLake data path must start with s3:// and cannot contain file://',
+        message: 'DuckLake data path must start with s3:// and cannot contain file://.',
       },
       {
         path: 'ducklakeS3Endpoint',
-        message: 'S3 endpoint must not contain the protocol scheme',
+        message: 'S3 endpoint must not contain the protocol scheme.',
       },
       {
         path: 'ducklakeMetadataSchema',
-        message: 'DuckLake metadata schema must contain only letters, numbers, and underscores',
+        message: 'DuckLake metadata schema must contain only letters, numbers, and underscores.',
       },
     ])
   })
@@ -487,9 +487,9 @@ describe('DestinationForm.utils DuckLake (Use Supabase)', () => {
     })
 
     expect(issues).toEqual([
-      { path: 'ducklakeCatalogProjectRef', message: 'Catalog project is required' },
-      { path: 'ducklakeStorageProjectRef', message: 'Storage project is required' },
-      { path: 'ducklakeStorageBucket', message: 'Bucket is required' },
+      { path: 'ducklakeCatalogProjectRef', message: 'Catalog project is required.' },
+      { path: 'ducklakeStorageProjectRef', message: 'Storage project is required.' },
+      { path: 'ducklakeStorageBucket', message: 'Bucket is required.' },
     ])
   })
 
@@ -574,11 +574,11 @@ describe('DestinationForm.utils Snowflake', () => {
     })
 
     expect(issues).toEqual([
-      { path: 'snowflakeAccountId', message: 'Account ID is required' },
-      { path: 'snowflakeUser', message: 'User is required' },
-      { path: 'snowflakePrivateKey', message: 'Private key is required' },
-      { path: 'snowflakeDatabase', message: 'Database is required' },
-      { path: 'snowflakeSchema', message: 'Schema is required' },
+      { path: 'snowflakeAccountId', message: 'Account ID is required.' },
+      { path: 'snowflakeUser', message: 'User is required.' },
+      { path: 'snowflakePrivateKey', message: 'Private key is required.' },
+      { path: 'snowflakeDatabase', message: 'Database is required.' },
+      { path: 'snowflakeSchema', message: 'Schema is required.' },
     ])
   })
 
@@ -653,9 +653,9 @@ describe('DestinationForm.utils ClickHouse', () => {
     })
 
     expect(issues).toEqual([
-      { path: 'clickhouseUrl', message: 'URL is required' },
-      { path: 'clickhouseUser', message: 'User is required' },
-      { path: 'clickhouseDatabase', message: 'Database is required' },
+      { path: 'clickhouseUrl', message: 'URL is required.' },
+      { path: 'clickhouseUser', message: 'User is required.' },
+      { path: 'clickhouseDatabase', message: 'Database is required.' },
     ])
   })
 
@@ -666,7 +666,7 @@ describe('DestinationForm.utils ClickHouse', () => {
         clickhouseUser: 'default',
         clickhouseDatabase: 'analytics',
       })
-    ).toEqual([{ path: 'clickhouseUrl', message: 'ClickHouse URL must use https://' }])
+    ).toEqual([{ path: 'clickhouseUrl', message: 'ClickHouse URL must use HTTPS.' }])
 
     expect(
       getClickHouseValidationIssues({
@@ -675,7 +675,7 @@ describe('DestinationForm.utils ClickHouse', () => {
         clickhouseDatabase: 'analytics',
       })
     ).toEqual([
-      { path: 'clickhouseUrl', message: 'ClickHouse URL must not target an internal address' },
+      { path: 'clickhouseUrl', message: 'ClickHouse URL must not target an internal address.' },
     ])
   })
 
@@ -711,7 +711,7 @@ describe('DestinationForm.utils ClickHouse', () => {
         clickhouseDatabase: 'analytics',
       })
     ).toEqual([
-      { path: 'clickhouseUrl', message: 'ClickHouse URL must not target an internal address' },
+      { path: 'clickhouseUrl', message: 'ClickHouse URL must not target an internal address.' },
     ])
   })
 
@@ -739,9 +739,9 @@ 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: 'projectId', message: 'Project ID is required.' },
+      { path: 'datasetId', message: 'Dataset ID is required.' },
+      { path: 'serviceAccountKey', message: 'Service account key is required.' },
     ])
   })
 
@@ -753,9 +753,9 @@ 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: 'projectId', message: 'Project ID is required.' },
+      { path: 'datasetId', message: 'Dataset ID is required.' },
+      { path: 'serviceAccountKey', message: 'Service account key is required.' },
     ])
   })
 
@@ -777,7 +777,7 @@ describe('DestinationForm.utils BigQuery', () => {
     })
 
     expect(issues).toEqual([
-      { path: 'serviceAccountKey', message: 'Service account key must be valid JSON' },
+      { path: 'serviceAccountKey', message: 'Service account key must be valid JSON.' },
     ])
   })
 
@@ -802,7 +802,7 @@ describe('DestinationForm.utils BigQuery', () => {
     })
 
     expect(issues).toEqual([
-      { path: 'serviceAccountKey', message: 'Service account key must be valid JSON' },
+      { path: 'serviceAccountKey', message: 'Service account key must be valid JSON.' },
     ])
   })
 
@@ -817,7 +817,7 @@ describe('DestinationForm.utils BigQuery', () => {
     )
 
     expect(issues).toEqual([
-      { path: 'serviceAccountKey', message: 'Service account key must be valid JSON' },
+      { path: 'serviceAccountKey', message: 'Service account key must be valid JSON.' },
     ])
   })
 
@@ -847,11 +847,11 @@ 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: 'namespace', message: 'Namespace is required' },
-      { path: 's3SecretAccessKey', message: 'S3 secret access key is required' },
+      { path: 'warehouseName', message: 'Bucket 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.' },
     ])
   })
 
@@ -866,11 +866,11 @@ 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: 'namespace', message: 'Namespace is required' },
-      { path: 's3SecretAccessKey', message: 'S3 secret access key is required' },
+      { path: 'warehouseName', message: 'Bucket 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.' },
     ])
   })
 
@@ -884,7 +884,7 @@ describe('DestinationForm.utils Analytics Bucket', () => {
       s3SecretAccessKey: 'secret',
     })
 
-    expect(issues).toEqual([{ path: 'newNamespaceName', message: 'Namespace name is required' }])
+    expect(issues).toEqual([{ path: 'newNamespaceName', message: 'Namespace name is required.' }])
   })
 
   it('skips the S3 secret when creating a new access key', () => {
@@ -946,7 +946,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/DestinationForm.utils.ts b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DestinationForm.utils.ts
index 3ddee07c982ae..d36e4287aabc1 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DestinationForm.utils.ts
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DestinationForm.utils.ts
@@ -172,7 +172,7 @@ export const buildTableSyncCopyConfig = ({
   if (mode === 'include_all_tables' || mode === 'skip_all_tables') return { type: mode }
 
   if (selectedTableIds.length === 0) {
-    throw new Error('Select at least one table for the initial sync')
+    throw new Error('Select at least one table for the initial sync.')
   }
 
   const tableIds = selectedTableIds.map(Number)
@@ -343,7 +343,7 @@ export const buildDestinationConfigForValidation = ({
   } else if (selectedType === 'ClickHouse') {
     return { clickHouse: buildClickHouseConfig(data) }
   } else {
-    throw new Error('Invalid destination type')
+    throw new Error('Invalid destination type.')
   }
 }
 
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DestinationNameInput.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DestinationNameInput.tsx
index a95827fa29d23..af5789b893497 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DestinationNameInput.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DestinationNameInput.tsx
@@ -14,7 +14,11 @@ export const DestinationNameInput = ({ form }: DestinationNameInputProps) => {
       control={form.control}
       name="name"
       render={({ field }) => (
-        <FormItemLayout label="Name" layout="horizontal">
+        <FormItemLayout
+          label="Name"
+          layout="horizontal"
+          description="Used to identify this pipeline in Supabase."
+        >
           <FormControl>
             <Input
               {...field}
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DuckLake/DuckLake.schema.ts b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DuckLake/DuckLake.schema.ts
index 37da7aec648a4..50a9ace4a91a5 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DuckLake/DuckLake.schema.ts
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DuckLake/DuckLake.schema.ts
@@ -14,8 +14,8 @@ export const DuckLakeFormSchema = z.object({
   ducklakePoolSize: z
     .number()
     .int()
-    .min(1, 'Pool size must be greater than 0')
-    .max(6, 'Pool size must be 6 or less')
+    .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(),
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 8f5080273e536..1d8c9b43c4156 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
@@ -55,18 +55,18 @@ type DucklakeValidationData = Pick<
 // Required fields per mode. "Use Supabase" only needs project refs + a bucket; the catalog URL and
 // S3 credentials are resolved by the platform API.
 const DUCKLAKE_SUPABASE_REQUIRED_FIELDS: DucklakeValidationIssue[] = [
-  { path: 'ducklakeCatalogProjectRef', message: 'Catalog project is required' },
-  { path: 'ducklakeStorageProjectRef', message: 'Storage project is required' },
-  { path: 'ducklakeStorageBucket', message: 'Bucket is required' },
+  { path: 'ducklakeCatalogProjectRef', message: 'Catalog project is required.' },
+  { path: 'ducklakeStorageProjectRef', message: 'Storage project is required.' },
+  { path: 'ducklakeStorageBucket', message: 'Bucket is required.' },
 ]
 
 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: '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.' },
 ]
 
 const DUCKLAKE_CUSTOM_SECRET_FIELDS = new Set<DucklakeFieldPath>([
@@ -79,7 +79,7 @@ const DUCKLAKE_CUSTOM_SECRET_FIELDS = new Set<DucklakeFieldPath>([
 const METADATA_SCHEMA_PATTERN = /^[A-Za-z0-9_]+$/
 const METADATA_SCHEMA_ISSUE: DucklakeValidationIssue = {
   path: 'ducklakeMetadataSchema',
-  message: 'DuckLake metadata schema must contain only letters, numbers, and underscores',
+  message: 'DuckLake metadata schema must contain only letters, numbers, and underscores.',
 }
 
 const getMissingRequiredFieldIssues = (
@@ -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.',
     })
   }
 
@@ -136,7 +136,7 @@ export const getDucklakeValidationIssues = (
   ) {
     issues.push({
       path: 'ducklakeCatalogUrl',
-      message: 'DuckLake catalog URL must be a PostgreSQL-compatible URL',
+      message: 'DuckLake catalog URL must be a PostgreSQL-compatible URL.',
     })
   }
 
@@ -146,7 +146,7 @@ export const getDucklakeValidationIssues = (
   ) {
     issues.push({
       path: 'ducklakeDataPath',
-      message: 'DuckLake data path must start with s3:// and cannot contain file://',
+      message: 'DuckLake data path must start with s3:// and cannot contain file://.',
     })
   }
 
@@ -157,7 +157,7 @@ export const getDucklakeValidationIssues = (
   ) {
     issues.push({
       path: 'ducklakeS3Endpoint',
-      message: 'S3 endpoint must 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 f9947ada7ad90..7f29d23598cb9 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
@@ -154,7 +154,7 @@ const DuckLakeSupabaseFields = ({ form }: { form: UseFormReturn<DestinationPanel
     const name = newBucketName.trim()
     if (!name || !ducklakeStorageProjectRef) return
     if (name.includes('/')) {
-      return toast.error('Bucket name cannot contain "/"')
+      return toast.error('Bucket name cannot contain "/".')
     }
 
     createBucket({
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/Snowflake/Snowflake.utils.ts b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/Snowflake/Snowflake.utils.ts
index fa270daba84a6..8a2a5f4d56c5f 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/Snowflake/Snowflake.utils.ts
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/Snowflake/Snowflake.utils.ts
@@ -23,11 +23,11 @@ export type SnowflakeValidationIssue = {
 }
 
 const SNOWFLAKE_REQUIRED_FIELDS: { path: SnowflakeFieldPath; message: string }[] = [
-  { path: 'snowflakeAccountId', message: 'Account ID is required' },
-  { path: 'snowflakeUser', message: 'User is required' },
-  { path: 'snowflakePrivateKey', message: 'Private key is required' },
-  { path: 'snowflakeDatabase', message: 'Database is required' },
-  { path: 'snowflakeSchema', message: 'Schema is required' },
+  { path: 'snowflakeAccountId', message: 'Account ID is required.' },
+  { path: 'snowflakeUser', message: 'User is required.' },
+  { path: 'snowflakePrivateKey', message: 'Private key is required.' },
+  { path: 'snowflakeDatabase', message: 'Database is required.' },
+  { path: 'snowflakeSchema', message: 'Schema is required.' },
 ]
 
 export const getSnowflakeValidationIssues = (
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/useDestinationForm.ts b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/useDestinationForm.ts
index b317f4e5f985c..a89977494cc70 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/useDestinationForm.ts
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/useDestinationForm.ts
@@ -85,7 +85,7 @@ export const useDestinationForm = ({ selectedType }: { selectedType: Destination
   // Helper function to handle namespace creation if needed
   const resolveNamespace = async (data: z.infer<typeof FormSchema>) => {
     if (data.namespace === CREATE_NEW_NAMESPACE) {
-      if (!data.newNamespaceName) throw new Error('New namespace name is required')
+      if (!data.newNamespaceName) throw new Error('New namespace name is required.')
 
       await createNamespace({
         projectRef,
@@ -224,7 +224,7 @@ export const useDestinationForm = ({ selectedType }: { selectedType: Destination
         resolveNamespace,
       })
 
-      if (!destinationConfig) throw new Error('Destination configuration is missing')
+      if (!destinationConfig) throw new Error('Destination configuration is missing.')
 
       const shouldSendBatch =
         !editMode || data.maxFillMs !== (existingBatch?.max_fill_ms ?? DEFAULT_MAX_FILL_MS)

From 19e3844a0efb5377ff83ec5e4c8128a87d976c04 Mon Sep 17 00:00:00 2001
From: Danny White <3104761+dnywh@users.noreply.github.com>
Date: Fri, 28 Aug 2026 17:37:31 +1000
Subject: [PATCH 3/8] feat(studio): upload BigQuery pipeline credentials
 (#49668)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## What kind of change does this PR introduce?

Feature improvement for BigQuery pipeline creation and editing.

## What is the current behavior?

Users must paste the complete service-account JSON into a text area.

## What is the new behavior?

Users can paste, upload, or drag and drop a service-account JSON file.
Imported credentials remain editable, and unreadable or oversized files
show an inline form error.

## To test

1. Open a project, then go to Database → Replication and select Add
destination.
2. Select BigQuery.
3. Under Service account key, select Upload JSON file and choose a
service-account `.json` file.
4. Confirm its contents appear in the editable text area.
5. Drag and drop a JSON file onto the same field and confirm it replaces
the contents.
6. Confirm pasting credentials manually still works.

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

* **New Features**
  * Added support for uploading BigQuery service account key JSON files.
  * Added drag-and-drop support for service account key files.
  * Updated guidance to clarify that keys can be pasted or uploaded.
  * Constrained the service account key field to 5,000 characters.

* **Bug Fixes**
  * Added clear validation when keys exceed the character limit.
* Improved handling of unreadable files while preserving the existing
key.
  * Improved editing of imported service account key content.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../DestinationForm/BigQuery/Fields.test.tsx  |  90 +++++++++++
 .../DestinationForm/BigQuery/Fields.tsx       | 146 ++++++++++++++++--
 2 files changed, 220 insertions(+), 16 deletions(-)
 create mode 100644 apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/BigQuery/Fields.test.tsx

diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/BigQuery/Fields.test.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/BigQuery/Fields.test.tsx
new file mode 100644
index 0000000000000..6322f20270dce
--- /dev/null
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/BigQuery/Fields.test.tsx
@@ -0,0 +1,90 @@
+import { fireEvent, screen, waitFor } from '@testing-library/react'
+import { useForm } from 'react-hook-form'
+import { Form } from 'ui'
+import { describe, expect, it, vi } from 'vitest'
+
+import type { DestinationPanelSchemaType } from '../DestinationForm.schema'
+import { BigQueryFields } from './Fields'
+import { customRender } from '@/tests/lib/custom-render'
+
+const TestForm = ({ serviceAccountKey = '' }: { serviceAccountKey?: string }) => {
+  const form = useForm<DestinationPanelSchemaType>({
+    defaultValues: { projectId: '', datasetId: '', serviceAccountKey },
+  })
+
+  return (
+    <Form {...form}>
+      <BigQueryFields form={form} editMode={false} />
+    </Form>
+  )
+}
+
+describe('BigQueryFields', () => {
+  it('imports a JSON file into an editable service account key field', async () => {
+    const { container } = customRender(<TestForm />)
+    const contents = '{"type":"service_account"}'
+    const file = new File([contents], 'service-account.json', { type: 'application/json' })
+    Object.defineProperty(file, 'text', { value: vi.fn().mockResolvedValue(contents) })
+
+    const fileInput = container.querySelector<HTMLInputElement>('input[type="file"]')
+    expect(fileInput).not.toBeNull()
+    fireEvent.change(fileInput!, { target: { files: [file] } })
+
+    const textarea = screen.getByPlaceholderText(
+      '{"type": "service_account", "project_id": "...", ...}'
+    )
+    await waitFor(() => expect(textarea).toHaveValue(contents))
+
+    fireEvent.change(textarea, { target: { value: `${contents}\n` } })
+    expect(textarea).toHaveValue(`${contents}\n`)
+    expect(textarea).toHaveClass('max-h-[calc(13lh+1rem)]')
+  })
+
+  it('imports a dropped JSON file into the service account key field', async () => {
+    customRender(<TestForm />)
+    const contents = '{"type":"service_account"}'
+    const file = new File([contents], 'service-account.json', { type: 'application/json' })
+    Object.defineProperty(file, 'text', { value: vi.fn().mockResolvedValue(contents) })
+
+    const textarea = screen.getByPlaceholderText(
+      '{"type": "service_account", "project_id": "...", ...}'
+    )
+    fireEvent.drop(textarea.closest('div')!, {
+      dataTransfer: { files: [file] },
+    })
+
+    await waitFor(() => expect(textarea).toHaveValue(contents))
+  })
+
+  it('rejects an oversized file without replacing the existing key', async () => {
+    const { container } = customRender(<TestForm serviceAccountKey="existing-key" />)
+    const file = new File(['x'.repeat(5001)], 'service-account.json', {
+      type: 'application/json',
+    })
+    const readFile = vi.fn()
+    Object.defineProperty(file, 'text', { value: readFile })
+
+    const fileInput = container.querySelector<HTMLInputElement>('input[type="file"]')
+    fireEvent.change(fileInput!, { target: { files: [file] } })
+
+    expect(
+      await screen.findByText('Service account key must be 5,000 characters or fewer.')
+    ).toBeInTheDocument()
+    expect(readFile).not.toHaveBeenCalled()
+    expect(screen.getByDisplayValue('existing-key')).toBeInTheDocument()
+  })
+
+  it('preserves the existing key when the selected file cannot be read', async () => {
+    const { container } = customRender(<TestForm serviceAccountKey="existing-key" />)
+    const file = new File(['{}'], 'service-account.json', { type: 'application/json' })
+    Object.defineProperty(file, 'text', {
+      value: vi.fn().mockRejectedValue(new Error('File read failed')),
+    })
+
+    const fileInput = container.querySelector<HTMLInputElement>('input[type="file"]')
+    fireEvent.change(fileInput!, { target: { files: [file] } })
+
+    expect(await screen.findByText('Could not read the selected JSON file.')).toBeInTheDocument()
+    expect(screen.getByDisplayValue('existing-key')).toBeInTheDocument()
+  })
+})
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 9e7db5d75cfd9..bb4e4397d957f 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
@@ -1,10 +1,54 @@
+import { Upload } from 'lucide-react'
+import { useRef, useState, type ChangeEvent, type DragEvent } from 'react'
 import type { UseFormReturn } from 'react-hook-form'
-import { FormControl, FormField, Input, TextArea } from 'ui'
+import { Button, cn, FormControl, FormField, Input, TextArea } from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 
 import { STORED_SECRET_PLACEHOLDER } from '../DestinationForm.constants'
 import type { DestinationPanelSchemaType } from '../DestinationForm.schema'
 
+const MAX_SERVICE_ACCOUNT_KEY_LENGTH = 5000
+
+const readServiceAccountFile = async (
+  file: File,
+  form: UseFormReturn<DestinationPanelSchemaType>,
+  isCurrentRequest: () => boolean
+) => {
+  if (file.size > MAX_SERVICE_ACCOUNT_KEY_LENGTH) {
+    if (isCurrentRequest()) {
+      form.setError('serviceAccountKey', {
+        message: 'Service account key must be 5,000 characters or fewer.',
+      })
+    }
+    return
+  }
+
+  try {
+    const contents = await file.text()
+    if (!isCurrentRequest()) return
+
+    if (contents.length > MAX_SERVICE_ACCOUNT_KEY_LENGTH) {
+      form.setError('serviceAccountKey', {
+        message: 'Service account key must be 5,000 characters or fewer.',
+      })
+      return
+    }
+
+    form.setValue('serviceAccountKey', contents, {
+      shouldDirty: true,
+      shouldTouch: true,
+      shouldValidate: true,
+    })
+    form.clearErrors('serviceAccountKey')
+  } catch {
+    if (isCurrentRequest()) {
+      form.setError('serviceAccountKey', {
+        message: 'Could not read the selected JSON file.',
+      })
+    }
+  }
+}
+
 export const BigQueryFields = ({
   form,
   editMode,
@@ -12,6 +56,41 @@ export const BigQueryFields = ({
   form: UseFormReturn<DestinationPanelSchemaType>
   editMode: boolean
 }) => {
+  const serviceAccountFileInputRef = useRef<HTMLInputElement>(null)
+  const fileReadRequestIdRef = useRef(0)
+  const [isDraggingFile, setIsDraggingFile] = useState(false)
+
+  const handleServiceAccountFile = async (file: File | undefined) => {
+    if (!file) return
+    const requestId = ++fileReadRequestIdRef.current
+    await readServiceAccountFile(file, form, () => requestId === fileReadRequestIdRef.current)
+  }
+
+  const handleServiceAccountFileInputChange = async (event: ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0]
+    event.target.value = ''
+    await handleServiceAccountFile(file)
+  }
+
+  const handleDragOver = (event: DragEvent<HTMLDivElement>) => {
+    event.preventDefault()
+    event.stopPropagation()
+    setIsDraggingFile(true)
+  }
+
+  const handleDragLeave = (event: DragEvent<HTMLDivElement>) => {
+    event.preventDefault()
+    event.stopPropagation()
+    setIsDraggingFile(false)
+  }
+
+  const handleDrop = async (event: DragEvent<HTMLDivElement>) => {
+    event.preventDefault()
+    event.stopPropagation()
+    setIsDraggingFile(false)
+    await handleServiceAccountFile(event.dataTransfer.files?.[0])
+  }
+
   return (
     <div className="flex flex-col gap-y-6 p-5">
       <p className="text-sm font-medium text-foreground">BigQuery settings</p>
@@ -57,23 +136,58 @@ export const BigQueryFields = ({
               label="Service account key"
               description={
                 editMode
-                  ? 'Stored credentials are hidden. Enter new credentials to replace them.'
-                  : 'Service account credentials JSON for authenticating with BigQuery'
+                  ? 'Stored credentials are hidden. Paste or upload new credentials to replace them.'
+                  : 'Paste or upload your service account credentials JSON file for authenticating with BigQuery.'
               }
             >
-              <FormControl>
-                <TextArea
-                  {...field}
-                  rows={5}
-                  maxLength={5000}
-                  placeholder={
-                    editMode
-                      ? STORED_SECRET_PLACEHOLDER
-                      : '{"type": "service_account", "project_id": "...", ...}'
-                  }
-                  className="font-mono text-xs"
-                />
-              </FormControl>
+              <div
+                className="relative"
+                onDragOver={handleDragOver}
+                onDragLeave={handleDragLeave}
+                onDrop={handleDrop}
+              >
+                <div className={cn('space-y-2 transition-opacity', isDraggingFile && 'opacity-40')}>
+                  <FormControl>
+                    <TextArea
+                      {...field}
+                      onChange={(event) => {
+                        fileReadRequestIdRef.current += 1
+                        field.onChange(event)
+                      }}
+                      rows={5}
+                      maxLength={MAX_SERVICE_ACCOUNT_KEY_LENGTH}
+                      placeholder={
+                        editMode
+                          ? STORED_SECRET_PLACEHOLDER
+                          : '{"type": "service_account", "project_id": "...", ...}'
+                      }
+                      className="max-h-[calc(13lh+1rem)] font-mono text-xs"
+                    />
+                  </FormControl>
+                  <input
+                    ref={serviceAccountFileInputRef}
+                    type="file"
+                    accept="application/json,.json"
+                    className="hidden"
+                    onChange={handleServiceAccountFileInputChange}
+                  />
+                  <Button
+                    type="button"
+                    variant="default"
+                    size="tiny"
+                    icon={<Upload size={14} />}
+                    onClick={() => serviceAccountFileInputRef.current?.click()}
+                  >
+                    Upload JSON file
+                  </Button>
+                </div>
+                {isDraggingFile ? (
+                  <div
+                    aria-hidden="true"
+                    className="pointer-events-none absolute inset-0 rounded-md ring-2 ring-brand ring-offset-2 ring-offset-background"
+                  />
+                ) : null}
+              </div>
             </FormItemLayout>
           )}
         />

From 27dba8d02d3dcd1f5cbe81ccf740fe2b2320fefa Mon Sep 17 00:00:00 2001
From: Danny White <3104761+dnywh@users.noreply.github.com>
Date: Fri, 28 Aug 2026 17:37:44 +1000
Subject: [PATCH 4/8] fix(studio): group pipeline destinations by release stage
 (#49669)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## What kind of change does this PR introduce?

UI clarity improvement for the current pipeline creation sheet.

## What is the current behavior?

All destination types appear under a generic Pipelines heading, with
release-stage badges repeated beside each option.

## What is the new behavior?

Destination types are grouped under Public Alpha, Early Access, and
Deprecated headings. The selected value stays compact, while its
release-stage guidance remains below the field.

| Before | After |
| --- | --- |
| <img width="1280" height="750" alt="CleanShot 2026-08-28 at 15 45
29@2x"
src="https://github.com/user-attachments/assets/5be32928-21fa-4911-bc68-3376c068703f"
/> | <img width="1280" height="888" alt="CleanShot 2026-08-28 at 15 44
49@2x"
src="https://github.com/user-attachments/assets/2046d174-dd4f-41f1-98da-3d8d48af8a1c"
/> |

## To test

1. Open a project, then go to Database → Replication and select Add
destination.
2. Open the Type selector.
3. Confirm available destinations are grouped by Public Alpha, Early
Access, and Deprecated.
4. Select BigQuery and confirm the field still explains that it is in
public alpha.
5. Edit an existing destination and confirm the Type selector remains
disabled.

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

## Summary by CodeRabbit

* **UI Improvements**
* Destination options are now organized into clear release-stage groups:
Public Alpha, Early Access, and Deprecated.
* Added group headings and separators to make destination selection
easier to scan.
* Removed individual stage badges from destination labels for a cleaner,
more consistent layout.

* **Tests**
* Updated coverage to verify grouping and visibility across supported
destination types.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../DestinationTypeSelection.test.tsx         |  13 +-
 .../DestinationTypeSelection.tsx              | 139 +++++++++---------
 2 files changed, 79 insertions(+), 73 deletions(-)

diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationTypeSelection.test.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationTypeSelection.test.tsx
index 8b7d4dcb9d766..a84bf5b1ae4f4 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationTypeSelection.test.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationTypeSelection.test.tsx
@@ -76,10 +76,10 @@ describe('DestinationTypeSelection', () => {
     expect(await screen.findByText('Select a destination type')).toBeInTheDocument()
   })
 
-  test('renders the Pipelines group with BigQuery when the flag is enabled', async () => {
+  test('groups destinations by release stage', async () => {
     mockBigQueryEnabled.mockReturnValue(true)
-    mockIcebergEnabled.mockReturnValue(false)
-    mockDucklakeEnabled.mockReturnValue(false)
+    mockIcebergEnabled.mockReturnValue(true)
+    mockDucklakeEnabled.mockReturnValue(true)
     mockSnowflakeEnabled.mockReturnValue(false)
     mockClickHouseEnabled.mockReturnValue(false)
     addBackgroundMocks()
@@ -88,8 +88,13 @@ describe('DestinationTypeSelection', () => {
 
     fireEvent.click(await screen.findByRole('combobox'))
 
-    expect(await screen.findByText('Pipelines')).toBeInTheDocument()
+    expect(await screen.findByText('Public Alpha')).toBeInTheDocument()
+    expect(screen.getByText('Early Access')).toBeInTheDocument()
+    expect(screen.getByText('Deprecated')).toBeInTheDocument()
     expect(screen.getByText('BigQuery')).toBeInTheDocument()
+    expect(screen.getByText('DuckLake')).toBeInTheDocument()
+    expect(screen.getByText('Analytics Bucket')).toBeInTheDocument()
+    expect(screen.queryByText('Pipelines')).not.toBeInTheDocument()
   })
 
   test('hides destinations behind disabled feature flags', async () => {
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationTypeSelection.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationTypeSelection.tsx
index 7e99d4b6323f5..9c7c902b7b764 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationTypeSelection.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationTypeSelection.tsx
@@ -1,11 +1,11 @@
 import { parseAsInteger, parseAsStringEnum, useQueryState } from 'nuqs'
 import {
-  Badge,
   Select,
   SelectContent,
   SelectGroup,
   SelectItem,
   SelectLabel,
+  SelectSeparator,
   SelectTrigger,
 } from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
@@ -30,13 +30,9 @@ interface DestinationTypeOption {
   enabled: boolean
 }
 
-const STAGE_BADGE_VARIANT: Record<
-  NonNullable<DestinationTypeOption['stage']>,
-  'warning' | 'destructive' | 'default'
-> = {
-  'Early Access': 'warning',
-  Deprecated: 'destructive',
-  'Public Alpha': 'default',
+interface DestinationTypeGroup {
+  label: NonNullable<DestinationTypeOption['stage']>
+  options: DestinationTypeOption[]
 }
 
 export const DestinationTypeSelection = () => {
@@ -72,46 +68,64 @@ export const DestinationTypeSelection = () => {
   const isOptionVisible = (value: DestinationType, hasAccess: boolean) =>
     editMode ? destinationType === value : hasAccess
 
-  const options: DestinationTypeOption[] = (
-    [
-      {
-        value: 'Analytics Bucket',
-        label: 'Analytics Bucket',
-        description: 'Write Apache Iceberg tables to Supabase Storage for analytics workflows',
-        stage: 'Deprecated',
-        enabled: isOptionVisible('Analytics Bucket', etlEnableIceberg),
-      },
-      {
-        value: 'BigQuery',
-        label: 'BigQuery',
-        description: "Replicate changes to Google Cloud's data warehouse for analytics and BI",
-        stage: 'Public Alpha',
-        enabled: isOptionVisible('BigQuery', etlEnableBigQuery),
-      },
-      {
-        value: 'DuckLake',
-        label: 'DuckLake',
-        description: 'Replicate changes to a DuckLake catalog backed by S3-compatible storage',
-        stage: 'Early Access',
-        enabled: isOptionVisible('DuckLake', etlEnableDucklake),
-      },
-      {
-        value: 'Snowflake',
-        label: 'Snowflake',
-        description:
-          'Replicate changes to Snowflake for warehouse analytics and downstream data workflows',
-        stage: 'Early Access',
-        enabled: isOptionVisible('Snowflake', etlEnableSnowflake),
-      },
-      {
-        value: 'ClickHouse',
-        label: 'ClickHouse',
-        description: 'Stream changes to a ClickHouse cluster for fast columnar analytics',
-        stage: 'Early Access',
-        enabled: isOptionVisible('ClickHouse', etlEnableClickHouse),
-      },
-    ] satisfies DestinationTypeOption[]
-  ).filter((option) => option.enabled)
+  const groups: DestinationTypeGroup[] = [
+    {
+      label: 'Public Alpha',
+      options: [
+        {
+          value: 'BigQuery',
+          label: 'BigQuery',
+          description: "Replicate changes to Google Cloud's data warehouse for analytics and BI",
+          stage: 'Public Alpha',
+          enabled: isOptionVisible('BigQuery', etlEnableBigQuery),
+        },
+      ],
+    },
+    {
+      label: 'Early Access',
+      options: [
+        {
+          value: 'DuckLake',
+          label: 'DuckLake',
+          description: 'Replicate changes to a DuckLake catalog backed by S3-compatible storage',
+          stage: 'Early Access',
+          enabled: isOptionVisible('DuckLake', etlEnableDucklake),
+        },
+        {
+          value: 'Snowflake',
+          label: 'Snowflake',
+          description:
+            'Replicate changes to Snowflake for warehouse analytics and downstream data workflows',
+          stage: 'Early Access',
+          enabled: isOptionVisible('Snowflake', etlEnableSnowflake),
+        },
+        {
+          value: 'ClickHouse',
+          label: 'ClickHouse',
+          description: 'Stream changes to a ClickHouse cluster for fast columnar analytics',
+          stage: 'Early Access',
+          enabled: isOptionVisible('ClickHouse', etlEnableClickHouse),
+        },
+      ],
+    },
+    {
+      label: 'Deprecated',
+      options: [
+        {
+          value: 'Analytics Bucket',
+          label: 'Analytics Bucket',
+          description: 'Write Apache Iceberg tables to Supabase Storage for analytics workflows',
+          stage: 'Deprecated',
+          enabled: isOptionVisible('Analytics Bucket', etlEnableIceberg),
+        },
+      ],
+    },
+  ]
+
+  const visibleGroups = groups
+    .map((group) => ({ ...group, options: group.options.filter((option) => option.enabled) }))
+    .filter((group) => group.options.length > 0)
+  const options = visibleGroups.flatMap((group) => group.options)
 
   const selectedOption = options.find((option) => option.value === destinationType)
 
@@ -154,24 +168,18 @@ export const DestinationTypeSelection = () => {
                   size={20}
                   className="shrink-0 text-foreground-light"
                 />
-                <div className="flex items-center gap-x-2">
-                  <span className="text-sm text-foreground">{selectedOption.label}</span>
-                  {selectedOption.stage && (
-                    <Badge variant={STAGE_BADGE_VARIANT[selectedOption.stage]}>
-                      {selectedOption.stage}
-                    </Badge>
-                  )}
-                </div>
+                <span className="text-sm text-foreground">{selectedOption.label}</span>
               </div>
             ) : (
               <span className="text-foreground-lighter">Select a destination type</span>
             )}
           </SelectTrigger>
           <SelectContent align="end">
-            {options.length > 0 && (
-              <SelectGroup>
-                <SelectLabel>Pipelines</SelectLabel>
-                {options.map((option) => (
+            {visibleGroups.map((group, index) => (
+              <SelectGroup key={group.label}>
+                {index > 0 && <SelectSeparator />}
+                <SelectLabel>{group.label}</SelectLabel>
+                {group.options.map((option) => (
                   <SelectItem key={option.value} value={option.value} className="py-2">
                     <div className="flex items-center gap-x-3">
                       <DestinationIcon
@@ -180,14 +188,7 @@ export const DestinationTypeSelection = () => {
                         className="shrink-0 text-foreground-light"
                       />
                       <div className="flex flex-col gap-y-0.5">
-                        <div className="flex items-center gap-x-2">
-                          <span className="text-foreground">{option.label}</span>
-                          {option.stage && (
-                            <Badge variant={STAGE_BADGE_VARIANT[option.stage]}>
-                              {option.stage}
-                            </Badge>
-                          )}
-                        </div>
+                        <span className="text-foreground">{option.label}</span>
                         <span className="text-xs text-foreground-lighter">
                           {option.description}
                         </span>
@@ -196,7 +197,7 @@ export const DestinationTypeSelection = () => {
                   </SelectItem>
                 ))}
               </SelectGroup>
-            )}
+            ))}
           </SelectContent>
         </Select>
       </FormItemLayout>

From 35531ea2f44e220904bf5e6f24c0d06613be665b Mon Sep 17 00:00:00 2001
From: Pamela Chia <pamelachiamayyee@gmail.com>
Date: Fri, 28 Aug 2026 17:26:43 +0800
Subject: [PATCH 5/8] feat(www): serve openapi spec at /openapi.json (#49587)

Agent-readiness scanners and agent fetchers look for an OpenAPI spec at
conventional same-origin paths, but the Management API spec is only
served on api.supabase.com and linked from the /.well-known/api-catalog
linkset, which scanners do not read. I added a rewrite so
supabase.com/openapi.json proxies the spec from its source of truth at
api.supabase.com/api/v1-json, using the same fall-through proxy
mechanism as /humans.txt and /evals.

**Note:** no cache or CORS headers on purpose: no consumer needs them
today, and the upstream response's set-cookie header defeats edge
caching regardless. I rejected a checked-in copy of the spec in favor of
proxying live (staleness). The /.well-known/api-catalog linkset already
points at the spec (PR #44880) and is untouched here; this PR only adds
the conventional same-origin path.

**Merge order:** merge only after supabase/platform#37571 deploys. The
spec currently ships `servers: []`, so OpenAPI consumers resolve
relative paths against the fetch origin; without the platform fix this
proxy would point spec-compliant clients at supabase.com/v1/*.

## To test
Tested on Vercel preview:
- [x] `curl -s https://<preview-url>/openapi.json | head -c 40` returns
`{"openapi":"3.0.0"`
- [x] `curl -sI https://<preview-url>/openapi.json` returns 200 with
`content-type: application/json`
- [x] `curl -sI https://<preview-url>/humans.txt` returns 200 (control:
rewrite fall-through chain intact)

## Linear
- fixes GROWTH-1138


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

## Summary by CodeRabbit

* **New Features**
  * Added access to the OpenAPI specification at `/openapi.json`.
  * Requests are automatically routed to the API specification endpoint.

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

---------

Co-authored-by: Aleksi Immonen <aleksi@supabase.io>
---
 apps/www/lib/rewrites.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/apps/www/lib/rewrites.js b/apps/www/lib/rewrites.js
index 281cc30bc867c..fbd4339024d7e 100644
--- a/apps/www/lib/rewrites.js
+++ b/apps/www/lib/rewrites.js
@@ -75,6 +75,10 @@ const rewrites = [
     source: '/.well-known/security.txt',
     destination: `${process.env.NEXT_PUBLIC_DOCS_URL}/.well-known/security.txt`,
   },
+  {
+    source: '/openapi.json',
+    destination: 'https://api.supabase.com/api/v1-json',
+  },
   { source: '/feed.xml', destination: `/rss.xml` },
 ]
 

From 5fd2023708f6414d480f1d6673a28c86e7e9c221 Mon Sep 17 00:00:00 2001
From: Jordi Enric <37541088+jordienr@users.noreply.github.com>
Date: Fri, 28 Aug 2026 11:30:35 +0200
Subject: [PATCH 6/8] feat(studio): worker detail page (FE-4189, FE-4197)
 (#49195)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## What

The worker detail page at `/project/[ref]/workers/[name]`, reading `GET
/v2/projects/{ref}/workers/{name}`. Base: #49194.

## How to test

Only on the **Mockamaster** project in staging — it is the one project
in the alpha allow-list.

1. Staging dashboard → Mockamaster → **Workers** → click
`dashboard-test`
2. Overview: instances read 1 declared / 1 live / 1 ready / 0 stale, no
error alerts
3. Settings: Deno 2, `denoland/deno:latest`, 2 GB · 1 vCPU, private, US
West (locked)
4. **How to call** in the header → the snippets name the real worker URL

No write actions. Delete (FE-4190) is deliberately out.

Closes FE-4189
Closes FE-4197

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

* **New Features**
* Added worker detail pages with overview, requests, logs, builds, and
settings tabs.
* Added worker metadata, runtime details, invocation examples, and local
development commands.
* Added worker log streams with refresh, row selection, loading, empty,
and error states.
* Added worker-specific log formatting and clearer instance status
information.
* **Documentation**
  * Updated migration tracking to mark the worker route as complete.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 apps/studio/TANSTACK_MIGRATION.md             |   1 +
 .../WorkersLogsColumnRender.tsx               |  22 ++
 .../interfaces/Settings/Logs/LogTable.tsx     |   8 +-
 .../Workers/WorkerDetail/WorkerDetail.tsx     | 148 ++++++++++
 .../Workers/WorkerDetail/WorkerLogsTab.tsx    |  92 +++++++
 .../WorkerDetail/WorkerOverviewTab.tsx        | 260 ++++++++++++++++++
 .../interfaces/Workers/workerSnippets.ts      |   1 -
 apps/studio/data/workers/keys.ts              |   2 +
 .../data/workers/worker-logs-query.test.ts    |  51 ++++
 apps/studio/data/workers/worker-logs-query.ts |  89 ++++++
 apps/studio/lib/constants/workers.ts          |  45 ---
 .../pages/project/[ref]/workers/[name].tsx    |  14 +
 apps/studio/routeTree.gen.ts                  |  21 ++
 .../routes/project/$ref/workers/$name.tsx     |  14 +
 14 files changed, 720 insertions(+), 48 deletions(-)
 create mode 100644 apps/studio/components/interfaces/Settings/Logs/LogColumnRenderers/WorkersLogsColumnRender.tsx
 create mode 100644 apps/studio/components/interfaces/Workers/WorkerDetail/WorkerDetail.tsx
 create mode 100644 apps/studio/components/interfaces/Workers/WorkerDetail/WorkerLogsTab.tsx
 create mode 100644 apps/studio/components/interfaces/Workers/WorkerDetail/WorkerOverviewTab.tsx
 create mode 100644 apps/studio/data/workers/worker-logs-query.test.ts
 create mode 100644 apps/studio/data/workers/worker-logs-query.ts
 create mode 100644 apps/studio/pages/project/[ref]/workers/[name].tsx
 create mode 100644 apps/studio/routes/project/$ref/workers/$name.tsx

diff --git a/apps/studio/TANSTACK_MIGRATION.md b/apps/studio/TANSTACK_MIGRATION.md
index fb8ba8cc114de..13644b1c7eacd 100644
--- a/apps/studio/TANSTACK_MIGRATION.md
+++ b/apps/studio/TANSTACK_MIGRATION.md
@@ -231,6 +231,7 @@ These are the layout-only TanStack files. Most hold a single product layout comp
 ### Project shell — `/workers/*`
 
 - [x] A `routes/project/$ref/workers/index.tsx` ← `pages/project/[ref]/workers/index.tsx`
+- [x] A `routes/project/$ref/workers/$name.tsx` ← `pages/project/[ref]/workers/[name].tsx`
 
 ### Project shell — `/functions/*`
 
diff --git a/apps/studio/components/interfaces/Settings/Logs/LogColumnRenderers/WorkersLogsColumnRender.tsx b/apps/studio/components/interfaces/Settings/Logs/LogColumnRenderers/WorkersLogsColumnRender.tsx
new file mode 100644
index 0000000000000..1c9c897c0160b
--- /dev/null
+++ b/apps/studio/components/interfaces/Settings/Logs/LogColumnRenderers/WorkersLogsColumnRender.tsx
@@ -0,0 +1,22 @@
+import { Column } from 'react-data-grid'
+import { TimestampInfo } from 'ui-patterns/TimestampInfo'
+
+import type { LogData } from '../Logs.types'
+import { RowLayout, SeverityFormatter, TextFormatter } from '../LogsFormatters'
+
+export const WorkersLogsColumnRender: Column<LogData>[] = [
+  {
+    name: 'workers-logs-first-column',
+    key: 'workers-logs-first-column',
+    renderHeaderCell: () => null,
+    renderCell: (props) => (
+      <RowLayout>
+        <TimestampInfo utcTimestamp={props.row.timestamp!} />
+        {props.row.severity_text ? (
+          <SeverityFormatter value={props.row.severity_text as string} />
+        ) : null}
+        <TextFormatter className="w-full" value={props.row.event_message} />
+      </RowLayout>
+    ),
+  },
+]
diff --git a/apps/studio/components/interfaces/Settings/Logs/LogTable.tsx b/apps/studio/components/interfaces/Settings/Logs/LogTable.tsx
index f1e17d4ec9d5b..89f17a3f8ded0 100644
--- a/apps/studio/components/interfaces/Settings/Logs/LogTable.tsx
+++ b/apps/studio/components/interfaces/Settings/Logs/LogTable.tsx
@@ -69,6 +69,7 @@ interface Props {
   selectedLogError?: LogQueryError | ResponseError
   onSelectedLogChange?: (log: LogData | null) => void
   sqlQuery?: string
+  columnRenderers?: Column<LogData>[]
 }
 type LogMap = { [id: string]: LogData }
 
@@ -98,6 +99,7 @@ export const LogTable = ({
   selectedLogError,
   onSelectedLogChange,
   sqlQuery,
+  columnRenderers,
 }: Props) => {
   const { ref } = useParams()
   const { profile } = useProfile()
@@ -245,7 +247,9 @@ export const LogTable = ({
 
   let columns = DEFAULT_COLUMNS
 
-  if (!queryType) {
+  if (columnRenderers) {
+    columns = columnRenderers
+  } else if (!queryType) {
     columns
   } else {
     switch (queryType) {
@@ -616,7 +620,7 @@ export const LogTable = ({
                 'data-grid--logs-explorer': !queryType,
               })}
               rowHeight={40}
-              headerRowHeight={queryType ? 0 : 28}
+              headerRowHeight={queryType || columnRenderers ? 0 : 28}
               columns={columns}
               rowClass={(row: LogData) => {
                 const key = getRowKey(row)
diff --git a/apps/studio/components/interfaces/Workers/WorkerDetail/WorkerDetail.tsx b/apps/studio/components/interfaces/Workers/WorkerDetail/WorkerDetail.tsx
new file mode 100644
index 0000000000000..88e8de4d71b45
--- /dev/null
+++ b/apps/studio/components/interfaces/Workers/WorkerDetail/WorkerDetail.tsx
@@ -0,0 +1,148 @@
+import { useQuery } from '@tanstack/react-query'
+import { useParams } from 'common'
+import { Container, Package } from 'lucide-react'
+import Link from 'next/link'
+import { parseAsStringEnum, useQueryState } from 'nuqs'
+import {
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  Button,
+  Card,
+  NavMenu,
+  NavMenuItem,
+} from 'ui'
+import { PageBreadcrumbs } from 'ui-patterns/PageBreadcrumbs'
+import {
+  PageHeader,
+  PageHeaderDescription,
+  PageHeaderIcon,
+  PageHeaderMeta,
+  PageHeaderSummary,
+  PageHeaderTitle,
+} from 'ui-patterns/PageHeader'
+import { PageNav } from 'ui-patterns/PageNav'
+import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
+
+import { RuntimeBadge } from '../RuntimeBadge'
+import { WorkerStatePill } from '../WorkerStatePill'
+import { WorkerLogsTab } from './WorkerLogsTab'
+import { WorkerOverviewTab } from './WorkerOverviewTab'
+import { AlertError } from '@/components/ui/AlertError'
+import type { WorkerLogStream } from '@/data/workers/worker-logs-query'
+import { workerQueryOptions } from '@/data/workers/worker-query'
+import { PRODUCT_NAME } from '@/lib/constants/workers'
+
+type WorkerTab = 'overview' | 'invocations' | 'logs' | 'activity'
+const WORKER_TABS: WorkerTab[] = ['overview', 'invocations', 'logs', 'activity']
+
+const TAB_LABEL: Record<WorkerTab, string> = {
+  overview: 'Overview',
+  invocations: 'Invocations',
+  logs: 'Logs',
+  activity: 'Activity',
+}
+
+const TAB_STREAM: Partial<Record<WorkerTab, WorkerLogStream>> = {
+  invocations: 'requests',
+  logs: 'output',
+  activity: 'builds',
+}
+
+export const WorkerDetail = () => {
+  const { ref: projectRef, name: workerName } = useParams()
+
+  const [tab, setTab] = useQueryState(
+    'tab',
+    parseAsStringEnum<WorkerTab>(WORKER_TABS)
+      .withDefault('overview')
+      .withOptions({ history: 'push' })
+  )
+
+  const {
+    data: worker,
+    error,
+    isPending,
+    isError,
+  } = useQuery(workerQueryOptions({ projectRef, name: workerName }))
+
+  if (!projectRef) return null
+  if (isPending) return <GenericSkeletonLoader className="p-6" />
+  if (isError) return <AlertError error={error} subject="Failed to retrieve worker" />
+
+  if (!worker) {
+    return (
+      <div className="flex flex-1 flex-col items-center justify-center gap-3 py-24 text-center">
+        <p className="text-sm text-foreground-light">
+          Worker "{workerName}" does not exist in this project
+        </p>
+        <Button asChild variant="default">
+          <Link href={`/project/${projectRef}/workers`}>Back to {PRODUCT_NAME}</Link>
+        </Button>
+      </div>
+    )
+  }
+
+  const stream = TAB_STREAM[tab]
+
+  return (
+    <div className="w-full min-h-full flex flex-col items-stretch">
+      <PageBreadcrumbs>
+        <BreadcrumbList>
+          <BreadcrumbItem>
+            <BreadcrumbLink asChild>
+              <Link href={`/project/${projectRef}/workers`}>{PRODUCT_NAME}</Link>
+            </BreadcrumbLink>
+          </BreadcrumbItem>
+          <BreadcrumbSeparator />
+          <BreadcrumbItem>
+            <BreadcrumbPage>{worker.name}</BreadcrumbPage>
+          </BreadcrumbItem>
+        </BreadcrumbList>
+      </PageBreadcrumbs>
+
+      <PageHeader className="py-4 [&>div]:px-4 [&>div]:xl:px-4">
+        <PageHeaderMeta className="px-0 xl:px-0">
+          <PageHeaderIcon>
+            <Card className="flex h-14 w-14 shrink-0 items-center justify-center">
+              <Container className="h-5 w-5" />
+            </Card>
+          </PageHeaderIcon>
+          <PageHeaderSummary>
+            <PageHeaderTitle>{worker.name}</PageHeaderTitle>
+            <PageHeaderDescription className="flex flex-row flex-wrap items-center gap-x-4 gap-y-1 text-sm">
+              <WorkerStatePill worker={worker} />
+              <RuntimeBadge runtime={worker.runtime} />
+              {worker.imageVersion !== undefined && (
+                <span className="flex items-center gap-2 text-foreground-light">
+                  <Package size={14} strokeWidth={1.5} className="text-foreground-lighter" />
+                  Image {worker.imageVersion}
+                </span>
+              )}
+            </PageHeaderDescription>
+          </PageHeaderSummary>
+        </PageHeaderMeta>
+      </PageHeader>
+      <PageNav>
+        <NavMenu>
+          {WORKER_TABS.map((item) => (
+            <NavMenuItem key={item} active={tab === item}>
+              <button type="button" tabIndex={0} onClick={() => setTab(item)}>
+                {TAB_LABEL[item]}
+              </button>
+            </NavMenuItem>
+          ))}
+        </NavMenu>
+      </PageNav>
+
+      {tab === 'overview' && <WorkerOverviewTab worker={worker} />}
+      {stream !== undefined && (
+        <div className="flex flex-1 flex-col min-h-0">
+          <WorkerLogsTab key={stream} workerName={worker.name} stream={stream} />
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/apps/studio/components/interfaces/Workers/WorkerDetail/WorkerLogsTab.tsx b/apps/studio/components/interfaces/Workers/WorkerDetail/WorkerLogsTab.tsx
new file mode 100644
index 0000000000000..1056bd7295bb5
--- /dev/null
+++ b/apps/studio/components/interfaces/Workers/WorkerDetail/WorkerLogsTab.tsx
@@ -0,0 +1,92 @@
+import { useQuery } from '@tanstack/react-query'
+import { useParams } from 'common'
+import { RefreshCw } from 'lucide-react'
+import { useState } from 'react'
+import { Button } from 'ui'
+import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
+
+import { WorkerCommandLine } from '../WorkerCommandLine'
+import { WorkersLogsColumnRender } from '@/components/interfaces/Settings/Logs/LogColumnRenderers/WorkersLogsColumnRender'
+import type { LogData } from '@/components/interfaces/Settings/Logs/Logs.types'
+import { LogTable } from '@/components/interfaces/Settings/Logs/LogTable'
+import { AlertError } from '@/components/ui/AlertError'
+import {
+  WORKER_LOG_STREAM_LABEL,
+  workerLogsQueryOptions,
+  type WorkerLogStream,
+} from '@/data/workers/worker-logs-query'
+import { CLI_NAME } from '@/lib/constants/workers'
+
+interface WorkerLogsTabProps {
+  workerName: string
+  stream: WorkerLogStream
+}
+
+export const WorkerLogsTab = ({ workerName, stream }: WorkerLogsTabProps) => {
+  const { ref: projectRef } = useParams()
+  const [selectedLog, setSelectedLog] = useState<LogData | null>(null)
+
+  const {
+    data: logs,
+    error,
+    isPending,
+    isError,
+    isFetching,
+    refetch,
+  } = useQuery(workerLogsQueryOptions({ projectRef, name: workerName, stream }))
+
+  const label = WORKER_LOG_STREAM_LABEL[stream].toLowerCase()
+
+  return (
+    <div className="flex flex-1 flex-col min-h-0">
+      <div className="flex items-center justify-end border-b border-default px-4 py-2">
+        <Button
+          variant="default"
+          icon={<RefreshCw />}
+          loading={isFetching}
+          onClick={() => refetch()}
+        >
+          Refresh
+        </Button>
+      </div>
+
+      {isError && (
+        <div className="p-4">
+          <AlertError error={error} subject="Failed to retrieve worker logs" />
+        </div>
+      )}
+
+      {!isError && isPending && (
+        <div className="p-4">
+          <GenericSkeletonLoader />
+        </div>
+      )}
+
+      {!isError && !isPending && (
+        <div className="relative flex flex-1 flex-col grow overflow-auto">
+          <LogTable
+            projectRef={projectRef ?? ''}
+            columnRenderers={WorkersLogsColumnRender}
+            data={logs ?? []}
+            isLoading={isPending}
+            showHeader={false}
+            showHistogramToggle={false}
+            selectedLog={selectedLog ?? undefined}
+            onSelectedLogChange={(log) => setSelectedLog(log)}
+            EmptyState={
+              <div className="mx-auto max-w-md space-y-3 py-16 text-center">
+                <p className="text-sm text-foreground">No {label} in the last 24 hours</p>
+                <p className="text-sm text-foreground-lighter">
+                  Follow them from the Supabase CLI while you wait for traffic.
+                </p>
+                <div className="pt-1 text-left">
+                  <WorkerCommandLine command={`supabase ${CLI_NAME} logs ${workerName} --follow`} />
+                </div>
+              </div>
+            }
+          />
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/apps/studio/components/interfaces/Workers/WorkerDetail/WorkerOverviewTab.tsx b/apps/studio/components/interfaces/Workers/WorkerDetail/WorkerOverviewTab.tsx
new file mode 100644
index 0000000000000..39ee28eb50900
--- /dev/null
+++ b/apps/studio/components/interfaces/Workers/WorkerDetail/WorkerOverviewTab.tsx
@@ -0,0 +1,260 @@
+import { ReactNode } from 'react'
+import { Badge } from 'ui'
+import { Admonition } from 'ui-patterns/Admonition'
+import { InfoTooltip } from 'ui-patterns/info-tooltip'
+import { PageContainer } from 'ui-patterns/PageContainer'
+import {
+  PageSection,
+  PageSectionContent,
+  PageSectionDescription,
+  PageSectionMeta,
+  PageSectionSummary,
+  PageSectionTitle,
+} from 'ui-patterns/PageSection'
+
+import { RuntimeBadge } from '../RuntimeBadge'
+import { WorkerCommandLine } from '../WorkerCommandLine'
+import { LISTENING_PORT, WORKERS_REGION_LABEL } from '../Workers.constants'
+import type { Worker } from '../Workers.types'
+import { formatSize, getRuntimeMeta } from '../Workers.utils'
+import { buildWorkerCliCommands } from '../workerSnippets'
+import { WorkerSnippetTabs } from '../WorkerSnippetTabs'
+import { CLI_NAME } from '@/lib/constants/workers'
+
+interface WorkerOverviewTabProps {
+  worker: Worker
+}
+
+const InstanceCount = ({
+  label,
+  value,
+  tooltip,
+}: {
+  label: string
+  value: number
+  tooltip: ReactNode
+}) => (
+  <div className="flex flex-col gap-1 px-5 py-4">
+    <span className="flex items-center gap-1.5 text-sm text-foreground-light">
+      {label}
+      <InfoTooltip side="top" className="max-w-56">
+        {tooltip}
+      </InfoTooltip>
+    </span>
+    <span className="text-2xl tabular-nums text-foreground">{value}</span>
+  </div>
+)
+
+const SettingsRow = ({
+  label,
+  children,
+  isFirst,
+}: {
+  label: string
+  children: ReactNode
+  isFirst?: boolean
+}) => (
+  <div
+    className={`flex items-center justify-between px-4 py-3 ${
+      isFirst ? '' : 'border-t border-default'
+    }`}
+  >
+    <span className="text-sm text-foreground-light">{label}</span>
+    <span className="text-sm text-foreground">{children}</span>
+  </div>
+)
+
+export const WorkerOverviewTab = ({ worker }: WorkerOverviewTabProps) => {
+  const runtime = getRuntimeMeta(worker.runtime)
+  const commands = buildWorkerCliCommands(worker.name)
+
+  return (
+    <PageContainer size="small">
+      {worker.buildState === 'failed' && (
+        <PageSection>
+          <PageSectionContent>
+            <Admonition type="destructive" title="This worker failed to build">
+              <div className="space-y-3">
+                <p>{worker.stateReason ?? 'The build did not complete.'}</p>
+                <WorkerCommandLine
+                  comment="Redeploy after fixing the build"
+                  command={`supabase ${CLI_NAME} push ${worker.name}`}
+                />
+              </div>
+            </Admonition>
+          </PageSectionContent>
+        </PageSection>
+      )}
+
+      {worker.instancesError !== undefined && (
+        <PageSection>
+          <PageSectionContent>
+            <Admonition type="warning" title="Instances reported an error">
+              {worker.instancesError}
+            </Admonition>
+          </PageSectionContent>
+        </PageSection>
+      )}
+
+      <PageSection>
+        <PageSectionMeta>
+          <PageSectionSummary>
+            <PageSectionTitle>Instances</PageSectionTitle>
+          </PageSectionSummary>
+        </PageSectionMeta>
+        <PageSectionContent>
+          {worker.instances === undefined ? (
+            <p className="text-sm text-foreground-light">
+              No instances are running for this worker yet.
+            </p>
+          ) : (
+            <div className="space-y-3">
+              <p className="text-sm text-foreground-light">
+                <span className="tabular-nums text-foreground">{worker.instances.ready}</span> of{' '}
+                <span className="tabular-nums text-foreground">{worker.instances.declared}</span>{' '}
+                instances ready
+              </p>
+              <div className="grid grid-cols-2 divide-x divide-y rounded-md border border-default bg-surface-100 sm:grid-cols-4 sm:divide-y-0">
+                <InstanceCount
+                  label="Instances"
+                  value={worker.instances.declared}
+                  tooltip="The number of instances you configured for this worker."
+                />
+                <InstanceCount
+                  label="Live"
+                  value={worker.instances.live}
+                  tooltip="Instances currently running."
+                />
+                <InstanceCount
+                  label="Ready"
+                  value={worker.instances.ready}
+                  tooltip="Instances passing health checks and serving requests."
+                />
+                <InstanceCount
+                  label="Stale"
+                  value={worker.instances.stale}
+                  tooltip="Instances from a previous deployment, being replaced."
+                />
+              </div>
+            </div>
+          )}
+        </PageSectionContent>
+      </PageSection>
+
+      <PageSection>
+        <PageSectionMeta>
+          <PageSectionSummary>
+            <PageSectionTitle>Container</PageSectionTitle>
+            <PageSectionDescription>
+              The runtime image and entrypoint resolved for this worker.
+            </PageSectionDescription>
+          </PageSectionSummary>
+        </PageSectionMeta>
+        <PageSectionContent>
+          <div className="rounded-md border border-default bg-surface-100">
+            <SettingsRow label="Runtime" isFirst>
+              <RuntimeBadge runtime={worker.runtime} />
+            </SettingsRow>
+            {worker.imageVersion !== undefined && (
+              <SettingsRow label="Image version">
+                <span className="font-mono text-xs text-foreground-light">
+                  {worker.imageVersion}
+                </span>
+              </SettingsRow>
+            )}
+            {runtime !== undefined && (
+              <SettingsRow label="Base image">
+                <span className="font-mono text-xs text-foreground-light">{runtime.baseImage}</span>
+              </SettingsRow>
+            )}
+            {runtime !== undefined && (
+              <SettingsRow label="Entrypoint">
+                <span className="font-mono text-xs text-foreground-light">
+                  {runtime.entrypoint}
+                </span>
+              </SettingsRow>
+            )}
+            <SettingsRow label="Listening port">
+              <span className="font-mono text-xs text-foreground-light">
+                $PORT → {LISTENING_PORT}
+              </span>
+            </SettingsRow>
+          </div>
+        </PageSectionContent>
+      </PageSection>
+
+      <PageSection>
+        <PageSectionMeta>
+          <PageSectionSummary>
+            <PageSectionTitle>Resources</PageSectionTitle>
+          </PageSectionSummary>
+        </PageSectionMeta>
+        <PageSectionContent>
+          <div className="rounded-md border border-default bg-surface-100">
+            <SettingsRow label="Size" isFirst>
+              {formatSize(worker.size)}
+            </SettingsRow>
+            <SettingsRow label="Instances">{worker.declaredInstances}</SettingsRow>
+            <SettingsRow label="Access">
+              {worker.access === 'public' ? (
+                <Badge variant="success">Public</Badge>
+              ) : (
+                <Badge>Private</Badge>
+              )}
+            </SettingsRow>
+            <SettingsRow label="Region">
+              <span className="text-foreground-light">
+                {WORKERS_REGION_LABEL} <span className="text-foreground-lighter">(locked)</span>
+              </span>
+            </SettingsRow>
+          </div>
+        </PageSectionContent>
+      </PageSection>
+
+      <PageSection>
+        <PageSectionMeta>
+          <PageSectionSummary>
+            <PageSectionTitle>How to call</PageSectionTitle>
+            <PageSectionDescription>
+              Call the worker over its gateway URL. Pass your project API key as a bearer token.
+            </PageSectionDescription>
+          </PageSectionSummary>
+        </PageSectionMeta>
+        <PageSectionContent>
+          <WorkerSnippetTabs
+            input={{
+              name: worker.name,
+              runtime: worker.runtime,
+              size: worker.size,
+              access: worker.access,
+              instances: worker.declaredInstances,
+            }}
+            tabs={['cli', 'js', 'python']}
+          />
+        </PageSectionContent>
+      </PageSection>
+
+      <PageSection>
+        <PageSectionMeta>
+          <PageSectionSummary>
+            <PageSectionTitle>Develop locally</PageSectionTitle>
+            <PageSectionDescription>
+              Manage this worker from the Supabase CLI.
+            </PageSectionDescription>
+          </PageSectionSummary>
+        </PageSectionMeta>
+        <PageSectionContent>
+          <div className="space-y-4 rounded-md border border-default bg-surface-100 p-4">
+            {commands.map((command) => (
+              <WorkerCommandLine
+                key={command.command}
+                comment={command.comment}
+                command={command.command}
+              />
+            ))}
+          </div>
+        </PageSectionContent>
+      </PageSection>
+    </PageContainer>
+  )
+}
diff --git a/apps/studio/components/interfaces/Workers/workerSnippets.ts b/apps/studio/components/interfaces/Workers/workerSnippets.ts
index 02499a1fcb0c3..de89c173050a4 100644
--- a/apps/studio/components/interfaces/Workers/workerSnippets.ts
+++ b/apps/studio/components/interfaces/Workers/workerSnippets.ts
@@ -114,7 +114,6 @@ export function buildWorkerCliCommands(name: string): WorkerCliCommand[] {
   const slug = safeName(name)
   return [
     { comment: 'Recreate the source locally', command: `supabase ${CLI_NAME} pull ${slug}` },
-    { comment: 'Run it locally on a port', command: `supabase ${CLI_NAME} serve ${slug}` },
     { comment: 'Deploy a new version', command: `supabase ${CLI_NAME} push ${slug}` },
     { comment: 'Stream logs', command: `supabase ${CLI_NAME} logs ${slug} --follow` },
     { comment: 'Delete the worker', command: `supabase ${CLI_NAME} delete ${slug}` },
diff --git a/apps/studio/data/workers/keys.ts b/apps/studio/data/workers/keys.ts
index 2feecbc64311d..9eedc104d21fd 100644
--- a/apps/studio/data/workers/keys.ts
+++ b/apps/studio/data/workers/keys.ts
@@ -2,4 +2,6 @@ export const workersKeys = {
   list: (projectRef: string | undefined) => ['projects', projectRef, 'workers'] as const,
   detail: (projectRef: string | undefined, name: string | undefined) =>
     ['projects', projectRef, 'worker', name, 'detail'] as const,
+  logs: (projectRef: string | undefined, name: string | undefined, stream: string) =>
+    ['projects', projectRef, 'worker', name, 'logs', stream] as const,
 }
diff --git a/apps/studio/data/workers/worker-logs-query.test.ts b/apps/studio/data/workers/worker-logs-query.test.ts
new file mode 100644
index 0000000000000..2c909f8459d26
--- /dev/null
+++ b/apps/studio/data/workers/worker-logs-query.test.ts
@@ -0,0 +1,51 @@
+import { describe, expect, it } from 'vitest'
+
+import { parseWorkerLogRows, workerLogsSql } from './worker-logs-query'
+
+describe('workerLogsSql', () => {
+  it('reads one worker stream, newest first', () => {
+    expect(workerLogsSql('embed', 'output')).toBe(
+      "select id, timestamp, severity_text as severity, event_message as message from logs where log_attributes['worker'] = 'embed' and log_attributes['source'] = 'worker_guest_logs' order by timestamp desc limit 100"
+    )
+  })
+
+  it('names the right stream for each tab', () => {
+    expect(workerLogsSql('embed', 'requests')).toContain("'worker_ingress_logs'")
+    expect(workerLogsSql('embed', 'builds')).toContain("'worker_api_logs'")
+  })
+
+  it('escapes a worker name rather than interpolating it raw', () => {
+    expect(workerLogsSql("embed' or '1'='1", 'output')).toContain(
+      "log_attributes['worker'] = 'embed'' or ''1''=''1'"
+    )
+  })
+})
+
+describe('parseWorkerLogRows', () => {
+  it('shapes rows for the logs table with a numeric timestamp', () => {
+    const [row] = parseWorkerLogRows([
+      { id: 'a', timestamp: '2026-08-24T10:00:00.000000', severity: 'ERROR', message: 'boom' },
+    ])
+    expect(row.id).toBe('a')
+    expect(row.event_message).toBe('boom')
+    expect(row.severity_text).toBe('ERROR')
+    expect(typeof row.timestamp).toBe('number')
+    expect(Number.isFinite(row.timestamp)).toBe(true)
+  })
+
+  it('falls back to empty strings for null severity and message', () => {
+    const [row] = parseWorkerLogRows([
+      { id: 'a', timestamp: '2026-08-24T10:00:00.000000', severity: null, message: null },
+    ])
+    expect(row.severity_text).toBe('')
+    expect(row.event_message).toBe('')
+  })
+
+  it('returns an empty array for a missing result', () => {
+    expect(parseWorkerLogRows(undefined)).toEqual([])
+  })
+
+  it('rejects a malformed row rather than passing bad data to the table', () => {
+    expect(() => parseWorkerLogRows([{ timestamp: '2026-08-24T10:00:00.000000' }])).toThrow()
+  })
+})
diff --git a/apps/studio/data/workers/worker-logs-query.ts b/apps/studio/data/workers/worker-logs-query.ts
new file mode 100644
index 0000000000000..eb68cd8968ca9
--- /dev/null
+++ b/apps/studio/data/workers/worker-logs-query.ts
@@ -0,0 +1,89 @@
+import { queryOptions } from '@tanstack/react-query'
+import dayjs from 'dayjs'
+import { z } from 'zod'
+
+import { workersKeys } from './keys'
+import type { LogData } from '@/components/interfaces/Settings/Logs/Logs.types'
+import { otelTimestampToMicros } from '@/components/interfaces/Settings/Logs/Logs.utils.otel'
+import { executeAnalyticsSql } from '@/data/logs/execute-analytics-sql'
+import { logsAllEndpointUrl } from '@/data/logs/logs-endpoint'
+import { analyticsLiteral, safeSql } from '@/data/logs/safe-analytics-sql'
+import { IS_PLATFORM } from '@/lib/constants'
+
+export const WORKER_LOG_SOURCES = {
+  requests: 'worker_ingress_logs',
+  output: 'worker_guest_logs',
+  builds: 'worker_api_logs',
+} as const
+
+export type WorkerLogStream = keyof typeof WORKER_LOG_SOURCES
+
+export const WORKER_LOG_STREAM_LABEL: Record<WorkerLogStream, string> = {
+  requests: 'Invocations',
+  output: 'Logs',
+  builds: 'Activity',
+}
+
+// Both are read from `log_attributes` rather than the endpoint's own `source` column:
+// that column is derived from a mapping which does not currently classify worker rows.
+const WORKER_NAME_KEY = 'worker'
+const STREAM_KEY = 'source'
+
+const LOOKBACK_HOURS = 24
+const LOG_LIMIT = 100
+
+const workerLogRowSchema = z.object({
+  id: z.string(),
+  timestamp: z.union([z.string(), z.number()]),
+  severity: z.string().nullish(),
+  message: z.string().nullish(),
+})
+
+export type WorkerLogsVariables = {
+  projectRef?: string
+  name?: string
+  stream: WorkerLogStream
+}
+
+export const workerLogsSql = (name: string, stream: WorkerLogStream) =>
+  safeSql`select id, timestamp, severity_text as severity, event_message as message from logs where log_attributes[${analyticsLiteral(WORKER_NAME_KEY)}] = ${analyticsLiteral(name)} and log_attributes[${analyticsLiteral(STREAM_KEY)}] = ${analyticsLiteral(WORKER_LOG_SOURCES[stream])} order by timestamp desc limit ${analyticsLiteral(LOG_LIMIT)}`
+
+export const parseWorkerLogRows = (result: unknown): LogData[] =>
+  z
+    .array(workerLogRowSchema)
+    .parse(result ?? [])
+    .map((row) => ({
+      id: row.id,
+      timestamp: otelTimestampToMicros(row.timestamp),
+      event_message: row.message ?? '',
+      severity_text: row.severity ?? '',
+    }))
+
+async function getWorkerLogs(
+  { projectRef, name, stream }: WorkerLogsVariables,
+  signal?: AbortSignal
+): Promise<LogData[]> {
+  if (!projectRef) throw new Error('projectRef is required')
+  if (!name) throw new Error('name is required')
+
+  const end = dayjs()
+  const start = end.subtract(LOOKBACK_HOURS, 'hour')
+
+  const data = await executeAnalyticsSql({
+    projectRef,
+    endpoint: logsAllEndpointUrl(true),
+    sql: workerLogsSql(name, stream),
+    iso_timestamp_start: start.toISOString(),
+    iso_timestamp_end: end.toISOString(),
+    signal,
+  })
+
+  return parseWorkerLogRows(data?.result)
+}
+
+export const workerLogsQueryOptions = ({ projectRef, name, stream }: WorkerLogsVariables) =>
+  queryOptions({
+    queryKey: workersKeys.logs(projectRef, name, stream),
+    queryFn: ({ signal }) => getWorkerLogs({ projectRef, name, stream }, signal),
+    enabled: IS_PLATFORM && typeof projectRef !== 'undefined' && typeof name !== 'undefined',
+  })
diff --git a/apps/studio/lib/constants/workers.ts b/apps/studio/lib/constants/workers.ts
index 02e9fa1b0e1d2..887f13c712af3 100644
--- a/apps/studio/lib/constants/workers.ts
+++ b/apps/studio/lib/constants/workers.ts
@@ -1,47 +1,2 @@
 export const PRODUCT_NAME = 'Workers'
 export const CLI_NAME = 'workers'
-
-export const WORKERS_CLI_DEPLOY = `supabase ${CLI_NAME} push`
-
-export const WORKERS_SKILL_MARKDOWN = `# Supabase ${PRODUCT_NAME} — agent skill
-
-Deploy and manage backend workers (microVMs) that run next to a Supabase project's Postgres.
-
-## Deploy from config.toml
-
-Add a block to \`supabase/config.toml\`:
-
-\`\`\`toml
-[${CLI_NAME}.embed]
-runtime   = "python"   # node | deno | bun | python | dockerfile
-size      = "2gb-1vcpu"   # 2gb-1vcpu | 4gb-2vcpu — fixed at deploy
-access    = "public"   # public | private
-instances = 1          # 1..10 per deploy; 100 cap per project
-secrets   = ["OPENAI_API_KEY"]   # names only — values live in the Secrets API
-\`\`\`
-
-Then run:
-
-\`\`\`bash
-supabase ${CLI_NAME} new embed --runtime python
-supabase ${CLI_NAME} push embed
-\`\`\`
-
-Config precedence: \`--flag\` > \`config.toml\` > interactive prompt > default.
-
-## Conventions
-
-- Workers under \`supabase/${CLI_NAME}/<name>/\` are auto-discovered; the folder name is the slug.
-- \`entrypoint\` is inferred from the runtime (node index.js, deno run main.ts, python main.py, Dockerfile CMD).
-- \`region\` is locked to us-west-2 at alpha — do not set it.
-- Sizes are fixed at deploy time. To change size, delete the worker and redeploy.
-
-## Manage
-
-- \`supabase ${CLI_NAME} list\`
-- \`supabase ${CLI_NAME} status <name>\`
-- \`supabase ${CLI_NAME} logs <name> --follow\`
-- \`supabase ${CLI_NAME} stop <name>\`   # scale to zero (reversible)
-- \`supabase ${CLI_NAME} start <name>\`
-- \`supabase ${CLI_NAME} delete <name>\`
-`
diff --git a/apps/studio/pages/project/[ref]/workers/[name].tsx b/apps/studio/pages/project/[ref]/workers/[name].tsx
new file mode 100644
index 0000000000000..bb3eaf1f23044
--- /dev/null
+++ b/apps/studio/pages/project/[ref]/workers/[name].tsx
@@ -0,0 +1,14 @@
+import { WorkerDetail } from '@/components/interfaces/Workers/WorkerDetail/WorkerDetail'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
+import { WorkersLayout } from '@/components/layouts/WorkersLayout/WorkersLayout'
+import type { NextPageWithLayout } from '@/types'
+
+const WorkerDetailPage: NextPageWithLayout = () => <WorkerDetail />
+
+WorkerDetailPage.getLayout = (page) => (
+  <DefaultLayout>
+    <WorkersLayout title="Worker">{page}</WorkersLayout>
+  </DefaultLayout>
+)
+
+export default WorkerDetailPage
diff --git a/apps/studio/routeTree.gen.ts b/apps/studio/routeTree.gen.ts
index 350cfbc6ccde0..7be3871d460d3 100644
--- a/apps/studio/routeTree.gen.ts
+++ b/apps/studio/routeTree.gen.ts
@@ -100,6 +100,7 @@ import { Route as ApiPlatformProfileIndexRouteImport } from './routes/api/platfo
 import { Route as ApiPlatformOrganizationsIndexRouteImport } from './routes/api/platform/organizations/index'
 import { Route as AppOrgSlugIndexRouteImport } from './routes/_app/org/$slug/index'
 import { Route as AppAccountTokensIndexRouteImport } from './routes/_app/account/tokens/index'
+import { Route as ProjectRefWorkersNameRouteImport } from './routes/project/$ref/workers/$name'
 import { Route as ProjectRefStorageS3RouteImport } from './routes/project/$ref/storage/s3'
 import { Route as ProjectRefSqlTemplatesRouteImport } from './routes/project/$ref/sql/templates'
 import { Route as ProjectRefSqlExamplesRouteImport } from './routes/project/$ref/sql/examples'
@@ -793,6 +794,11 @@ const AppAccountTokensIndexRoute = AppAccountTokensIndexRouteImport.update({
   path: '/tokens/',
   getParentRoute: () => AppAccountRoute,
 } as any)
+const ProjectRefWorkersNameRoute = ProjectRefWorkersNameRouteImport.update({
+  id: '/$name',
+  path: '/$name',
+  getParentRoute: () => ProjectRefWorkersRoute,
+} as any)
 const ProjectRefStorageS3Route = ProjectRefStorageS3RouteImport.update({
   id: '/s3',
   path: '/s3',
@@ -2270,6 +2276,7 @@ export interface FileRoutesByFullPath {
   '/project/$ref/sql/examples': typeof ProjectRefSqlExamplesRoute
   '/project/$ref/sql/templates': typeof ProjectRefSqlTemplatesRoute
   '/project/$ref/storage/s3': typeof ProjectRefStorageS3Route
+  '/project/$ref/workers/$name': typeof ProjectRefWorkersNameRoute
   '/account/tokens/': typeof AppAccountTokensIndexRoute
   '/org/$slug/': typeof AppOrgSlugIndexRoute
   '/api/platform/organizations/': typeof ApiPlatformOrganizationsIndexRoute
@@ -2572,6 +2579,7 @@ export interface FileRoutesByTo {
   '/project/$ref/sql/examples': typeof ProjectRefSqlExamplesRoute
   '/project/$ref/sql/templates': typeof ProjectRefSqlTemplatesRoute
   '/project/$ref/storage/s3': typeof ProjectRefStorageS3Route
+  '/project/$ref/workers/$name': typeof ProjectRefWorkersNameRoute
   '/account/tokens': typeof AppAccountTokensIndexRoute
   '/org/$slug': typeof AppOrgSlugIndexRoute
   '/api/platform/organizations': typeof ApiPlatformOrganizationsIndexRoute
@@ -2891,6 +2899,7 @@ export interface FileRoutesById {
   '/project/$ref/sql/examples': typeof ProjectRefSqlExamplesRoute
   '/project/$ref/sql/templates': typeof ProjectRefSqlTemplatesRoute
   '/project/$ref/storage/s3': typeof ProjectRefStorageS3Route
+  '/project/$ref/workers/$name': typeof ProjectRefWorkersNameRoute
   '/_app/account/tokens/': typeof AppAccountTokensIndexRoute
   '/_app/org/$slug/': typeof AppOrgSlugIndexRoute
   '/api/platform/organizations/': typeof ApiPlatformOrganizationsIndexRoute
@@ -3209,6 +3218,7 @@ export interface FileRouteTypes {
     | '/project/$ref/sql/examples'
     | '/project/$ref/sql/templates'
     | '/project/$ref/storage/s3'
+    | '/project/$ref/workers/$name'
     | '/account/tokens/'
     | '/org/$slug/'
     | '/api/platform/organizations/'
@@ -3511,6 +3521,7 @@ export interface FileRouteTypes {
     | '/project/$ref/sql/examples'
     | '/project/$ref/sql/templates'
     | '/project/$ref/storage/s3'
+    | '/project/$ref/workers/$name'
     | '/account/tokens'
     | '/org/$slug'
     | '/api/platform/organizations'
@@ -3829,6 +3840,7 @@ export interface FileRouteTypes {
     | '/project/$ref/sql/examples'
     | '/project/$ref/sql/templates'
     | '/project/$ref/storage/s3'
+    | '/project/$ref/workers/$name'
     | '/_app/account/tokens/'
     | '/_app/org/$slug/'
     | '/api/platform/organizations/'
@@ -4732,6 +4744,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AppAccountTokensIndexRouteImport
       parentRoute: typeof AppAccountRoute
     }
+    '/project/$ref/workers/$name': {
+      id: '/project/$ref/workers/$name'
+      path: '/$name'
+      fullPath: '/project/$ref/workers/$name'
+      preLoaderRoute: typeof ProjectRefWorkersNameRouteImport
+      parentRoute: typeof ProjectRefWorkersRoute
+    }
     '/project/$ref/storage/s3': {
       id: '/project/$ref/storage/s3'
       path: '/s3'
@@ -6928,10 +6947,12 @@ const ProjectRefStorageRouteWithChildren =
   ProjectRefStorageRoute._addFileChildren(ProjectRefStorageRouteChildren)
 
 interface ProjectRefWorkersRouteChildren {
+  ProjectRefWorkersNameRoute: typeof ProjectRefWorkersNameRoute
   ProjectRefWorkersIndexRoute: typeof ProjectRefWorkersIndexRoute
 }
 
 const ProjectRefWorkersRouteChildren: ProjectRefWorkersRouteChildren = {
+  ProjectRefWorkersNameRoute: ProjectRefWorkersNameRoute,
   ProjectRefWorkersIndexRoute: ProjectRefWorkersIndexRoute,
 }
 
diff --git a/apps/studio/routes/project/$ref/workers/$name.tsx b/apps/studio/routes/project/$ref/workers/$name.tsx
new file mode 100644
index 0000000000000..a8c23bb553f88
--- /dev/null
+++ b/apps/studio/routes/project/$ref/workers/$name.tsx
@@ -0,0 +1,14 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+import WorkerDetailPage from '@/pages/project/[ref]/workers/[name]'
+
+export const Route = createFileRoute('/project/$ref/workers/$name')({
+  component: WorkerDetailRoute,
+  staticData: {
+    workersLayoutTitle: 'Worker',
+  },
+})
+
+function WorkerDetailRoute() {
+  return <WorkerDetailPage dehydratedState={undefined} />
+}

From 59c8ea3ddc57f94eea0d9e6d2f42ca1907e5d95e Mon Sep 17 00:00:00 2001
From: Han Qiao <sweatybridge@gmail.com>
Date: Fri, 28 Aug 2026 17:35:24 +0800
Subject: [PATCH 7/8] docs(BRA-282): clarify that branches are created as
 clones of the base project (#49594)

## What kind of change does this PR introduce?

Docs update.


## What is the new behavior?

The branching docs now state consistently that every branch, preview or
persistent, is created as a clone of the base project, starting with
that project's schema, Edge Functions, and configuration. Data and
storage objects are not cloned by default.

## Additional context

This documents new branch-creation behavior. Two automated reviewers
flagged the clone wording and argued for a migration-replay description;
that reflects the previous implementation, so their findings don't apply
here and the clone framing stands.

---------

Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: Jeremias Menichelli <jmenichelli@gmail.com>
---
 .../content/guides/deployment/branching.mdx    |  3 ++-
 .../guides/deployment/branching/dashboard.mdx  | 18 ++++++++++++++++++
 .../branching/github-integration.mdx           | 10 ++++++++--
 .../deployment/branching/troubleshooting.mdx   |  4 +++-
 .../branching/working-with-branches.mdx        |  6 ++++--
 5 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/apps/docs/content/guides/deployment/branching.mdx b/apps/docs/content/guides/deployment/branching.mdx
index 23342dd4c89c8..d4f3ed3ca116a 100644
--- a/apps/docs/content/guides/deployment/branching.mdx
+++ b/apps/docs/content/guides/deployment/branching.mdx
@@ -15,7 +15,8 @@ Supabase branches create separate environments that spin off from your main proj
 - **Preview Branches**: Preview branches are ephemeral and best suited for focused testing. They are automatically deleted when a PR is merged or closed.
 - **Persistent Branches**: Persistent branches are long-lived and recommended for environments like staging, QA, or development. They aren't automatically paused or deleted due to inactivity or when a PR is merged or closed.
 - **Managing Branches**: You can create, review, and merge branches either automatically via our [GitHub integration](/docs/guides/deployment/branching/github-integration) or directly [through the dashboard](/docs/guides/deployment/branching/dashboard) (currently in beta). All branches show up in the branches page in the dashboard, regardless of how they were created.
-- **Data-less**: New branches do not start with any data from your main project. This is meant to better protect your sensitive production data. To start your branches with data, you can use a [seed file](/docs/guides/deployment/branching/github-integration#seeding) if using the GitHub integration.
+- **Cloned from your main project**: Each new branch is created as a clone of your main project. It starts with that project's Edge Functions deployed and the configuration set.
+- **Data-less by default**: By default, new branches do not start with any data or storage objects from your main project. This is meant to better protect your sensitive production data. To start your branches with data, you can use a [seed file](/docs/guides/deployment/branching/github-integration#seeding) if using the GitHub integration, or the [Include data](/docs/guides/deployment/branching/dashboard#include-production-data) option if you create the branch from the dashboard.
 
 ## Deploying to production
 
diff --git a/apps/docs/content/guides/deployment/branching/dashboard.mdx b/apps/docs/content/guides/deployment/branching/dashboard.mdx
index ad1ae7021c858..e10efb1c2cede 100644
--- a/apps/docs/content/guides/deployment/branching/dashboard.mdx
+++ b/apps/docs/content/guides/deployment/branching/dashboard.mdx
@@ -41,6 +41,24 @@ Once you've enabled the feature, you can create a new branch:
 1. Click the arrows next to the branch name in the top menu bar. (The top menu bar has the format `YOUR_ORGANIZATION / YOUR_PROJECT / CURRENT_BRANCH_NAME`.)
 2. Click `Create branch`.
 
+The new branch is a clone of your base project. It starts with the project's schema, Edge Functions, and the configuration set.
+
+### Include production data
+
+By default, a branch starts without any of your production data or storage objects. If your project has the Point-in-Time Recovery add-on, you can turn on **Include data** when you create the branch to copy your production data into it.
+
+<Admonition type="caution">
+
+A branch created with **Include data** holds a copy of your production data, treat it with the same care as production.
+
+</Admonition>
+
+<Admonition type="note">
+
+A branch uses a larger disk and matches the compute size of your project, which increases its cost.
+
+</Admonition>
+
 ## Making changes to a branch
 
 Use the branch selector in the top bar to change to your branch. Any changes you make (including SQL run in the SQL editor, table editor changes, and configuration changes) are now made against the currently selected branch.
diff --git a/apps/docs/content/guides/deployment/branching/github-integration.mdx b/apps/docs/content/guides/deployment/branching/github-integration.mdx
index c04cb14f4fe61..cb81e3bff7239 100644
--- a/apps/docs/content/guides/deployment/branching/github-integration.mdx
+++ b/apps/docs/content/guides/deployment/branching/github-integration.mdx
@@ -83,19 +83,25 @@ Enable the **Automatic branching** option in your GitHub Integration configurati
 
 When a new branch is created in GitHub, a corresponding branch is created in Supabase. (You can enable the **Supabase changes only** option to only create Supabase branches when Supabase files change.)
 
+Every Supabase branch, preview or persistent, is created as a clone of your base project. The new branch starts with the Edge Functions and configuration of that project. Its database schema is not cloned. Instead, it is built from the migrations you commit to your repository.
+
 ### Configuration
 
 You can test configuration changes on your Preview Branch by configuring the `config.toml` file in your Supabase directory. See the [Configuration docs](/docs/guides/deployment/branching/configuration) for more information.
 
+Your branch starts with the configuration of your base project. The settings in your `config.toml` file are applied on top of that clone.
+
 A comment is added to your PR with the deployment status of your preview branch.
 
 ### Migrations
 
-The migrations in the `migrations` subdirectory of your Supabase directory are automatically run.
+The migrations in the `migrations` subdirectory of your Supabase directory are automatically run when the branch is created. Each later commit runs only the migrations that haven't been applied yet.
+
+If you want to rerun existing migrations, reset the branch from the Supabase dashboard to start from scratch. Note that existing data on your branch will also be dropped by a reset.
 
 ### Seeding
 
-No production data is copied to your Preview branch. This is meant to protect your sensitive production data.
+Cloning your base project copies its Edge Functions and configuration, but not its data or storage objects. This is meant to protect your sensitive production data. Your branch starts with the tables your migrations create, and the only rows in them are the ones your seed files add.
 
 You can seed your Preview Branch with sample data using the `seed.sql` file in your Supabase directory. See the [Seeding docs](/docs/guides/local-development/seeding-your-database) for more information.
 
diff --git a/apps/docs/content/guides/deployment/branching/troubleshooting.mdx b/apps/docs/content/guides/deployment/branching/troubleshooting.mdx
index 6e77b2c17683d..1fd9194c40c4f 100644
--- a/apps/docs/content/guides/deployment/branching/troubleshooting.mdx
+++ b/apps/docs/content/guides/deployment/branching/troubleshooting.mdx
@@ -27,7 +27,9 @@ You might want to roll back changes you've made in an earlier migration change.
 
 To fix this, push the latest changes, then delete the preview branch in Supabase and reopen it.
 
-The new preview branch is reseeded from the `./supabase/seed.sql` file by default. Any additional data changes made on the old preview branch are lost. This is equivalent to running `supabase db reset` locally. All migrations are rerun in sequential order.
+The new preview branch is a fresh clone of your base project and is reseeded from the `./supabase/seed.sql` file by default. Any additional data changes made on the old preview branch are lost.
+
+To rerun migrations that your base project has already applied, reset the branch from the Supabase dashboard instead. A reset reruns all migrations in sequential order and drops existing data on the branch.
 
 ### Deployment failures
 
diff --git a/apps/docs/content/guides/deployment/branching/working-with-branches.mdx b/apps/docs/content/guides/deployment/branching/working-with-branches.mdx
index ecdceb086583f..c007f17cf5fe7 100644
--- a/apps/docs/content/guides/deployment/branching/working-with-branches.mdx
+++ b/apps/docs/content/guides/deployment/branching/working-with-branches.mdx
@@ -181,7 +181,7 @@ After completing the steps above, you should receive a Slack message whenever an
 
 Migrations are run in sequential order. Each migration builds upon the previous one.
 
-The preview branch has a record of which migrations have been applied, and only applies new migrations for each commit. This can create an issue when rolling back migrations.
+The preview branch inherits the migration history of your base project, so it only applies migrations that haven't been run yet. This can create an issue when rolling back migrations.
 
 ### Using ORM or custom seed scripts
 
@@ -237,7 +237,9 @@ You might want to roll back changes you've made in an earlier migration change.
 
 To fix this, push the latest changes, then delete the preview branch in Supabase and reopen it.
 
-The new preview branch is reseeded from the `./supabase/seed.sql` file by default. Any additional data changes made on the old preview branch are lost. This is equivalent to running `supabase db reset` locally. All migrations are rerun in sequential order.
+The new preview branch is a fresh clone of your base project and is reseeded from the `./supabase/seed.sql` file by default. Any additional data changes made on the old preview branch are lost.
+
+To rerun migrations that your base project has already applied, reset the branch from the Supabase dashboard instead. A reset reruns all migrations in sequential order and drops existing data on the branch.
 
 ### Seeding behavior
 

From 29493e02d0e7a6c07a291c07c1ba2a1eedccff40 Mon Sep 17 00:00:00 2001
From: Alaister Young <alaister@users.noreply.github.com>
Date: Fri, 28 Aug 2026 17:43:55 +0800
Subject: [PATCH 8/8] [FE-4010] feat(studio): add read-only replica connection
 option for HA projects (#49485)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

For Multigres (HA) projects you can't connect to read replicas directly
— reads go through a read-only load balancer on the primary's host at
port 5433. Since #44695 stripped the pooler UI, HA projects showed no
source option at all in the Connect dialog and still prompted for the
IPv4 add-on. This surfaces it as a first-class, clearly-labeled
read-only source. In the UI it's labeled `Replica (read-only)` rather
than "load balancer" — the primary goes through the same gateway, so
"load balancer" would be confusing from a product perspective
(internally the `load-balancer` source identifier and
`HIGH_AVAILABILITY_LOAD_BALANCER_PORT` constant keep their names).

<img width="883" height="342" alt="Screenshot 2026-08-24 at 11 32 26 PM"
src="https://github.com/user-attachments/assets/3716f6dd-0325-4b9d-adbc-9ece9244de62"
/>

**Added:**
- Source select for HA projects in the Direct tab: `Primary database` +
`Replica (read-only)` (individual replica rows are filtered out —
they're only reachable via the load balancer)
- Replica (load balancer) connection strings on all 9 connection types:
primary host, port `5433`, with the Multigres-required
`sslmode=require&sslnegotiation=direct` params (JDBC gets the
`sslNegotiation` spelling, .NET gets `SSL Negotiation=Direct`)
- `Read-only` badge on the connection code block + note pointing writes
at the primary
- Programmatic labels for the ConnectSheet select/switch/multi-select
fields (the Source combobox previously had no accessible name)

**Changed:**
- The generated-file step (Node.js/Golang/.NET/Python/SQLAlchemy) is now
source-aware — it previously ignored the Source selection entirely (also
affected read replicas on normal projects) and silently rendered the
primary's connection info
- .NET template now emits `Port=` (Npgsql defaults to 5432 when omitted)
and the install step actually installs Npgsql (pinned 9.0.5 — `SSL
Negotiation` requires 9+)
- SQLAlchemy `DATABASE_URL` merges `sslmode=require` into the string's
existing query params instead of a hardcoded suffix that could drop TLS
- Source option labels normalized to sentence case (`Primary database`,
`Read replica (…)`)
- `MultipleCodeBlock` (ui-patterns) accepts an optional `className`
- HA coercion in `useConnectState` extended: a stale replica
`connectionSource` restored from URL/localStorage falls back to the
primary

**Removed:**
- IPv4 add-on admonition for HA projects (the forced-direct method was
tripping it; the add-on doesn't apply to Multigres)

Out of scope (needs platform work): SQL editor / Data API / other
`DatabaseSelector` surfaces — executing against the load balancer
requires a platform-issued connection string, and the load-balancers API
only returns a REST endpoint today. The `5433` port is a client-side
constant (`HIGH_AVAILABILITY_LOAD_BALANCER_PORT`) until the API exposes
it.

## To test

On an HA (Multigres) project:
- Open Connect → Direct: Source shows exactly `Primary database` and
`Replica (read-only)`; selecting the replica shows
`…@<primary-host>:5433/postgres?sslmode=require&sslnegotiation=direct`,
a `Read-only` badge, and the read-only note
- Cycle all 9 connection types with the replica selected — every snippet
carries port 5433 (`.NET` includes `Port=5433;…;SSL
Negotiation=Direct`), badge/note persist
- No "Enable IPv4 add-on" admonition anywhere in the Direct tab
- Switch tabs / hard-reload: source resets to primary with no stale
badge/string combos

On a normal project:
- Direct tab unchanged: no `Replica (read-only)` option, pooler badges
and IPv4 admonitions behave as before, `.NET` now shows `Port=5432` and
no `SSL Negotiation`

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

- **New Features**
- Added read-only load-balancer connection options for high-availability
projects.
- Added .NET and SQLAlchemy connection examples with required SSL
settings.
- Added clear read-only labels and notices explaining write
restrictions.
- **Bug Fixes**
  - Suppressed IPv4 add-on notices for high-availability connections.
  - Improved connection-source selection and restored-setting handling.
  - Improved connection form identification and accessibility.
- **Style**
  - Added customizable styling support for multi-code-block displays.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
---
 .../ConnectSheet/Connect.constants.ts         |   2 +
 .../ConnectSheet/ConnectConfigSection.tsx     |   5 +
 .../ConnectSheet/ConnectStepsSection.tsx      |   2 +
 .../ConnectSheet/ConnectStepsSection.utils.ts |   5 +-
 .../ConnectSheet/ConnectionString.utils.ts    |  21 +++
 .../ConnectSheet/DatabaseSettings.utils.ts    |  12 ++
 .../ConnectSheet/DirectConnectionExamples.tsx |   4 +
 .../ConnectStepsSection.utils.test.ts         |   5 +
 .../__tests__/ConnectionString.utils.test.ts  |  48 ++++++
 .../__tests__/DatabaseSettings.utils.test.ts  |  45 ++++++
 .../__tests__/useConnectState.test.ts         |  63 +++++++-
 .../steps/direct-connection/content.tsx       | 127 +++-------------
 .../content/steps/direct-files/content.tsx    |  50 ++++++-
 .../ConnectSheet/useConnectState.ts           |  52 +++++--
 .../useConnectionStringDatabases.ts           | 137 ++++++++++++++++++
 .../src/MultipleCodeBlock/index.tsx           |  12 +-
 16 files changed, 462 insertions(+), 128 deletions(-)
 create mode 100644 apps/studio/components/interfaces/ConnectSheet/useConnectionStringDatabases.ts

diff --git a/apps/studio/components/interfaces/ConnectSheet/Connect.constants.ts b/apps/studio/components/interfaces/ConnectSheet/Connect.constants.ts
index 86071ccaef9b8..a588f3320dd39 100644
--- a/apps/studio/components/interfaces/ConnectSheet/Connect.constants.ts
+++ b/apps/studio/components/interfaces/ConnectSheet/Connect.constants.ts
@@ -386,6 +386,8 @@ export const PGBOUNCER_ENABLED_BUT_NO_IPV4_ADDON_TEXT =
   'Purchase IPv4 add-on or use Shared Pooler if on a IPv4 network'
 export const IPV4_ADDON_TEXT = 'Connections are IPv4 proxied with IPv4 add-on'
 
+export const CONNECTION_SOURCE_LOAD_BALANCER = 'load-balancer'
+
 export type ConnectionStringMethod = 'direct' | 'transaction' | 'session'
 
 export const connectionStringMethodOptions: Record<
diff --git a/apps/studio/components/interfaces/ConnectSheet/ConnectConfigSection.tsx b/apps/studio/components/interfaces/ConnectSheet/ConnectConfigSection.tsx
index bb21ae25718f1..9f96b39af66cf 100644
--- a/apps/studio/components/interfaces/ConnectSheet/ConnectConfigSection.tsx
+++ b/apps/studio/components/interfaces/ConnectSheet/ConnectConfigSection.tsx
@@ -126,12 +126,14 @@ export function ConnectConfigSection({
                 layout="horizontal"
                 label={field.label}
                 description={field.description}
+                name={`connect-${field.id}`}
               >
                 <Select
                   value={String(value ?? '')}
                   onValueChange={(v) => onFieldChange(field.id, v)}
                 >
                   <SelectTrigger
+                    id={`connect-${field.id}`}
                     size="small"
                     className="[&>span:first-child]:flex [&>span:first-child]:items-center [&>span:first-child]:gap-x-2"
                   >
@@ -167,6 +169,7 @@ export function ConnectConfigSection({
                 layout="horizontal"
                 label={field.label}
                 description={field.description}
+                name={field.id}
                 className="[&>div>label>span]:break-keep! [&>div>label>span]:text-balance"
               >
                 <Switch
@@ -185,12 +188,14 @@ export function ConnectConfigSection({
                 layout="horizontal"
                 label={field.label}
                 description={field.description}
+                name={`connect-${field.id}`}
               >
                 <MultiSelector
                   values={Array.isArray(value) ? value : []}
                   onValuesChange={(v) => onFieldChange(field.id, v)}
                 >
                   <MultiSelectorTrigger
+                    id={`connect-${field.id}`}
                     className="w-full"
                     label="Select features"
                     badgeLimit="wrap"
diff --git a/apps/studio/components/interfaces/ConnectSheet/ConnectStepsSection.tsx b/apps/studio/components/interfaces/ConnectSheet/ConnectStepsSection.tsx
index 8daa1afee7e98..3ebdce75e0450 100644
--- a/apps/studio/components/interfaces/ConnectSheet/ConnectStepsSection.tsx
+++ b/apps/studio/components/interfaces/ConnectSheet/ConnectStepsSection.tsx
@@ -210,6 +210,7 @@ export function ConnectStepsSection({ steps, state, projectKeys }: ConnectStepsS
   const { ref } = useParams()
   const stepsContainerRef = useRef<HTMLDivElement | null>(null)
   const deploymentMode = useDeploymentMode()
+  const isHighAvailability = useIsHighAvailability()
   const connectionStringPooler = useConnectionStringPooler(deploymentMode)
 
   const { data: ipv4Addon } = useProjectAddonsQuery(
@@ -227,6 +228,7 @@ export function ConnectStepsSection({ steps, state, projectKeys }: ConnectStepsS
     connectionMethod: state.connectionMethod,
     useSharedPooler: state.useSharedPooler,
     hasIpv4Addon: !!ipv4Addon,
+    isHighAvailability,
   })
   const showSessionPoolerNotice = shouldShowSessionPoolerNotice({
     isPlatform: deploymentMode.isPlatform,
diff --git a/apps/studio/components/interfaces/ConnectSheet/ConnectStepsSection.utils.ts b/apps/studio/components/interfaces/ConnectSheet/ConnectStepsSection.utils.ts
index f24bd7525598e..bba878c92ecde 100644
--- a/apps/studio/components/interfaces/ConnectSheet/ConnectStepsSection.utils.ts
+++ b/apps/studio/components/interfaces/ConnectSheet/ConnectStepsSection.utils.ts
@@ -28,14 +28,17 @@ export function shouldShowIpv4AddonNotice({
   connectionMethod,
   useSharedPooler,
   hasIpv4Addon,
+  isHighAvailability,
 }: {
   isPlatform: boolean
   mode: ConnectMode
   connectionMethod: FieldValue
   useSharedPooler: FieldValue
   hasIpv4Addon: boolean
+  isHighAvailability: boolean
 }): boolean {
-  if (!isPlatform || mode !== 'direct' || hasIpv4Addon) return false
+  // The IPv4 add-on does not apply to Multigres connections
+  if (!isPlatform || mode !== 'direct' || hasIpv4Addon || isHighAvailability) return false
   return connectionMethod === 'direct' || (connectionMethod === 'transaction' && !useSharedPooler)
 }
 
diff --git a/apps/studio/components/interfaces/ConnectSheet/ConnectionString.utils.ts b/apps/studio/components/interfaces/ConnectSheet/ConnectionString.utils.ts
index 8158af03229c8..5f61b16404c44 100644
--- a/apps/studio/components/interfaces/ConnectSheet/ConnectionString.utils.ts
+++ b/apps/studio/components/interfaces/ConnectSheet/ConnectionString.utils.ts
@@ -108,6 +108,27 @@ export const buildJdbcString = (params: ConnectionParams) => {
   return `jdbc:postgresql://${params.host}:${params.port}/${params.database}?user=${params.user}&password=${PASSWORD_PLACEHOLDER}${extraParams}`
 }
 
+/**
+ * Ensures a connection string's query params carry `sslmode=require` without
+ * dropping params the URI already has (e.g. `options=reference%3D...` or
+ * `sslnegotiation=direct`).
+ */
+export const withRequiredSslmode = (search: string) => {
+  if (!search) return '?sslmode=require'
+  if (search.includes('sslmode=')) return search
+  return `${search}&sslmode=require`
+}
+
+export const buildDotnetConnectionString = (params: ConnectionParams) => {
+  // Multigres only accepts direct SSL negotiation; Npgsql (9+) spells it
+  // `SSL Negotiation=Direct` and throws on the parameter in older versions,
+  // so only emit it when the resolved URI carries the param.
+  const sslNegotiation = params.search.includes('sslnegotiation=direct')
+    ? ';SSL Negotiation=Direct'
+    : ''
+  return `Host=${params.host};Port=${params.port};Database=${params.database};Username=${params.user};Password=${PASSWORD_PLACEHOLDER};SSL Mode=Require;Trust Server Certificate=true${sslNegotiation}`
+}
+
 export const buildConnectionStringWithPassword = (
   connectionString: string,
   password: string
diff --git a/apps/studio/components/interfaces/ConnectSheet/DatabaseSettings.utils.ts b/apps/studio/components/interfaces/ConnectSheet/DatabaseSettings.utils.ts
index 4233c2479eec4..8f6a21128222f 100644
--- a/apps/studio/components/interfaces/ConnectSheet/DatabaseSettings.utils.ts
+++ b/apps/studio/components/interfaces/ConnectSheet/DatabaseSettings.utils.ts
@@ -17,6 +17,18 @@ export const appendHighAvailabilitySslParams = (uri: string) =>
     ? uri
     : appendConnectionStringParams(uri, HIGH_AVAILABILITY_SSL_PARAMS)
 
+/**
+ * The Multigres read-only load balancer listens on this port on the same host
+ * as the primary database.
+ */
+export const HIGH_AVAILABILITY_LOAD_BALANCER_PORT = 5433
+
+export const getHighAvailabilityLoadBalancerConnectionInfo = <
+  T extends { db_port: number | string },
+>(
+  connectionInfo: T
+): T => ({ ...connectionInfo, db_port: HIGH_AVAILABILITY_LOAD_BALANCER_PORT })
+
 type ConnectionStrings = {
   psql: string
   uri: string
diff --git a/apps/studio/components/interfaces/ConnectSheet/DirectConnectionExamples.tsx b/apps/studio/components/interfaces/ConnectSheet/DirectConnectionExamples.tsx
index 4f8ceb8b69e8b..32d61e3979455 100644
--- a/apps/studio/components/interfaces/ConnectSheet/DirectConnectionExamples.tsx
+++ b/apps/studio/components/interfaces/ConnectSheet/DirectConnectionExamples.tsx
@@ -55,6 +55,10 @@ func main() {
   },
   dotnet: {
     installCommands: [
+      // SSL Negotiation=Direct in the generated connection string requires Npgsql 9.0+.
+      // Concrete version: quoting a floating version breaks on Windows cmd, and
+      // floating versions fail under Central Package Management (NU1011).
+      'dotnet add package Npgsql --version 9.0.5',
       'dotnet add package Microsoft.Extensions.Configuration.Json --version YOUR_DOTNET_VERSION',
     ],
   },
diff --git a/apps/studio/components/interfaces/ConnectSheet/__tests__/ConnectStepsSection.utils.test.ts b/apps/studio/components/interfaces/ConnectSheet/__tests__/ConnectStepsSection.utils.test.ts
index babff975249ec..7340051e2dbd9 100644
--- a/apps/studio/components/interfaces/ConnectSheet/__tests__/ConnectStepsSection.utils.test.ts
+++ b/apps/studio/components/interfaces/ConnectSheet/__tests__/ConnectStepsSection.utils.test.ts
@@ -132,6 +132,7 @@ describe('shouldShowIpv4AddonNotice', () => {
     connectionMethod: 'direct',
     useSharedPooler: false,
     hasIpv4Addon: false,
+    isHighAvailability: false,
   }
 
   test('returns true for a direct connection with no IPv4 addon', () => {
@@ -169,6 +170,10 @@ describe('shouldShowIpv4AddonNotice', () => {
   test('returns false when self-hosted (not platform)', () => {
     expect(shouldShowIpv4AddonNotice({ ...BASE, isPlatform: false })).toBe(false)
   })
+
+  test('returns false for high-availability projects even with a direct connection and no addon', () => {
+    expect(shouldShowIpv4AddonNotice({ ...BASE, isHighAvailability: true })).toBe(false)
+  })
 })
 
 describe('shouldShowSessionPoolerNotice', () => {
diff --git a/apps/studio/components/interfaces/ConnectSheet/__tests__/ConnectionString.utils.test.ts b/apps/studio/components/interfaces/ConnectSheet/__tests__/ConnectionString.utils.test.ts
index 5a07d913ddfe3..613bf998d84ee 100644
--- a/apps/studio/components/interfaces/ConnectSheet/__tests__/ConnectionString.utils.test.ts
+++ b/apps/studio/components/interfaces/ConnectSheet/__tests__/ConnectionString.utils.test.ts
@@ -4,6 +4,7 @@ import {
   appendConnectionStringParams,
   buildConnectionParameters,
   buildConnectionStringWithPassword,
+  buildDotnetConnectionString,
   buildJdbcString,
   buildPsqlCommand,
   buildSafeConnectionString,
@@ -11,6 +12,7 @@ import {
   parseConnectionParams,
   PASSWORD_PLACEHOLDER,
   resolveConnectionString,
+  withRequiredSslmode,
 } from '../ConnectionString.utils'
 
 describe('parseConnectionParams', () => {
@@ -236,6 +238,52 @@ describe('buildJdbcString', () => {
   })
 })
 
+describe('withRequiredSslmode', () => {
+  test('returns ?sslmode=require for an empty search', () => {
+    expect(withRequiredSslmode('')).toBe('?sslmode=require')
+  })
+
+  test('leaves a search that already sets sslmode unchanged', () => {
+    expect(withRequiredSslmode('?sslmode=require&sslnegotiation=direct')).toBe(
+      '?sslmode=require&sslnegotiation=direct'
+    )
+  })
+
+  test('appends sslmode=require to existing params without it', () => {
+    expect(withRequiredSslmode('?options=reference%3Dproj')).toBe(
+      '?options=reference%3Dproj&sslmode=require'
+    )
+  })
+})
+
+describe('buildDotnetConnectionString', () => {
+  const params = {
+    host: 'db.proj.supabase.co',
+    port: '5432',
+    user: 'postgres',
+    database: 'postgres',
+    search: '',
+  }
+
+  test('builds the base Npgsql string without SSL negotiation', () => {
+    expect(buildDotnetConnectionString(params)).toBe(
+      `Host=db.proj.supabase.co;Port=5432;Database=postgres;Username=postgres;Password=${PASSWORD_PLACEHOLDER};SSL Mode=Require;Trust Server Certificate=true`
+    )
+  })
+
+  test('appends SSL Negotiation=Direct when the URI requires direct negotiation', () => {
+    expect(
+      buildDotnetConnectionString({
+        ...params,
+        port: '5433',
+        search: '?sslmode=require&sslnegotiation=direct',
+      })
+    ).toBe(
+      `Host=db.proj.supabase.co;Port=5433;Database=postgres;Username=postgres;Password=${PASSWORD_PLACEHOLDER};SSL Mode=Require;Trust Server Certificate=true;SSL Negotiation=Direct`
+    )
+  })
+})
+
 describe('buildConnectionParameters', () => {
   test('produces host/port/database/user rows in display order', () => {
     expect(
diff --git a/apps/studio/components/interfaces/ConnectSheet/__tests__/DatabaseSettings.utils.test.ts b/apps/studio/components/interfaces/ConnectSheet/__tests__/DatabaseSettings.utils.test.ts
index dcfb2b95debe2..b710553ba700d 100644
--- a/apps/studio/components/interfaces/ConnectSheet/__tests__/DatabaseSettings.utils.test.ts
+++ b/apps/studio/components/interfaces/ConnectSheet/__tests__/DatabaseSettings.utils.test.ts
@@ -3,8 +3,11 @@ import { describe, expect, test } from 'vitest'
 import {
   appendHighAvailabilitySslParams,
   buildConnectionStringPooler,
+  getConnectionStrings,
+  getHighAvailabilityLoadBalancerConnectionInfo,
   getSelfHostedDirectStrings,
   getSelfHostedPoolerStrings,
+  HIGH_AVAILABILITY_LOAD_BALANCER_PORT,
   HIGH_AVAILABILITY_SSL_PARAMS,
 } from '../DatabaseSettings.utils'
 import type { DeploymentMode } from '@/hooks/misc/useDeploymentMode'
@@ -239,3 +242,45 @@ describe('appendHighAvailabilitySslParams', () => {
     expect(appendHighAvailabilitySslParams('')).toBe('')
   })
 })
+
+describe('getHighAvailabilityLoadBalancerConnectionInfo', () => {
+  test('swaps the port for the load balancer port and preserves the other fields', () => {
+    const connectionInfo = {
+      db_user: 'postgres',
+      db_port: 5432,
+      db_host: 'db.proj.supabase.co',
+      db_name: 'postgres',
+    }
+
+    expect(getHighAvailabilityLoadBalancerConnectionInfo(connectionInfo)).toEqual({
+      db_user: 'postgres',
+      db_port: HIGH_AVAILABILITY_LOAD_BALANCER_PORT,
+      db_host: 'db.proj.supabase.co',
+      db_name: 'postgres',
+    })
+  })
+
+  test('builds a read-only load balancer connection string on port 5433 with SSL params', () => {
+    const loadBalancerInfo = getHighAvailabilityLoadBalancerConnectionInfo({
+      db_user: 'postgres',
+      db_port: 5432,
+      db_host: 'db.proj.supabase.co',
+      db_name: 'postgres',
+    })
+
+    const result = buildConnectionStringPooler({
+      deploymentMode: platform,
+      connectionInfo: loadBalancerInfo,
+      connectionStringsShared: getConnectionStrings({
+        connectionInfo: loadBalancerInfo,
+        metadata: { projectRef: 'proj' },
+      }),
+      ipv4Addon: false,
+      isHighAvailability: true,
+    })
+
+    expect(result.direct).toBe(
+      `postgresql://postgres:[YOUR-PASSWORD]@db.proj.supabase.co:5433/postgres?${HIGH_AVAILABILITY_SSL_PARAMS}`
+    )
+  })
+})
diff --git a/apps/studio/components/interfaces/ConnectSheet/__tests__/useConnectState.test.ts b/apps/studio/components/interfaces/ConnectSheet/__tests__/useConnectState.test.ts
index 8b6a5b21b67dc..02cda9fc3a111 100644
--- a/apps/studio/components/interfaces/ConnectSheet/__tests__/useConnectState.test.ts
+++ b/apps/studio/components/interfaces/ConnectSheet/__tests__/useConnectState.test.ts
@@ -7,8 +7,11 @@ vi.mock('common', () => ({
   useParams: () => ({ ref: 'test-ref' }),
 }))
 
+const readReplicasMock: {
+  data: Array<{ identifier: string; region: string; inserted_at: string }>
+} = { data: [] }
 vi.mock('@/data/read-replicas/replicas-query', () => ({
-  useReadReplicasQuery: () => ({ data: [] }),
+  useReadReplicasQuery: () => readReplicasMock,
 }))
 
 vi.mock('@/hooks/misc/useCheckEntitlements', () => ({
@@ -498,9 +501,67 @@ describe('useConnectState', () => {
   // ============================================================================
 
   describe('high availability projects', () => {
+    const PRIMARY_DATABASE = {
+      identifier: 'test-ref',
+      region: 'ap-southeast-1',
+      inserted_at: '2024-01-01T00:00:00Z',
+    }
+    const REPLICA_DATABASE = {
+      identifier: 'test-ref-rr-abcdefgh',
+      region: 'ap-southeast-1',
+      inserted_at: '2024-01-02T00:00:00Z',
+    }
+
     afterEach(async () => {
       const { useIsHighAvailability } = await import('@/hooks/misc/useSelectedProject')
       vi.mocked(useIsHighAvailability).mockReturnValue(false)
+      readReplicasMock.data = []
+    })
+
+    test('should offer only the primary and the load balancer as sources for HA projects', async () => {
+      const { useIsHighAvailability } = await import('@/hooks/misc/useSelectedProject')
+      vi.mocked(useIsHighAvailability).mockReturnValue(true)
+      readReplicasMock.data = [PRIMARY_DATABASE, REPLICA_DATABASE]
+
+      const { result } = renderHook(() => useConnectState({ mode: 'direct' }))
+
+      const options = result.current.getFieldOptions('connectionSource')
+      expect(options).toEqual([
+        { value: 'test-ref', label: 'Primary database' },
+        { value: 'load-balancer', label: 'Replica (read-only)' },
+      ])
+    })
+
+    test('should keep replicas as sources and omit the load balancer for non-HA projects', () => {
+      readReplicasMock.data = [PRIMARY_DATABASE, REPLICA_DATABASE]
+
+      const { result } = renderHook(() => useConnectState({ mode: 'direct' }))
+
+      const options = result.current.getFieldOptions('connectionSource')
+      expect(options.map((o) => o.value)).toEqual(['test-ref', 'test-ref-rr-abcdefgh'])
+      expect(options.some((o) => o.value === 'load-balancer')).toBe(false)
+    })
+
+    test('should coerce a replica connection source to the primary for HA projects', async () => {
+      const { useIsHighAvailability } = await import('@/hooks/misc/useSelectedProject')
+      vi.mocked(useIsHighAvailability).mockReturnValue(true)
+
+      const { result } = renderHook(() =>
+        useConnectState({ mode: 'direct', connectionSource: 'test-ref-rr-abcdefgh' })
+      )
+
+      expect(result.current.state.connectionSource).toBe('test-ref')
+    })
+
+    test('should preserve the load balancer as a valid connection source for HA projects', async () => {
+      const { useIsHighAvailability } = await import('@/hooks/misc/useSelectedProject')
+      vi.mocked(useIsHighAvailability).mockReturnValue(true)
+
+      const { result } = renderHook(() =>
+        useConnectState({ mode: 'direct', connectionSource: 'load-balancer' })
+      )
+
+      expect(result.current.state.connectionSource).toBe('load-balancer')
     })
 
     test('should hide connectionMethod field for HA projects', async () => {
diff --git a/apps/studio/components/interfaces/ConnectSheet/content/steps/direct-connection/content.tsx b/apps/studio/components/interfaces/ConnectSheet/content/steps/direct-connection/content.tsx
index b7ab7b99d61de..3f519fe79698c 100644
--- a/apps/studio/components/interfaces/ConnectSheet/content/steps/direct-connection/content.tsx
+++ b/apps/studio/components/interfaces/ConnectSheet/content/steps/direct-connection/content.tsx
@@ -1,19 +1,17 @@
-import { useParams } from 'common'
 import { Check, KeyRound } from 'lucide-react'
 import { useMemo, useState } from 'react'
+import { cn } from 'ui'
 import { CodeBlock } from 'ui-patterns/CodeBlock'
 import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
 
-import { buildConnectionStringPooler, getConnectionStrings } from '../../../DatabaseSettings.utils'
-import { getAddons } from '@/components/interfaces/Billing/Subscription/Subscription.utils'
 import {
+  CONNECTION_SOURCE_LOAD_BALANCER,
   DATABASE_CONNECTION_TYPES,
   type ConnectionStringMethod,
   type DatabaseConnectionType,
 } from '@/components/interfaces/ConnectSheet/Connect.constants'
 import type {
   ConnectionStringPooler,
-  DeploymentMode,
   StepContentProps,
 } from '@/components/interfaces/ConnectSheet/Connect.types'
 import { ConnectionParameters } from '@/components/interfaces/ConnectSheet/ConnectionParameters'
@@ -28,114 +26,14 @@ import {
   resolveConnectionString,
 } from '@/components/interfaces/ConnectSheet/ConnectionString.utils'
 import { PasswordEncodingNote } from '@/components/interfaces/ConnectSheet/PasswordEncodingNote'
+import { useConnectionStringDatabases } from '@/components/interfaces/ConnectSheet/useConnectionStringDatabases'
 import { ResetDbPasswordDialog } from '@/components/interfaces/Settings/Database/DatabaseSettings/ResetDbPasswordDialog'
 import { InlineLink } from '@/components/ui/InlineLink'
-import { usePgbouncerConfigQuery } from '@/data/database/pgbouncer-config-query'
-import { useSupavisorConfigurationQuery } from '@/data/database/supavisor-configuration-query'
-import { useReadReplicasQuery } from '@/data/read-replicas/replicas-query'
-import { useProjectAddonsQuery } from '@/data/subscriptions/project-addons-query'
 import { useCheckEntitlements } from '@/hooks/misc/useCheckEntitlements'
 import { useIsHighAvailability } from '@/hooks/misc/useSelectedProject'
 import { DOCS_URL } from '@/lib/constants'
-import { pluckObjectFields } from '@/lib/helpers'
 import { useTrack } from '@/lib/telemetry/track'
 
-/**
- * [Joshen] ConnectStepsSection does something similar but since only this page needs to consider connection strings
- * from all databases (including read replicas), am opting to separate the logic for retrieving connection strings here
- *
- * We can however, consider to shift this logic into ConnectStepsSection, such that we can consider read replicas for
- * the other tabs like "Framework" and "ORM" too. However, leaving them out for now and only updating "Direct"
- */
-const useConnectionStringDatabases = (deploymentMode: DeploymentMode) => {
-  const { ref: projectRef } = useParams()
-  const { hasAccess: allowPgBouncerSelection } = useCheckEntitlements('dedicated_pooler')
-  const isHighAvailability = useIsHighAvailability()
-
-  const { data: databases = [] } = useReadReplicasQuery({ projectRef })
-  // Multigres has no pooler, so the pooler config endpoints don't apply
-  const { data: pgbouncerConfig } = usePgbouncerConfigQuery(
-    { projectRef },
-    { enabled: !isHighAvailability }
-  )
-  const { data: supavisorConfig } = useSupavisorConfigurationQuery(
-    { projectRef },
-    { enabled: !isHighAvailability }
-  )
-  const { data: addons } = useProjectAddonsQuery({ projectRef })
-  const { ipv4: ipv4Addon } = getAddons(addons?.selected_addons ?? [])
-
-  // Memoized so the per-database pooler bag (consumed by resolveConnectionString
-  // downstream) keeps a stable identity across renders. Without this the inner
-  // pluckObjectFields/getConnectionStrings calls would mint fresh objects every
-  // render and ripple through the resolveConnectionString useMemo below.
-  return useMemo(() => {
-    const DB_FIELDS = ['db_host', 'db_name', 'db_port', 'db_user', 'inserted_at']
-    const emptyState = { db_user: '', db_host: '', db_port: '', db_name: '' }
-
-    return Object.fromEntries(
-      databases.map((db) => {
-        const connectionInfo = pluckObjectFields(db || emptyState, DB_FIELDS)
-        const poolingConfigurationShared = supavisorConfig?.find(
-          (x) => x.identifier === db.identifier
-        )
-        const poolingConfigurationDedicated = allowPgBouncerSelection ? pgbouncerConfig : undefined
-
-        const connectionStringsShared = getConnectionStrings({
-          connectionInfo,
-          poolingInfo: {
-            connectionString: poolingConfigurationShared?.connection_string ?? '',
-            db_host: poolingConfigurationShared?.db_host ?? '',
-            db_name: poolingConfigurationShared?.db_name ?? '',
-            db_port: poolingConfigurationShared?.db_port ?? 0,
-            db_user: poolingConfigurationShared?.db_user ?? '',
-          },
-          metadata: { projectRef: db.identifier },
-        })
-
-        const connectionStringsDedicated =
-          poolingConfigurationDedicated !== undefined
-            ? getConnectionStrings({
-                connectionInfo,
-                poolingInfo: {
-                  connectionString: poolingConfigurationDedicated.connection_string.replace(
-                    projectRef ?? '_',
-                    db.identifier
-                  ),
-                  db_host: poolingConfigurationDedicated.db_host,
-                  db_name: poolingConfigurationDedicated.db_name,
-                  db_port: poolingConfigurationDedicated.db_port,
-                  db_user: poolingConfigurationDedicated.db_user,
-                },
-                metadata: { projectRef: db.identifier },
-              })
-            : undefined
-
-        return [
-          db.identifier,
-          buildConnectionStringPooler({
-            deploymentMode,
-            connectionInfo,
-            connectionStringsShared,
-            connectionStringsDedicated,
-            ipv4Addon: !!ipv4Addon,
-            isHighAvailability,
-          }),
-        ]
-      })
-    )
-  }, [
-    databases,
-    pgbouncerConfig,
-    supavisorConfig,
-    allowPgBouncerSelection,
-    ipv4Addon,
-    projectRef,
-    deploymentMode,
-    isHighAvailability,
-  ])
-}
-
 const CONNECTION_METHOD_TO_TELEMETRY: Record<
   ConnectionStringMethod,
   'direct' | 'transaction_pooler' | 'session_pooler'
@@ -156,6 +54,8 @@ function DirectConnectionContent({ state, deploymentMode }: StepContentProps) {
   const [temporaryDatabasePassword, setTemporaryDatabasePassword] = useState('')
 
   const connectionSource = state.connectionSource
+  const isLoadBalancerSelected =
+    isHighAvailability && connectionSource === CONNECTION_SOURCE_LOAD_BALANCER
   const connectionType = (state.connectionType as DatabaseConnectionType) ?? 'uri'
   const connectionMethod = (state.connectionMethod as ConnectionStringMethod) ?? 'direct'
   const useSharedPooler = Boolean(state.useSharedPooler)
@@ -239,17 +139,19 @@ function DirectConnectionContent({ state, deploymentMode }: StepContentProps) {
   const showPasswordPlaceholder = connectionString.includes(PASSWORD_PLACEHOLDER)
   const showSelfHostedDirectNotice = deploymentMode.isSelfHosted && connectionMethod === 'direct'
   const showPoolerTitle = deploymentMode.isPlatform && !!poolerBadge && !isHighAvailability
+  const titleBadge = isLoadBalancerSelected ? 'Read-only' : poolerBadge
+  const showTitleBadge = isLoadBalancerSelected || showPoolerTitle
   const showResetInTitle =
     deploymentMode.isPlatform && showPasswordPlaceholder && !temporaryDatabasePassword
-  const showStringTitleRow = showPoolerTitle || showResetInTitle
+  const showStringTitleRow = showTitleBadge || showResetInTitle
 
   return (
     <div className="flex flex-col gap-3">
       <div className="overflow-hidden rounded-lg border bg-surface-75">
         {showStringTitleRow && (
           <div className="flex items-center justify-between gap-2 border-b bg-surface-100 py-2 pl-4 pr-2">
-            {showPoolerTitle ? (
-              <span className="text-xs text-foreground-light">{poolerBadge}</span>
+            {showTitleBadge ? (
+              <span className="text-xs text-foreground-light">{titleBadge}</span>
             ) : (
               <span />
             )}
@@ -282,6 +184,15 @@ function DirectConnectionContent({ state, deploymentMode }: StepContentProps) {
         )}
       </div>
       {showPasswordPlaceholder && <PasswordEncodingNote />}
+      {/* Persistent live region so screen readers announce the read-only state
+          when the load balancer is selected */}
+      <p
+        role="status"
+        className={cn('text-sm text-foreground-lighter', !isLoadBalancerSelected && 'sr-only')}
+      >
+        {isLoadBalancerSelected &&
+          'Replica connections are read-only. Connect to the primary database for writes.'}
+      </p>
       {showSelfHostedDirectNotice && (
         <p className="text-sm text-foreground-lighter">
           Manually{' '}
diff --git a/apps/studio/components/interfaces/ConnectSheet/content/steps/direct-files/content.tsx b/apps/studio/components/interfaces/ConnectSheet/content/steps/direct-files/content.tsx
index eaf3d943483de..d6b97731e036d 100644
--- a/apps/studio/components/interfaces/ConnectSheet/content/steps/direct-files/content.tsx
+++ b/apps/studio/components/interfaces/ConnectSheet/content/steps/direct-files/content.tsx
@@ -1,8 +1,10 @@
 import { useEffect, useMemo, useState } from 'react'
+import { cn } from 'ui'
 import { MultipleCodeBlock } from 'ui-patterns/MultipleCodeBlock'
 import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
 
 import {
+  CONNECTION_SOURCE_LOAD_BALANCER,
   type ConnectionStringMethod,
   type DatabaseConnectionType,
 } from '@/components/interfaces/ConnectSheet/Connect.constants'
@@ -10,12 +12,16 @@ import type { StepContentProps } from '@/components/interfaces/ConnectSheet/Conn
 import { ConnectionParameters } from '@/components/interfaces/ConnectSheet/ConnectionParameters'
 import {
   buildConnectionParameters,
+  buildDotnetConnectionString,
   buildSafeConnectionString,
   parseConnectionParams,
   PASSWORD_PLACEHOLDER,
   resolveConnectionString,
+  withRequiredSslmode,
 } from '@/components/interfaces/ConnectSheet/ConnectionString.utils'
 import { PasswordEncodingNote } from '@/components/interfaces/ConnectSheet/PasswordEncodingNote'
+import { useConnectionStringDatabases } from '@/components/interfaces/ConnectSheet/useConnectionStringDatabases'
+import { useIsHighAvailability } from '@/hooks/misc/useSelectedProject'
 
 type DirectFilesConfig = {
   files: {
@@ -28,11 +34,20 @@ type DirectFilesConfig = {
   passwordInUrl?: boolean
 }
 
-function DirectFilesContent({ state, connectionStringPooler }: StepContentProps) {
+function DirectFilesContent({ state, deploymentMode }: StepContentProps) {
+  const isHighAvailability = useIsHighAvailability()
+
+  const connectionSource = state.connectionSource
+  const isLoadBalancerSelected =
+    isHighAvailability && connectionSource === CONNECTION_SOURCE_LOAD_BALANCER
   const connectionType = (state.connectionType as DatabaseConnectionType) ?? 'uri'
   const connectionMethod = (state.connectionMethod as ConnectionStringMethod) ?? 'direct'
   const useSharedPooler = Boolean(state.useSharedPooler)
 
+  const connectionStrings = useConnectionStringDatabases(deploymentMode)
+  const connectionStringPooler =
+    connectionStrings[connectionSource as keyof typeof connectionStrings]
+
   const resolvedConnectionString = useMemo(
     () =>
       resolveConnectionString({
@@ -125,7 +140,7 @@ func main() {
               language: 'json',
               code: `{
   "ConnectionStrings": {
-    "DefaultConnection": "Host=${connectionParams.host};Database=${connectionParams.database};Username=${connectionParams.user};Password=${PASSWORD_PLACEHOLDER};SSL Mode=Require;Trust Server Certificate=true"
+    "DefaultConnection": "${buildDotnetConnectionString(connectionParams)}"
   }
 }`,
             },
@@ -180,7 +195,7 @@ PORT = os.getenv("port")
 DBNAME = os.getenv("dbname")
 
 # Construct the SQLAlchemy connection string
-DATABASE_URL = f"postgresql+psycopg2://{USER}:{PASSWORD}@{HOST}:{PORT}/{DBNAME}?sslmode=require"
+DATABASE_URL = f"postgresql+psycopg2://{USER}:{PASSWORD}@{HOST}:{PORT}/{DBNAME}${withRequiredSslmode(connectionParams.search)}"
 
 # Create the SQLAlchemy engine
 engine = create_engine(DATABASE_URL)
@@ -235,10 +250,37 @@ except Exception as e:
     return null
   }
 
+  const codeBlock = (
+    <MultipleCodeBlock
+      files={config.files}
+      value={activeFile}
+      onValueChange={setActiveFile}
+      className={isLoadBalancerSelected ? 'rounded-none border-0' : undefined}
+    />
+  )
+
   return (
     <div className="flex flex-col gap-3">
-      <MultipleCodeBlock files={config.files} value={activeFile} onValueChange={setActiveFile} />
+      {isLoadBalancerSelected ? (
+        <div className="overflow-hidden rounded-lg border">
+          <div className="flex items-center border-b bg-surface-100 py-2 pl-4 pr-2">
+            <span className="text-xs text-foreground-light">Read-only</span>
+          </div>
+          {codeBlock}
+        </div>
+      ) : (
+        codeBlock
+      )}
       {config.passwordInUrl && <PasswordEncodingNote />}
+      {/* Persistent live region so screen readers announce the read-only state
+          when the load balancer is selected */}
+      <p
+        role="status"
+        className={cn('text-sm text-foreground-lighter', !isLoadBalancerSelected && 'sr-only')}
+      >
+        {isLoadBalancerSelected &&
+          'Replica connections are read-only. Connect to the primary database for writes.'}
+      </p>
       <ConnectionParameters parameters={buildConnectionParameters(connectionParams)} />
     </div>
   )
diff --git a/apps/studio/components/interfaces/ConnectSheet/useConnectState.ts b/apps/studio/components/interfaces/ConnectSheet/useConnectState.ts
index 82dbe3966de24..dd460d9fa482f 100644
--- a/apps/studio/components/interfaces/ConnectSheet/useConnectState.ts
+++ b/apps/studio/components/interfaces/ConnectSheet/useConnectState.ts
@@ -3,6 +3,7 @@ import { useCallback, useMemo, useState } from 'react'
 import { MCP_CLIENTS } from 'ui-patterns/McpUrlBuilder'
 
 import {
+  CONNECTION_SOURCE_LOAD_BALANCER,
   connectionStringMethodOptions,
   DATABASE_CONNECTION_TYPES,
   FRAMEWORKS,
@@ -50,11 +51,15 @@ function getFieldOptionsFromSource({
   state,
   databases,
   deploymentMode,
+  isHighAvailability,
+  projectRef,
 }: {
   source: string
   state: ConnectState
   databases: Database[]
   deploymentMode: DeploymentMode
+  isHighAvailability: boolean
+  projectRef?: string
 }): FieldOption[] {
   switch (source) {
     case 'frameworks':
@@ -135,15 +140,23 @@ function getFieldOptionsFromSource({
       }))
     }
 
-    case 'connectionSources':
-      return databases.map((db) => {
+    case 'connectionSources': {
+      const options = databases.map((db) => {
         const region = formatDatabaseRegion(db?.region ?? '')
         const id = formatDatabaseID(db.identifier ?? '')
         const label = db.identifier.includes('-rr-')
-          ? `Read Replica (${region} - ${id})`
-          : 'Primary Database'
+          ? `Read replica (${region} - ${id})`
+          : 'Primary database'
         return { value: db.identifier, label }
       })
+      if (!isHighAvailability) return options
+      // Multigres replicas are only reachable through the read-only load
+      // balancer, so the sources are the primary and the load balancer.
+      return [
+        ...options.filter((option) => option.value === projectRef),
+        { value: CONNECTION_SOURCE_LOAD_BALANCER, label: 'Replica (read-only)' },
+      ]
+    }
 
     case 'connectionTypes':
       return DATABASE_CONNECTION_TYPES.map((t) => ({
@@ -185,11 +198,15 @@ function resolveFieldOptionsWithSource({
   state,
   databases,
   deploymentMode,
+  isHighAvailability,
+  projectRef,
 }: {
   field: ResolvedField
   state: ConnectState
   databases: Database[]
   deploymentMode: DeploymentMode
+  isHighAvailability: boolean
+  projectRef?: string
 }): FieldOption[] {
   // If already resolved (from conditional resolution)
   if (field.resolvedOptions.length > 0) {
@@ -204,6 +221,8 @@ function resolveFieldOptionsWithSource({
       state,
       databases,
       deploymentMode,
+      isHighAvailability,
+      projectRef,
     })
   }
 
@@ -361,12 +380,21 @@ export function useConnectState(initialState?: Partial<ConnectState>): UseConnec
 
   // Multigres has no pooler, so pooler-flavored selections restored from the
   // URL or localStorage (shared across projects) must never leak into an HA
-  // project — every consumer sees the direct connection method.
-  const resolvedState = useMemo(
-    () =>
-      isHighAvailability ? { ...state, connectionMethod: 'direct', useSharedPooler: false } : state,
-    [state, isHighAvailability]
-  )
+  // project — every consumer sees the direct connection method. Likewise a
+  // stale connection source (e.g. a replica identifier restored from the URL)
+  // falls back to the primary, since HA sources are only the primary and the
+  // load balancer.
+  const resolvedState = useMemo(() => {
+    if (!isHighAvailability) return state
+
+    const next: ConnectState = { ...state, connectionMethod: 'direct', useSharedPooler: false }
+    const hasValidSource =
+      state.connectionSource === undefined ||
+      state.connectionSource === projectRef ||
+      state.connectionSource === CONNECTION_SOURCE_LOAD_BALANCER
+    if (!hasValidSource) next.connectionSource = projectRef ?? '_'
+    return next
+  }, [state, isHighAvailability, projectRef])
 
   const activeFields = useMemo(() => {
     let fields = getActiveFields(connectSchema, resolvedState)
@@ -394,9 +422,11 @@ export function useConnectState(initialState?: Partial<ConnectState>): UseConnec
         state: resolvedState,
         databases,
         deploymentMode,
+        isHighAvailability,
+        projectRef,
       })
     },
-    [activeFields, resolvedState, databases, deploymentMode]
+    [activeFields, resolvedState, databases, deploymentMode, isHighAvailability, projectRef]
   )
 
   return {
diff --git a/apps/studio/components/interfaces/ConnectSheet/useConnectionStringDatabases.ts b/apps/studio/components/interfaces/ConnectSheet/useConnectionStringDatabases.ts
new file mode 100644
index 0000000000000..5909a06814451
--- /dev/null
+++ b/apps/studio/components/interfaces/ConnectSheet/useConnectionStringDatabases.ts
@@ -0,0 +1,137 @@
+import { useParams } from 'common'
+import { useMemo } from 'react'
+
+import { CONNECTION_SOURCE_LOAD_BALANCER } from './Connect.constants'
+import type { DeploymentMode } from './Connect.types'
+import {
+  buildConnectionStringPooler,
+  getConnectionStrings,
+  getHighAvailabilityLoadBalancerConnectionInfo,
+} from './DatabaseSettings.utils'
+import { getAddons } from '@/components/interfaces/Billing/Subscription/Subscription.utils'
+import { usePgbouncerConfigQuery } from '@/data/database/pgbouncer-config-query'
+import { useSupavisorConfigurationQuery } from '@/data/database/supavisor-configuration-query'
+import { useReadReplicasQuery } from '@/data/read-replicas/replicas-query'
+import { useProjectAddonsQuery } from '@/data/subscriptions/project-addons-query'
+import { useCheckEntitlements } from '@/hooks/misc/useCheckEntitlements'
+import { useIsHighAvailability } from '@/hooks/misc/useSelectedProject'
+import { pluckObjectFields } from '@/lib/helpers'
+
+/**
+ * [Joshen] ConnectStepsSection does something similar but since only this page needs to consider connection strings
+ * from all databases (including read replicas), am opting to separate the logic for retrieving connection strings here
+ *
+ * We can however, consider to shift this logic into ConnectStepsSection, such that we can consider read replicas for
+ * the other tabs like "Framework" and "ORM" too. However, leaving them out for now and only updating "Direct"
+ */
+export const useConnectionStringDatabases = (deploymentMode: DeploymentMode) => {
+  const { ref: projectRef } = useParams()
+  const { hasAccess: allowPgBouncerSelection } = useCheckEntitlements('dedicated_pooler')
+  const isHighAvailability = useIsHighAvailability()
+
+  const { data: databases = [] } = useReadReplicasQuery({ projectRef })
+  // Multigres has no pooler, so the pooler config endpoints don't apply
+  const { data: pgbouncerConfig } = usePgbouncerConfigQuery(
+    { projectRef },
+    { enabled: !isHighAvailability }
+  )
+  const { data: supavisorConfig } = useSupavisorConfigurationQuery(
+    { projectRef },
+    { enabled: !isHighAvailability }
+  )
+  const { data: addons } = useProjectAddonsQuery({ projectRef })
+  const { ipv4: ipv4Addon } = getAddons(addons?.selected_addons ?? [])
+
+  // Memoized so the per-database pooler bag (consumed by resolveConnectionString
+  // downstream) keeps a stable identity across renders. Without this the inner
+  // pluckObjectFields/getConnectionStrings calls would mint fresh objects every
+  // render and ripple through the resolveConnectionString useMemo below.
+  return useMemo(() => {
+    const DB_FIELDS = ['db_host', 'db_name', 'db_port', 'db_user', 'inserted_at']
+    const emptyState = { db_user: '', db_host: '', db_port: '', db_name: '' }
+
+    const connectionStringsByIdentifier = Object.fromEntries(
+      databases.map((db) => {
+        const connectionInfo = pluckObjectFields(db || emptyState, DB_FIELDS)
+        const poolingConfigurationShared = supavisorConfig?.find(
+          (x) => x.identifier === db.identifier
+        )
+        const poolingConfigurationDedicated = allowPgBouncerSelection ? pgbouncerConfig : undefined
+
+        const connectionStringsShared = getConnectionStrings({
+          connectionInfo,
+          poolingInfo: {
+            connectionString: poolingConfigurationShared?.connection_string ?? '',
+            db_host: poolingConfigurationShared?.db_host ?? '',
+            db_name: poolingConfigurationShared?.db_name ?? '',
+            db_port: poolingConfigurationShared?.db_port ?? 0,
+            db_user: poolingConfigurationShared?.db_user ?? '',
+          },
+          metadata: { projectRef: db.identifier },
+        })
+
+        const connectionStringsDedicated =
+          poolingConfigurationDedicated !== undefined
+            ? getConnectionStrings({
+                connectionInfo,
+                poolingInfo: {
+                  connectionString: poolingConfigurationDedicated.connection_string.replace(
+                    projectRef ?? '_',
+                    db.identifier
+                  ),
+                  db_host: poolingConfigurationDedicated.db_host,
+                  db_name: poolingConfigurationDedicated.db_name,
+                  db_port: poolingConfigurationDedicated.db_port,
+                  db_user: poolingConfigurationDedicated.db_user,
+                },
+                metadata: { projectRef: db.identifier },
+              })
+            : undefined
+
+        return [
+          db.identifier,
+          buildConnectionStringPooler({
+            deploymentMode,
+            connectionInfo,
+            connectionStringsShared,
+            connectionStringsDedicated,
+            ipv4Addon: !!ipv4Addon,
+            isHighAvailability,
+          }),
+        ]
+      })
+    )
+
+    // The Multigres load balancer is not a database row — it shares the
+    // primary's host on a dedicated read-only port.
+    const primaryDatabase = isHighAvailability
+      ? databases.find((db) => db.identifier === projectRef)
+      : undefined
+    if (primaryDatabase) {
+      const loadBalancerInfo = getHighAvailabilityLoadBalancerConnectionInfo(
+        pluckObjectFields(primaryDatabase, DB_FIELDS)
+      )
+      connectionStringsByIdentifier[CONNECTION_SOURCE_LOAD_BALANCER] = buildConnectionStringPooler({
+        deploymentMode,
+        connectionInfo: loadBalancerInfo,
+        connectionStringsShared: getConnectionStrings({
+          connectionInfo: loadBalancerInfo,
+          metadata: { projectRef },
+        }),
+        ipv4Addon: false,
+        isHighAvailability,
+      })
+    }
+
+    return connectionStringsByIdentifier
+  }, [
+    databases,
+    pgbouncerConfig,
+    supavisorConfig,
+    allowPgBouncerSelection,
+    ipv4Addon,
+    projectRef,
+    deploymentMode,
+    isHighAvailability,
+  ])
+}
diff --git a/packages/ui-patterns/src/MultipleCodeBlock/index.tsx b/packages/ui-patterns/src/MultipleCodeBlock/index.tsx
index 76030116265ce..901be3a7f865b 100644
--- a/packages/ui-patterns/src/MultipleCodeBlock/index.tsx
+++ b/packages/ui-patterns/src/MultipleCodeBlock/index.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react'
-import { Tabs, TabsContent, TabsList, TabsTrigger } from 'ui'
+import { cn, Tabs, TabsContent, TabsList, TabsTrigger } from 'ui'
 import { CodeBlock, type CodeBlockLang } from 'ui-patterns/CodeBlock'
 
 interface MultipleCodeBlockFile {
@@ -12,6 +12,7 @@ interface MultipleCodeBlockProps {
   files: MultipleCodeBlockFile[]
   value?: string
   onValueChange?: (value: string) => void
+  className?: string
 }
 
 const languageAliases: Record<string, CodeBlockLang> = {
@@ -91,7 +92,12 @@ const resolveLanguage = (language: string | undefined, name: string): CodeBlockL
   return inferLanguageFromName(name) ?? 'js'
 }
 
-export const MultipleCodeBlock = ({ files, value, onValueChange }: MultipleCodeBlockProps) => {
+export const MultipleCodeBlock = ({
+  files,
+  value,
+  onValueChange,
+  className,
+}: MultipleCodeBlockProps) => {
   if (!files?.length) {
     return null
   }
@@ -128,7 +134,7 @@ export const MultipleCodeBlock = ({ files, value, onValueChange }: MultipleCodeB
     <Tabs
       value={activeValue}
       onValueChange={handleValueChange}
-      className="border rounded-lg gap-0 space-y-0 overflow-hidden"
+      className={cn('border rounded-lg gap-0 space-y-0 overflow-hidden', className)}
     >
       <TabsList className="bg-surface-75 px-5 gap-5 overflow-x-auto border-0 border-b">
         {files.map((file) => (