From 099ff8fb675b9c5fc5719c3f64d2c8b5aa59c722 Mon Sep 17 00:00:00 2001
From: "Anthony Fu (via agent)" <reg-github-bot@antfu.me>
Date: Fri, 21 Aug 2026 13:15:18 +0000
Subject: [PATCH 1/2] refactor(devtools): migrate client rpc usage to
 devframe-native calls
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace every internal rpc.xxx() call site in packages/devtools/client
with the underlying devframe-native pattern already used by notify.ts:
resolve the connected RPC client (rpcClient.value || await
connectPromise) and call it directly (client.call('nuxt:devtools:xxx',
...args)).

The rpc Proxy in composables/rpc.ts is kept as-is — it now exists solely
to back the public, non-deprecated NuxtDevtoolsClient.rpc surface that
third-party module custom tabs rely on (devtools.rpc.xxx()); it is no
longer used anywhere internally.
---
 .../client/components/AssetDetails.vue        | 20 +++--
 .../client/components/AssetDropZone.vue       |  6 +-
 .../client/components/BuildAnalyzeDetails.vue |  8 +-
 .../devtools/client/components/ModuleItem.vue | 10 ++-
 .../client/components/ModuleItemInstall.vue   | 16 ++--
 .../client/components/NpmVersionCheck.vue     |  9 ++-
 .../client/components/RestartDialogs.vue      |  6 +-
 .../client/components/StorageDetails.vue      | 35 ++++++---
 .../devtools/client/composables/editor.ts     |  6 +-
 packages/devtools/client/composables/npm.ts   | 24 ++++--
 packages/devtools/client/composables/rpc.ts   |  6 ++
 .../client/composables/state-components.ts    | 14 +++-
 packages/devtools/client/composables/state.ts | 75 +++++++++++++++----
 .../client/composables/storage-options.ts     | 20 ++++-
 .../devtools/client/composables/telemetry.ts  | 26 ++++---
 .../client/pages/modules/analyze-build.vue    | 20 +++--
 .../client/pages/modules/custom-[name].vue    | 10 ++-
 .../devtools/client/pages/modules/modules.vue | 10 ++-
 .../devtools/client/pages/modules/pages.vue   |  9 ++-
 .../client/pages/modules/timeline.vue         |  9 ++-
 packages/devtools/client/pages/settings.vue   |  6 +-
 packages/devtools/client/plugins/global.ts    |  8 +-
 22 files changed, 255 insertions(+), 98 deletions(-)

diff --git a/packages/devtools/client/components/AssetDetails.vue b/packages/devtools/client/components/AssetDetails.vue
index edf5f17d6c..7946894793 100644
--- a/packages/devtools/client/components/AssetDetails.vue
+++ b/packages/devtools/client/components/AssetDetails.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import type { AssetInfo, CodeSnippet } from '~/../src/types'
+import type { AssetInfo, CodeSnippet, ServerFunctions } from '~/../src/types'
 import { computedAsync, useTimeAgo, useVModel } from '@vueuse/core'
 import { computed, ref } from 'vue'
 import { devtoolsUiShowNotification } from '#imports'
+import { RPC_NAMESPACE } from '~/../src/rpc-namespace'
 import { useCopy, useOpenInEditor } from '~/composables/editor'
-import { rpc } from '~/composables/rpc'
+import { connectPromise, rpcClient } from '~/composables/rpc'
 import { useServerConfig } from '~/composables/state'
 
 const props = defineProps<{
@@ -17,7 +18,8 @@ const asset = useVModel(props, 'modelValue', emit, { passive: true })
 const imageMeta = computedAsync(async () => {
   if (asset.value.type !== 'image')
     return undefined
-  return rpc.getImageMeta(asset.value.filePath)
+  const client = rpcClient.value || await connectPromise
+  return client.call(`${RPC_NAMESPACE}:getImageMeta` as any, asset.value.filePath) as Promise<Awaited<ReturnType<ServerFunctions['getImageMeta']>>>
 })
 
 const editDialog = ref(false)
@@ -30,7 +32,8 @@ const textContent = computedAsync(async () => {
   // eslint-disable-next-line ts/no-unused-expressions
   textContentCounter.value
 
-  const content = await rpc.getTextAssetContent(asset.value.filePath)
+  const client = rpcClient.value || await connectPromise
+  const content = await client.call(`${RPC_NAMESPACE}:getTextAssetContent` as any, asset.value.filePath) as Awaited<ReturnType<ServerFunctions['getTextAssetContent']>>
   newTextContent.value = content
   return content
 })
@@ -38,7 +41,8 @@ const textContent = computedAsync(async () => {
 async function saveTextContent() {
   if (textContent.value !== newTextContent.value) {
     try {
-      await rpc.writeStaticAssets([{
+      const client = rpcClient.value || await connectPromise
+      await client.call(`${RPC_NAMESPACE}:writeStaticAssets` as any, [{
         path: asset.value.path,
         content: newTextContent.value,
         override: true,
@@ -133,7 +137,8 @@ const supportsPreview = computed(() => {
 const deleteDialog = ref(false)
 async function deleteAsset() {
   try {
-    await rpc.deleteStaticAsset(asset.value.filePath)
+    const client = rpcClient.value || await connectPromise
+    await client.call(`${RPC_NAMESPACE}:deleteStaticAsset` as any, asset.value.filePath)
     asset.value = undefined as any
     deleteDialog.value = false
     devtoolsUiShowNotification({
@@ -169,7 +174,8 @@ async function renameAsset() {
   try {
     const extension = parts.slice(-1)[0]?.split('.').slice(-1)[0]
     const fullPath = `${parts.slice(0, -1).join('/')}/${newName.value}.${extension}`
-    await rpc.renameStaticAsset(asset.value.filePath, fullPath)
+    const client = rpcClient.value || await connectPromise
+    await client.call(`${RPC_NAMESPACE}:renameStaticAsset` as any, asset.value.filePath, fullPath)
     asset.value = undefined as any
     renameDialog.value = false
     devtoolsUiShowNotification({
diff --git a/packages/devtools/client/components/AssetDropZone.vue b/packages/devtools/client/components/AssetDropZone.vue
index ef9fa7bd9e..87f5ddaa12 100644
--- a/packages/devtools/client/components/AssetDropZone.vue
+++ b/packages/devtools/client/components/AssetDropZone.vue
@@ -3,7 +3,8 @@ import type { AssetEntry } from '~/../src/types'
 import { useEventListener, useVModel } from '@vueuse/core'
 import { ref } from 'vue'
 import { devtoolsUiShowNotification } from '#imports'
-import { rpc, wsConnecting, wsError } from '~/composables/rpc'
+import { RPC_NAMESPACE } from '~/../src/rpc-namespace'
+import { connectPromise, rpcClient, wsConnecting, wsError } from '~/composables/rpc'
 import { telemetry } from '~/composables/telemetry'
 
 const props = defineProps({
@@ -94,7 +95,8 @@ async function uploadFiles() {
       content,
     })
   }
-  await rpc.writeStaticAssets([...uploadFiles], props.folder).then(() => {
+  const client = rpcClient.value || await connectPromise
+  await client.call(`${RPC_NAMESPACE}:writeStaticAssets` as any, [...uploadFiles], props.folder).then(() => {
     close()
     devtoolsUiShowNotification({
       message: 'Files uploaded successfully!',
diff --git a/packages/devtools/client/components/BuildAnalyzeDetails.vue b/packages/devtools/client/components/BuildAnalyzeDetails.vue
index 7a1704bfcd..008363b3ef 100644
--- a/packages/devtools/client/components/BuildAnalyzeDetails.vue
+++ b/packages/devtools/client/components/BuildAnalyzeDetails.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import type { AnalyzeBuildMeta } from '../../src/types'
+import type { AnalyzeBuildMeta, ServerFunctions } from '../../src/types'
 import { formatTimeAgo } from '@vueuse/core'
 import { computed, ref } from 'vue'
 import { useRuntimeConfig } from '#imports'
-import { rpc } from '~/composables/rpc'
+import { connectPromise, rpcClient } from '~/composables/rpc'
+import { RPC_NAMESPACE } from '../../src/rpc-namespace'
 
 const props = defineProps<{
   current: AnalyzeBuildMeta
@@ -45,7 +46,8 @@ function formatFileSize(bytes: number) {
 }
 
 async function clear(name: string) {
-  return rpc.clearAnalyzeBuilds([name])
+  const client = rpcClient.value || await connectPromise
+  return client.call(`${RPC_NAMESPACE}:clearAnalyzeBuilds` as any, [name]) as Promise<Awaited<ReturnType<ServerFunctions['clearAnalyzeBuilds']>>>
 }
 </script>
 
diff --git a/packages/devtools/client/components/ModuleItem.vue b/packages/devtools/client/components/ModuleItem.vue
index 6e9aa3b1b3..ac77a84a90 100644
--- a/packages/devtools/client/components/ModuleItem.vue
+++ b/packages/devtools/client/components/ModuleItem.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import type { InstalledModuleInfo } from '../../src/types'
 import { computed } from 'vue'
-import { rpc } from '~/composables/rpc'
+import { connectPromise, rpcClient } from '~/composables/rpc'
+import { RPC_NAMESPACE } from '../../src/rpc-namespace'
 
 const props = defineProps<{
   mod: InstalledModuleInfo
@@ -13,6 +14,11 @@ const data = computed(() => ({
   ...props.mod,
   ...staticInfo.value,
 }))
+
+async function revealTerminal(id: string) {
+  const client = rpcClient.value || await connectPromise
+  await client.call(`${RPC_NAMESPACE}:revealTerminal` as any, id)
+}
 </script>
 
 <template>
@@ -30,7 +36,7 @@ const data = computed(() => ({
             v-if="state === 'running'" flex="~ gap-2"
             animate-pulse items-center
             :title="id ? 'Open the output in the Terminals dock' : undefined"
-            @click="id ? rpc.revealTerminal(id) : undefined"
+            @click="id ? revealTerminal(id) : undefined"
           >
             <span i-carbon-circle-dash flex-none animate-spin text-lg op50 />
             <code text-sm op50>Upgrading...</code>
diff --git a/packages/devtools/client/components/ModuleItemInstall.vue b/packages/devtools/client/components/ModuleItemInstall.vue
index e57f3aa066..88be0e4b27 100644
--- a/packages/devtools/client/components/ModuleItemInstall.vue
+++ b/packages/devtools/client/components/ModuleItemInstall.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import type { ModuleActionType, ModuleStaticInfo } from '../../src/types'
+import type { ModuleActionType, ModuleStaticInfo, ServerFunctions } from '../../src/types'
 import { computed } from 'vue'
 import { ModuleDialog } from '~/composables/dialog'
-import { rpc } from '~/composables/rpc'
+import { connectPromise, rpcClient } from '~/composables/rpc'
 import { useInstalledModules } from '~/composables/state-modules'
 import { processInstallingModules } from '~/composables/state-subprocess'
 import { telemetry } from '~/composables/telemetry'
+import { RPC_NAMESPACE } from '../../src/rpc-namespace'
 
 const props = defineProps<{
   item: ModuleStaticInfo
@@ -18,9 +19,14 @@ const installedInfo = computed(() => installedModules.value.find(i => i.name ===
 const isInstalled = computed(() => installedInfo.value && installedInfo.value.isPackageModule)
 const isUninstallable = computed(() => installedInfo.value && installedInfo.value.isPackageModule && installedInfo.value.isUninstallable)
 
+async function callModuleAction(type: ModuleActionType, name: string, dry: boolean, sessionId?: string) {
+  const client = rpcClient.value || await connectPromise
+  const method = type === 'install' ? 'installNuxtModule' : 'uninstallNuxtModule'
+  return client.call(`${RPC_NAMESPACE}:${method}` as any, name, dry, sessionId) as Promise<Awaited<ReturnType<ServerFunctions['installNuxtModule']>>>
+}
+
 async function useModuleAction(item: ModuleStaticInfo, type: ModuleActionType) {
-  const method = type === 'install' ? rpc.installNuxtModule : rpc.uninstallNuxtModule
-  const result = await method(item.npm, true)
+  const result = await callModuleAction(type, item.npm, true)
 
   telemetry(`modules:${type}`, {
     moduleName: item.npm,
@@ -45,7 +51,7 @@ async function useModuleAction(item: ModuleStaticInfo, type: ModuleActionType) {
     // server registers the very session we're tracking. The execution RPC
     // awaits the process, so clearing the pending entry here (no `onTerminalExit`
     // needed) settles the UI whether it succeeds or throws.
-    await method(item.npm, false, result.processId)
+    await callModuleAction(type, item.npm, false, result.processId)
   }
   finally {
     const index = processInstallingModules.value.findIndex(i => i.processId === result.processId)
diff --git a/packages/devtools/client/components/NpmVersionCheck.vue b/packages/devtools/client/components/NpmVersionCheck.vue
index 15d9f939c6..59a6e51b28 100644
--- a/packages/devtools/client/components/NpmVersionCheck.vue
+++ b/packages/devtools/client/components/NpmVersionCheck.vue
@@ -4,8 +4,9 @@ import { createTemplatePromise } from '@vueuse/core'
 import { ref } from 'vue'
 import { useRestartDialogs } from '~/composables/dialog'
 import { usePackageUpdate } from '~/composables/npm'
-import { rpc } from '~/composables/rpc'
+import { connectPromise, rpcClient } from '~/composables/rpc'
 import { telemetry } from '~/composables/telemetry'
+import { RPC_NAMESPACE } from '../../src/rpc-namespace'
 
 const props = withDefaults(
   defineProps<{
@@ -48,8 +49,10 @@ async function updateWithConfirm() {
       message: `${props.packageName} has been updated. Do you want to restart the Nuxt server now?`,
     })
   }
-  if (processId && shouldRevealTerminal.value)
-    rpc.revealTerminal(processId)
+  if (processId && shouldRevealTerminal.value) {
+    const client = rpcClient.value || await connectPromise
+    client.call(`${RPC_NAMESPACE}:revealTerminal` as any, processId)
+  }
 }
 </script>
 
diff --git a/packages/devtools/client/components/RestartDialogs.vue b/packages/devtools/client/components/RestartDialogs.vue
index e4fb071ea1..497d352007 100644
--- a/packages/devtools/client/components/RestartDialogs.vue
+++ b/packages/devtools/client/components/RestartDialogs.vue
@@ -3,7 +3,8 @@ import { createTemplatePromise } from '@vueuse/core'
 import { useNuxtApp } from '#app/nuxt'
 import { useClient } from '~/composables/client'
 import { useRestartDialogs } from '~/composables/dialog'
-import { rpc } from '~/composables/rpc'
+import { connectPromise, rpcClient } from '~/composables/rpc'
+import { RPC_NAMESPACE } from '../../src/rpc-namespace'
 
 const nuxt = useNuxtApp()
 const state = useRestartDialogs()
@@ -21,7 +22,8 @@ nuxt.hook('devtools:terminal:exit', ({ id, code }) => {
         .start(dialog.message)
         .then(async (result) => {
           if (result) {
-            rpc.restartNuxt()
+            const rpcClientInstance = rpcClient.value || await connectPromise
+            rpcClientInstance.call(`${RPC_NAMESPACE}:restartNuxt` as any)
             setTimeout(() => {
               client.value?.app.reload()
             }, 500)
diff --git a/packages/devtools/client/components/StorageDetails.vue b/packages/devtools/client/components/StorageDetails.vue
index 29a5d12753..63490811fe 100644
--- a/packages/devtools/client/components/StorageDetails.vue
+++ b/packages/devtools/client/components/StorageDetails.vue
@@ -1,12 +1,14 @@
 <script setup lang="ts">
+import type { ServerFunctions } from '~/../src/types'
 import { useEventListener } from '@vueuse/core'
 import JsonEditorVue from 'json-editor-vue'
 import { computed, onUnmounted, ref, watch, watchEffect } from 'vue'
 import { useAsyncData } from '#app/composables/asyncData'
 import { useRouter } from '#app/composables/router'
 import { useNuxtApp } from '#app/nuxt'
+import { RPC_NAMESPACE } from '~/../src/rpc-namespace'
 import { getColorMode } from '~/composables/client'
-import { rpc } from '~/composables/rpc'
+import { connectPromise, rpcClient } from '~/composables/rpc'
 import { useSessionState } from '~/composables/utils'
 
 const colorMode = getColorMode()
@@ -18,10 +20,15 @@ const currentStorage = useSessionState<string>('storage:current', '')
 const currentItem = ref()
 const fileKey = useSessionState<string>('storage:file:state', '')
 
-const { data: storageMounts } = await useAsyncData('storageMounts', () => rpc.getStorageMounts())
+const { data: storageMounts } = await useAsyncData('storageMounts', async () => {
+  const client = rpcClient.value || await connectPromise
+  return client.call(`${RPC_NAMESPACE}:getStorageMounts` as any) as Promise<Awaited<ReturnType<ServerFunctions['getStorageMounts']>>>
+})
 const { data: storageKeys, refresh: refreshStorageKeys } = await useAsyncData('storageKeys', async () => {
-  if (currentStorage.value)
-    return await rpc.getStorageKeys(currentStorage.value)
+  if (currentStorage.value) {
+    const client = rpcClient.value || await connectPromise
+    return await client.call(`${RPC_NAMESPACE}:getStorageKeys` as any, currentStorage.value) as Awaited<ReturnType<ServerFunctions['getStorageKeys']>>
+  }
   return []
 })
 
@@ -70,7 +77,8 @@ const filteredKeys = computed(() => {
 })
 
 async function fetchItem(key: string) {
-  const content = await rpc.getStorageItem(key)
+  const client = rpcClient.value || await connectPromise
+  const content = await client.call(`${RPC_NAMESPACE}:getStorageItem` as any, key) as Awaited<ReturnType<ServerFunctions['getStorageItem']>>
   currentItem.value = {
     key,
     updatedKey: keyName(key),
@@ -85,8 +93,10 @@ async function saveNewItem() {
     return
   // If does not exists
   const key = `${currentStorage.value}:${newKey.value}`
-  if (!storageKeys.value?.includes(key))
-    await rpc.setStorageItem(key, '')
+  if (!storageKeys.value?.includes(key)) {
+    const client = rpcClient.value || await connectPromise
+    await client.call(`${RPC_NAMESPACE}:setStorageItem` as any, key, '')
+  }
 
   router.replace({ query: { storage: currentStorage.value, key } })
   newKey.value = ''
@@ -95,14 +105,16 @@ async function saveNewItem() {
 async function saveCurrentItem() {
   if (!currentItem.value)
     return
-  await rpc.setStorageItem(currentItem.value.key, currentItem.value.updatedContent)
+  const client = rpcClient.value || await connectPromise
+  await client.call(`${RPC_NAMESPACE}:setStorageItem` as any, currentItem.value.key, currentItem.value.updatedContent)
   await fetchItem(currentItem.value.key)
 }
 
 async function removeCurrentItem() {
   if (!currentItem.value || !currentStorage.value)
     return
-  await rpc.removeStorageItem(currentItem.value.key)
+  const client = rpcClient.value || await connectPromise
+  await client.call(`${RPC_NAMESPACE}:removeStorageItem` as any, currentItem.value.key)
   currentItem.value = null
 }
 
@@ -110,8 +122,9 @@ async function renameCurrentItem() {
   if (!currentItem.value || !currentStorage.value)
     return
   const renamedKey = `${currentStorage.value}:${currentItem.value.updatedKey}`
-  await rpc.setStorageItem(renamedKey, currentItem.value.updatedContent)
-  await rpc.removeStorageItem(currentItem.value.key)
+  const client = rpcClient.value || await connectPromise
+  await client.call(`${RPC_NAMESPACE}:setStorageItem` as any, renamedKey, currentItem.value.updatedContent)
+  await client.call(`${RPC_NAMESPACE}:removeStorageItem` as any, currentItem.value.key)
   router.replace({ query: { storage: currentStorage.value, key: renamedKey } })
 }
 </script>
diff --git a/packages/devtools/client/composables/editor.ts b/packages/devtools/client/composables/editor.ts
index fe744c4bb3..297122f099 100644
--- a/packages/devtools/client/composables/editor.ts
+++ b/packages/devtools/client/composables/editor.ts
@@ -1,7 +1,8 @@
 import { useClipboard } from '@vueuse/core'
 import { useRouter } from '#app/composables/router'
 import { devtoolsUiShowNotification } from '#imports'
-import { rpc } from './rpc'
+import { RPC_NAMESPACE } from '../../src/rpc-namespace'
+import { connectPromise, rpcClient } from './rpc'
 import { useServerConfig, useVirtualFiles } from './state'
 import { useCurrentVirtualFile } from './state-routes'
 import { telemetry } from './telemetry'
@@ -33,7 +34,8 @@ export function useOpenInEditor() {
       router.push('/modules/virtual-files')
     }
     else {
-      await rpc.openInEditor(filepath)
+      const client = rpcClient.value || await connectPromise
+      await client.call(`${RPC_NAMESPACE}:openInEditor` as any, filepath)
     }
   }
 }
diff --git a/packages/devtools/client/composables/npm.ts b/packages/devtools/client/composables/npm.ts
index 32b227eef7..496a936c63 100644
--- a/packages/devtools/client/composables/npm.ts
+++ b/packages/devtools/client/composables/npm.ts
@@ -1,8 +1,9 @@
-import type { NpmCommandOptions } from '../../src/types'
+import type { NpmCommandOptions, ServerFunctions } from '../../src/types'
 import { satisfies } from 'verkit'
 import { computed, ref } from 'vue'
 import { useNuxtApp } from '#app/nuxt'
-import { rpc } from './rpc'
+import { RPC_NAMESPACE } from '../../src/rpc-namespace'
+import { connectPromise, rpcClient } from './rpc'
 import { useAsyncState } from './utils'
 
 export type PackageUpdateState = 'idle' | 'running' | 'updated'
@@ -17,7 +18,10 @@ export function usePackageUpdate(name: string, options?: NpmCommandOptions): Ret
 }
 
 export function useNuxtVersion() {
-  return useAsyncState('npm:check:nuxt', () => rpc.checkForUpdateFor('nuxt'))
+  return useAsyncState('npm:check:nuxt', async () => {
+    const client = rpcClient.value || await connectPromise
+    return client.call(`${RPC_NAMESPACE}:checkForUpdateFor` as any, 'nuxt') as Promise<Awaited<ReturnType<ServerFunctions['checkForUpdateFor']>>>
+  })
 }
 
 export function satisfyNuxtVersion(range: string) {
@@ -31,7 +35,10 @@ export function satisfyNuxtVersion(range: string) {
 
 function getPackageUpdate(name: string, options?: NpmCommandOptions) {
   const nuxt = useNuxtApp()
-  const info = useAsyncState(`npm:check:${name}`, () => rpc.checkForUpdateFor(name))
+  const info = useAsyncState(`npm:check:${name}`, async () => {
+    const client = rpcClient.value || await connectPromise
+    return client.call(`${RPC_NAMESPACE}:checkForUpdateFor` as any, name) as Promise<Awaited<ReturnType<ServerFunctions['checkForUpdateFor']>>>
+  })
 
   const state = ref<PackageUpdateState>('idle')
 
@@ -49,7 +56,8 @@ function getPackageUpdate(name: string, options?: NpmCommandOptions) {
     if (state.value !== 'idle')
       return
 
-    const command = await rpc.getNpmCommand('update', name, options)
+    const client = rpcClient.value || await connectPromise
+    const command = await client.call(`${RPC_NAMESPACE}:getNpmCommand` as any, 'update', name, options) as Awaited<ReturnType<ServerFunctions['getNpmCommand']>>
     if (!command)
       return
 
@@ -58,7 +66,8 @@ function getPackageUpdate(name: string, options?: NpmCommandOptions) {
 
     state.value = 'running'
 
-    processId.value = (await rpc.runNpmCommand('update', name, options))?.processId
+    const result = await client.call(`${RPC_NAMESPACE}:runNpmCommand` as any, 'update', name, options) as Awaited<ReturnType<ServerFunctions['runNpmCommand']>>
+    processId.value = result?.processId
 
     return processId.value
   }
@@ -66,7 +75,8 @@ function getPackageUpdate(name: string, options?: NpmCommandOptions) {
   async function restart() {
     if (state.value !== 'updated')
       return
-    await rpc.restartNuxt()
+    const client = rpcClient.value || await connectPromise
+    await client.call(`${RPC_NAMESPACE}:restartNuxt` as any)
   }
 
   return {
diff --git a/packages/devtools/client/composables/rpc.ts b/packages/devtools/client/composables/rpc.ts
index 367caddda9..d1bf5979b9 100644
--- a/packages/devtools/client/composables/rpc.ts
+++ b/packages/devtools/client/composables/rpc.ts
@@ -22,6 +22,12 @@ export const connectPromise = connectDevToolsRpc()
 /**
  * Proxy-based RPC object that provides backward-compatible `rpc.functionName()` interface.
  * Server functions are called via Vite DevTools Kit's RPC client.
+ *
+ * Kept solely for the public, non-deprecated `NuxtDevtoolsClient.rpc` surface
+ * consumed by third-party module custom tabs (`devtools.rpc.xxx()`). Internal
+ * app code no longer uses this — it calls `rpcClient.value?.call(...)` /
+ * `connectPromise` directly (devframe-native style), the same way this Proxy
+ * does underneath.
  */
 export const rpc = new Proxy({} as AsyncServerFunctions, {
   get: (_, method: string) => {
diff --git a/packages/devtools/client/composables/state-components.ts b/packages/devtools/client/composables/state-components.ts
index 37a038ce99..5d1f66259e 100644
--- a/packages/devtools/client/composables/state-components.ts
+++ b/packages/devtools/client/composables/state-components.ts
@@ -1,14 +1,19 @@
 import type { Component } from 'nuxt/schema'
+import type { ServerFunctions } from '../../src/types'
 import { computed } from 'vue'
+import { RPC_NAMESPACE } from '../../src/rpc-namespace'
 import { useClient } from './client'
-import { rpc } from './rpc'
+import { connectPromise, rpcClient } from './rpc'
 import { useAsyncState } from './utils'
 
 const LAZY_COMPONENT_RE = /^Lazy[A-Z]/
 
 export function useComponents() {
   const client = useClient()
-  const serverComponents = useAsyncState('getComponents', () => rpc.getComponents())
+  const serverComponents = useAsyncState('getComponents', async () => {
+    const rpcClientInstance = rpcClient.value || await connectPromise
+    return rpcClientInstance.call(`${RPC_NAMESPACE}:getComponents` as any) as Promise<Awaited<ReturnType<ServerFunctions['getComponents']>>>
+  })
 
   const globalComponents = computed(() =>
     Object
@@ -29,5 +34,8 @@ export function useComponents() {
 }
 
 export function useComponentsRelationships() {
-  return useAsyncState('getComponentsRelationships', () => rpc.getComponentsRelationships())
+  return useAsyncState('getComponentsRelationships', async () => {
+    const client = rpcClient.value || await connectPromise
+    return client.call(`${RPC_NAMESPACE}:getComponentsRelationships` as any) as Promise<Awaited<ReturnType<ServerFunctions['getComponentsRelationships']>>>
+  })
 }
diff --git a/packages/devtools/client/composables/state.ts b/packages/devtools/client/composables/state.ts
index c1e282ea72..e43e608e57 100644
--- a/packages/devtools/client/composables/state.ts
+++ b/packages/devtools/client/composables/state.ts
@@ -1,66 +1,109 @@
 import type { Ref } from 'vue'
-import type { HookInfo, RouteInfo } from '../../src/types'
+import type { HookInfo, RouteInfo, ServerFunctions } from '../../src/types'
 import { objectPick } from '@antfu/utils'
 import { computed } from 'vue'
 import { useFetch } from '#app/composables/fetch'
+import { RPC_NAMESPACE } from '../../src/rpc-namespace'
 import { useClientRouter } from './client'
-import { rpc } from './rpc'
+import { connectPromise, rpcClient } from './rpc'
 import { useAsyncState } from './utils'
 
 export function useServerPages() {
-  return useAsyncState('getServerPages', () => rpc.getServerPages())
+  return useAsyncState('getServerPages', async () => {
+    const client = rpcClient.value || await connectPromise
+    return client.call(`${RPC_NAMESPACE}:getServerPages` as any) as Promise<Awaited<ReturnType<ServerFunctions['getServerPages']>>>
+  })
 }
 
 export function useServerRoutes() {
-  return useAsyncState('getServerRoutes', () => rpc.getServerRoutes())
+  return useAsyncState('getServerRoutes', async () => {
+    const client = rpcClient.value || await connectPromise
+    return client.call(`${RPC_NAMESPACE}:getServerRoutes` as any) as Promise<Awaited<ReturnType<ServerFunctions['getServerRoutes']>>>
+  })
 }
 
 export function useServerTasks() {
-  return useAsyncState('getServerTasks', () => rpc.getServerTasks())
+  return useAsyncState('getServerTasks', async () => {
+    const client = rpcClient.value || await connectPromise
+    return client.call(`${RPC_NAMESPACE}:getServerTasks` as any) as Promise<Awaited<ReturnType<ServerFunctions['getServerTasks']>>>
+  })
 }
 
 export function useServerHooks() {
-  return useAsyncState('getServerHooks', () => rpc.getServerHooks()) as Ref<HookInfo[] | undefined>
+  return useAsyncState('getServerHooks', async () => {
+    const client = rpcClient.value || await connectPromise
+    return client.call(`${RPC_NAMESPACE}:getServerHooks` as any) as Promise<Awaited<ReturnType<ServerFunctions['getServerHooks']>>>
+  }) as Ref<HookInfo[] | undefined>
 }
 
 export function useLayouts() {
-  return useAsyncState('getServerLayouts', () => rpc.getServerLayouts())
+  return useAsyncState('getServerLayouts', async () => {
+    const client = rpcClient.value || await connectPromise
+    return client.call(`${RPC_NAMESPACE}:getServerLayouts` as any) as Promise<Awaited<ReturnType<ServerFunctions['getServerLayouts']>>>
+  })
 }
 
 export function useAutoImports() {
-  return useAsyncState('getAutoImports', () => rpc.getAutoImports())
+  return useAsyncState('getAutoImports', async () => {
+    const client = rpcClient.value || await connectPromise
+    return client.call(`${RPC_NAMESPACE}:getAutoImports` as any) as Promise<Awaited<ReturnType<ServerFunctions['getAutoImports']>>>
+  })
 }
 
 export function useStaticAssets() {
-  return useAsyncState('getStaticAssets', () => rpc.getStaticAssets())
+  return useAsyncState('getStaticAssets', async () => {
+    const client = rpcClient.value || await connectPromise
+    return client.call(`${RPC_NAMESPACE}:getStaticAssets` as any) as Promise<Awaited<ReturnType<ServerFunctions['getStaticAssets']>>>
+  })
 }
 
 export function useServerConfig() {
-  return useAsyncState('getServerConfig', () => rpc.getServerConfig())
+  return useAsyncState('getServerConfig', async () => {
+    const client = rpcClient.value || await connectPromise
+    return client.call(`${RPC_NAMESPACE}:getServerConfig` as any) as Promise<Awaited<ReturnType<ServerFunctions['getServerConfig']>>>
+  })
 }
 
 export function useServerDebugContext() {
-  return useAsyncState('getServerDebugContext', () => rpc.getServerDebugContext())
+  return useAsyncState('getServerDebugContext', async () => {
+    const client = rpcClient.value || await connectPromise
+    return client.call(`${RPC_NAMESPACE}:getServerDebugContext` as any) as Promise<Awaited<ReturnType<ServerFunctions['getServerDebugContext']>>>
+  })
 }
 
 export function useServerRuntimeConfig() {
-  return useAsyncState('getServerRuntimeConfig', () => rpc.getServerRuntimeConfig())
+  return useAsyncState('getServerRuntimeConfig', async () => {
+    const client = rpcClient.value || await connectPromise
+    return client.call(`${RPC_NAMESPACE}:getServerRuntimeConfig` as any) as Promise<Awaited<ReturnType<ServerFunctions['getServerRuntimeConfig']>>>
+  })
 }
 
 export function useModuleOptions() {
-  return useAsyncState('getModuleOptions', () => rpc.getModuleOptions())
+  return useAsyncState('getModuleOptions', async () => {
+    const client = rpcClient.value || await connectPromise
+    return client.call(`${RPC_NAMESPACE}:getModuleOptions` as any) as Promise<Awaited<ReturnType<ServerFunctions['getModuleOptions']>>>
+  })
 }
 
 export function useServerApp() {
-  return useAsyncState('getServerApp', () => rpc.getServerApp())
+  return useAsyncState('getServerApp', async () => {
+    const client = rpcClient.value || await connectPromise
+    return client.call(`${RPC_NAMESPACE}:getServerApp` as any) as Promise<Awaited<ReturnType<ServerFunctions['getServerApp']>>>
+  })
 }
 
 export function useCustomTabs() {
-  return useAsyncState('getCustomTabs', () => rpc.getCustomTabs())
+  return useAsyncState('getCustomTabs', async () => {
+    const client = rpcClient.value || await connectPromise
+    return client.call(`${RPC_NAMESPACE}:getCustomTabs` as any) as Promise<Awaited<ReturnType<ServerFunctions['getCustomTabs']>>>
+  })
 }
 
 export function useAnalyzeBuildInfo() {
-  return useAsyncState('getAnalyzeBuildInfo', () => rpc.getAnalyzeBuildInfo())
+  return useAsyncState('getAnalyzeBuildInfo', async () => {
+    const client = rpcClient.value || await connectPromise
+    return client.call(`${RPC_NAMESPACE}:getAnalyzeBuildInfo` as any) as Promise<Awaited<ReturnType<ServerFunctions['getAnalyzeBuildInfo']>>>
+  })
 }
 
 export interface VfsData {
diff --git a/packages/devtools/client/composables/storage-options.ts b/packages/devtools/client/composables/storage-options.ts
index 226805601d..e4ec2b414a 100644
--- a/packages/devtools/client/composables/storage-options.ts
+++ b/packages/devtools/client/composables/storage-options.ts
@@ -1,9 +1,11 @@
 import type { ToRefs } from 'vue'
+import type { ServerFunctions } from '../../src/types'
 import type { NuxtDevToolsOptions } from '../../types'
 import { watchDebounced } from '@vueuse/core'
 import { reactive, toRefs } from 'vue'
 import { createDefaultTabOptions } from '../../src/constant'
-import { rpc } from './rpc'
+import { RPC_NAMESPACE } from '../../src/rpc-namespace'
+import { connectPromise, rpcClient } from './rpc'
 
 const cache = new Map<string, any>()
 
@@ -15,18 +17,28 @@ function getTabOptions<T extends keyof NuxtDevToolsOptions>(tab: T): ToRefs<Nuxt
   const refs = toRefs(source)
   cache.set(tab, refs)
 
-  rpc.getOptions(tab)
+  async function loadOptions() {
+    const client = rpcClient.value || await connectPromise
+    return client.call(`${RPC_NAMESPACE}:getOptions` as any, tab) as Promise<Awaited<ReturnType<ServerFunctions['getOptions']>>>
+  }
+
+  async function persistOptions(options: NuxtDevToolsOptions[T]) {
+    const client = rpcClient.value || await connectPromise
+    return client.call(`${RPC_NAMESPACE}:updateOptions` as any, tab, options) as Promise<Awaited<ReturnType<ServerFunctions['updateOptions']>>>
+  }
+
+  loadOptions()
     .then((options) => {
       Object.assign(source, options)
 
       watchDebounced(
         source,
-        async (options) => {
+        (options) => {
           // Best-effort persistence: a transient RPC failure here (e.g. the
           // connection was torn down and re-established after a dev-server
           // reload) shouldn't surface as an uncaught error — the next change
           // will simply retry the write.
-          rpc.updateOptions(tab, options).catch((error) => {
+          persistOptions(options).catch((error) => {
             console.error(`[nuxt-devtools] Failed to persist "${String(tab)}" options`, error)
           })
         },
diff --git a/packages/devtools/client/composables/telemetry.ts b/packages/devtools/client/composables/telemetry.ts
index 4c1bec0c45..abbc1d413f 100644
--- a/packages/devtools/client/composables/telemetry.ts
+++ b/packages/devtools/client/composables/telemetry.ts
@@ -1,5 +1,6 @@
+import { RPC_NAMESPACE } from '../../src/rpc-namespace'
 import { userAgentInfo } from './dev-auth'
-import { rpc } from './rpc'
+import { connectPromise, rpcClient } from './rpc'
 import { useDevToolsOptions } from './storage-options'
 
 export const telemetryEnabled = useDevToolsOptions('behavior').telemetry
@@ -8,15 +9,20 @@ export function telemetry(event: string, payload?: object, immediate = false) {
   if (telemetryEnabled.value === false)
     return
 
-  rpc.telemetryEvent({
-    event,
-    browser: userAgentInfo.browser.name,
-    browserVersion: userAgentInfo.browser.version,
-    os: userAgentInfo.os.name,
-    osVersion: userAgentInfo.os.version,
-    deviceType: userAgentInfo.device.type,
-    ...payload,
-  }, immediate).catch((error) => {
+  const send = async () => {
+    const client = rpcClient.value || await connectPromise
+    return client.call(`${RPC_NAMESPACE}:telemetryEvent` as any, {
+      event,
+      browser: userAgentInfo.browser.name,
+      browserVersion: userAgentInfo.browser.version,
+      os: userAgentInfo.os.name,
+      osVersion: userAgentInfo.os.version,
+      deviceType: userAgentInfo.device.type,
+      ...payload,
+    }, immediate)
+  }
+
+  send().catch((error) => {
     // Telemetry is best-effort: a transient RPC failure (e.g. the connection
     // was torn down and re-established after a dev-server reload) should
     // never surface to the user as an uncaught error.
diff --git a/packages/devtools/client/pages/modules/analyze-build.vue b/packages/devtools/client/pages/modules/analyze-build.vue
index b5ca9b64a7..ee88db6aad 100644
--- a/packages/devtools/client/pages/modules/analyze-build.vue
+++ b/packages/devtools/client/pages/modules/analyze-build.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import type { AnalyzeBuildMeta } from '~/../src/types'
+import type { AnalyzeBuildMeta, ServerFunctions } from '~/../src/types'
 import { createTemplatePromise, formatTimeAgo } from '@vueuse/core'
 import { computed, ref } from 'vue'
 import { definePageMeta } from '#imports'
+import { RPC_NAMESPACE } from '~/../src/rpc-namespace'
 import { satisfyNuxtVersion } from '~/composables/npm'
-import { rpc } from '~/composables/rpc'
+import { connectPromise, rpcClient } from '~/composables/rpc'
 import { useAnalyzeBuildInfo } from '~/composables/state'
 import { registerCommands } from '~/composables/state-commands'
 import { telemetry } from '~/composables/telemetry'
@@ -32,7 +33,8 @@ const shouldRevealTerminal = ref(false)
 const buildNameInput = ref('')
 const buildNameConflicted = computed(() => info.value?.builds.some(b => b.name === buildNameInput.value.trim()))
 async function start() {
-  buildNameInput.value = await rpc.generateAnalyzeBuildName()
+  const client = rpcClient.value || await connectPromise
+  buildNameInput.value = await client.call(`${RPC_NAMESPACE}:generateAnalyzeBuildName` as any) as Awaited<ReturnType<ServerFunctions['generateAnalyzeBuildName']>>
 
   if (!await PromiseConfirm.start())
     return
@@ -42,18 +44,20 @@ async function start() {
   // `startAnalyzeBuild` refreshes `getAnalyzeBuildInfo` as soon as the session
   // registers, so `info.isBuilding` / `info.activeSessionId` drive the UI. It
   // also returns the id so we can reveal the dock immediately.
-  const sessionId = await rpc.startAnalyzeBuild(buildNameInput.value)
+  const sessionId = await client.call(`${RPC_NAMESPACE}:startAnalyzeBuild` as any, buildNameInput.value) as Awaited<ReturnType<ServerFunctions['startAnalyzeBuild']>>
   if (shouldRevealTerminal.value)
-    rpc.revealTerminal(sessionId)
+    client.call(`${RPC_NAMESPACE}:revealTerminal` as any, sessionId)
 }
 
 function getDuration(build: AnalyzeBuildMeta) {
   return `${((build.endTime - build.startTime) / 1000).toFixed(1)}s`
 }
 
-function revealTerminal() {
-  if (info.value?.activeSessionId)
-    rpc.revealTerminal(info.value.activeSessionId)
+async function revealTerminal() {
+  if (info.value?.activeSessionId) {
+    const client = rpcClient.value || await connectPromise
+    await client.call(`${RPC_NAMESPACE}:revealTerminal` as any, info.value.activeSessionId)
+  }
 }
 
 registerCommands(() => [
diff --git a/packages/devtools/client/pages/modules/custom-[name].vue b/packages/devtools/client/pages/modules/custom-[name].vue
index b6254b4008..d4ef135c34 100644
--- a/packages/devtools/client/pages/modules/custom-[name].vue
+++ b/packages/devtools/client/pages/modules/custom-[name].vue
@@ -3,8 +3,9 @@ import type { ModuleCustomTab } from '~/../src/types'
 import { computed, onMounted } from 'vue'
 import { useRoute, useRouter } from '#app/composables/router'
 import { definePageMeta } from '#imports'
+import { RPC_NAMESPACE } from '~/../src/rpc-namespace'
 import { isDevAuthed, requestForAuth } from '~/composables/dev-auth'
-import { rpc } from '~/composables/rpc'
+import { connectPromise, rpcClient } from '~/composables/rpc'
 import { useAllTabs } from '~/composables/state-tabs'
 
 const props = defineProps<{
@@ -33,6 +34,11 @@ onMounted(() => {
     requestForAuth()
   }
 })
+
+async function customTabAction(name: string, action: number) {
+  const client = rpcClient.value || await connectPromise
+  await client.call(`${RPC_NAMESPACE}:customTabAction` as any, name, action)
+}
 </script>
 
 <template>
@@ -68,7 +74,7 @@ onMounted(() => {
       :title="tab.view.title || tab.title"
       :description="tab.view.description"
       :actions="tab.view.actions"
-      @action="idx => rpc.customTabAction(tab!.name, idx)"
+      @action="idx => customTabAction(tab!.name, idx)"
     />
   </template>
   <template v-else>
diff --git a/packages/devtools/client/pages/modules/modules.vue b/packages/devtools/client/pages/modules/modules.vue
index 8fbf7ca45c..5b22fa3230 100644
--- a/packages/devtools/client/pages/modules/modules.vue
+++ b/packages/devtools/client/pages/modules/modules.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 import { definePageMeta } from '#imports'
-import { rpc } from '~/composables/rpc'
+import { RPC_NAMESPACE } from '~/../src/rpc-namespace'
+import { connectPromise, rpcClient } from '~/composables/rpc'
 import { registerCommands } from '~/composables/state-commands'
 import { useInstalledModules } from '~/composables/state-modules'
 
@@ -29,6 +30,11 @@ registerCommands(() => [
     },
   },
 ])
+
+async function revealTerminal(id: string) {
+  const client = rpcClient.value || await connectPromise
+  await client.call(`${RPC_NAMESPACE}:revealTerminal` as any, id)
+}
 </script>
 
 <template>
@@ -49,7 +55,7 @@ registerCommands(() => [
         v-for="m of processInstallingModules"
         :key="m.processId" block min-h-30
         title="Open the output in the Terminals dock"
-        @click="rpc.revealTerminal(m.processId)"
+        @click="revealTerminal(m.processId)"
       >
         <NCard
           border="1.5 dashed"
diff --git a/packages/devtools/client/pages/modules/pages.vue b/packages/devtools/client/pages/modules/pages.vue
index 1cd99fc08b..2ab0640df5 100644
--- a/packages/devtools/client/pages/modules/pages.vue
+++ b/packages/devtools/client/pages/modules/pages.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue'
 import { definePageMeta } from '#imports'
+import { RPC_NAMESPACE } from '~/../src/rpc-namespace'
 import { useClient, useClientRoute, useClientRouter } from '~/composables/client'
+import { connectPromise, rpcClient } from '~/composables/rpc'
 import { useLayouts, useMergedRouteList, useServerApp, useServerConfig } from '~/composables/state'
 import { useNuxtCompatibilityVersion } from '~/composables/utils'
 
@@ -64,6 +66,11 @@ function navigateToRoute(path: string) {
 const compatibilityVersion = useNuxtCompatibilityVersion()
 
 const pagesPath = computed(() => `./${compatibilityVersion === 4 ? 'app/' : ''}pages/index.vue`)
+
+async function enablePages() {
+  const client = rpcClient.value || await connectPromise
+  await client.call(`${RPC_NAMESPACE}:enablePages` as any)
+}
 </script>
 
 <template>
@@ -181,7 +188,7 @@ const pagesPath = computed(() => `./${compatibilityVersion === 4 ? 'app/' : ''}p
       {
         label: 'Enable Routing',
         async handle() {
-          return rpc.enablePages()
+          return enablePages()
         },
       },
     ]"
diff --git a/packages/devtools/client/pages/modules/timeline.vue b/packages/devtools/client/pages/modules/timeline.vue
index b9e2be49b1..835ad30681 100644
--- a/packages/devtools/client/pages/modules/timeline.vue
+++ b/packages/devtools/client/pages/modules/timeline.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
+import type { ServerFunctions } from '~/../src/types'
 import { createTemplatePromise } from '@vueuse/core'
 import { definePageMeta, devtoolsUiShowNotification } from '#imports'
+import { RPC_NAMESPACE } from '~/../src/rpc-namespace'
 import { useOpenInEditor } from '~/composables/editor'
-import { rpc } from '~/composables/rpc'
+import { connectPromise, rpcClient } from '~/composables/rpc'
 import { useModuleOptions, useServerConfig } from '~/composables/state'
 
 definePageMeta({
@@ -20,10 +22,11 @@ const openInEditor = useOpenInEditor()
 
 async function showPopup() {
   try {
-    const [source, modified] = await rpc.enableTimeline(true)
+    const client = rpcClient.value || await connectPromise
+    const [source, modified] = await client.call(`${RPC_NAMESPACE}:enableTimeline` as any, true) as Awaited<ReturnType<ServerFunctions['enableTimeline']>>
     if (!await Dialog.start(source, modified))
       return
-    await rpc.enableTimeline(false)
+    await client.call(`${RPC_NAMESPACE}:enableTimeline` as any, false)
   }
   catch {
     devtoolsUiShowNotification({
diff --git a/packages/devtools/client/pages/settings.vue b/packages/devtools/client/pages/settings.vue
index 3bf76a67e6..d37bf82802 100644
--- a/packages/devtools/client/pages/settings.vue
+++ b/packages/devtools/client/pages/settings.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { definePageMeta } from '#imports'
 import { useClient } from '~/composables/client'
-import { rpc } from '~/composables/rpc'
+import { connectPromise, rpcClient } from '~/composables/rpc'
 import { telemetryEnabled } from '~/composables/telemetry'
+import { RPC_NAMESPACE } from '../../src/rpc-namespace'
 import { useDevToolsOptions } from '../composables/storage-options'
 
 definePageMeta({
@@ -48,7 +49,8 @@ async function clearOptions() {
       if (key.startsWith('nuxt-devtools-'))
         localStorage.removeItem(key)
     })
-    await rpc.clearOptions()
+    const rpcClientInstance = rpcClient.value || await connectPromise
+    await rpcClientInstance.call(`${RPC_NAMESPACE}:clearOptions` as any)
     client.value?.app?.reload?.()
     window.location.reload()
   }
diff --git a/packages/devtools/client/plugins/global.ts b/packages/devtools/client/plugins/global.ts
index 44d26ee8e0..e9d97419eb 100644
--- a/packages/devtools/client/plugins/global.ts
+++ b/packages/devtools/client/plugins/global.ts
@@ -1,8 +1,9 @@
 import type { NuxtDevtoolsHostClient } from '@nuxt/devtools-kit/types'
 import { triggerRef } from 'vue'
 import { defineNuxtPlugin, useRouter } from '#imports'
+import { RPC_NAMESPACE } from '../../src/rpc-namespace'
 import { useClient } from '../composables/client'
-import { rpc } from '../composables/rpc'
+import { connectPromise, rpcClient } from '../composables/rpc'
 
 export default defineNuxtPlugin(() => {
   const client = useClient()
@@ -13,8 +14,9 @@ export default defineNuxtPlugin(() => {
     client.value.revision.value += 1
   }
 
-  function onInspectorClick(path: string) {
-    rpc.openInEditor(path)
+  async function onInspectorClick(path: string) {
+    const rpcClientInstance = rpcClient.value || await connectPromise
+    await rpcClientInstance.call(`${RPC_NAMESPACE}:openInEditor` as any, path)
   }
 
   function setupClient(_client: NuxtDevtoolsHostClient) {

From 770676195e9a85c688746614892cbdd5170f1a56 Mon Sep 17 00:00:00 2001
From: "Anthony Fu (via agent)" <reg-github-bot@antfu.me>
Date: Fri, 21 Aug 2026 21:04:03 +0000
Subject: [PATCH 2/2] refactor(devtools): add useDevtoolsRpc() scoped-context
 helper
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Introduce useDevtoolsRpc() in composables/rpc.ts: it resolves the
connected client (rpcClient.value || await connectPromise) and returns a
devframe-native namespace-scoped view (client.scope('nuxt:devtools').rpc)
typed against our own ServerFunctions.

Every internal call site now does:

  const rpc = await useDevtoolsRpc()
  await rpc.call('methodName', ...args)

with bare (unprefixed) method names and full argument/return inference —
no more repeated connect boilerplate, manual 'nuxt:devtools:' prefixing,
or 'as any' casts. devframe types its scoped surface against the global
registry (which we don't augment), so the helper re-types it against
ServerFunctions to keep call sites type-safe.
---
 .../client/components/AssetDetails.vue        | 20 ++---
 .../client/components/AssetDropZone.vue       |  6 +-
 .../client/components/BuildAnalyzeDetails.vue |  8 +-
 .../devtools/client/components/ModuleItem.vue |  6 +-
 .../client/components/ModuleItemInstall.vue   |  9 +--
 .../client/components/NpmVersionCheck.vue     |  9 +--
 .../client/components/RestartDialogs.vue      |  6 +-
 .../client/components/StorageDetails.vue      | 36 +++------
 .../devtools/client/composables/editor.ts     |  6 +-
 packages/devtools/client/composables/npm.ts   | 25 ++-----
 packages/devtools/client/composables/rpc.ts   | 39 +++++++++-
 .../client/composables/state-components.ts    | 14 +---
 packages/devtools/client/composables/state.ts | 75 ++++---------------
 .../client/composables/storage-options.ts     | 10 +--
 .../devtools/client/composables/telemetry.ts  |  6 +-
 .../client/pages/modules/analyze-build.vue    | 19 ++---
 .../client/pages/modules/custom-[name].vue    |  6 +-
 .../devtools/client/pages/modules/modules.vue |  6 +-
 .../devtools/client/pages/modules/pages.vue   |  6 +-
 .../client/pages/modules/timeline.vue         | 10 +--
 packages/devtools/client/pages/settings.vue   |  6 +-
 packages/devtools/client/plugins/global.ts    |  6 +-
 22 files changed, 129 insertions(+), 205 deletions(-)

diff --git a/packages/devtools/client/components/AssetDetails.vue b/packages/devtools/client/components/AssetDetails.vue
index 7946894793..f45b85f98d 100644
--- a/packages/devtools/client/components/AssetDetails.vue
+++ b/packages/devtools/client/components/AssetDetails.vue
@@ -1,11 +1,10 @@
 <script setup lang="ts">
-import type { AssetInfo, CodeSnippet, ServerFunctions } from '~/../src/types'
+import type { AssetInfo, CodeSnippet } from '~/../src/types'
 import { computedAsync, useTimeAgo, useVModel } from '@vueuse/core'
 import { computed, ref } from 'vue'
 import { devtoolsUiShowNotification } from '#imports'
-import { RPC_NAMESPACE } from '~/../src/rpc-namespace'
 import { useCopy, useOpenInEditor } from '~/composables/editor'
-import { connectPromise, rpcClient } from '~/composables/rpc'
+import { useDevtoolsRpc } from '~/composables/rpc'
 import { useServerConfig } from '~/composables/state'
 
 const props = defineProps<{
@@ -18,8 +17,7 @@ const asset = useVModel(props, 'modelValue', emit, { passive: true })
 const imageMeta = computedAsync(async () => {
   if (asset.value.type !== 'image')
     return undefined
-  const client = rpcClient.value || await connectPromise
-  return client.call(`${RPC_NAMESPACE}:getImageMeta` as any, asset.value.filePath) as Promise<Awaited<ReturnType<ServerFunctions['getImageMeta']>>>
+  return (await useDevtoolsRpc()).call('getImageMeta', asset.value.filePath)
 })
 
 const editDialog = ref(false)
@@ -32,8 +30,7 @@ const textContent = computedAsync(async () => {
   // eslint-disable-next-line ts/no-unused-expressions
   textContentCounter.value
 
-  const client = rpcClient.value || await connectPromise
-  const content = await client.call(`${RPC_NAMESPACE}:getTextAssetContent` as any, asset.value.filePath) as Awaited<ReturnType<ServerFunctions['getTextAssetContent']>>
+  const content = await (await useDevtoolsRpc()).call('getTextAssetContent', asset.value.filePath)
   newTextContent.value = content
   return content
 })
@@ -41,8 +38,7 @@ const textContent = computedAsync(async () => {
 async function saveTextContent() {
   if (textContent.value !== newTextContent.value) {
     try {
-      const client = rpcClient.value || await connectPromise
-      await client.call(`${RPC_NAMESPACE}:writeStaticAssets` as any, [{
+      await (await useDevtoolsRpc()).call('writeStaticAssets', [{
         path: asset.value.path,
         content: newTextContent.value,
         override: true,
@@ -137,8 +133,7 @@ const supportsPreview = computed(() => {
 const deleteDialog = ref(false)
 async function deleteAsset() {
   try {
-    const client = rpcClient.value || await connectPromise
-    await client.call(`${RPC_NAMESPACE}:deleteStaticAsset` as any, asset.value.filePath)
+    await (await useDevtoolsRpc()).call('deleteStaticAsset', asset.value.filePath)
     asset.value = undefined as any
     deleteDialog.value = false
     devtoolsUiShowNotification({
@@ -174,8 +169,7 @@ async function renameAsset() {
   try {
     const extension = parts.slice(-1)[0]?.split('.').slice(-1)[0]
     const fullPath = `${parts.slice(0, -1).join('/')}/${newName.value}.${extension}`
-    const client = rpcClient.value || await connectPromise
-    await client.call(`${RPC_NAMESPACE}:renameStaticAsset` as any, asset.value.filePath, fullPath)
+    await (await useDevtoolsRpc()).call('renameStaticAsset', asset.value.filePath, fullPath)
     asset.value = undefined as any
     renameDialog.value = false
     devtoolsUiShowNotification({
diff --git a/packages/devtools/client/components/AssetDropZone.vue b/packages/devtools/client/components/AssetDropZone.vue
index 87f5ddaa12..e4862af3dd 100644
--- a/packages/devtools/client/components/AssetDropZone.vue
+++ b/packages/devtools/client/components/AssetDropZone.vue
@@ -3,8 +3,7 @@ import type { AssetEntry } from '~/../src/types'
 import { useEventListener, useVModel } from '@vueuse/core'
 import { ref } from 'vue'
 import { devtoolsUiShowNotification } from '#imports'
-import { RPC_NAMESPACE } from '~/../src/rpc-namespace'
-import { connectPromise, rpcClient, wsConnecting, wsError } from '~/composables/rpc'
+import { useDevtoolsRpc, wsConnecting, wsError } from '~/composables/rpc'
 import { telemetry } from '~/composables/telemetry'
 
 const props = defineProps({
@@ -95,8 +94,7 @@ async function uploadFiles() {
       content,
     })
   }
-  const client = rpcClient.value || await connectPromise
-  await client.call(`${RPC_NAMESPACE}:writeStaticAssets` as any, [...uploadFiles], props.folder).then(() => {
+  await (await useDevtoolsRpc()).call('writeStaticAssets', [...uploadFiles], props.folder).then(() => {
     close()
     devtoolsUiShowNotification({
       message: 'Files uploaded successfully!',
diff --git a/packages/devtools/client/components/BuildAnalyzeDetails.vue b/packages/devtools/client/components/BuildAnalyzeDetails.vue
index 008363b3ef..1b2ffc75d0 100644
--- a/packages/devtools/client/components/BuildAnalyzeDetails.vue
+++ b/packages/devtools/client/components/BuildAnalyzeDetails.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import type { AnalyzeBuildMeta, ServerFunctions } from '../../src/types'
+import type { AnalyzeBuildMeta } from '../../src/types'
 import { formatTimeAgo } from '@vueuse/core'
 import { computed, ref } from 'vue'
 import { useRuntimeConfig } from '#imports'
-import { connectPromise, rpcClient } from '~/composables/rpc'
-import { RPC_NAMESPACE } from '../../src/rpc-namespace'
+import { useDevtoolsRpc } from '~/composables/rpc'
 
 const props = defineProps<{
   current: AnalyzeBuildMeta
@@ -46,8 +45,7 @@ function formatFileSize(bytes: number) {
 }
 
 async function clear(name: string) {
-  const client = rpcClient.value || await connectPromise
-  return client.call(`${RPC_NAMESPACE}:clearAnalyzeBuilds` as any, [name]) as Promise<Awaited<ReturnType<ServerFunctions['clearAnalyzeBuilds']>>>
+  return (await useDevtoolsRpc()).call('clearAnalyzeBuilds', [name])
 }
 </script>
 
diff --git a/packages/devtools/client/components/ModuleItem.vue b/packages/devtools/client/components/ModuleItem.vue
index ac77a84a90..16bebe485b 100644
--- a/packages/devtools/client/components/ModuleItem.vue
+++ b/packages/devtools/client/components/ModuleItem.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import type { InstalledModuleInfo } from '../../src/types'
 import { computed } from 'vue'
-import { connectPromise, rpcClient } from '~/composables/rpc'
-import { RPC_NAMESPACE } from '../../src/rpc-namespace'
+import { useDevtoolsRpc } from '~/composables/rpc'
 
 const props = defineProps<{
   mod: InstalledModuleInfo
@@ -16,8 +15,7 @@ const data = computed(() => ({
 }))
 
 async function revealTerminal(id: string) {
-  const client = rpcClient.value || await connectPromise
-  await client.call(`${RPC_NAMESPACE}:revealTerminal` as any, id)
+  await (await useDevtoolsRpc()).call('revealTerminal', id)
 }
 </script>
 
diff --git a/packages/devtools/client/components/ModuleItemInstall.vue b/packages/devtools/client/components/ModuleItemInstall.vue
index 88be0e4b27..04756109e4 100644
--- a/packages/devtools/client/components/ModuleItemInstall.vue
+++ b/packages/devtools/client/components/ModuleItemInstall.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
-import type { ModuleActionType, ModuleStaticInfo, ServerFunctions } from '../../src/types'
+import type { ModuleActionType, ModuleStaticInfo } from '../../src/types'
 import { computed } from 'vue'
 import { ModuleDialog } from '~/composables/dialog'
-import { connectPromise, rpcClient } from '~/composables/rpc'
+import { useDevtoolsRpc } from '~/composables/rpc'
 import { useInstalledModules } from '~/composables/state-modules'
 import { processInstallingModules } from '~/composables/state-subprocess'
 import { telemetry } from '~/composables/telemetry'
-import { RPC_NAMESPACE } from '../../src/rpc-namespace'
 
 const props = defineProps<{
   item: ModuleStaticInfo
@@ -20,9 +19,9 @@ const isInstalled = computed(() => installedInfo.value && installedInfo.value.is
 const isUninstallable = computed(() => installedInfo.value && installedInfo.value.isPackageModule && installedInfo.value.isUninstallable)
 
 async function callModuleAction(type: ModuleActionType, name: string, dry: boolean, sessionId?: string) {
-  const client = rpcClient.value || await connectPromise
+  const rpc = await useDevtoolsRpc()
   const method = type === 'install' ? 'installNuxtModule' : 'uninstallNuxtModule'
-  return client.call(`${RPC_NAMESPACE}:${method}` as any, name, dry, sessionId) as Promise<Awaited<ReturnType<ServerFunctions['installNuxtModule']>>>
+  return rpc.call(method, name, dry, sessionId)
 }
 
 async function useModuleAction(item: ModuleStaticInfo, type: ModuleActionType) {
diff --git a/packages/devtools/client/components/NpmVersionCheck.vue b/packages/devtools/client/components/NpmVersionCheck.vue
index 59a6e51b28..d121f3f0e6 100644
--- a/packages/devtools/client/components/NpmVersionCheck.vue
+++ b/packages/devtools/client/components/NpmVersionCheck.vue
@@ -4,9 +4,8 @@ import { createTemplatePromise } from '@vueuse/core'
 import { ref } from 'vue'
 import { useRestartDialogs } from '~/composables/dialog'
 import { usePackageUpdate } from '~/composables/npm'
-import { connectPromise, rpcClient } from '~/composables/rpc'
+import { useDevtoolsRpc } from '~/composables/rpc'
 import { telemetry } from '~/composables/telemetry'
-import { RPC_NAMESPACE } from '../../src/rpc-namespace'
 
 const props = withDefaults(
   defineProps<{
@@ -49,10 +48,8 @@ async function updateWithConfirm() {
       message: `${props.packageName} has been updated. Do you want to restart the Nuxt server now?`,
     })
   }
-  if (processId && shouldRevealTerminal.value) {
-    const client = rpcClient.value || await connectPromise
-    client.call(`${RPC_NAMESPACE}:revealTerminal` as any, processId)
-  }
+  if (processId && shouldRevealTerminal.value)
+    (await useDevtoolsRpc()).call('revealTerminal', processId)
 }
 </script>
 
diff --git a/packages/devtools/client/components/RestartDialogs.vue b/packages/devtools/client/components/RestartDialogs.vue
index 497d352007..4c65fc4c36 100644
--- a/packages/devtools/client/components/RestartDialogs.vue
+++ b/packages/devtools/client/components/RestartDialogs.vue
@@ -3,8 +3,7 @@ import { createTemplatePromise } from '@vueuse/core'
 import { useNuxtApp } from '#app/nuxt'
 import { useClient } from '~/composables/client'
 import { useRestartDialogs } from '~/composables/dialog'
-import { connectPromise, rpcClient } from '~/composables/rpc'
-import { RPC_NAMESPACE } from '../../src/rpc-namespace'
+import { useDevtoolsRpc } from '~/composables/rpc'
 
 const nuxt = useNuxtApp()
 const state = useRestartDialogs()
@@ -22,8 +21,7 @@ nuxt.hook('devtools:terminal:exit', ({ id, code }) => {
         .start(dialog.message)
         .then(async (result) => {
           if (result) {
-            const rpcClientInstance = rpcClient.value || await connectPromise
-            rpcClientInstance.call(`${RPC_NAMESPACE}:restartNuxt` as any)
+            (await useDevtoolsRpc()).call('restartNuxt')
             setTimeout(() => {
               client.value?.app.reload()
             }, 500)
diff --git a/packages/devtools/client/components/StorageDetails.vue b/packages/devtools/client/components/StorageDetails.vue
index 63490811fe..c16f60d196 100644
--- a/packages/devtools/client/components/StorageDetails.vue
+++ b/packages/devtools/client/components/StorageDetails.vue
@@ -1,14 +1,12 @@
 <script setup lang="ts">
-import type { ServerFunctions } from '~/../src/types'
 import { useEventListener } from '@vueuse/core'
 import JsonEditorVue from 'json-editor-vue'
 import { computed, onUnmounted, ref, watch, watchEffect } from 'vue'
 import { useAsyncData } from '#app/composables/asyncData'
 import { useRouter } from '#app/composables/router'
 import { useNuxtApp } from '#app/nuxt'
-import { RPC_NAMESPACE } from '~/../src/rpc-namespace'
 import { getColorMode } from '~/composables/client'
-import { connectPromise, rpcClient } from '~/composables/rpc'
+import { useDevtoolsRpc } from '~/composables/rpc'
 import { useSessionState } from '~/composables/utils'
 
 const colorMode = getColorMode()
@@ -20,15 +18,10 @@ const currentStorage = useSessionState<string>('storage:current', '')
 const currentItem = ref()
 const fileKey = useSessionState<string>('storage:file:state', '')
 
-const { data: storageMounts } = await useAsyncData('storageMounts', async () => {
-  const client = rpcClient.value || await connectPromise
-  return client.call(`${RPC_NAMESPACE}:getStorageMounts` as any) as Promise<Awaited<ReturnType<ServerFunctions['getStorageMounts']>>>
-})
+const { data: storageMounts } = await useAsyncData('storageMounts', async () => (await useDevtoolsRpc()).call('getStorageMounts'))
 const { data: storageKeys, refresh: refreshStorageKeys } = await useAsyncData('storageKeys', async () => {
-  if (currentStorage.value) {
-    const client = rpcClient.value || await connectPromise
-    return await client.call(`${RPC_NAMESPACE}:getStorageKeys` as any, currentStorage.value) as Awaited<ReturnType<ServerFunctions['getStorageKeys']>>
-  }
+  if (currentStorage.value)
+    return (await useDevtoolsRpc()).call('getStorageKeys', currentStorage.value)
   return []
 })
 
@@ -77,8 +70,7 @@ const filteredKeys = computed(() => {
 })
 
 async function fetchItem(key: string) {
-  const client = rpcClient.value || await connectPromise
-  const content = await client.call(`${RPC_NAMESPACE}:getStorageItem` as any, key) as Awaited<ReturnType<ServerFunctions['getStorageItem']>>
+  const content = await (await useDevtoolsRpc()).call('getStorageItem', key)
   currentItem.value = {
     key,
     updatedKey: keyName(key),
@@ -93,10 +85,8 @@ async function saveNewItem() {
     return
   // If does not exists
   const key = `${currentStorage.value}:${newKey.value}`
-  if (!storageKeys.value?.includes(key)) {
-    const client = rpcClient.value || await connectPromise
-    await client.call(`${RPC_NAMESPACE}:setStorageItem` as any, key, '')
-  }
+  if (!storageKeys.value?.includes(key))
+    await (await useDevtoolsRpc()).call('setStorageItem', key, '')
 
   router.replace({ query: { storage: currentStorage.value, key } })
   newKey.value = ''
@@ -105,16 +95,14 @@ async function saveNewItem() {
 async function saveCurrentItem() {
   if (!currentItem.value)
     return
-  const client = rpcClient.value || await connectPromise
-  await client.call(`${RPC_NAMESPACE}:setStorageItem` as any, currentItem.value.key, currentItem.value.updatedContent)
+  await (await useDevtoolsRpc()).call('setStorageItem', currentItem.value.key, currentItem.value.updatedContent)
   await fetchItem(currentItem.value.key)
 }
 
 async function removeCurrentItem() {
   if (!currentItem.value || !currentStorage.value)
     return
-  const client = rpcClient.value || await connectPromise
-  await client.call(`${RPC_NAMESPACE}:removeStorageItem` as any, currentItem.value.key)
+  await (await useDevtoolsRpc()).call('removeStorageItem', currentItem.value.key)
   currentItem.value = null
 }
 
@@ -122,9 +110,9 @@ async function renameCurrentItem() {
   if (!currentItem.value || !currentStorage.value)
     return
   const renamedKey = `${currentStorage.value}:${currentItem.value.updatedKey}`
-  const client = rpcClient.value || await connectPromise
-  await client.call(`${RPC_NAMESPACE}:setStorageItem` as any, renamedKey, currentItem.value.updatedContent)
-  await client.call(`${RPC_NAMESPACE}:removeStorageItem` as any, currentItem.value.key)
+  const rpc = await useDevtoolsRpc()
+  await rpc.call('setStorageItem', renamedKey, currentItem.value.updatedContent)
+  await rpc.call('removeStorageItem', currentItem.value.key)
   router.replace({ query: { storage: currentStorage.value, key: renamedKey } })
 }
 </script>
diff --git a/packages/devtools/client/composables/editor.ts b/packages/devtools/client/composables/editor.ts
index 297122f099..445f0ec369 100644
--- a/packages/devtools/client/composables/editor.ts
+++ b/packages/devtools/client/composables/editor.ts
@@ -1,8 +1,7 @@
 import { useClipboard } from '@vueuse/core'
 import { useRouter } from '#app/composables/router'
 import { devtoolsUiShowNotification } from '#imports'
-import { RPC_NAMESPACE } from '../../src/rpc-namespace'
-import { connectPromise, rpcClient } from './rpc'
+import { useDevtoolsRpc } from './rpc'
 import { useServerConfig, useVirtualFiles } from './state'
 import { useCurrentVirtualFile } from './state-routes'
 import { telemetry } from './telemetry'
@@ -34,8 +33,7 @@ export function useOpenInEditor() {
       router.push('/modules/virtual-files')
     }
     else {
-      const client = rpcClient.value || await connectPromise
-      await client.call(`${RPC_NAMESPACE}:openInEditor` as any, filepath)
+      await (await useDevtoolsRpc()).call('openInEditor', filepath)
     }
   }
 }
diff --git a/packages/devtools/client/composables/npm.ts b/packages/devtools/client/composables/npm.ts
index 496a936c63..04534c8744 100644
--- a/packages/devtools/client/composables/npm.ts
+++ b/packages/devtools/client/composables/npm.ts
@@ -1,9 +1,8 @@
-import type { NpmCommandOptions, ServerFunctions } from '../../src/types'
+import type { NpmCommandOptions } from '../../src/types'
 import { satisfies } from 'verkit'
 import { computed, ref } from 'vue'
 import { useNuxtApp } from '#app/nuxt'
-import { RPC_NAMESPACE } from '../../src/rpc-namespace'
-import { connectPromise, rpcClient } from './rpc'
+import { useDevtoolsRpc } from './rpc'
 import { useAsyncState } from './utils'
 
 export type PackageUpdateState = 'idle' | 'running' | 'updated'
@@ -18,10 +17,7 @@ export function usePackageUpdate(name: string, options?: NpmCommandOptions): Ret
 }
 
 export function useNuxtVersion() {
-  return useAsyncState('npm:check:nuxt', async () => {
-    const client = rpcClient.value || await connectPromise
-    return client.call(`${RPC_NAMESPACE}:checkForUpdateFor` as any, 'nuxt') as Promise<Awaited<ReturnType<ServerFunctions['checkForUpdateFor']>>>
-  })
+  return useAsyncState('npm:check:nuxt', async () => (await useDevtoolsRpc()).call('checkForUpdateFor', 'nuxt'))
 }
 
 export function satisfyNuxtVersion(range: string) {
@@ -35,10 +31,7 @@ export function satisfyNuxtVersion(range: string) {
 
 function getPackageUpdate(name: string, options?: NpmCommandOptions) {
   const nuxt = useNuxtApp()
-  const info = useAsyncState(`npm:check:${name}`, async () => {
-    const client = rpcClient.value || await connectPromise
-    return client.call(`${RPC_NAMESPACE}:checkForUpdateFor` as any, name) as Promise<Awaited<ReturnType<ServerFunctions['checkForUpdateFor']>>>
-  })
+  const info = useAsyncState(`npm:check:${name}`, async () => (await useDevtoolsRpc()).call('checkForUpdateFor', name))
 
   const state = ref<PackageUpdateState>('idle')
 
@@ -56,8 +49,8 @@ function getPackageUpdate(name: string, options?: NpmCommandOptions) {
     if (state.value !== 'idle')
       return
 
-    const client = rpcClient.value || await connectPromise
-    const command = await client.call(`${RPC_NAMESPACE}:getNpmCommand` as any, 'update', name, options) as Awaited<ReturnType<ServerFunctions['getNpmCommand']>>
+    const rpc = await useDevtoolsRpc()
+    const command = await rpc.call('getNpmCommand', 'update', name, options)
     if (!command)
       return
 
@@ -66,8 +59,7 @@ function getPackageUpdate(name: string, options?: NpmCommandOptions) {
 
     state.value = 'running'
 
-    const result = await client.call(`${RPC_NAMESPACE}:runNpmCommand` as any, 'update', name, options) as Awaited<ReturnType<ServerFunctions['runNpmCommand']>>
-    processId.value = result?.processId
+    processId.value = (await rpc.call('runNpmCommand', 'update', name, options))?.processId
 
     return processId.value
   }
@@ -75,8 +67,7 @@ function getPackageUpdate(name: string, options?: NpmCommandOptions) {
   async function restart() {
     if (state.value !== 'updated')
       return
-    const client = rpcClient.value || await connectPromise
-    await client.call(`${RPC_NAMESPACE}:restartNuxt` as any)
+    await (await useDevtoolsRpc()).call('restartNuxt')
   }
 
   return {
diff --git a/packages/devtools/client/composables/rpc.ts b/packages/devtools/client/composables/rpc.ts
index d1bf5979b9..f8df89a77f 100644
--- a/packages/devtools/client/composables/rpc.ts
+++ b/packages/devtools/client/composables/rpc.ts
@@ -1,5 +1,5 @@
 import type { DevToolsRpcClient } from '@vitejs/devtools-kit/client'
-import type { AsyncServerFunctions, ClientFunctions } from '../../src/types'
+import type { AsyncServerFunctions, ClientFunctions, ServerFunctions } from '../../src/types'
 import { getDevToolsRpcClient } from '@vitejs/devtools-kit/client'
 import { useDebounce } from '@vueuse/core'
 import { ref, shallowRef } from 'vue'
@@ -40,6 +40,43 @@ export const rpc = new Proxy({} as AsyncServerFunctions, {
   },
 })
 
+/**
+ * Nuxt DevTools' server RPC surface, scoped to the `nuxt:devtools:` namespace
+ * and typed against our own {@link ServerFunctions}.
+ *
+ * This is the shape devframe's native `client.scope(ns).rpc` returns — every id
+ * is auto-prefixed with the namespace, so methods are called by their bare
+ * name (`call('getServerPages')` → `nuxt:devtools:getServerPages`). devframe
+ * types its scoped surface against the global function registry, which Nuxt
+ * DevTools does not augment, so we re-type it here against `ServerFunctions` to
+ * keep full argument/return inference at every call site.
+ */
+export interface DevtoolsScopedRpc {
+  /** Call a server function by its bare (unprefixed) name. */
+  call: <T extends keyof ServerFunctions>(method: T, ...args: Parameters<ServerFunctions[T]>) => Promise<Awaited<ReturnType<ServerFunctions[T]>>>
+  /** Fire-and-forget a server function; no response is awaited. */
+  callEvent: <T extends keyof ServerFunctions>(method: T, ...args: Parameters<ServerFunctions[T]>) => void
+  /** Call a server function that resolves `undefined` when it isn't registered. */
+  callOptional: <T extends keyof ServerFunctions>(method: T, ...args: Parameters<ServerFunctions[T]>) => Promise<Awaited<ReturnType<ServerFunctions[T]>> | undefined>
+}
+
+/**
+ * Resolve the connected devframe RPC client and return its view scoped to the
+ * `nuxt:devtools:` namespace (devframe-native `client.scope(...)`).
+ *
+ * Collapses the `rpcClient.value || await connectPromise` connect dance and the
+ * namespace prefixing into one call, so internal app code does:
+ *
+ * ```ts
+ * const rpc = await useDevtoolsRpc()
+ * const pages = await rpc.call('getServerPages')
+ * ```
+ */
+export async function useDevtoolsRpc(): Promise<DevtoolsScopedRpc> {
+  const client = rpcClient.value || await connectPromise
+  return client.scope(RPC_NAMESPACE).rpc as unknown as DevtoolsScopedRpc
+}
+
 async function connectDevToolsRpc(): Promise<DevToolsRpcClient> {
   try {
     const client = await getDevToolsRpcClient()
diff --git a/packages/devtools/client/composables/state-components.ts b/packages/devtools/client/composables/state-components.ts
index 5d1f66259e..20ba712e1b 100644
--- a/packages/devtools/client/composables/state-components.ts
+++ b/packages/devtools/client/composables/state-components.ts
@@ -1,19 +1,14 @@
 import type { Component } from 'nuxt/schema'
-import type { ServerFunctions } from '../../src/types'
 import { computed } from 'vue'
-import { RPC_NAMESPACE } from '../../src/rpc-namespace'
 import { useClient } from './client'
-import { connectPromise, rpcClient } from './rpc'
+import { useDevtoolsRpc } from './rpc'
 import { useAsyncState } from './utils'
 
 const LAZY_COMPONENT_RE = /^Lazy[A-Z]/
 
 export function useComponents() {
   const client = useClient()
-  const serverComponents = useAsyncState('getComponents', async () => {
-    const rpcClientInstance = rpcClient.value || await connectPromise
-    return rpcClientInstance.call(`${RPC_NAMESPACE}:getComponents` as any) as Promise<Awaited<ReturnType<ServerFunctions['getComponents']>>>
-  })
+  const serverComponents = useAsyncState('getComponents', async () => (await useDevtoolsRpc()).call('getComponents'))
 
   const globalComponents = computed(() =>
     Object
@@ -34,8 +29,5 @@ export function useComponents() {
 }
 
 export function useComponentsRelationships() {
-  return useAsyncState('getComponentsRelationships', async () => {
-    const client = rpcClient.value || await connectPromise
-    return client.call(`${RPC_NAMESPACE}:getComponentsRelationships` as any) as Promise<Awaited<ReturnType<ServerFunctions['getComponentsRelationships']>>>
-  })
+  return useAsyncState('getComponentsRelationships', async () => (await useDevtoolsRpc()).call('getComponentsRelationships'))
 }
diff --git a/packages/devtools/client/composables/state.ts b/packages/devtools/client/composables/state.ts
index e43e608e57..3665d2c71e 100644
--- a/packages/devtools/client/composables/state.ts
+++ b/packages/devtools/client/composables/state.ts
@@ -1,109 +1,66 @@
 import type { Ref } from 'vue'
-import type { HookInfo, RouteInfo, ServerFunctions } from '../../src/types'
+import type { HookInfo, RouteInfo } from '../../src/types'
 import { objectPick } from '@antfu/utils'
 import { computed } from 'vue'
 import { useFetch } from '#app/composables/fetch'
-import { RPC_NAMESPACE } from '../../src/rpc-namespace'
 import { useClientRouter } from './client'
-import { connectPromise, rpcClient } from './rpc'
+import { useDevtoolsRpc } from './rpc'
 import { useAsyncState } from './utils'
 
 export function useServerPages() {
-  return useAsyncState('getServerPages', async () => {
-    const client = rpcClient.value || await connectPromise
-    return client.call(`${RPC_NAMESPACE}:getServerPages` as any) as Promise<Awaited<ReturnType<ServerFunctions['getServerPages']>>>
-  })
+  return useAsyncState('getServerPages', async () => (await useDevtoolsRpc()).call('getServerPages'))
 }
 
 export function useServerRoutes() {
-  return useAsyncState('getServerRoutes', async () => {
-    const client = rpcClient.value || await connectPromise
-    return client.call(`${RPC_NAMESPACE}:getServerRoutes` as any) as Promise<Awaited<ReturnType<ServerFunctions['getServerRoutes']>>>
-  })
+  return useAsyncState('getServerRoutes', async () => (await useDevtoolsRpc()).call('getServerRoutes'))
 }
 
 export function useServerTasks() {
-  return useAsyncState('getServerTasks', async () => {
-    const client = rpcClient.value || await connectPromise
-    return client.call(`${RPC_NAMESPACE}:getServerTasks` as any) as Promise<Awaited<ReturnType<ServerFunctions['getServerTasks']>>>
-  })
+  return useAsyncState('getServerTasks', async () => (await useDevtoolsRpc()).call('getServerTasks'))
 }
 
 export function useServerHooks() {
-  return useAsyncState('getServerHooks', async () => {
-    const client = rpcClient.value || await connectPromise
-    return client.call(`${RPC_NAMESPACE}:getServerHooks` as any) as Promise<Awaited<ReturnType<ServerFunctions['getServerHooks']>>>
-  }) as Ref<HookInfo[] | undefined>
+  return useAsyncState('getServerHooks', async () => (await useDevtoolsRpc()).call('getServerHooks')) as Ref<HookInfo[] | undefined>
 }
 
 export function useLayouts() {
-  return useAsyncState('getServerLayouts', async () => {
-    const client = rpcClient.value || await connectPromise
-    return client.call(`${RPC_NAMESPACE}:getServerLayouts` as any) as Promise<Awaited<ReturnType<ServerFunctions['getServerLayouts']>>>
-  })
+  return useAsyncState('getServerLayouts', async () => (await useDevtoolsRpc()).call('getServerLayouts'))
 }
 
 export function useAutoImports() {
-  return useAsyncState('getAutoImports', async () => {
-    const client = rpcClient.value || await connectPromise
-    return client.call(`${RPC_NAMESPACE}:getAutoImports` as any) as Promise<Awaited<ReturnType<ServerFunctions['getAutoImports']>>>
-  })
+  return useAsyncState('getAutoImports', async () => (await useDevtoolsRpc()).call('getAutoImports'))
 }
 
 export function useStaticAssets() {
-  return useAsyncState('getStaticAssets', async () => {
-    const client = rpcClient.value || await connectPromise
-    return client.call(`${RPC_NAMESPACE}:getStaticAssets` as any) as Promise<Awaited<ReturnType<ServerFunctions['getStaticAssets']>>>
-  })
+  return useAsyncState('getStaticAssets', async () => (await useDevtoolsRpc()).call('getStaticAssets'))
 }
 
 export function useServerConfig() {
-  return useAsyncState('getServerConfig', async () => {
-    const client = rpcClient.value || await connectPromise
-    return client.call(`${RPC_NAMESPACE}:getServerConfig` as any) as Promise<Awaited<ReturnType<ServerFunctions['getServerConfig']>>>
-  })
+  return useAsyncState('getServerConfig', async () => (await useDevtoolsRpc()).call('getServerConfig'))
 }
 
 export function useServerDebugContext() {
-  return useAsyncState('getServerDebugContext', async () => {
-    const client = rpcClient.value || await connectPromise
-    return client.call(`${RPC_NAMESPACE}:getServerDebugContext` as any) as Promise<Awaited<ReturnType<ServerFunctions['getServerDebugContext']>>>
-  })
+  return useAsyncState('getServerDebugContext', async () => (await useDevtoolsRpc()).call('getServerDebugContext'))
 }
 
 export function useServerRuntimeConfig() {
-  return useAsyncState('getServerRuntimeConfig', async () => {
-    const client = rpcClient.value || await connectPromise
-    return client.call(`${RPC_NAMESPACE}:getServerRuntimeConfig` as any) as Promise<Awaited<ReturnType<ServerFunctions['getServerRuntimeConfig']>>>
-  })
+  return useAsyncState('getServerRuntimeConfig', async () => (await useDevtoolsRpc()).call('getServerRuntimeConfig'))
 }
 
 export function useModuleOptions() {
-  return useAsyncState('getModuleOptions', async () => {
-    const client = rpcClient.value || await connectPromise
-    return client.call(`${RPC_NAMESPACE}:getModuleOptions` as any) as Promise<Awaited<ReturnType<ServerFunctions['getModuleOptions']>>>
-  })
+  return useAsyncState('getModuleOptions', async () => (await useDevtoolsRpc()).call('getModuleOptions'))
 }
 
 export function useServerApp() {
-  return useAsyncState('getServerApp', async () => {
-    const client = rpcClient.value || await connectPromise
-    return client.call(`${RPC_NAMESPACE}:getServerApp` as any) as Promise<Awaited<ReturnType<ServerFunctions['getServerApp']>>>
-  })
+  return useAsyncState('getServerApp', async () => (await useDevtoolsRpc()).call('getServerApp'))
 }
 
 export function useCustomTabs() {
-  return useAsyncState('getCustomTabs', async () => {
-    const client = rpcClient.value || await connectPromise
-    return client.call(`${RPC_NAMESPACE}:getCustomTabs` as any) as Promise<Awaited<ReturnType<ServerFunctions['getCustomTabs']>>>
-  })
+  return useAsyncState('getCustomTabs', async () => (await useDevtoolsRpc()).call('getCustomTabs'))
 }
 
 export function useAnalyzeBuildInfo() {
-  return useAsyncState('getAnalyzeBuildInfo', async () => {
-    const client = rpcClient.value || await connectPromise
-    return client.call(`${RPC_NAMESPACE}:getAnalyzeBuildInfo` as any) as Promise<Awaited<ReturnType<ServerFunctions['getAnalyzeBuildInfo']>>>
-  })
+  return useAsyncState('getAnalyzeBuildInfo', async () => (await useDevtoolsRpc()).call('getAnalyzeBuildInfo'))
 }
 
 export interface VfsData {
diff --git a/packages/devtools/client/composables/storage-options.ts b/packages/devtools/client/composables/storage-options.ts
index e4ec2b414a..d50aacaac5 100644
--- a/packages/devtools/client/composables/storage-options.ts
+++ b/packages/devtools/client/composables/storage-options.ts
@@ -1,11 +1,9 @@
 import type { ToRefs } from 'vue'
-import type { ServerFunctions } from '../../src/types'
 import type { NuxtDevToolsOptions } from '../../types'
 import { watchDebounced } from '@vueuse/core'
 import { reactive, toRefs } from 'vue'
 import { createDefaultTabOptions } from '../../src/constant'
-import { RPC_NAMESPACE } from '../../src/rpc-namespace'
-import { connectPromise, rpcClient } from './rpc'
+import { useDevtoolsRpc } from './rpc'
 
 const cache = new Map<string, any>()
 
@@ -18,13 +16,11 @@ function getTabOptions<T extends keyof NuxtDevToolsOptions>(tab: T): ToRefs<Nuxt
   cache.set(tab, refs)
 
   async function loadOptions() {
-    const client = rpcClient.value || await connectPromise
-    return client.call(`${RPC_NAMESPACE}:getOptions` as any, tab) as Promise<Awaited<ReturnType<ServerFunctions['getOptions']>>>
+    return (await useDevtoolsRpc()).call('getOptions', tab)
   }
 
   async function persistOptions(options: NuxtDevToolsOptions[T]) {
-    const client = rpcClient.value || await connectPromise
-    return client.call(`${RPC_NAMESPACE}:updateOptions` as any, tab, options) as Promise<Awaited<ReturnType<ServerFunctions['updateOptions']>>>
+    return (await useDevtoolsRpc()).call('updateOptions', tab, options)
   }
 
   loadOptions()
diff --git a/packages/devtools/client/composables/telemetry.ts b/packages/devtools/client/composables/telemetry.ts
index abbc1d413f..3bce860d04 100644
--- a/packages/devtools/client/composables/telemetry.ts
+++ b/packages/devtools/client/composables/telemetry.ts
@@ -1,6 +1,5 @@
-import { RPC_NAMESPACE } from '../../src/rpc-namespace'
 import { userAgentInfo } from './dev-auth'
-import { connectPromise, rpcClient } from './rpc'
+import { useDevtoolsRpc } from './rpc'
 import { useDevToolsOptions } from './storage-options'
 
 export const telemetryEnabled = useDevToolsOptions('behavior').telemetry
@@ -10,8 +9,7 @@ export function telemetry(event: string, payload?: object, immediate = false) {
     return
 
   const send = async () => {
-    const client = rpcClient.value || await connectPromise
-    return client.call(`${RPC_NAMESPACE}:telemetryEvent` as any, {
+    return (await useDevtoolsRpc()).call('telemetryEvent', {
       event,
       browser: userAgentInfo.browser.name,
       browserVersion: userAgentInfo.browser.version,
diff --git a/packages/devtools/client/pages/modules/analyze-build.vue b/packages/devtools/client/pages/modules/analyze-build.vue
index ee88db6aad..d35dcfa6da 100644
--- a/packages/devtools/client/pages/modules/analyze-build.vue
+++ b/packages/devtools/client/pages/modules/analyze-build.vue
@@ -1,11 +1,10 @@
 <script setup lang="ts">
-import type { AnalyzeBuildMeta, ServerFunctions } from '~/../src/types'
+import type { AnalyzeBuildMeta } from '~/../src/types'
 import { createTemplatePromise, formatTimeAgo } from '@vueuse/core'
 import { computed, ref } from 'vue'
 import { definePageMeta } from '#imports'
-import { RPC_NAMESPACE } from '~/../src/rpc-namespace'
 import { satisfyNuxtVersion } from '~/composables/npm'
-import { connectPromise, rpcClient } from '~/composables/rpc'
+import { useDevtoolsRpc } from '~/composables/rpc'
 import { useAnalyzeBuildInfo } from '~/composables/state'
 import { registerCommands } from '~/composables/state-commands'
 import { telemetry } from '~/composables/telemetry'
@@ -33,8 +32,8 @@ const shouldRevealTerminal = ref(false)
 const buildNameInput = ref('')
 const buildNameConflicted = computed(() => info.value?.builds.some(b => b.name === buildNameInput.value.trim()))
 async function start() {
-  const client = rpcClient.value || await connectPromise
-  buildNameInput.value = await client.call(`${RPC_NAMESPACE}:generateAnalyzeBuildName` as any) as Awaited<ReturnType<ServerFunctions['generateAnalyzeBuildName']>>
+  const rpc = await useDevtoolsRpc()
+  buildNameInput.value = await rpc.call('generateAnalyzeBuildName')
 
   if (!await PromiseConfirm.start())
     return
@@ -44,9 +43,9 @@ async function start() {
   // `startAnalyzeBuild` refreshes `getAnalyzeBuildInfo` as soon as the session
   // registers, so `info.isBuilding` / `info.activeSessionId` drive the UI. It
   // also returns the id so we can reveal the dock immediately.
-  const sessionId = await client.call(`${RPC_NAMESPACE}:startAnalyzeBuild` as any, buildNameInput.value) as Awaited<ReturnType<ServerFunctions['startAnalyzeBuild']>>
+  const sessionId = await rpc.call('startAnalyzeBuild', buildNameInput.value)
   if (shouldRevealTerminal.value)
-    client.call(`${RPC_NAMESPACE}:revealTerminal` as any, sessionId)
+    rpc.call('revealTerminal', sessionId)
 }
 
 function getDuration(build: AnalyzeBuildMeta) {
@@ -54,10 +53,8 @@ function getDuration(build: AnalyzeBuildMeta) {
 }
 
 async function revealTerminal() {
-  if (info.value?.activeSessionId) {
-    const client = rpcClient.value || await connectPromise
-    await client.call(`${RPC_NAMESPACE}:revealTerminal` as any, info.value.activeSessionId)
-  }
+  if (info.value?.activeSessionId)
+    await (await useDevtoolsRpc()).call('revealTerminal', info.value.activeSessionId)
 }
 
 registerCommands(() => [
diff --git a/packages/devtools/client/pages/modules/custom-[name].vue b/packages/devtools/client/pages/modules/custom-[name].vue
index d4ef135c34..23056d6b7e 100644
--- a/packages/devtools/client/pages/modules/custom-[name].vue
+++ b/packages/devtools/client/pages/modules/custom-[name].vue
@@ -3,9 +3,8 @@ import type { ModuleCustomTab } from '~/../src/types'
 import { computed, onMounted } from 'vue'
 import { useRoute, useRouter } from '#app/composables/router'
 import { definePageMeta } from '#imports'
-import { RPC_NAMESPACE } from '~/../src/rpc-namespace'
 import { isDevAuthed, requestForAuth } from '~/composables/dev-auth'
-import { connectPromise, rpcClient } from '~/composables/rpc'
+import { useDevtoolsRpc } from '~/composables/rpc'
 import { useAllTabs } from '~/composables/state-tabs'
 
 const props = defineProps<{
@@ -36,8 +35,7 @@ onMounted(() => {
 })
 
 async function customTabAction(name: string, action: number) {
-  const client = rpcClient.value || await connectPromise
-  await client.call(`${RPC_NAMESPACE}:customTabAction` as any, name, action)
+  await (await useDevtoolsRpc()).call('customTabAction', name, action)
 }
 </script>
 
diff --git a/packages/devtools/client/pages/modules/modules.vue b/packages/devtools/client/pages/modules/modules.vue
index 5b22fa3230..15ccf9d8e8 100644
--- a/packages/devtools/client/pages/modules/modules.vue
+++ b/packages/devtools/client/pages/modules/modules.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 import { definePageMeta } from '#imports'
-import { RPC_NAMESPACE } from '~/../src/rpc-namespace'
-import { connectPromise, rpcClient } from '~/composables/rpc'
+import { useDevtoolsRpc } from '~/composables/rpc'
 import { registerCommands } from '~/composables/state-commands'
 import { useInstalledModules } from '~/composables/state-modules'
 
@@ -32,8 +31,7 @@ registerCommands(() => [
 ])
 
 async function revealTerminal(id: string) {
-  const client = rpcClient.value || await connectPromise
-  await client.call(`${RPC_NAMESPACE}:revealTerminal` as any, id)
+  await (await useDevtoolsRpc()).call('revealTerminal', id)
 }
 </script>
 
diff --git a/packages/devtools/client/pages/modules/pages.vue b/packages/devtools/client/pages/modules/pages.vue
index 2ab0640df5..b73e0ac363 100644
--- a/packages/devtools/client/pages/modules/pages.vue
+++ b/packages/devtools/client/pages/modules/pages.vue
@@ -1,9 +1,8 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue'
 import { definePageMeta } from '#imports'
-import { RPC_NAMESPACE } from '~/../src/rpc-namespace'
 import { useClient, useClientRoute, useClientRouter } from '~/composables/client'
-import { connectPromise, rpcClient } from '~/composables/rpc'
+import { useDevtoolsRpc } from '~/composables/rpc'
 import { useLayouts, useMergedRouteList, useServerApp, useServerConfig } from '~/composables/state'
 import { useNuxtCompatibilityVersion } from '~/composables/utils'
 
@@ -68,8 +67,7 @@ const compatibilityVersion = useNuxtCompatibilityVersion()
 const pagesPath = computed(() => `./${compatibilityVersion === 4 ? 'app/' : ''}pages/index.vue`)
 
 async function enablePages() {
-  const client = rpcClient.value || await connectPromise
-  await client.call(`${RPC_NAMESPACE}:enablePages` as any)
+  await (await useDevtoolsRpc()).call('enablePages')
 }
 </script>
 
diff --git a/packages/devtools/client/pages/modules/timeline.vue b/packages/devtools/client/pages/modules/timeline.vue
index 835ad30681..bb30f87a27 100644
--- a/packages/devtools/client/pages/modules/timeline.vue
+++ b/packages/devtools/client/pages/modules/timeline.vue
@@ -1,10 +1,8 @@
 <script setup lang="ts">
-import type { ServerFunctions } from '~/../src/types'
 import { createTemplatePromise } from '@vueuse/core'
 import { definePageMeta, devtoolsUiShowNotification } from '#imports'
-import { RPC_NAMESPACE } from '~/../src/rpc-namespace'
 import { useOpenInEditor } from '~/composables/editor'
-import { connectPromise, rpcClient } from '~/composables/rpc'
+import { useDevtoolsRpc } from '~/composables/rpc'
 import { useModuleOptions, useServerConfig } from '~/composables/state'
 
 definePageMeta({
@@ -22,11 +20,11 @@ const openInEditor = useOpenInEditor()
 
 async function showPopup() {
   try {
-    const client = rpcClient.value || await connectPromise
-    const [source, modified] = await client.call(`${RPC_NAMESPACE}:enableTimeline` as any, true) as Awaited<ReturnType<ServerFunctions['enableTimeline']>>
+    const rpc = await useDevtoolsRpc()
+    const [source, modified] = await rpc.call('enableTimeline', true)
     if (!await Dialog.start(source, modified))
       return
-    await client.call(`${RPC_NAMESPACE}:enableTimeline` as any, false)
+    await rpc.call('enableTimeline', false)
   }
   catch {
     devtoolsUiShowNotification({
diff --git a/packages/devtools/client/pages/settings.vue b/packages/devtools/client/pages/settings.vue
index d37bf82802..f8b85cd81e 100644
--- a/packages/devtools/client/pages/settings.vue
+++ b/packages/devtools/client/pages/settings.vue
@@ -1,9 +1,8 @@
 <script setup lang="ts">
 import { definePageMeta } from '#imports'
 import { useClient } from '~/composables/client'
-import { connectPromise, rpcClient } from '~/composables/rpc'
+import { useDevtoolsRpc } from '~/composables/rpc'
 import { telemetryEnabled } from '~/composables/telemetry'
-import { RPC_NAMESPACE } from '../../src/rpc-namespace'
 import { useDevToolsOptions } from '../composables/storage-options'
 
 definePageMeta({
@@ -49,8 +48,7 @@ async function clearOptions() {
       if (key.startsWith('nuxt-devtools-'))
         localStorage.removeItem(key)
     })
-    const rpcClientInstance = rpcClient.value || await connectPromise
-    await rpcClientInstance.call(`${RPC_NAMESPACE}:clearOptions` as any)
+    await (await useDevtoolsRpc()).call('clearOptions')
     client.value?.app?.reload?.()
     window.location.reload()
   }
diff --git a/packages/devtools/client/plugins/global.ts b/packages/devtools/client/plugins/global.ts
index e9d97419eb..8225fb62fa 100644
--- a/packages/devtools/client/plugins/global.ts
+++ b/packages/devtools/client/plugins/global.ts
@@ -1,9 +1,8 @@
 import type { NuxtDevtoolsHostClient } from '@nuxt/devtools-kit/types'
 import { triggerRef } from 'vue'
 import { defineNuxtPlugin, useRouter } from '#imports'
-import { RPC_NAMESPACE } from '../../src/rpc-namespace'
 import { useClient } from '../composables/client'
-import { connectPromise, rpcClient } from '../composables/rpc'
+import { useDevtoolsRpc } from '../composables/rpc'
 
 export default defineNuxtPlugin(() => {
   const client = useClient()
@@ -15,8 +14,7 @@ export default defineNuxtPlugin(() => {
   }
 
   async function onInspectorClick(path: string) {
-    const rpcClientInstance = rpcClient.value || await connectPromise
-    await rpcClientInstance.call(`${RPC_NAMESPACE}:openInEditor` as any, path)
+    await (await useDevtoolsRpc()).call('openInEditor', path)
   }
 
   function setupClient(_client: NuxtDevtoolsHostClient) {