refactor(devtools): migrate client rpc usage to devframe-native calls

packages/devtools/client/components/AssetDetails.vue

@@ -4,7 +4,7 @@ import { computedAsync, useTimeAgo, useVModel } from '@vueuse/core'
 import { computed, ref } from 'vue'
 import { devtoolsUiShowNotification } from '#imports'
 import { useCopy, useOpenInEditor } from '~/composables/editor'
-import { rpc } from '~/composables/rpc'
+import { useDevtoolsRpc } from '~/composables/rpc'
 import { useServerConfig } from '~/composables/state'
 
 const props = defineProps<{
@@ -17,7 +17,7 @@ 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)
+  return (await useDevtoolsRpc()).call('getImageMeta', asset.value.filePath)
 })
 
 const editDialog = ref(false)
@@ -30,15 +30,15 @@ const textContent = computedAsync(async () => {
   // eslint-disable-next-line ts/no-unused-expressions
   textContentCounter.value
 
-  const content = await rpc.getTextAssetContent(asset.value.filePath)
+  const content = await (await useDevtoolsRpc()).call('getTextAssetContent', asset.value.filePath)
   newTextContent.value = content
   return content
 })
 
 async function saveTextContent() {
   if (textContent.value !== newTextContent.value) {
     try {
-      await rpc.writeStaticAssets([{
+      await (await useDevtoolsRpc()).call('writeStaticAssets', [{
         path: asset.value.path,
         content: newTextContent.value,
         override: true,
@@ -133,7 +133,7 @@ const supportsPreview = computed(() => {
 const deleteDialog = ref(false)
 async function deleteAsset() {
   try {
-    await rpc.deleteStaticAsset(asset.value.filePath)
+    await (await useDevtoolsRpc()).call('deleteStaticAsset', asset.value.filePath)
     asset.value = undefined as any
     deleteDialog.value = false
     devtoolsUiShowNotification({
@@ -169,7 +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}`
-    await rpc.renameStaticAsset(asset.value.filePath, fullPath)
+    await (await useDevtoolsRpc()).call('renameStaticAsset', asset.value.filePath, fullPath)
     asset.value = undefined as any
     renameDialog.value = false
     devtoolsUiShowNotification({

packages/devtools/client/components/AssetDropZone.vue

@@ -3,7 +3,7 @@ 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 { useDevtoolsRpc, wsConnecting, wsError } from '~/composables/rpc'
 import { telemetry } from '~/composables/telemetry'
 
 const props = defineProps({
@@ -94,7 +94,7 @@ async function uploadFiles() {
       content,
     })
   }
-  await rpc.writeStaticAssets([...uploadFiles], props.folder).then(() => {
+  await (await useDevtoolsRpc()).call('writeStaticAssets', [...uploadFiles], props.folder).then(() => {
     close()
     devtoolsUiShowNotification({
       message: 'Files uploaded successfully!',

packages/devtools/client/components/BuildAnalyzeDetails.vue

@@ -3,7 +3,7 @@ import type { AnalyzeBuildMeta } from '../../src/types'
 import { formatTimeAgo } from '@vueuse/core'
 import { computed, ref } from 'vue'
 import { useRuntimeConfig } from '#imports'
-import { rpc } from '~/composables/rpc'
+import { useDevtoolsRpc } from '~/composables/rpc'
 
 const props = defineProps<{
   current: AnalyzeBuildMeta
@@ -45,7 +45,7 @@ function formatFileSize(bytes: number) {
 }
 
 async function clear(name: string) {
-  return rpc.clearAnalyzeBuilds([name])
+  return (await useDevtoolsRpc()).call('clearAnalyzeBuilds', [name])
 }
 </script>
 

packages/devtools/client/components/ModuleItem.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { InstalledModuleInfo } from '../../src/types'
 import { computed } from 'vue'
-import { rpc } from '~/composables/rpc'
+import { useDevtoolsRpc } from '~/composables/rpc'
 
 const props = defineProps<{
   mod: InstalledModuleInfo
@@ -13,6 +13,10 @@ const data = computed(() => ({
   ...props.mod,
   ...staticInfo.value,
 }))
+
+async function revealTerminal(id: string) {
+  await (await useDevtoolsRpc()).call('revealTerminal', id)
+}
 </script>
 
 <template>
@@ -30,7 +34,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>

packages/devtools/client/components/ModuleItemInstall.vue

@@ -2,7 +2,7 @@
 import type { ModuleActionType, ModuleStaticInfo } from '../../src/types'
 import { computed } from 'vue'
 import { ModuleDialog } from '~/composables/dialog'
-import { rpc } 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'
@@ -18,9 +18,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 rpc = await useDevtoolsRpc()
+  const method = type === 'install' ? 'installNuxtModule' : 'uninstallNuxtModule'
+  return rpc.call(method, name, dry, sessionId)
+}
+
 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 +50,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)

packages/devtools/client/components/NpmVersionCheck.vue

@@ -4,7 +4,7 @@ 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 { useDevtoolsRpc } from '~/composables/rpc'
 import { telemetry } from '~/composables/telemetry'
 
 const props = withDefaults(
@@ -49,7 +49,7 @@ async function updateWithConfirm() {
     })
   }
   if (processId && shouldRevealTerminal.value)
-    rpc.revealTerminal(processId)
+    (await useDevtoolsRpc()).call('revealTerminal', processId)
 }
 </script>
 

packages/devtools/client/components/RestartDialogs.vue

@@ -3,7 +3,7 @@ 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 { useDevtoolsRpc } from '~/composables/rpc'
 
 const nuxt = useNuxtApp()
 const state = useRestartDialogs()
@@ -21,7 +21,7 @@ nuxt.hook('devtools:terminal:exit', ({ id, code }) => {
         .start(dialog.message)
         .then(async (result) => {
           if (result) {
-            rpc.restartNuxt()
+            (await useDevtoolsRpc()).call('restartNuxt')
             setTimeout(() => {
               client.value?.app.reload()
             }, 500)

packages/devtools/client/components/StorageDetails.vue

@@ -6,7 +6,7 @@ import { useAsyncData } from '#app/composables/asyncData'
 import { useRouter } from '#app/composables/router'
 import { useNuxtApp } from '#app/nuxt'
 import { getColorMode } from '~/composables/client'
-import { rpc } from '~/composables/rpc'
+import { useDevtoolsRpc } from '~/composables/rpc'
 import { useSessionState } from '~/composables/utils'
 
 const colorMode = getColorMode()
@@ -18,10 +18,10 @@ 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 () => (await useDevtoolsRpc()).call('getStorageMounts'))
 const { data: storageKeys, refresh: refreshStorageKeys } = await useAsyncData('storageKeys', async () => {
   if (currentStorage.value)
-    return await rpc.getStorageKeys(currentStorage.value)
+    return (await useDevtoolsRpc()).call('getStorageKeys', currentStorage.value)
   return []
 })
 
@@ -70,7 +70,7 @@ const filteredKeys = computed(() => {
 })
 
 async function fetchItem(key: string) {
-  const content = await rpc.getStorageItem(key)
+  const content = await (await useDevtoolsRpc()).call('getStorageItem', key)
   currentItem.value = {
     key,
     updatedKey: keyName(key),
@@ -86,7 +86,7 @@ async function saveNewItem() {
   // If does not exists
   const key = `${currentStorage.value}:${newKey.value}`
   if (!storageKeys.value?.includes(key))
-    await rpc.setStorageItem(key, '')
+    await (await useDevtoolsRpc()).call('setStorageItem', key, '')
 
   router.replace({ query: { storage: currentStorage.value, key } })
   newKey.value = ''
@@ -95,23 +95,24 @@ async function saveNewItem() {
 async function saveCurrentItem() {
   if (!currentItem.value)
     return
-  await rpc.setStorageItem(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
-  await rpc.removeStorageItem(currentItem.value.key)
+  await (await useDevtoolsRpc()).call('removeStorageItem', currentItem.value.key)
   currentItem.value = null
 }
 
 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 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>

packages/devtools/client/composables/editor.ts

@@ -1,7 +1,7 @@
 import { useClipboard } from '@vueuse/core'
 import { useRouter } from '#app/composables/router'
 import { devtoolsUiShowNotification } from '#imports'
-import { rpc } from './rpc'
+import { useDevtoolsRpc } from './rpc'
 import { useServerConfig, useVirtualFiles } from './state'
 import { useCurrentVirtualFile } from './state-routes'
 import { telemetry } from './telemetry'
@@ -33,7 +33,7 @@ export function useOpenInEditor() {
       router.push('/modules/virtual-files')
     }
     else {
-      await rpc.openInEditor(filepath)
+      await (await useDevtoolsRpc()).call('openInEditor', filepath)
     }
   }
 }

packages/devtools/client/composables/npm.ts

@@ -2,7 +2,7 @@ import type { NpmCommandOptions } from '../../src/types'
 import { satisfies } from 'verkit'
 import { computed, ref } from 'vue'
 import { useNuxtApp } from '#app/nuxt'
-import { rpc } from './rpc'
+import { useDevtoolsRpc } from './rpc'
 import { useAsyncState } from './utils'
 
 export type PackageUpdateState = 'idle' | 'running' | 'updated'
@@ -17,7 +17,7 @@ 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 () => (await useDevtoolsRpc()).call('checkForUpdateFor', 'nuxt'))
 }
 
 export function satisfyNuxtVersion(range: string) {
@@ -31,7 +31,7 @@ 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 () => (await useDevtoolsRpc()).call('checkForUpdateFor', name))
 
   const state = ref<PackageUpdateState>('idle')
 
@@ -49,7 +49,8 @@ function getPackageUpdate(name: string, options?: NpmCommandOptions) {
     if (state.value !== 'idle')
       return
 
-    const command = await rpc.getNpmCommand('update', name, options)
+    const rpc = await useDevtoolsRpc()
+    const command = await rpc.call('getNpmCommand', 'update', name, options)
     if (!command)
       return
 
@@ -58,15 +59,15 @@ function getPackageUpdate(name: string, options?: NpmCommandOptions) {
 
     state.value = 'running'
 
-    processId.value = (await rpc.runNpmCommand('update', name, options))?.processId
+    processId.value = (await rpc.call('runNpmCommand', 'update', name, options))?.processId
 
     return processId.value
   }
 
   async function restart() {
     if (state.value !== 'updated')
       return
-    await rpc.restartNuxt()
+    await (await useDevtoolsRpc()).call('restartNuxt')
   }
 
   return {

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'
@@ -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) => {
@@ -34,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()