From 7a957b18e8cd120f6ac20a4e4561c8a55fd78117 Mon Sep 17 00:00:00 2001
From: Stephen Zhou <38493346+hyoban@users.noreply.github.com>
Date: Fri, 8 May 2026 16:49:51 +0800
Subject: [PATCH] tweaks

---
 .../access/page.tsx                           |  6 +--
 .../deploy/page.tsx                           |  6 +--
 .../layout.tsx                                |  6 +--
 .../overview/page.tsx                         |  6 +--
 .../deployments/[appInstanceId]/page.tsx      |  8 ++++
 .../settings/page.tsx                         |  6 +--
 .../versions/page.tsx                         |  6 +--
 .../deployments/[instanceId]/page.tsx         |  8 ----
 .../components/create-instance-modal.tsx      | 14 +++----
 .../deployments/detail/access-tab.tsx         | 10 ++---
 .../detail/access-tab/api-keys.tsx            | 22 +++++-----
 .../detail/access-tab/channels-section.tsx    | 14 +++----
 .../access-tab/developer-api-section.tsx      | 26 ++++++------
 .../detail/access-tab/permissions-section.tsx |  8 ++--
 .../detail/access-tab/permissions.tsx         | 16 +++----
 .../use-access-environment-scope.ts           |  4 +-
 .../deployments/detail/deploy-tab.tsx         |  4 +-
 .../deployments/detail/deployment-sidebar.tsx |  6 +--
 web/features/deployments/detail/index.tsx     | 12 +++---
 .../deployments/detail/overview-tab.tsx       | 42 +++++++++----------
 .../deployments/detail/settings-tab.tsx       | 34 +++++++--------
 .../deployments/detail/versions-tab.tsx       | 16 +++----
 .../versions-tab/release-history-table.tsx    |  8 ++--
 .../deployments/list/instance-card.tsx        | 14 +++----
 web/features/deployments/nav/index.tsx        | 16 +++----
 web/features/deployments/store.ts             |  2 +-
 26 files changed, 160 insertions(+), 160 deletions(-)
 rename web/app/(commonLayout)/deployments/{[instanceId] => [appInstanceId]}/access/page.tsx (51%)
 rename web/app/(commonLayout)/deployments/{[instanceId] => [appInstanceId]}/deploy/page.tsx (51%)
 rename web/app/(commonLayout)/deployments/{[instanceId] => [appInstanceId]}/layout.tsx (65%)
 rename web/app/(commonLayout)/deployments/{[instanceId] => [appInstanceId]}/overview/page.tsx (51%)
 create mode 100644 web/app/(commonLayout)/deployments/[appInstanceId]/page.tsx
 rename web/app/(commonLayout)/deployments/{[instanceId] => [appInstanceId]}/settings/page.tsx (51%)
 rename web/app/(commonLayout)/deployments/{[instanceId] => [appInstanceId]}/versions/page.tsx (51%)
 delete mode 100644 web/app/(commonLayout)/deployments/[instanceId]/page.tsx

diff --git a/web/app/(commonLayout)/deployments/[instanceId]/access/page.tsx b/web/app/(commonLayout)/deployments/[appInstanceId]/access/page.tsx
similarity index 51%
rename from web/app/(commonLayout)/deployments/[instanceId]/access/page.tsx
rename to web/app/(commonLayout)/deployments/[appInstanceId]/access/page.tsx
index f07526fbad..5fa2ff4225 100644
--- a/web/app/(commonLayout)/deployments/[instanceId]/access/page.tsx
+++ b/web/app/(commonLayout)/deployments/[appInstanceId]/access/page.tsx
@@ -1,8 +1,8 @@
 import { AccessTab } from '@/features/deployments/detail/access-tab'
 
 export default async function InstanceDetailAccessPage({ params }: {
-  params: Promise<{ instanceId: string }>
+  params: Promise<{ appInstanceId: string }>
 }) {
-  const { instanceId } = await params
-  return <AccessTab instanceId={instanceId} />
+  const { appInstanceId } = await params
+  return <AccessTab appInstanceId={appInstanceId} />
 }
diff --git a/web/app/(commonLayout)/deployments/[instanceId]/deploy/page.tsx b/web/app/(commonLayout)/deployments/[appInstanceId]/deploy/page.tsx
similarity index 51%
rename from web/app/(commonLayout)/deployments/[instanceId]/deploy/page.tsx
rename to web/app/(commonLayout)/deployments/[appInstanceId]/deploy/page.tsx
index d7ea2c2607..b7f44e429a 100644
--- a/web/app/(commonLayout)/deployments/[instanceId]/deploy/page.tsx
+++ b/web/app/(commonLayout)/deployments/[appInstanceId]/deploy/page.tsx
@@ -1,8 +1,8 @@
 import { DeployTab } from '@/features/deployments/detail/deploy-tab'
 
 export default async function InstanceDetailDeployPage({ params }: {
-  params: Promise<{ instanceId: string }>
+  params: Promise<{ appInstanceId: string }>
 }) {
-  const { instanceId } = await params
-  return <DeployTab instanceId={instanceId} />
+  const { appInstanceId } = await params
+  return <DeployTab appInstanceId={appInstanceId} />
 }
diff --git a/web/app/(commonLayout)/deployments/[instanceId]/layout.tsx b/web/app/(commonLayout)/deployments/[appInstanceId]/layout.tsx
similarity index 65%
rename from web/app/(commonLayout)/deployments/[instanceId]/layout.tsx
rename to web/app/(commonLayout)/deployments/[appInstanceId]/layout.tsx
index 993d922e0a..4e39b06620 100644
--- a/web/app/(commonLayout)/deployments/[instanceId]/layout.tsx
+++ b/web/app/(commonLayout)/deployments/[appInstanceId]/layout.tsx
@@ -3,12 +3,12 @@ import { InstanceDetail } from '@/features/deployments/detail'
 
 export default async function InstanceDetailLayout({ children, params }: {
   children: ReactNode
-  params: Promise<{ instanceId: string }>
+  params: Promise<{ appInstanceId: string }>
 }) {
-  const { instanceId } = await params
+  const { appInstanceId } = await params
 
   return (
-    <InstanceDetail instanceId={instanceId}>
+    <InstanceDetail appInstanceId={appInstanceId}>
       {children}
     </InstanceDetail>
   )
diff --git a/web/app/(commonLayout)/deployments/[instanceId]/overview/page.tsx b/web/app/(commonLayout)/deployments/[appInstanceId]/overview/page.tsx
similarity index 51%
rename from web/app/(commonLayout)/deployments/[instanceId]/overview/page.tsx
rename to web/app/(commonLayout)/deployments/[appInstanceId]/overview/page.tsx
index 45746f8a98..7362d075a2 100644
--- a/web/app/(commonLayout)/deployments/[instanceId]/overview/page.tsx
+++ b/web/app/(commonLayout)/deployments/[appInstanceId]/overview/page.tsx
@@ -1,8 +1,8 @@
 import { OverviewTab } from '@/features/deployments/detail/overview-tab'
 
 export default async function InstanceDetailOverviewPage({ params }: {
-  params: Promise<{ instanceId: string }>
+  params: Promise<{ appInstanceId: string }>
 }) {
-  const { instanceId } = await params
-  return <OverviewTab instanceId={instanceId} />
+  const { appInstanceId } = await params
+  return <OverviewTab appInstanceId={appInstanceId} />
 }
diff --git a/web/app/(commonLayout)/deployments/[appInstanceId]/page.tsx b/web/app/(commonLayout)/deployments/[appInstanceId]/page.tsx
new file mode 100644
index 0000000000..b0ae57a3a8
--- /dev/null
+++ b/web/app/(commonLayout)/deployments/[appInstanceId]/page.tsx
@@ -0,0 +1,8 @@
+import { redirect } from '@/next/navigation'
+
+export default async function InstanceDetailPage({ params }: {
+  params: Promise<{ appInstanceId: string }>
+}) {
+  const { appInstanceId } = await params
+  redirect(`/deployments/${appInstanceId}/overview`)
+}
diff --git a/web/app/(commonLayout)/deployments/[instanceId]/settings/page.tsx b/web/app/(commonLayout)/deployments/[appInstanceId]/settings/page.tsx
similarity index 51%
rename from web/app/(commonLayout)/deployments/[instanceId]/settings/page.tsx
rename to web/app/(commonLayout)/deployments/[appInstanceId]/settings/page.tsx
index b3b5ca4faa..da9f4b0da2 100644
--- a/web/app/(commonLayout)/deployments/[instanceId]/settings/page.tsx
+++ b/web/app/(commonLayout)/deployments/[appInstanceId]/settings/page.tsx
@@ -1,8 +1,8 @@
 import { SettingsTab } from '@/features/deployments/detail/settings-tab'
 
 export default async function InstanceDetailSettingsPage({ params }: {
-  params: Promise<{ instanceId: string }>
+  params: Promise<{ appInstanceId: string }>
 }) {
-  const { instanceId } = await params
-  return <SettingsTab instanceId={instanceId} />
+  const { appInstanceId } = await params
+  return <SettingsTab appInstanceId={appInstanceId} />
 }
diff --git a/web/app/(commonLayout)/deployments/[instanceId]/versions/page.tsx b/web/app/(commonLayout)/deployments/[appInstanceId]/versions/page.tsx
similarity index 51%
rename from web/app/(commonLayout)/deployments/[instanceId]/versions/page.tsx
rename to web/app/(commonLayout)/deployments/[appInstanceId]/versions/page.tsx
index ed176b1a64..31323bc14e 100644
--- a/web/app/(commonLayout)/deployments/[instanceId]/versions/page.tsx
+++ b/web/app/(commonLayout)/deployments/[appInstanceId]/versions/page.tsx
@@ -1,8 +1,8 @@
 import { VersionsTab } from '@/features/deployments/detail/versions-tab'
 
 export default async function InstanceDetailVersionsPage({ params }: {
-  params: Promise<{ instanceId: string }>
+  params: Promise<{ appInstanceId: string }>
 }) {
-  const { instanceId } = await params
-  return <VersionsTab instanceId={instanceId} />
+  const { appInstanceId } = await params
+  return <VersionsTab appInstanceId={appInstanceId} />
 }
diff --git a/web/app/(commonLayout)/deployments/[instanceId]/page.tsx b/web/app/(commonLayout)/deployments/[instanceId]/page.tsx
deleted file mode 100644
index 6638ffe058..0000000000
--- a/web/app/(commonLayout)/deployments/[instanceId]/page.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import { redirect } from '@/next/navigation'
-
-export default async function InstanceDetailPage({ params }: {
-  params: Promise<{ instanceId: string }>
-}) {
-  const { instanceId } = await params
-  redirect(`/deployments/${instanceId}/overview`)
-}
diff --git a/web/features/deployments/components/create-instance-modal.tsx b/web/features/deployments/components/create-instance-modal.tsx
index 5ab55a74d8..c3de0bb639 100644
--- a/web/features/deployments/components/create-instance-modal.tsx
+++ b/web/features/deployments/components/create-instance-modal.tsx
@@ -47,7 +47,7 @@ type AppPickerProps = {
   apps: StudioSourceApp[]
   isLoading: boolean
   value: string
-  onChange: (appId: string) => void
+  onChange: (sourceAppId: string) => void
 }
 
 function AppPicker({ apps, isLoading, value, onChange }: AppPickerProps) {
@@ -225,10 +225,10 @@ function CreateInstanceForm() {
   }))
   const apps = (appList?.data ?? []).map(toStudioSourceAppInfo)
 
-  const [appId, setAppId] = useState<string>('')
+  const [sourceAppId, setSourceAppId] = useState<string>('')
 
-  const selectedApp = apps.find(a => a.id === appId)
-  const canCreate = Boolean(appId && !createInstance.isPending)
+  const selectedApp = apps.find(a => a.id === sourceAppId)
+  const canCreate = Boolean(sourceAppId && !createInstance.isPending)
 
   const handleCreate = async (form: HTMLFormElement) => {
     if (!canCreate)
@@ -243,7 +243,7 @@ function CreateInstanceForm() {
     try {
       const result = await createInstance.mutateAsync({
         body: {
-          sourceAppId: appId,
+          sourceAppId,
           name: name.trim(),
           description: description.trim() || undefined,
         },
@@ -280,8 +280,8 @@ function CreateInstanceForm() {
         <AppPicker
           apps={apps}
           isLoading={isLoading}
-          value={appId}
-          onChange={setAppId}
+          value={sourceAppId}
+          onChange={setSourceAppId}
         />
       </div>
 
diff --git a/web/features/deployments/detail/access-tab.tsx b/web/features/deployments/detail/access-tab.tsx
index 1f4ec0d700..76671a8b63 100644
--- a/web/features/deployments/detail/access-tab.tsx
+++ b/web/features/deployments/detail/access-tab.tsx
@@ -4,14 +4,14 @@ import { AccessChannelsSection } from './access-tab/channels-section'
 import { DeveloperApiSection } from './access-tab/developer-api-section'
 import { AccessPermissionsSection } from './access-tab/permissions-section'
 
-export function AccessTab({ instanceId: appId }: {
-  instanceId: string
+export function AccessTab({ appInstanceId }: {
+  appInstanceId: string
 }) {
   return (
     <div className="flex w-full max-w-[960px] flex-col gap-5 p-6">
-      <AccessPermissionsSection appId={appId} />
-      <AccessChannelsSection appId={appId} />
-      <DeveloperApiSection appId={appId} />
+      <AccessPermissionsSection appInstanceId={appInstanceId} />
+      <AccessChannelsSection appInstanceId={appInstanceId} />
+      <DeveloperApiSection appInstanceId={appInstanceId} />
     </div>
   )
 }
diff --git a/web/features/deployments/detail/access-tab/api-keys.tsx b/web/features/deployments/detail/access-tab/api-keys.tsx
index 34d4098e59..d96bc395fe 100644
--- a/web/features/deployments/detail/access-tab/api-keys.tsx
+++ b/web/features/deployments/detail/access-tab/api-keys.tsx
@@ -18,8 +18,8 @@ import { createdDeveloperApiTokenAtom } from '../../store'
 import { environmentName } from '../../utils'
 import { useCopyFeedback } from './use-copy-feedback'
 
-function ApiKeyRow({ appId, apiKey }: {
-  appId: string
+function ApiKeyRow({ appInstanceId, apiKey }: {
+  appInstanceId: string
   apiKey: DeveloperApiKeyRow
 }) {
   const { t } = useTranslation('deployments')
@@ -31,7 +31,7 @@ function ApiKeyRow({ appId, apiKey }: {
   async function revealApiKey(apiKeyId: string) {
     const response = await consoleClient.enterprise.appDeploy.revealDeveloperApiKey({
       params: {
-        appInstanceId: appId,
+        appInstanceId,
         apiKeyId,
       },
     })
@@ -46,7 +46,7 @@ function ApiKeyRow({ appId, apiKey }: {
 
     revokeApiKey.mutate({
       params: {
-        appInstanceId: appId,
+        appInstanceId,
         apiKeyId: apiKey.id,
       },
     })
@@ -100,8 +100,8 @@ function ApiKeyRow({ appId, apiKey }: {
   )
 }
 
-export function ApiKeyList({ appId, apiKeys }: {
-  appId: string
+export function ApiKeyList({ appInstanceId, apiKeys }: {
+  appInstanceId: string
   apiKeys: DeveloperApiKeyRow[]
 }) {
   return (
@@ -109,7 +109,7 @@ export function ApiKeyList({ appId, apiKeys }: {
       {apiKeys.map(apiKey => (
         <ApiKeyRow
           key={apiKey.id}
-          appId={appId}
+          appInstanceId={appInstanceId}
           apiKey={apiKey}
         />
       ))}
@@ -117,8 +117,8 @@ export function ApiKeyList({ appId, apiKeys }: {
   )
 }
 
-export function ApiKeyGenerateMenu({ appId, environments, apiKeys }: {
-  appId: string
+export function ApiKeyGenerateMenu({ appInstanceId, environments, apiKeys }: {
+  appInstanceId: string
   environments: ConsoleEnvironment[]
   apiKeys: DeveloperApiKeyRow[]
 }) {
@@ -142,7 +142,7 @@ export function ApiKeyGenerateMenu({ appId, environments, apiKeys }: {
     generateApiKey.mutate(
       {
         params: {
-          appInstanceId: appId,
+          appInstanceId,
         },
         body: {
           environmentId,
@@ -152,7 +152,7 @@ export function ApiKeyGenerateMenu({ appId, environments, apiKeys }: {
       {
         onSuccess: (response) => {
           if (response.token)
-            setCreatedApiToken({ appId, token: response.token })
+            setCreatedApiToken({ appInstanceId, token: response.token })
         },
       },
     )
diff --git a/web/features/deployments/detail/access-tab/channels-section.tsx b/web/features/deployments/detail/access-tab/channels-section.tsx
index 900b459c0a..ab0b8a141f 100644
--- a/web/features/deployments/detail/access-tab/channels-section.tsx
+++ b/web/features/deployments/detail/access-tab/channels-section.tsx
@@ -9,11 +9,11 @@ import { CopyPill, EndpointRow, Section } from './common'
 import { getUrlOrigin } from './url'
 
 type AccessChannelsSectionProps = {
-  appId: string
+  appInstanceId: string
 }
 
-function AccessChannelsSwitch({ appId, checked }: {
-  appId: string
+function AccessChannelsSwitch({ appInstanceId, checked }: {
+  appInstanceId: string
   checked: boolean
 }) {
   const toggleAccessChannel = useMutation(consoleQuery.enterprise.appDeploy.updateAccessChannels.mutationOptions())
@@ -23,7 +23,7 @@ function AccessChannelsSwitch({ appId, checked }: {
       checked={checked}
       onCheckedChange={(enabled) => {
         toggleAccessChannel.mutate({
-          params: { appInstanceId: appId },
+          params: { appInstanceId },
           body: { enabled },
         })
       }}
@@ -32,12 +32,12 @@ function AccessChannelsSwitch({ appId, checked }: {
 }
 
 export function AccessChannelsSection({
-  appId,
+  appInstanceId,
 }: AccessChannelsSectionProps) {
   const { t } = useTranslation('deployments')
   const { data: accessConfig } = useQuery(consoleQuery.enterprise.appDeploy.getAppInstanceAccess.queryOptions({
     input: {
-      params: { appInstanceId: appId },
+      params: { appInstanceId },
     },
   }))
   const runEnabled = accessConfig?.accessChannels?.enabled ?? false
@@ -51,7 +51,7 @@ export function AccessChannelsSection({
       description={t('access.channels.description')}
       action={(
         <AccessChannelsSwitch
-          appId={appId}
+          appInstanceId={appInstanceId}
           checked={runEnabled}
         />
       )}
diff --git a/web/features/deployments/detail/access-tab/developer-api-section.tsx b/web/features/deployments/detail/access-tab/developer-api-section.tsx
index f5f5b0602d..8c1a79fe20 100644
--- a/web/features/deployments/detail/access-tab/developer-api-section.tsx
+++ b/web/features/deployments/detail/access-tab/developer-api-section.tsx
@@ -11,11 +11,11 @@ import { CopyPill, Section } from './common'
 import { useAccessEnvironmentScope } from './use-access-environment-scope'
 
 type DeveloperApiSectionProps = {
-  appId: string
+  appInstanceId: string
 }
 
-function DeveloperApiSwitch({ appId, checked }: {
-  appId: string
+function DeveloperApiSwitch({ appInstanceId, checked }: {
+  appInstanceId: string
   checked: boolean
 }) {
   const toggleDeveloperAPI = useMutation(consoleQuery.enterprise.appDeploy.updateDeveloperApi.mutationOptions())
@@ -25,7 +25,7 @@ function DeveloperApiSwitch({ appId, checked }: {
       checked={checked}
       onCheckedChange={(enabled) => {
         toggleDeveloperAPI.mutate({
-          params: { appInstanceId: appId },
+          params: { appInstanceId },
           body: { enabled },
         })
       }}
@@ -33,13 +33,13 @@ function DeveloperApiSwitch({ appId, checked }: {
   )
 }
 
-function CreatedApiTokenCard({ appId }: {
-  appId: string
+function CreatedApiTokenCard({ appInstanceId }: {
+  appInstanceId: string
 }) {
   const { t } = useTranslation('deployments')
   const createdApiToken = useAtomValue(createdDeveloperApiTokenAtom)
   const setCreatedApiToken = useSetAtom(createdDeveloperApiTokenAtom)
-  const visibleCreatedApiToken = createdApiToken?.appId === appId
+  const visibleCreatedApiToken = createdApiToken?.appInstanceId === appInstanceId
     ? createdApiToken.token
     : undefined
 
@@ -75,10 +75,10 @@ function CreatedApiTokenCard({ appId }: {
 }
 
 export function DeveloperApiSection({
-  appId,
+  appInstanceId,
 }: DeveloperApiSectionProps) {
   const { t } = useTranslation('deployments')
-  const { accessConfig, environments } = useAccessEnvironmentScope(appId)
+  const { accessConfig, environments } = useAccessEnvironmentScope(appInstanceId)
   const apiEnabled = accessConfig?.developerApi?.enabled ?? false
   const apiUrl = accessConfig?.developerApi?.apiUrl
   const apiKeys = accessConfig?.developerApi?.apiKeys ?? []
@@ -89,7 +89,7 @@ export function DeveloperApiSection({
       description={t('access.api.description')}
       action={(
         <DeveloperApiSwitch
-          appId={appId}
+          appInstanceId={appInstanceId}
           checked={apiEnabled}
         />
       )}
@@ -113,12 +113,12 @@ export function DeveloperApiSection({
                   </span>
                 </div>
                 <ApiKeyGenerateMenu
-                  appId={appId}
+                  appInstanceId={appInstanceId}
                   environments={environments}
                   apiKeys={apiKeys}
                 />
               </div>
-              <CreatedApiTokenCard appId={appId} />
+              <CreatedApiTokenCard appInstanceId={appInstanceId} />
               {apiKeys.length === 0
                 ? (
                     <div className="rounded-lg border border-dashed border-components-panel-border bg-components-panel-bg-blur px-4 py-6 text-center system-sm-regular text-text-tertiary">
@@ -129,7 +129,7 @@ export function DeveloperApiSection({
                   )
                 : (
                     <ApiKeyList
-                      appId={appId}
+                      appInstanceId={appInstanceId}
                       apiKeys={apiKeys}
                     />
                   )}
diff --git a/web/features/deployments/detail/access-tab/permissions-section.tsx b/web/features/deployments/detail/access-tab/permissions-section.tsx
index d7661b95b3..612f7eb2f5 100644
--- a/web/features/deployments/detail/access-tab/permissions-section.tsx
+++ b/web/features/deployments/detail/access-tab/permissions-section.tsx
@@ -6,14 +6,14 @@ import { EnvironmentPermissionRow } from './permissions'
 import { useAccessEnvironmentScope } from './use-access-environment-scope'
 
 type AccessPermissionsSectionProps = {
-  appId: string
+  appInstanceId: string
 }
 
 export function AccessPermissionsSection({
-  appId,
+  appInstanceId,
 }: AccessPermissionsSectionProps) {
   const { t } = useTranslation('deployments')
-  const { environments, policies } = useAccessEnvironmentScope(appId)
+  const { environments, policies } = useAccessEnvironmentScope(appInstanceId)
 
   return (
     <Section
@@ -33,7 +33,7 @@ export function AccessPermissionsSection({
                 return (
                   <EnvironmentPermissionRow
                     key={env.id}
-                    appId={appId}
+                    appInstanceId={appInstanceId}
                     environment={env}
                     summaryPolicy={policy}
                   />
diff --git a/web/features/deployments/detail/access-tab/permissions.tsx b/web/features/deployments/detail/access-tab/permissions.tsx
index 6f9db826dc..dc7bd98e59 100644
--- a/web/features/deployments/detail/access-tab/permissions.tsx
+++ b/web/features/deployments/detail/access-tab/permissions.tsx
@@ -171,14 +171,14 @@ function SubjectPill({ subject, disabled, onRemove }: {
 }
 
 type SubjectPickerProps = {
-  appId: string
+  appInstanceId: string
   disabled?: boolean
   selectedSubjects: SelectableAccessSubject[]
   onChange: (subjects: SelectableAccessSubject[]) => void
 }
 
 function SubjectPicker({
-  appId,
+  appInstanceId,
   disabled,
   selectedSubjects,
   onChange,
@@ -191,7 +191,7 @@ function SubjectPicker({
   const subjectsQuery = useQuery(consoleQuery.enterprise.appDeploy.searchAccessSubjects.queryOptions({
     input: open
       ? {
-          params: { appInstanceId: appId },
+          params: { appInstanceId },
           query: {
             keyword: debouncedKeyword.trim() || undefined,
             subjectTypes: ['account', 'group'],
@@ -292,13 +292,13 @@ function SubjectPicker({
 }
 
 type EnvironmentPermissionRowProps = {
-  appId: string
+  appInstanceId: string
   environment: ConsoleEnvironment
   summaryPolicy?: EnvironmentAccessRow
 }
 
 export function EnvironmentPermissionRow({
-  appId,
+  appInstanceId,
   environment,
   summaryPolicy,
 }: EnvironmentPermissionRowProps) {
@@ -309,7 +309,7 @@ export function EnvironmentPermissionRow({
     input: environmentId
       ? {
           params: {
-            appInstanceId: appId,
+            appInstanceId,
             environmentId,
           },
         }
@@ -345,7 +345,7 @@ export function EnvironmentPermissionRow({
     try {
       await setEnvironmentAccessPolicy.mutateAsync({
         params: {
-          appInstanceId: appId,
+          appInstanceId,
           environmentId,
         },
         body: {
@@ -403,7 +403,7 @@ export function EnvironmentPermissionRow({
         <div className="flex flex-col gap-2 pl-0 sm:pl-[152px]">
           <div className="flex flex-wrap items-center gap-2">
             <SubjectPicker
-              appId={appId}
+              appInstanceId={appInstanceId}
               selectedSubjects={subjects}
               disabled={isSaving || policyQuery.isLoading}
               onChange={handleSubjectsChange}
diff --git a/web/features/deployments/detail/access-tab/use-access-environment-scope.ts b/web/features/deployments/detail/access-tab/use-access-environment-scope.ts
index d350f8bd0c..4eae0fbf42 100644
--- a/web/features/deployments/detail/access-tab/use-access-environment-scope.ts
+++ b/web/features/deployments/detail/access-tab/use-access-environment-scope.ts
@@ -16,8 +16,8 @@ function uniqueEnvironments(environments: (ConsoleEnvironment | undefined)[]) {
   })
 }
 
-export function useAccessEnvironmentScope(appId: string) {
-  const appInput = { params: { appInstanceId: appId } }
+export function useAccessEnvironmentScope(appInstanceId: string) {
+  const appInput = { params: { appInstanceId } }
   const { data: accessConfig } = useQuery(consoleQuery.enterprise.appDeploy.getAppInstanceAccess.queryOptions({
     input: appInput,
   }))
diff --git a/web/features/deployments/detail/deploy-tab.tsx b/web/features/deployments/detail/deploy-tab.tsx
index dd3b457ef5..ec57b609bd 100644
--- a/web/features/deployments/detail/deploy-tab.tsx
+++ b/web/features/deployments/detail/deploy-tab.tsx
@@ -81,8 +81,8 @@ function NewDeploymentMenu({ appInstanceId, availableEnvs }: {
   )
 }
 
-export function DeployTab({ instanceId: appInstanceId }: {
-  instanceId: string
+export function DeployTab({ appInstanceId }: {
+  appInstanceId: string
 }) {
   const { t } = useTranslation('deployments')
   const { data: environmentDeployments } = useQuery(consoleQuery.enterprise.appDeploy.listRuntimeInstances.queryOptions({
diff --git a/web/features/deployments/detail/deployment-sidebar.tsx b/web/features/deployments/detail/deployment-sidebar.tsx
index 6bd1f379bc..0746622cbc 100644
--- a/web/features/deployments/detail/deployment-sidebar.tsx
+++ b/web/features/deployments/detail/deployment-sidebar.tsx
@@ -114,8 +114,8 @@ export function DeploymentSidebar({
   const isMobile = media === MediaType.mobile
   const { sidebarMode, toggleSidebarMode } = useDeploymentSidebarMode(isMobile)
   const expand = sidebarMode === 'expand'
-  const instanceId = app.id ?? ''
-  const instanceName = app.name ?? instanceId
+  const appInstanceId = app.id ?? ''
+  const instanceName = app.name ?? appInstanceId
   const appModeLabel = getAppModeLabel(toAppMode(app.mode), tCommon)
 
   useKeyPress(`${getKeyboardKeyCodeBySystem('ctrl')}.b`, (e) => {
@@ -199,7 +199,7 @@ export function DeploymentSidebar({
             mode={sidebarMode}
             iconMap={{ selected: tab.selectedIcon, normal: tab.icon }}
             name={t(`tabs.${tab.key}.name`)}
-            href={`/deployments/${instanceId}/${tab.key}`}
+            href={`/deployments/${appInstanceId}/${tab.key}`}
           />
         ))}
       </nav>
diff --git a/web/features/deployments/detail/index.tsx b/web/features/deployments/detail/index.tsx
index dbb8deb2b8..2eca7cbf59 100644
--- a/web/features/deployments/detail/index.tsx
+++ b/web/features/deployments/detail/index.tsx
@@ -14,8 +14,8 @@ import { RollbackModal } from '../components/rollback-modal'
 import { DeploymentSidebar } from './deployment-sidebar'
 import { isInstanceDetailTabKey } from './tabs'
 
-export function InstanceDetail({ instanceId, children }: {
-  instanceId: string
+export function InstanceDetail({ appInstanceId, children }: {
+  appInstanceId: string
   children: ReactNode
 }) {
   const { t } = useTranslation('deployments')
@@ -24,16 +24,16 @@ export function InstanceDetail({ instanceId, children }: {
   const activeTab: InstanceDetailTabKey = isInstanceDetailTabKey(selectedTab) ? selectedTab : 'overview'
   const overviewQuery = useQuery(consoleQuery.enterprise.appDeploy.getAppInstanceOverview.queryOptions({
     input: {
-      params: { appInstanceId: instanceId },
+      params: { appInstanceId },
     },
   }))
 
   useDocumentTitle(t('documentTitle.detail'))
 
   const app = overviewQuery.data?.instance
-  const appId = app?.id
+  const resolvedAppInstanceId = app?.id
 
-  if (!appId && overviewQuery.isLoading) {
+  if (!resolvedAppInstanceId && overviewQuery.isLoading) {
     return (
       <div className="flex h-full items-center justify-center bg-background-body">
         <span className="h-6 w-6 animate-spin rounded-full border-2 border-components-panel-border border-t-transparent" />
@@ -41,7 +41,7 @@ export function InstanceDetail({ instanceId, children }: {
     )
   }
 
-  if (!appId || !app) {
+  if (!resolvedAppInstanceId || !app) {
     return (
       <div className="flex h-full flex-col items-center justify-center gap-3 bg-background-body">
         <div className="title-xl-semi-bold text-text-primary">{t('detail.notFound')}</div>
diff --git a/web/features/deployments/detail/overview-tab.tsx b/web/features/deployments/detail/overview-tab.tsx
index 423299e331..884f87f02a 100644
--- a/web/features/deployments/detail/overview-tab.tsx
+++ b/web/features/deployments/detail/overview-tab.tsx
@@ -88,27 +88,27 @@ function overviewDeploymentStatus(status?: string): 'deploying' | 'deploy_failed
   return 'ready'
 }
 
-function DeployFromOverviewButton({ appId }: {
-  appId: string
+function DeployFromOverviewButton({ appInstanceId }: {
+  appInstanceId: string
 }) {
   const { t } = useTranslation('deployments')
   const openDeployDrawer = useSetAtom(openDeployDrawerAtom)
 
   return (
-    <Button size="small" variant="primary" onClick={() => openDeployDrawer({ appInstanceId: appId })}>
+    <Button size="small" variant="primary" onClick={() => openDeployDrawer({ appInstanceId })}>
       {t('overview.deploy')}
     </Button>
   )
 }
 
-function BasicInfoSection({ appId }: {
-  appId: string
+function BasicInfoSection({ appInstanceId }: {
+  appInstanceId: string
 }) {
   const { t } = useTranslation('deployments')
   const { t: tCommon } = useTranslation()
   const { data: overview } = useQuery(consoleQuery.enterprise.appDeploy.getAppInstanceOverview.queryOptions({
     input: {
-      params: { appInstanceId: appId },
+      params: { appInstanceId },
     },
   }))
   const overviewApp = overview?.instance
@@ -131,11 +131,11 @@ function BasicInfoSection({ appId }: {
   )
 }
 
-function DeploymentStatusSection({ appId }: {
-  appId: string
+function DeploymentStatusSection({ appInstanceId }: {
+  appInstanceId: string
 }) {
   const { t } = useTranslation('deployments')
-  const input = { params: { appInstanceId: appId } }
+  const input = { params: { appInstanceId } }
   const { data: overview } = useQuery(consoleQuery.enterprise.appDeploy.getAppInstanceOverview.queryOptions({
     input,
   }))
@@ -160,7 +160,7 @@ function DeploymentStatusSection({ appId }: {
     <Section
       title={t('overview.deploymentStatus')}
       action={(
-        <Button nativeButton={false} size="small" variant="secondary" render={<Link href={`/deployments/${appId}/deploy`} />}>
+        <Button nativeButton={false} size="small" variant="secondary" render={<Link href={`/deployments/${appInstanceId}/deploy`} />}>
           {t('overview.viewDeployments')}
           <span className="i-ri-arrow-right-up-line h-3.5 w-3.5" />
         </Button>
@@ -178,7 +178,7 @@ function DeploymentStatusSection({ appId }: {
               {releaseRows.length === 0
                 ? canCreateRelease
                   ? (
-                      <Button nativeButton={false} size="small" variant="primary" render={<Link href={`/deployments/${appId}/versions`} />}>
+                      <Button nativeButton={false} size="small" variant="primary" render={<Link href={`/deployments/${appInstanceId}/versions`} />}>
                         {t('overview.createRelease')}
                       </Button>
                     )
@@ -188,7 +188,7 @@ function DeploymentStatusSection({ appId }: {
                       </Button>
                     )
                 : (
-                    <DeployFromOverviewButton appId={appId} />
+                    <DeployFromOverviewButton appInstanceId={appInstanceId} />
                   )}
             </div>
           )
@@ -214,11 +214,11 @@ function DeploymentStatusSection({ appId }: {
   )
 }
 
-function AccessStatusSection({ appId }: {
-  appId: string
+function AccessStatusSection({ appInstanceId }: {
+  appInstanceId: string
 }) {
   const { t } = useTranslation('deployments')
-  const input = { params: { appInstanceId: appId } }
+  const input = { params: { appInstanceId } }
   const { data: overview } = useQuery(consoleQuery.enterprise.appDeploy.getAppInstanceOverview.queryOptions({
     input,
   }))
@@ -234,7 +234,7 @@ function AccessStatusSection({ appId }: {
     <Section
       title={t('overview.accessStatus')}
       action={(
-        <Button nativeButton={false} size="small" variant="secondary" render={<Link href={`/deployments/${appId}/access`} />}>
+        <Button nativeButton={false} size="small" variant="secondary" render={<Link href={`/deployments/${appInstanceId}/access`} />}>
           {t('overview.configureAccess')}
           <span className="i-ri-arrow-right-up-line h-3.5 w-3.5" />
         </Button>
@@ -266,14 +266,14 @@ function AccessStatusSection({ appId }: {
   )
 }
 
-export function OverviewTab({ instanceId: appId }: {
-  instanceId: string
+export function OverviewTab({ appInstanceId }: {
+  appInstanceId: string
 }) {
   return (
     <div className="flex w-full max-w-[960px] flex-col gap-5 p-6">
-      <BasicInfoSection appId={appId} />
-      <DeploymentStatusSection appId={appId} />
-      <AccessStatusSection appId={appId} />
+      <BasicInfoSection appInstanceId={appInstanceId} />
+      <DeploymentStatusSection appInstanceId={appInstanceId} />
+      <AccessStatusSection appInstanceId={appInstanceId} />
     </div>
   )
 }
diff --git a/web/features/deployments/detail/settings-tab.tsx b/web/features/deployments/detail/settings-tab.tsx
index d3278872e6..6d6b63851d 100644
--- a/web/features/deployments/detail/settings-tab.tsx
+++ b/web/features/deployments/detail/settings-tab.tsx
@@ -39,12 +39,12 @@ function DeleteInstanceButton({
   const deleteInstance = useMutation(consoleQuery.enterprise.appDeploy.deleteAppInstance.mutationOptions())
   const [isDeleting, setIsDeleting] = useState(false)
   const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
-  const appId = app.id
-  const appName = app.name ?? appId ?? ''
+  const appInstanceId = app.id
+  const appName = app.name ?? appInstanceId ?? ''
   const canDelete = !hasDeployments && Boolean(settings) && settings?.deleteGuard?.canDelete !== false
 
   const handleDelete = () => {
-    if (!appId)
+    if (!appInstanceId)
       return
 
     void (async () => {
@@ -52,7 +52,7 @@ function DeleteInstanceButton({
       try {
         await deleteInstance.mutateAsync({
           params: {
-            appInstanceId: appId,
+            appInstanceId,
           },
         })
         toast.success(t('settings.deleted'))
@@ -144,15 +144,15 @@ function SettingsForm({ app, settings }: SettingsFormProps) {
   const canSave = Boolean(name.trim() && (name !== initialName || description !== initialDescription) && !isSaving)
 
   const handleSave = () => {
-    const appId = app.id
-    if (!canSave || !appId)
+    const appInstanceId = app.id
+    if (!canSave || !appInstanceId)
       return
     void (async () => {
       setIsSaving(true)
       try {
         await updateInstance.mutateAsync({
           params: {
-            appInstanceId: appId,
+            appInstanceId,
           },
           body: {
             name: name.trim(),
@@ -216,10 +216,10 @@ function SettingsForm({ app, settings }: SettingsFormProps) {
   )
 }
 
-function SettingsFormSection({ appId }: {
-  appId: string
+function SettingsFormSection({ appInstanceId }: {
+  appInstanceId: string
 }) {
-  const appInput = { params: { appInstanceId: appId } }
+  const appInput = { params: { appInstanceId } }
   const { data: overview } = useQuery(consoleQuery.enterprise.appDeploy.getAppInstanceOverview.queryOptions({
     input: appInput,
   }))
@@ -243,10 +243,10 @@ function SettingsFormSection({ appId }: {
   )
 }
 
-function DeleteInstanceControlSection({ appId }: {
-  appId: string
+function DeleteInstanceControlSection({ appInstanceId }: {
+  appInstanceId: string
 }) {
-  const appInput = { params: { appInstanceId: appId } }
+  const appInput = { params: { appInstanceId } }
   const { data: overview } = useQuery(consoleQuery.enterprise.appDeploy.getAppInstanceOverview.queryOptions({
     input: appInput,
   }))
@@ -272,13 +272,13 @@ function DeleteInstanceControlSection({ appId }: {
   )
 }
 
-export function SettingsTab({ instanceId: appId }: {
-  instanceId: string
+export function SettingsTab({ appInstanceId }: {
+  appInstanceId: string
 }) {
   return (
     <div className="flex max-w-[640px] flex-col gap-5 p-6">
-      <SettingsFormSection appId={appId} />
-      <DeleteInstanceControlSection appId={appId} />
+      <SettingsFormSection appInstanceId={appInstanceId} />
+      <DeleteInstanceControlSection appInstanceId={appInstanceId} />
     </div>
   )
 }
diff --git a/web/features/deployments/detail/versions-tab.tsx b/web/features/deployments/detail/versions-tab.tsx
index b2bbb60349..3046b08e7f 100644
--- a/web/features/deployments/detail/versions-tab.tsx
+++ b/web/features/deployments/detail/versions-tab.tsx
@@ -11,8 +11,8 @@ import { DEPLOYMENT_PAGE_SIZE } from '../data'
 import { deployedRows } from '../utils'
 import { ReleaseHistoryTable } from './versions-tab/release-history-table'
 
-function CreateReleaseControl({ appId, canCreateRelease }: {
-  appId: string
+function CreateReleaseControl({ appInstanceId, canCreateRelease }: {
+  appInstanceId: string
   canCreateRelease: boolean
 }) {
   const { t } = useTranslation('deployments')
@@ -32,7 +32,7 @@ function CreateReleaseControl({ appId, canCreateRelease }: {
     try {
       const response = await createRelease.mutateAsync({
         params: {
-          appInstanceId: appId,
+          appInstanceId,
         },
         body: {
           name: releaseName,
@@ -149,11 +149,11 @@ function CreateReleaseControl({ appId, canCreateRelease }: {
   )
 }
 
-export function VersionsTab({ instanceId: appId }: {
-  instanceId: string
+export function VersionsTab({ appInstanceId }: {
+  appInstanceId: string
 }) {
   const { t } = useTranslation('deployments')
-  const input = { params: { appInstanceId: appId } }
+  const input = { params: { appInstanceId } }
   const { data: overview } = useQuery(consoleQuery.enterprise.appDeploy.getAppInstanceOverview.queryOptions({
     input,
   }))
@@ -185,7 +185,7 @@ export function VersionsTab({ instanceId: appId }: {
             )
           </span>
         </div>
-        <CreateReleaseControl appId={appId} canCreateRelease={canCreateRelease} />
+        <CreateReleaseControl appInstanceId={appInstanceId} canCreateRelease={canCreateRelease} />
       </div>
 
       {!canCreateRelease && (
@@ -202,7 +202,7 @@ export function VersionsTab({ instanceId: appId }: {
           )
         : (
             <ReleaseHistoryTable
-              appId={appId}
+              appInstanceId={appInstanceId}
               releaseRows={releaseRows}
               deploymentRows={deploymentRows}
             />
diff --git a/web/features/deployments/detail/versions-tab/release-history-table.tsx b/web/features/deployments/detail/versions-tab/release-history-table.tsx
index 0dc1d1aeda..0093d6d288 100644
--- a/web/features/deployments/detail/versions-tab/release-history-table.tsx
+++ b/web/features/deployments/detail/versions-tab/release-history-table.tsx
@@ -15,8 +15,8 @@ import { getReleaseDeployments } from './release-deployments'
 
 const GRID_TEMPLATE = 'grid-cols-[minmax(0,0.9fr)_minmax(0,1fr)_minmax(0,0.8fr)_minmax(0,1.5fr)_96px]'
 
-export function ReleaseHistoryTable({ appId, releaseRows, deploymentRows }: {
-  appId: string
+export function ReleaseHistoryTable({ appInstanceId, releaseRows, deploymentRows }: {
+  appInstanceId: string
   releaseRows: ReleaseRow[]
   deploymentRows: RuntimeInstanceRow[]
 }) {
@@ -63,7 +63,7 @@ export function ReleaseHistoryTable({ appId, releaseRows, deploymentRows }: {
                   </div>
                 </div>
                 <div className="flex shrink-0 justify-end gap-1">
-                  <DeployReleaseMenu releaseId={release.id!} appInstanceId={appId} />
+                  <DeployReleaseMenu releaseId={release.id!} appInstanceId={appInstanceId} />
                 </div>
               </div>
               <div className="flex flex-wrap items-center gap-x-3 gap-y-2">
@@ -114,7 +114,7 @@ export function ReleaseHistoryTable({ appId, releaseRows, deploymentRows }: {
                     ))}
               </div>
               <div className="flex justify-end gap-1">
-                <DeployReleaseMenu releaseId={release.id!} appInstanceId={appId} />
+                <DeployReleaseMenu releaseId={release.id!} appInstanceId={appInstanceId} />
               </div>
             </div>
           </div>
diff --git a/web/features/deployments/list/instance-card.tsx b/web/features/deployments/list/instance-card.tsx
index 0baac1ade5..dd58089400 100644
--- a/web/features/deployments/list/instance-card.tsx
+++ b/web/features/deployments/list/instance-card.tsx
@@ -30,10 +30,10 @@ export function InstanceCard({ app }: {
   if (!app.id)
     return null
 
-  const appId = app.id
-  const appName = app.name ?? appId
+  const appInstanceId = app.id
+  const appName = app.name ?? appInstanceId
   const appMode = toAppMode(app.mode)
-  const detailHref = `/deployments/${appId}/overview`
+  const detailHref = `/deployments/${appInstanceId}/overview`
 
   const statusCount = (status: string) =>
     app.statuses?.find(item => item.status === status)?.count ?? 0
@@ -184,13 +184,13 @@ export function InstanceCard({ app }: {
           </div>
         </div>
       </Link>
-      <InstanceCardActions appId={appId} detailHref={detailHref} />
+      <InstanceCardActions appInstanceId={appInstanceId} detailHref={detailHref} />
     </div>
   )
 }
 
-function InstanceCardActions({ appId, detailHref }: {
-  appId: string
+function InstanceCardActions({ appInstanceId, detailHref }: {
+  appInstanceId: string
   detailHref: string
 }) {
   const { t } = useTranslation('deployments')
@@ -223,7 +223,7 @@ function InstanceCardActions({ appId, detailHref }: {
                 className="gap-2 px-3"
                 onClick={() => {
                   setMenuOpen(false)
-                  openDeployDrawer({ appInstanceId: appId })
+                  openDeployDrawer({ appInstanceId })
                 }}
               >
                 <span className="system-sm-regular text-text-secondary">{t('card.menu.deploy')}</span>
diff --git a/web/features/deployments/nav/index.tsx b/web/features/deployments/nav/index.tsx
index 18165e58ea..1e591c3465 100644
--- a/web/features/deployments/nav/index.tsx
+++ b/web/features/deployments/nav/index.tsx
@@ -51,15 +51,15 @@ export function DeploymentsNav() {
   const router = useRouter()
   const selectedSegment = useSelectedLayoutSegment()
   const isActive = selectedSegment === 'deployments'
-  const params = useParams<{ instanceId?: string }>()
-  const instanceId = params?.instanceId
+  const params = useParams<{ appInstanceId?: string }>()
+  const appInstanceId = params?.appInstanceId
 
   const openCreateInstanceModal = useSetAtom(openCreateInstanceModalAtom)
   const { data: currentInstance } = useQuery(consoleQuery.enterprise.appDeploy.getAppInstanceOverview.queryOptions({
-    input: instanceId
-      ? { params: { appInstanceId: instanceId } }
+    input: appInstanceId
+      ? { params: { appInstanceId } }
       : skipToken,
-    enabled: isActive && Boolean(instanceId),
+    enabled: isActive && Boolean(appInstanceId),
     select: data => data.instance,
   }))
 
@@ -81,13 +81,13 @@ export function DeploymentsNav() {
       : appNavItems
     : []
 
-  const curNav = instanceId
-    ? navigationItems.find(item => item.id === instanceId)
+  const curNav = appInstanceId
+    ? navigationItems.find(item => item.id === appInstanceId)
     : undefined
 
   function handleCreate() {
     openCreateInstanceModal()
-    if (selectedSegment !== 'deployments' || instanceId)
+    if (selectedSegment !== 'deployments' || appInstanceId)
       router.push('/deployments')
   }
 
diff --git a/web/features/deployments/store.ts b/web/features/deployments/store.ts
index 59fe2e41d3..c9d90cb6f1 100644
--- a/web/features/deployments/store.ts
+++ b/web/features/deployments/store.ts
@@ -14,7 +14,7 @@ type OpenRollbackParams = {
 }
 
 type CreatedDeveloperApiToken = {
-  appId: string
+  appInstanceId: string
   token: string
 }