fix: address review items

apps/studio/components/interfaces/Connect/ConnectionPanel.tsx

@@ -20,19 +20,20 @@ import {
 import { Admonition } from 'ui-patterns'
 import { ConnectionParameters } from './ConnectionParameters'
 
-interface ConnectionPanelProps {
+type IPv4Status = {
+  type: 'error' | 'success'
+  title: string
+  description?: string | ReactNode
+  links?: { text: string; url: string }[]
+}
+
+interface BaseConnectionPanelProps {
   type?: 'direct' | 'transaction' | 'session'
   badge?: string
   title: string
   description: string
   contentFooter?: ReactNode
   connectionString: string
-  ipv4Status?: {
-    type: 'error' | 'success'
-    title: string
-    description?: string | ReactNode
-    links?: { text: string; url: string }[]
-  }
   notice?: string[]
   parameters?: Array<{
     key: string
@@ -45,6 +46,29 @@ interface ConnectionPanelProps {
   onCopyCallback: () => void
 }
 
+// Platform environment requires ipv4Status
+interface PlatformConnectionPanelProps extends BaseConnectionPanelProps {
+  env: 'platform'
+  ipv4Status: IPv4Status
+}
+
+// CLI and self-hosted environments don't need ipv4Status
+interface NonPlatformConnectionPanelProps extends BaseConnectionPanelProps {
+  env: 'cli' | 'self-hosted'
+  ipv4Status?: never
+}
+
+// Legacy props for backwards compatibility (infers env from IS_PLATFORM)
+interface LegacyConnectionPanelProps extends BaseConnectionPanelProps {
+  env?: never
+  ipv4Status?: IPv4Status
+}
+
+type ConnectionPanelProps =
+  | PlatformConnectionPanelProps
+  | NonPlatformConnectionPanelProps
+  | LegacyConnectionPanelProps
+
 const IPv4StatusIcon = ({ className, active }: { className?: string; active: boolean }) => {
   return (
     <div className={cn('relative inline-flex', className)}>
@@ -103,6 +127,7 @@ export const CodeBlockFileHeader = ({ title }: { title: string }) => {
 
 export const ConnectionPanel = ({
   type = 'direct',
+  env,
   badge,
   title,
   description,
@@ -119,6 +144,9 @@ export const ConnectionPanel = ({
   const { ref: projectRef } = useParams()
   const state = useDatabaseSelectorStateSnapshot()
 
+  // Use explicit env prop if provided, otherwise fall back to IS_PLATFORM check
+  const isPlatformEnv = env === 'platform' || (env === undefined && IS_PLATFORM)
+
   const { data: poolingInfo } = useSupavisorConfigurationQuery({ projectRef })
   const poolingConfiguration = poolingInfo?.find((x) => x.identifier === state.selectedDatabaseId)
   const isSessionMode = poolingConfiguration?.pool_mode === 'session'
@@ -189,7 +217,7 @@ export const ConnectionPanel = ({
           )}
         </div>
         <div className="flex flex-col -space-y-px w-full">
-          {IS_PLATFORM && ipv4Status && (
+          {isPlatformEnv && ipv4Status && (
             <div className="border border-muted px-5 flex gap-7 items-center py-3 first:rounded-t last:rounded-b">
               <div className="flex items-center gap-2">
                 <IPv4StatusIcon active={ipv4Status.type === 'success'} />
@@ -219,7 +247,7 @@ export const ConnectionPanel = ({
             </div>
           )}
 
-          {IS_PLATFORM && type === 'session' && (
+          {isPlatformEnv && type === 'session' && (
             <div className="border border-muted px-5 flex gap-7 items-center py-3 first:rounded-t last:rounded-b bg-alternative/50">
               <div className="flex w-6 h-6 rounded items-center justify-center gap-2 flex-shrink-0 bg-surface-100">
                 <WarningIcon />
@@ -234,7 +262,7 @@ export const ConnectionPanel = ({
             </div>
           )}
 
-          {IS_PLATFORM && ipv4Status?.type === 'error' && (
+          {isPlatformEnv && ipv4Status?.type === 'error' && (
             <Collapsible_Shadcn_ className="group -space-y-px">
               <CollapsibleTrigger_Shadcn_
                 asChild

apps/studio/components/interfaces/Connect/DatabaseConnectionString.tsx

@@ -70,7 +70,7 @@ export const DatabaseConnectionString = () => {
   const state = useDatabaseSelectorStateSnapshot()
 
   // Fetch deployment mode (CLI vs self-hosted) for non-platform environments
-  const { data: deploymentMode } = useDeploymentModeQuery()
+  const { data: deploymentMode, isPending: isLoadingDeploymentMode } = useDeploymentModeQuery()
   const isCliMode = deploymentMode?.is_cli_mode ?? false
 
   // Determine which connection methods are available based on environment
@@ -196,7 +196,7 @@ export const DatabaseConnectionString = () => {
       : isSuccessSupavisorConfig
 
   const error = poolerError || readReplicasError
-  const isLoading = isLoadingPoolerConfig || isLoadingReadReplicas
+  const isLoading = isLoadingPoolerConfig || isLoadingReadReplicas || isLoadingDeploymentMode
   const isError = isErrorPoolerConfig || isErrorReadReplicas
   const isSuccess = isSuccessPoolerConfig && isSuccessReadReplicas
 
@@ -434,30 +434,47 @@ export const DatabaseConnectionString = () => {
               </div>
             )}
             <div className="px-4 md:px-7 py-8">
-              {selectedMethod === 'direct' && (IS_PLATFORM || isCliMode) && (
+              {selectedMethod === 'direct' && IS_PLATFORM && (
                 <ConnectionPanel
                   type="direct"
+                  env="platform"
+                  title={connectionStringMethodOptions.direct.label}
+                  contentType={contentType}
+                  lang={lang}
+                  fileTitle={fileTitle}
+                  description={connectionStringMethodOptions.direct.description}
+                  connectionString={connectionStrings['direct'][selectedTab]}
+                  ipv4Status={{
+                    type: !ipv4Addon ? 'error' : 'success',
+                    title: !ipv4Addon ? 'Not IPv4 compatible' : 'IPv4 compatible',
+                    description:
+                      !sharedPoolerPreferred && !ipv4Addon
+                        ? PGBOUNCER_ENABLED_BUT_NO_IPV4_ADDON_TEXT
+                        : sharedPoolerPreferred
+                          ? 'Use Session Pooler if on a IPv4 network or purchase IPv4 add-on'
+                          : IPV4_ADDON_TEXT,
+                    links: buttonLinks,
+                  }}
+                  parameters={[
+                    { ...CONNECTION_PARAMETERS.host, value: connectionInfo.db_host },
+                    { ...CONNECTION_PARAMETERS.port, value: connectionInfo.db_port },
+                    { ...CONNECTION_PARAMETERS.database, value: connectionInfo.db_name },
+                    { ...CONNECTION_PARAMETERS.user, value: connectionInfo.db_user },
+                  ]}
+                  onCopyCallback={() => handleCopy(selectedTab, 'direct')}
+                />
+              )}
+
+              {selectedMethod === 'direct' && isCliMode && (
+                <ConnectionPanel
+                  type="direct"
+                  env="cli"
                   title={connectionStringMethodOptions.direct.label}
                   contentType={contentType}
                   lang={lang}
                   fileTitle={fileTitle}
                   description={connectionStringMethodOptions.direct.description}
                   connectionString={connectionStrings['direct'][selectedTab]}
-                  ipv4Status={
-                    IS_PLATFORM
-                      ? {
-                          type: !ipv4Addon ? 'error' : 'success',
-                          title: !ipv4Addon ? 'Not IPv4 compatible' : 'IPv4 compatible',
-                          description:
-                            !sharedPoolerPreferred && !ipv4Addon
-                              ? PGBOUNCER_ENABLED_BUT_NO_IPV4_ADDON_TEXT
-                              : sharedPoolerPreferred
-                                ? 'Use Session Pooler if on a IPv4 network or purchase IPv4 add-on'
-                                : IPV4_ADDON_TEXT,
-                          links: buttonLinks,
-                        }
-                      : undefined
-                  }
                   parameters={[
                     { ...CONNECTION_PARAMETERS.host, value: connectionInfo.db_host },
                     { ...CONNECTION_PARAMETERS.port, value: connectionInfo.db_port },
@@ -471,6 +488,7 @@ export const DatabaseConnectionString = () => {
               {selectedMethod === 'transaction' && IS_PLATFORM && (
                 <ConnectionPanel
                   type="transaction"
+                  env="platform"
                   title={connectionStringMethodOptions.transaction.label}
                   contentType={contentType}
                   lang={lang}
@@ -556,6 +574,7 @@ export const DatabaseConnectionString = () => {
               {selectedMethod === 'transaction' && isSelfHosted && (
                 <ConnectionPanel
                   type="transaction"
+                  env="self-hosted"
                   title={connectionStringMethodOptions.transaction.label}
                   contentType={contentType}
                   lang={lang}
@@ -580,6 +599,7 @@ export const DatabaseConnectionString = () => {
               {selectedMethod === 'session' && IS_PLATFORM && (
                 <ConnectionPanel
                   type="session"
+                  env="platform"
                   title={connectionStringMethodOptions.session.label}
                   contentType={contentType}
                   lang={lang}
@@ -613,6 +633,7 @@ export const DatabaseConnectionString = () => {
               {selectedMethod === 'session' && isSelfHosted && (
                 <ConnectionPanel
                   type="session"
+                  env="self-hosted"
                   title={connectionStringMethodOptions.session.label}
                   contentType={contentType}
                   lang={lang}

apps/studio/data/config/deployment-mode-query.ts

@@ -1,5 +1,6 @@
 import { useQuery } from '@tanstack/react-query'
 
+import { handleError } from 'data/fetchers'
 import { API_URL, IS_PLATFORM } from 'lib/constants'
 import type { ResponseError, UseCustomQueryOptions } from 'types'
 
@@ -11,7 +12,7 @@ export async function getDeploymentMode(signal?: AbortSignal): Promise<Deploymen
   const response = await fetch(`${API_URL}/platform/deployment-mode`, { signal })
 
   if (!response.ok) {
-    throw new Error('Failed to fetch deployment mode')
+    handleError(await response.json())
   }
 
   return response.json()

apps/studio/lib/api/self-hosted/constants.ts

@@ -1,7 +1,15 @@
 // Constants specific to self-hosted environments
 
 export const ENCRYPTION_KEY = process.env.PG_META_CRYPTO_KEY || 'SAMPLE_KEY'
-export const POSTGRES_PORT = process.env.POSTGRES_PORT ? Number(process.env.POSTGRES_PORT) : 5432
+export const POSTGRES_PORT = (() => {
+  const port = process.env.POSTGRES_PORT ? Number(process.env.POSTGRES_PORT) : 5432
+  // Validate port is a positive finite integer
+  if (!Number.isFinite(port) || port <= 0 || !Number.isInteger(port)) {
+    console.warn(`Invalid POSTGRES_PORT "${process.env.POSTGRES_PORT}", using default 5432`)
+    return 5432
+  }
+  return port
+})()
 export const POSTGRES_HOST = process.env.POSTGRES_HOST || 'db'
 export const POSTGRES_DATABASE = process.env.POSTGRES_DB || 'postgres'
 export const POSTGRES_PASSWORD = process.env.POSTGRES_PASSWORD || 'postgres'