diff --git a/docs/content/2.module/1.utils-kit.md b/docs/content/2.module/1.utils-kit.md
index b7902c9f68..56de4c4612 100644
--- a/docs/content/2.module/1.utils-kit.md
+++ b/docs/content/2.module/1.utils-kit.md
@@ -82,7 +82,8 @@ of the Vite DevTools terminals host
 the [migration guide](/module/migration-v4#ndt_dep_0004).
 ::
 
-Start a sub process using `tinyexec` and create a terminal tab in DevTools.
+Start a sub process using `tinyexec` and surface it as a read-only session in
+the built-in **Terminals** dock.
 
 ```ts
 import { startSubprocess } from '@nuxt/devtools-kit'
@@ -110,6 +111,32 @@ subprocess.restart()
 subprocess.terminate()
 ```
 
+### `startDevToolsTerminal()`
+
+Spawn a terminal that is **owned by the Vite DevTools terminals host** and
+surfaced in the built-in **Terminals** dock. Unlike `startSubprocess()` (where
+your module owns the process and only streams output to a read-only session),
+DevTools spawns and owns the process here.
+
+Set `interactive: true` for a fully interactive PTY (stdin + resize,
+TUI-capable) — powered by `zigpty` with a graceful pipe fallback where the
+native bindings can't load.
+
+```ts
+import { startDevToolsTerminal } from '@nuxt/devtools-kit'
+
+startDevToolsTerminal({
+  id: 'my-module:shell',
+  name: 'Shell',
+  command: 'bash',
+  interactive: true,
+})
+```
+
+Under the hood this calls the `devtools:terminal:spawn` Nuxt hook, which the
+DevTools bridge maps to `ctx.terminals.startPtySession(...)` (interactive) or
+`ctx.terminals.startChildProcess(...)` (output-only).
+
 ### `extendServerRpc()`
 
 ::warning
diff --git a/packages/devtools-kit/src/_types/hooks.ts b/packages/devtools-kit/src/_types/hooks.ts
index a348a1feb5..3ad0d9129b 100644
--- a/packages/devtools-kit/src/_types/hooks.ts
+++ b/packages/devtools-kit/src/_types/hooks.ts
@@ -1,7 +1,7 @@
 import type { ViteDevToolsNodeContext } from '@vitejs/devtools-kit'
 import type { ModuleCustomTab } from './custom-tabs'
 import type { NuxtDevtoolsInfo } from './server-ctx'
-import type { TerminalState } from './terminals'
+import type { SpawnTerminalOptions, TerminalState } from './terminals'
 
 declare module '@nuxt/schema' {
   interface NuxtHooks {
@@ -37,7 +37,11 @@ declare module '@nuxt/schema' {
     'devtools:customTabs:refresh': () => void
 
     /**
-     * Register a terminal.
+     * Register a terminal whose process is owned by the caller (module).
+     *
+     * The registered session is surfaced **read-only** in the built-in Vite
+     * DevTools **Terminals** dock; stream output into it via
+     * `devtools:terminal:write`.
      */
     'devtools:terminal:register': (terminal: TerminalState) => void
 
@@ -59,18 +63,13 @@ declare module '@nuxt/schema' {
      * Mark a terminal as terminated.
      */
     'devtools:terminal:exit': (_: { id: string, code?: number }) => void
-  }
-}
 
-declare module '@nuxt/schema' {
-  /**
-   * Runtime Hooks
-   */
-  interface RuntimeNuxtHooks {
     /**
-     * On terminal data.
+     * Spawn a terminal whose process is owned by the Vite DevTools terminals
+     * host (surfaced in the built-in **Terminals** dock). Set
+     * `interactive: true` for a fully interactive PTY (stdin + resize).
      */
-    'devtools:terminal:data': (payload: { id: string, data: string }) => void
+    'devtools:terminal:spawn': (options: SpawnTerminalOptions) => void | Promise<void>
   }
 }
 
diff --git a/packages/devtools-kit/src/_types/rpc.ts b/packages/devtools-kit/src/_types/rpc.ts
index e52759a275..54dd254bae 100644
--- a/packages/devtools-kit/src/_types/rpc.ts
+++ b/packages/devtools-kit/src/_types/rpc.ts
@@ -7,7 +7,6 @@ import type { ModuleCustomTab } from './custom-tabs'
 import type { AssetEntry, AssetInfo, AutoImportsWithMetadata, ComponentRelationship, HookInfo, ImageMeta, NpmCommandOptions, NpmCommandType, PackageUpdateInfo, ScannedNitroTasks, ServerRouteInfo } from './integrations'
 import type { ModuleOptions, NuxtDevToolsOptions } from './options'
 import type { InstallModuleReturn, ServerDebugContext } from './server-ctx'
-import type { TerminalAction, TerminalInfo } from './terminals'
 
 export interface ServerFunctions {
   // Static RPCs (can be provide on production build in the future)
@@ -38,11 +37,6 @@ export interface ServerFunctions {
   getNpmCommand: (command: NpmCommandType, packageName: string, options?: NpmCommandOptions) => Promise<string[] | undefined>
   runNpmCommand: (command: NpmCommandType, packageName: string, options?: NpmCommandOptions) => Promise<{ processId: string } | undefined>
 
-  // Terminal
-  getTerminals: () => TerminalInfo[]
-  getTerminalDetail: (id: string) => Promise<TerminalInfo | undefined>
-  runTerminalAction: (id: string, action: TerminalAction) => Promise<boolean>
-
   // Storage
   getStorageMounts: () => Promise<StorageMounts>
   getStorageKeys: (base?: string) => Promise<string[]>
@@ -83,7 +77,11 @@ export interface ClientFunctions {
   callHook: (hook: string, ...args: any[]) => Promise<void>
   navigateTo: (path: string) => void
 
-  onTerminalData: (_: { id: string, data: string }) => void
+  /**
+   * Server→client signal that a terminal session has exited. Kept so the
+   * client can clear transient subprocess UI state (installing-modules /
+   * analyze-build / npm updates) when the underlying process finishes.
+   */
   onTerminalExit: (_: { id: string, code?: number }) => void
 }
 
diff --git a/packages/devtools-kit/src/_types/terminals.ts b/packages/devtools-kit/src/_types/terminals.ts
index 46f6ff0914..33d9535212 100644
--- a/packages/devtools-kit/src/_types/terminals.ts
+++ b/packages/devtools-kit/src/_types/terminals.ts
@@ -49,3 +49,37 @@ export interface TerminalState extends TerminalInfo {
    */
   onActionTerminate?: () => Promise<void> | void
 }
+
+/**
+ * Options for spawning a DevTools terminal that is owned by the Vite DevTools
+ * terminals host (surfaced in the built-in **Terminals** dock).
+ *
+ * Unlike the `devtools:terminal:register`/`:write` hooks (where the *module*
+ * owns the process and merely streams output), the process is spawned and
+ * owned by DevTools. Set {@link interactive} to `true` to get a fully
+ * interactive PTY (stdin + resize, TUI-capable) instead of an output-only
+ * child process.
+ */
+export interface SpawnTerminalOptions extends TerminalBase {
+  /** Command to execute. */
+  command: string
+  /** Command arguments. */
+  args?: string[]
+  /** Working directory. Defaults to the process cwd. */
+  cwd?: string
+  /** Extra environment variables. */
+  env?: Record<string, string>
+  /**
+   * Spawn a fully interactive pseudo-terminal (PTY) instead of an output-only
+   * child process. Interactive sessions accept keystrokes and resizing in the
+   * built-in Terminals dock. Powered by `zigpty`; where its native bindings
+   * can't load, it gracefully degrades to pipe-based emulation.
+   *
+   * @default false
+   */
+  interactive?: boolean
+  /** Initial column count (PTY only). Default: 80. */
+  cols?: number
+  /** Initial row count (PTY only). Default: 24. */
+  rows?: number
+}
diff --git a/packages/devtools-kit/src/index.ts b/packages/devtools-kit/src/index.ts
index d7f54c62dc..49d4876c55 100644
--- a/packages/devtools-kit/src/index.ts
+++ b/packages/devtools-kit/src/index.ts
@@ -2,7 +2,7 @@ import type { ViteDevToolsNodeContext } from '@vitejs/devtools-kit'
 import type { BirpcGroup } from 'birpc'
 import type { ChildProcess } from 'node:child_process'
 import type { Result } from 'tinyexec'
-import type { ModuleCustomTab, NuxtDevtoolsInfo, NuxtDevtoolsServerContext, SubprocessOptions, TerminalState } from './types'
+import type { ModuleCustomTab, NuxtDevtoolsInfo, NuxtDevtoolsServerContext, SpawnTerminalOptions, SubprocessOptions, TerminalState } from './types'
 import { useNuxt } from '@nuxt/kit'
 import { x } from 'tinyexec'
 import { deprecate } from './diagnostics'
@@ -195,6 +195,30 @@ export function onDevToolsInitialized(fn: (info: NuxtDevtoolsInfo) => void, nuxt
   nuxt.hook('devtools:initialized', fn)
 }
 
+/**
+ * Spawn a terminal owned by the Vite DevTools terminals host, surfaced in the
+ * built-in **Terminals** dock.
+ *
+ * Unlike {@link startSubprocess} (where the module owns the process and only
+ * streams output to a read-only session), DevTools spawns and owns the process
+ * here. Set `interactive: true` for a fully interactive PTY (stdin + resize,
+ * TUI-capable) — powered by `zigpty` with a graceful pipe fallback where the
+ * native bindings can't load.
+ *
+ * @example
+ * ```ts
+ * startDevToolsTerminal({
+ *   id: 'my-module:shell',
+ *   name: 'Shell',
+ *   command: 'bash',
+ *   interactive: true,
+ * })
+ * ```
+ */
+export function startDevToolsTerminal(options: SpawnTerminalOptions, nuxt = useNuxt()): Promise<void> {
+  return Promise.resolve(nuxt.callHook('devtools:terminal:spawn', options))
+}
+
 /**
  * Run a callback once the Vite DevTools kit has connected, receiving the
  * connected `ViteDevToolsNodeContext`.
diff --git a/packages/devtools/client/components/ModuleItem.vue b/packages/devtools/client/components/ModuleItem.vue
index fdfe0b43bf..08eab60c37 100644
--- a/packages/devtools/client/components/ModuleItem.vue
+++ b/packages/devtools/client/components/ModuleItem.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { InstalledModuleInfo } from '../../src/types'
 import { computed } from 'vue'
-import { useCurrentTerminalId } from '~/composables/state-routes'
 
 const props = defineProps<{
   mod: InstalledModuleInfo
@@ -13,7 +12,6 @@ const data = computed(() => ({
   ...props.mod,
   ...staticInfo.value,
 }))
-const terminalId = useCurrentTerminalId()
 </script>
 
 <template>
@@ -27,15 +25,14 @@ const terminalId = useCurrentTerminalId()
       <!-- NPM Version bump -->
       <NpmVersionCheck v-if="data.npm" :key="data.npm" :package-name="data.npm" :options="{ dev: true }">
         <template #default="{ info, update, state, id, restart }">
-          <NuxtLink
+          <div
             v-if="state === 'running'" flex="~ gap-2"
             animate-pulse items-center
-            :to="id ? '/modules/terminals' : undefined"
-            @click="id ? terminalId = id : undefined"
+            :title="id ? 'Follow the output in the Terminals dock' : undefined"
           >
             <span i-carbon-circle-dash flex-none animate-spin text-lg op50 />
             <code text-sm op50>Upgrading...</code>
-          </NuxtLink>
+          </div>
           <div v-else-if="state === 'updated'" mx--2>
             <button
               flex="~ gap-2"
diff --git a/packages/devtools/client/components/NpmVersionCheck.vue b/packages/devtools/client/components/NpmVersionCheck.vue
index cae85953b1..39f548722a 100644
--- a/packages/devtools/client/components/NpmVersionCheck.vue
+++ b/packages/devtools/client/components/NpmVersionCheck.vue
@@ -2,10 +2,8 @@
 import type { NpmCommandOptions } from '../../src/types'
 import { createTemplatePromise } from '@vueuse/core'
 import { ref } from 'vue'
-import { useRouter } from '#app/composables/router'
 import { useRestartDialogs } from '~/composables/dialog'
 import { usePackageUpdate } from '~/composables/npm'
-import { useCurrentTerminalId } from '~/composables/state-routes'
 import { telemetry } from '~/composables/telemetry'
 
 const props = withDefaults(
@@ -19,7 +17,6 @@ const props = withDefaults(
   },
 )
 
-const router = useRouter()
 const {
   info,
   update,
@@ -28,12 +25,10 @@ const {
   restart,
 } = usePackageUpdate(props.packageName, props.options)
 
-const shouldGotoTerminal = ref(true)
 const shouldRestartServer = ref(true)
 const restartDialogs = useRestartDialogs()
 
 const PromiseConfirm = createTemplatePromise<boolean, [string]>()
-const terminalId = useCurrentTerminalId()
 
 async function updateWithConfirm() {
   const processId = await update(async (command) => {
@@ -51,10 +46,6 @@ async function updateWithConfirm() {
       message: `${props.packageName} has been updated. Do you want to restart the Nuxt server now?`,
     })
   }
-  if (processId && shouldGotoTerminal.value) {
-    terminalId.value = processId
-    router.push('/modules/terminals')
-  }
 }
 </script>
 
@@ -88,9 +79,6 @@ async function updateWithConfirm() {
           The following command will be executed in your terminal:
         </p>
         <NCodeBlock :code="args[0]" lang="bash" my3 px4 py2 border="~ base rounded" :lines="false" />
-        <NCheckbox v-model="shouldGotoTerminal" n="primary">
-          Navigate to terminal
-        </NCheckbox>
         <NCheckbox v-model="shouldRestartServer" n="primary">
           Restart Nuxt server after update
         </NCheckbox>
diff --git a/packages/devtools/client/components/TerminalPage.vue b/packages/devtools/client/components/TerminalPage.vue
deleted file mode 100644
index b509ff216a..0000000000
--- a/packages/devtools/client/components/TerminalPage.vue
+++ /dev/null
@@ -1,64 +0,0 @@
-<script setup lang="ts">
-import { computed, watchEffect } from 'vue'
-import { rpc } from '~/composables/rpc'
-import { useTerminals } from '~/composables/state'
-import { useCurrentTerminalId } from '~/composables/state-routes'
-
-const terminals = useTerminals()
-const terminalId = useCurrentTerminalId()
-const selected = computed(() => terminals.value?.find(t => t.id === terminalId.value))
-
-function remove(id: string) {
-  rpc.runTerminalAction(id, 'remove')
-}
-
-watchEffect(() => {
-  if (!terminalId.value && terminals.value?.length)
-    terminalId.value = terminals.value[0]!.id
-})
-</script>
-
-<template>
-  <div v-if="terminals?.length" h-full w-full of-hidden grid="~ rows-[max-content_1fr_max-content]">
-    <!-- TODO: Refactor to have general component -->
-    <div flex="~" border="b base" n-navbar-glass flex-1 items-center>
-      <button
-        v-for="t of terminals"
-        :key="t.id" border="r base"
-        flex="~ gap-2" items-center px3 py2
-        :class="t.id === selected?.id ? 'bg-active' : ''"
-        @click="terminalId = t.id"
-      >
-        <NIcon v-if="t.icon " :icon="t.icon" />
-        <span :class="t.id === selected?.id ? '' : 'op50'">
-          {{ t.name }}{{ t.isTerminated ? ' (terminated)' : '' }}
-        </span>
-        <NButton
-          v-if="t.isTerminated"
-          icon="carbon-close" mx--2
-          :border="false"
-          @click.stop="remove(t.id)"
-        />
-      </button>
-    </div>
-
-    <template v-if="selected">
-      <TerminalView :id="selected.id" :key="selected.id" />
-    </template>
-    <template v-else>
-      <div p10>
-        Terminal <code>{{ terminalId }}</code> not found
-      </div>
-    </template>
-  </div>
-  <div v-else h-full flex items-center justify-center>
-    <em op50>No terminal attached</em>
-  </div>
-</template>
-
-<style>
-.xterm {
-  padding-left: 1rem;
-  padding-right: 1rem;
-}
-</style>
diff --git a/packages/devtools/client/components/TerminalView.vue b/packages/devtools/client/components/TerminalView.vue
deleted file mode 100644
index 6266a1ce62..0000000000
--- a/packages/devtools/client/components/TerminalView.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-<script setup lang="ts">
-import type { TerminalInfo } from '../../src/types'
-import { useEventListener } from '@vueuse/core'
-import { FitAddon } from '@xterm/addon-fit'
-import { Terminal } from '@xterm/xterm'
-import { onMounted, ref } from 'vue'
-import { useNuxtApp } from '#app/nuxt'
-import { rpc } from '~/composables/rpc'
-import '@xterm/xterm/css/xterm.css'
-
-const props = defineProps<{
-  id: string
-}>()
-
-const container = ref<HTMLElement>()
-const nuxt = useNuxtApp()
-const info = ref<TerminalInfo>()
-let term: Terminal
-
-onMounted(async () => {
-  term = new Terminal({
-    convertEol: true,
-    cols: 80,
-    screenReaderMode: true,
-  })
-  const fitAddon = new FitAddon()
-  term.loadAddon(fitAddon)
-  term.open(container.value!)
-  fitAddon.fit()
-
-  useEventListener(window, 'resize', () => {
-    fitAddon.fit()
-  })
-
-  info.value = await rpc.getTerminalDetail(props.id)
-  if (info.value?.buffer)
-    term.write(info.value.buffer)
-
-  // @ts-expect-error missing hooks type
-  nuxt.hook('devtools:terminal:data', ({ id, data }) => {
-    if (id === props.id)
-      term.write(data)
-  })
-})
-
-function clear() {
-  rpc.runTerminalAction(props.id, 'clear')
-  term?.clear()
-}
-
-function restart() {
-  rpc.runTerminalAction(props.id, 'restart')
-}
-
-function terminate() {
-  rpc.runTerminalAction(props.id, 'terminate')
-}
-</script>
-
-<template>
-  <div ref="container" h-full w-full of-auto bg-black />
-  <div border="t base" flex="~ gap-2" items-center p2>
-    <NButton title="Clear" icon="i-carbon-clean" :border="false" @click="clear()" />
-    <NButton v-if="info?.restartable" title="Restart" icon="carbon-renew" :border="false" @click="restart()" />
-    <NButton v-if="info?.terminatable" title="Terminate" icon="carbon-delete" :border="false" @click="terminate()" />
-    <span text-sm op50>{{ info?.description }}</span>
-  </div>
-</template>
diff --git a/packages/devtools/client/composables/state-routes.ts b/packages/devtools/client/composables/state-routes.ts
index 834031c1b3..04796be638 100644
--- a/packages/devtools/client/composables/state-routes.ts
+++ b/packages/devtools/client/composables/state-routes.ts
@@ -5,11 +5,6 @@ export function useCurrentVirtualFile() {
   return useSessionState<string>('virtual-files:current', '')
 }
 
-// terminals Tab
-export function useCurrentTerminalId() {
-  return useSessionState<string>('terminals:current', '')
-}
-
 // server-routes Tab
 export function useCurrentServeRoute() {
   return useSessionState<string>('server-routes:current', '')
diff --git a/packages/devtools/client/composables/state.ts b/packages/devtools/client/composables/state.ts
index 8a5ce5c589..c1e282ea72 100644
--- a/packages/devtools/client/composables/state.ts
+++ b/packages/devtools/client/composables/state.ts
@@ -59,10 +59,6 @@ export function useCustomTabs() {
   return useAsyncState('getCustomTabs', () => rpc.getCustomTabs())
 }
 
-export function useTerminals() {
-  return useAsyncState('getTerminals', () => rpc.getTerminals())
-}
-
 export function useAnalyzeBuildInfo() {
   return useAsyncState('getAnalyzeBuildInfo', () => rpc.getAnalyzeBuildInfo())
 }
diff --git a/packages/devtools/client/nuxt.config.ts b/packages/devtools/client/nuxt.config.ts
index ab198f402d..874e646d81 100644
--- a/packages/devtools/client/nuxt.config.ts
+++ b/packages/devtools/client/nuxt.config.ts
@@ -10,7 +10,6 @@ const packageBundles = {
   'shiki': ['shiki', '@shikijs'],
   'quicktype-core': ['quicktype-core'],
   'json-editor-vue': ['json-editor-vue', 'ajv', 'vanilla-picker', 'vanilla-jsoneditor'],
-  'xterm': ['xterm', '@xterm'],
   'vis': ['vis-data', 'vis-network'],
   'unocss': ['@unocss', 'unocss'],
   'markdown-it': ['markdown-it'],
@@ -137,8 +136,6 @@ export default defineNuxtConfig({
         'vis-data',
         'vis-network',
         '@vue/devtools-applet',
-        '@xterm/xterm',
-        '@xterm/addon-fit',
       ],
     },
     server: {
diff --git a/packages/devtools/client/pages/modules/analyze-build.vue b/packages/devtools/client/pages/modules/analyze-build.vue
index 915fded00a..a88a2bfa95 100644
--- a/packages/devtools/client/pages/modules/analyze-build.vue
+++ b/packages/devtools/client/pages/modules/analyze-build.vue
@@ -2,13 +2,11 @@
 import type { AnalyzeBuildMeta } from '~/../src/types'
 import { createTemplatePromise, formatTimeAgo } from '@vueuse/core'
 import { computed, ref } from 'vue'
-import { useRouter } from '#app/composables/router'
 import { definePageMeta } from '#imports'
 import { satisfyNuxtVersion } from '~/composables/npm'
 import { rpc } from '~/composables/rpc'
 import { useAnalyzeBuildInfo } from '~/composables/state'
 import { registerCommands } from '~/composables/state-commands'
-import { useCurrentTerminalId } from '~/composables/state-routes'
 import { processAnalyzeBuildInfo } from '~/composables/state-subprocess'
 import { telemetry } from '~/composables/telemetry'
 import { useSessionState } from '~/composables/utils'
@@ -26,13 +24,10 @@ definePageMeta({
 const PromiseConfirm = createTemplatePromise<boolean>()
 
 const info = useAnalyzeBuildInfo()
-const router = useRouter()
 const slug = useSessionState<string>('analyze-build:slug', '')
 
 const selected = computed(() => info.value?.builds.find(b => b.slug === slug.value) ?? info.value?.builds[0])
 
-const shouldGotoTerminal = ref(false)
-
 const buildNameInput = ref('')
 const buildNameConflicted = computed(() => info.value?.builds.some(b => b.name === buildNameInput.value.trim()))
 async function start() {
@@ -47,23 +42,12 @@ async function start() {
     name: buildNameInput.value,
     processId: await rpc.startAnalyzeBuild(buildNameInput.value),
   }
-  if (shouldGotoTerminal.value)
-    gotoTerminal()
 }
 
-const terminalId = useCurrentTerminalId()
-
 function getDuration(build: AnalyzeBuildMeta) {
   return `${((build.endTime - build.startTime) / 1000).toFixed(1)}s`
 }
 
-function gotoTerminal() {
-  if (processAnalyzeBuildInfo.value?.processId) {
-    terminalId.value = processAnalyzeBuildInfo.value.processId
-    router.push('/modules/terminals')
-  }
-}
-
 registerCommands(() => [
   {
     id: 'action:analyze-build: start',
@@ -98,7 +82,7 @@ registerCommands(() => [
           <NButton v-if="!processAnalyzeBuildInfo" n="primary" icon="carbon-edge-node" @click="start()">
             Start a new build
           </NButton>
-          <NButton v-else n="primary" icon="carbon-circle-dash animate-spin" @click="gotoTerminal()">
+          <NButton v-else disabled n="primary" icon="carbon-circle-dash animate-spin" title="Follow the output in the Terminals dock">
             Building...
           </NButton>
         </div>
@@ -135,9 +119,6 @@ registerCommands(() => [
           lang="bash" px4 py2 border="~ base rounded"
           :lines="false"
         />
-        <NCheckbox v-model="shouldGotoTerminal" mt2 n="primary">
-          Navigate to terminal
-        </NCheckbox>
 
         <div flex="~ gap-3" mt2 justify-end>
           <NButton @click="resolve(false)">
diff --git a/packages/devtools/client/pages/modules/modules.vue b/packages/devtools/client/pages/modules/modules.vue
index e06cd8b6f6..d100da4377 100644
--- a/packages/devtools/client/pages/modules/modules.vue
+++ b/packages/devtools/client/pages/modules/modules.vue
@@ -3,7 +3,6 @@ import { computed, ref } from 'vue'
 import { definePageMeta } from '#imports'
 import { registerCommands } from '~/composables/state-commands'
 import { useInstalledModules } from '~/composables/state-modules'
-import { useCurrentTerminalId } from '~/composables/state-routes'
 
 definePageMeta({
   icon: 'carbon-3d-mpr-toggle',
@@ -13,7 +12,6 @@ definePageMeta({
 
 const installModuleOpen = ref(false)
 const installedModules = useInstalledModules()
-const terminalId = useCurrentTerminalId()
 
 const packageModules = computed(() => installedModules.value.filter(i => i.isPackageModule))
 const userModules = computed(() => installedModules.value.filter(i => !i.isPackageModule))
@@ -46,30 +44,26 @@ registerCommands(() => [
         :key="m.name"
         :mod="m"
       />
-      <NuxtLink
+      <div
         v-for="m of processInstallingModules"
         :key="m.processId" block min-h-30
-        to="/modules/terminals"
-        @click="terminalId = m.processId"
+        title="Follow the output in the Terminals dock"
       >
         <NCard
           border="1.5 dashed"
           h-full animate-pulse p4 transition
-          hover="border-primary"
           flex="~ col gap-1 items-center justify-center"
-          role="button"
-          class="group"
         >
           <div relative h-20 w-20 flex flex-none rounded bg-gray:3 p3>
             <img :src="iconBase + m.info.icon" :alt="m.info.name" ma>
             <div i-carbon-cube ma text-4xl op30 />
           </div>
-          <div text-lg group-hover="text-primary" transition flex="~ gap-2 items-center">
+          <div text-lg transition flex="~ gap-2 items-center">
             <div i-carbon-circle-dash animate-spin text-xl op75 />
             <span op75>Installing {{ m.name }}...</span>
           </div>
         </NCard>
-      </NuxtLink>
+      </div>
       <NCard
         border="1.5 dashed"
         min-h-30 p4 transition
diff --git a/packages/devtools/client/pages/modules/terminals.vue b/packages/devtools/client/pages/modules/terminals.vue
deleted file mode 100644
index b0a2da9c4c..0000000000
--- a/packages/devtools/client/pages/modules/terminals.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<script setup lang="ts">
-import { definePageMeta } from '#imports'
-import { useTerminals } from '~/composables/state'
-
-definePageMeta({
-  icon: 'carbon-terminal',
-  title: 'Terminals',
-  layout: 'full',
-  show() {
-    const terminals = useTerminals()
-    return () => !!terminals.value?.length
-  },
-  badge() {
-    const terminals = useTerminals()
-    return () => terminals.value?.filter(i => !i.isTerminated).length
-  },
-})
-</script>
-
-<template>
-  <AuthRequiredPanel>
-    <TerminalPage />
-  </AuthRequiredPanel>
-</template>
diff --git a/packages/devtools/client/setup/client-rpc.ts b/packages/devtools/client/setup/client-rpc.ts
index dfef0e3fec..1e09e01c09 100644
--- a/packages/devtools/client/setup/client-rpc.ts
+++ b/packages/devtools/client/setup/client-rpc.ts
@@ -19,10 +19,6 @@ export function setupClientRPC() {
     async callHook(hook: string, ...args: any[]) {
       nuxt.hooks.callHookParallel(hook as any, ...args)
     },
-    async onTerminalData(data) {
-      // @ts-expect-error fail to extend hooks
-      nuxt.hooks.callHookParallel('devtools:terminal:data', data)
-    },
     async onTerminalExit(data) {
       // @ts-expect-error fail to extend hooks
       nuxt.hooks.callHookParallel('devtools:terminal:exit', data)
diff --git a/packages/devtools/package.json b/packages/devtools/package.json
index ef1f86c462..d27cef02cc 100644
--- a/packages/devtools/package.json
+++ b/packages/devtools/package.json
@@ -103,8 +103,6 @@
     "@vitest/ui": "catalog:cli",
     "@vue/devtools-applet": "catalog:frontend",
     "@vueuse/nuxt": "catalog:buildtools",
-    "@xterm/addon-fit": "catalog:frontend",
-    "@xterm/xterm": "catalog:frontend",
     "cronstrue": "catalog:frontend",
     "exsolve": "catalog:buildtools",
     "floating-vue": "catalog:frontend",
diff --git a/packages/devtools/src/server-rpc/analyze-build.ts b/packages/devtools/src/server-rpc/analyze-build.ts
index ff7dbb8eb1..68cd60acec 100644
--- a/packages/devtools/src/server-rpc/analyze-build.ts
+++ b/packages/devtools/src/server-rpc/analyze-build.ts
@@ -5,6 +5,7 @@ import fsp from 'node:fs/promises'
 import { dirname, join } from 'pathe'
 import { x } from 'tinyexec'
 import { glob } from 'tinyglobby'
+import { broadcastTerminalExit } from './terminals'
 
 const COLON_RE = /:/g
 
@@ -39,7 +40,9 @@ export function setupAnalyzeBuildRPC(ctx: NuxtDevtoolsServerContext) {
 
     initalized = undefined
     promise = Promise.resolve(session.getResult())
-      .then(() => {
+      .then((result) => {
+        // Surface the exit so the client's "Building…" state can settle.
+        broadcastTerminalExit(ctx, processId, result?.exitCode)
         refresh('getAnalyzeBuildInfo')
         return readBuildInfo()
       })
diff --git a/packages/devtools/src/server-rpc/index.ts b/packages/devtools/src/server-rpc/index.ts
index 6dda1793a1..ed336fad3a 100644
--- a/packages/devtools/src/server-rpc/index.ts
+++ b/packages/devtools/src/server-rpc/index.ts
@@ -17,7 +17,7 @@ import { setupServerRoutesRPC } from './server-routes'
 import { setupServerTasksRPC } from './server-tasks'
 import { setupStorageRPC } from './storage'
 import { setupTelemetryRPC } from './telemetry'
-import { setupTerminalRPC } from './terminals'
+import { setupTerminalsBridge } from './terminals'
 import { setupTimelineRPC } from './timeline'
 
 export function setupRPC(nuxt: Nuxt, options: ModuleOptions) {
@@ -40,7 +40,7 @@ export function setupRPC(nuxt: Nuxt, options: ModuleOptions) {
 
   /**
    * Compatibility broadcast proxy that supports the old birpc-style API:
-   * `rpc.broadcast.refresh.asEvent(event)` and `rpc.broadcast.onTerminalData.asEvent({ id, data })`
+   * `rpc.broadcast.refresh.asEvent(event)` and `rpc.broadcast.onTerminalExit.asEvent({ id, code })`
    */
   function createBroadcastProxy(prefix = ''): any {
     return new Proxy({}, {
@@ -141,7 +141,6 @@ export function setupRPC(nuxt: Nuxt, options: ModuleOptions) {
     ...setupStorageRPC(ctx),
     ...setupAssetsRPC(ctx),
     ...setupNpmRPC(ctx),
-    ...setupTerminalRPC(ctx),
     ...setupServerRoutesRPC(ctx),
     ...setupServerTasksRPC(ctx),
     ...setupAnalyzeBuildRPC(ctx),
@@ -151,6 +150,12 @@ export function setupRPC(nuxt: Nuxt, options: ModuleOptions) {
     ...setupServerDataRPC(ctx),
   } as ServerFunctions)
 
+  // Bridge the `devtools:terminal:*` hooks onto the Vite DevTools terminals
+  // host so module terminals surface in the built-in Terminals dock. Registers
+  // its own hook listeners (including `devtools:ready`); contributes no RPC
+  // functions of its own.
+  setupTerminalsBridge(ctx)
+
   /**
    * Connect to Vite DevTools Kit context.
    * Called from the Vite DevTools plugin setup callback.
diff --git a/packages/devtools/src/server-rpc/npm.ts b/packages/devtools/src/server-rpc/npm.ts
index f22639432b..7c17827ba5 100644
--- a/packages/devtools/src/server-rpc/npm.ts
+++ b/packages/devtools/src/server-rpc/npm.ts
@@ -7,6 +7,7 @@ import { detect } from 'package-manager-detector/detect'
 import { checkForUpdateOf } from '../npm'
 import { magicastGuard } from '../utils/magicast'
 import { removeNuxtModuleFromCode } from '../utils/nuxt-config'
+import { broadcastTerminalExit } from './terminals'
 
 export function setupNpmRPC(ctx: NuxtDevtoolsServerContext) {
   const { nuxt } = ctx
@@ -61,7 +62,7 @@ export function setupNpmRPC(ctx: NuxtDevtoolsServerContext) {
 
     const processId = `npm:${command}:${packageName}`
 
-    await getTerminals().startChildProcess({
+    const session = await getTerminals().startChildProcess({
       command: args[0]!,
       args: args.slice(1),
     }, {
@@ -70,6 +71,11 @@ export function setupNpmRPC(ctx: NuxtDevtoolsServerContext) {
       icon: 'i-logos-npm-icon',
     })
 
+    // Surface the exit to the client so the update UI state can settle.
+    void Promise.resolve(session.getResult()).then((result) => {
+      broadcastTerminalExit(ctx, processId, result.exitCode)
+    }).catch(() => {})
+
     return {
       processId,
     }
@@ -119,6 +125,7 @@ export function setupNpmRPC(ctx: NuxtDevtoolsServerContext) {
         })
 
         const result = await session.getResult()
+        broadcastTerminalExit(ctx, processId, result.exitCode)
 
         await Promise.resolve()
 
@@ -166,6 +173,7 @@ export function setupNpmRPC(ctx: NuxtDevtoolsServerContext) {
           icon: 'carbon:intent-request-uninstall',
         })
         const result = await session.getResult()
+        broadcastTerminalExit(ctx, processId, result.exitCode)
 
         await Promise.resolve()
 
diff --git a/packages/devtools/src/server-rpc/terminals.ts b/packages/devtools/src/server-rpc/terminals.ts
index 1f5a8fa248..a20536ffb1 100644
--- a/packages/devtools/src/server-rpc/terminals.ts
+++ b/packages/devtools/src/server-rpc/terminals.ts
@@ -1,98 +1,195 @@
-import type { NuxtDevtoolsServerContext, ServerFunctions, TerminalAction, TerminalInfo, TerminalState } from '../types'
+import type { ViteDevToolsNodeContext } from '@vitejs/devtools-kit'
+import type { NuxtDevtoolsServerContext, SpawnTerminalOptions, TerminalState } from '../types'
 
-export function setupTerminalRPC(ctx: NuxtDevtoolsServerContext) {
-  const { nuxt, refresh } = ctx
-  const terminals = new Map<string, TerminalState>()
+type TerminalsHost = ViteDevToolsNodeContext['terminals']
+type DevframeTerminalSession = Parameters<TerminalsHost['register']>[0]
+type ChildProcessSession = Awaited<ReturnType<TerminalsHost['startChildProcess']>>
+
+/**
+ * A `DevframeTerminalsHost` grows a `remove(session)` at runtime that isn't in
+ * the published type surface yet. Prefer it (it disposes the bound stream and
+ * emits the update event); fall back to deleting from the sessions map.
+ */
+function removeSession(host: TerminalsHost, session: DevframeTerminalSession) {
+  const maybeRemove = (host as { remove?: (s: DevframeTerminalSession) => void }).remove
+  if (typeof maybeRemove === 'function')
+    maybeRemove.call(host, session)
+  else
+    host.sessions.delete(session.id)
+}
+
+/**
+ * Broadcast a terminal-exit signal to the DevTools client so it can clear any
+ * transient subprocess UI state (installing-modules / analyze-build / npm
+ * updates). Safe to call before the kit connects (it no-ops).
+ */
+export function broadcastTerminalExit(ctx: NuxtDevtoolsServerContext, id: string, code?: number) {
+  ctx.devtoolsKit?.rpc.broadcast({ method: 'onTerminalExit', args: [{ id, code }], event: true } as any)
+}
+
+interface BridgedTerminal {
+  session: DevframeTerminalSession
+  controller?: ReadableStreamDefaultController<string>
+  state: TerminalState
+  exited: boolean
+}
+
+/**
+ * Bridge the Nuxt `devtools:terminal:*` hooks onto the Vite DevTools terminals
+ * host (`ctx.terminals`), so module-registered terminals surface in the
+ * built-in **Terminals** dock instead of a bespoke `@xterm` UI + RPC.
+ *
+ * The current hook model is "the module owns the process and streams output";
+ * we map that to a read-only session registered via `ctx.terminals.register`
+ * with a `ReadableStream` we push each `write` into. A new opt-in
+ * `devtools:terminal:spawn` hook maps to `startChildProcess` / `startPtySession`
+ * (devframe owns the process; PTY sessions are interactive).
+ *
+ * Terminals may be registered during module setup — before the kit connects.
+ * The `devtools:ready` hook only fires post-connect, so early events are
+ * buffered in `terminals`/`pendingSpawns` and replayed inside the ready
+ * callback.
+ */
+export function setupTerminalsBridge(ctx: NuxtDevtoolsServerContext) {
+  const { nuxt } = ctx
+  const terminals = new Map<string, BridgedTerminal>()
+  const pendingSpawns: SpawnTerminalOptions[] = []
+  let host: TerminalsHost | undefined
+
+  function createBridged(state: TerminalState): BridgedTerminal {
+    let controller: ReadableStreamDefaultController<string> | undefined
+    // `start` runs synchronously in the ReadableStream constructor, so the
+    // controller is captured immediately. Chunks enqueued before the kit
+    // connects stay queued in the stream and drain once a reader attaches.
+    const stream = new ReadableStream<string>({
+      start(c) {
+        controller = c
+      },
+    })
+    const buffer = typeof state.buffer === 'string' && state.buffer ? [state.buffer] : []
+    const session: DevframeTerminalSession = {
+      id: state.id,
+      title: state.name,
+      description: state.description,
+      icon: state.icon,
+      status: state.isTerminated ? 'stopped' : 'running',
+      interactive: false,
+      buffer,
+      stream,
+    }
+    return { session, controller, state, exited: !!state.isTerminated }
+  }
 
   nuxt.hook('devtools:terminal:register', (terminal) => {
-    terminals.set(terminal.id, terminal)
-    refresh('getTerminals')
+    const existing = terminals.get(terminal.id)
+    if (existing) {
+      // Re-registration (e.g. `startSubprocess().clear()`/`restart()`): reset
+      // the session back to running and clear the display buffer in place.
+      existing.state = terminal
+      existing.exited = false
+      existing.session.status = 'running'
+      existing.session.buffer?.splice(0, existing.session.buffer.length)
+      host?.update(existing.session)
+      return terminal.id
+    }
+
+    const bridged = createBridged(terminal)
+    terminals.set(terminal.id, bridged)
+    host?.register(bridged.session)
     return terminal.id
   })
 
-  nuxt.hook('devtools:terminal:remove', ({ id }) => {
-    if (!terminals.has(id))
+  nuxt.hook('devtools:terminal:write', ({ id, data }) => {
+    const bridged = terminals.get(id)
+    if (!bridged)
       return false
-    terminals.delete(id)
-    refresh('getTerminals')
+    bridged.state.buffer = (bridged.state.buffer || '') + data
+    try {
+      bridged.controller?.enqueue(data)
+    }
+    catch {}
     return true
   })
 
-  nuxt.hook('devtools:terminal:write', ({ id, data }) => {
-    const terminal = terminals.get(id)
-    if (!terminal)
+  nuxt.hook('devtools:terminal:exit', ({ id, code }) => {
+    const bridged = terminals.get(id)
+    if (!bridged)
       return false
-
-    terminal.buffer ||= ''
-    terminal.buffer += data
-    ctx.devtoolsKit?.rpc.broadcast({ method: 'onTerminalData', args: [{ id, data }], event: true } as any)
+    bridged.exited = true
+    bridged.state.isTerminated = true
+    bridged.session.status = code ? 'error' : 'stopped'
+    try {
+      bridged.controller?.close()
+    }
+    catch {}
+    host?.update(bridged.session)
+    broadcastTerminalExit(ctx, id, code)
     return true
   })
 
-  nuxt.hook('devtools:terminal:exit', ({ id, code }) => {
-    const terminal = terminals.get(id)
-    if (!terminal)
+  nuxt.hook('devtools:terminal:remove', ({ id }) => {
+    const bridged = terminals.get(id)
+    if (!bridged)
       return false
-
-    terminal.isTerminated = true
-    ctx.devtoolsKit?.rpc.broadcast({ method: 'onTerminalExit', args: [{ id, code }], event: true } as any)
-    refresh('getTerminals')
+    try {
+      bridged.controller?.close()
+    }
+    catch {}
+    terminals.delete(id)
+    if (host)
+      removeSession(host, bridged.session)
     return true
   })
 
-  function serializeTerminal(terminal: TerminalState, buffer?: boolean): TerminalInfo
-  function serializeTerminal(terminal: TerminalState | undefined, buffer?: boolean): TerminalInfo | undefined
-  function serializeTerminal(terminal?: TerminalState, buffer = false): TerminalInfo | undefined {
-    if (!terminal)
+  async function spawn(options: SpawnTerminalOptions) {
+    if (!host) {
+      pendingSpawns.push(options)
+      return
+    }
+    if (host.sessions.has(options.id))
+      return
+
+    const terminal = {
+      id: options.id,
+      title: options.name,
+      description: options.description,
+      icon: options.icon,
+      interactive: !!options.interactive,
+    }
+    const exec = {
+      command: options.command,
+      args: options.args || [],
+      cwd: options.cwd,
+      env: options.env,
+    }
+
+    if (options.interactive) {
+      await host.startPtySession({ ...exec, cols: options.cols, rows: options.rows }, terminal)
       return
-    return {
-      id: terminal.id,
-      name: terminal.name,
-      description: terminal.description,
-      icon: terminal.icon,
-      terminatable: terminal.terminatable ?? !!terminal.onActionTerminate,
-      restartable: terminal.restartable ?? !!terminal.onActionRestart,
-      isTerminated: terminal.isTerminated,
-      buffer: buffer
-        ? terminal.buffer
-        : undefined,
     }
+
+    const session = await host.startChildProcess(exec, terminal) as ChildProcessSession
+    // Child processes are devframe-owned and output-only; surface their exit to
+    // the client so subprocess UI state clears.
+    void Promise.resolve(session.getResult()).then((result) => {
+      broadcastTerminalExit(ctx, options.id, result.exitCode)
+    }).catch(() => {})
   }
 
-  return {
-    getTerminals() {
-      return Array.from(terminals.values(), i => serializeTerminal(i))
-    },
-    async getTerminalDetail(id: string) {
-      return serializeTerminal(terminals.get(id), true)
-    },
-    async runTerminalAction(id: string, action: TerminalAction) {
-      const terminal = terminals.get(id)
-      if (!terminal)
-        return false
-
-      switch (action) {
-        case 'restart':
-          if (!terminal.onActionRestart)
-            return false
-          await terminal.onActionRestart()
-          return true
-        case 'terminate':
-          if (!terminal.onActionTerminate)
-            return false
-          await terminal.onActionTerminate()
-          return true
-        case 'remove':
-          if (!terminal.isTerminated)
-            terminal.onActionTerminate?.()
-          terminals.delete(id)
-          refresh('getTerminals')
-          return true
-        case 'clear':
-          terminal.buffer = ''
-          refresh('getTerminals')
-          return true
-      }
-    },
-  } satisfies Partial<ServerFunctions>
+  nuxt.hook('devtools:terminal:spawn', spawn)
+
+  nuxt.hook('devtools:ready', async (kit) => {
+    host = kit.terminals
+    // Replay terminals registered before the kit connected.
+    for (const bridged of terminals.values()) {
+      if (!host.sessions.has(bridged.session.id))
+        host.register(bridged.session)
+      if (bridged.exited)
+        host.update(bridged.session)
+    }
+    // Replay spawns requested before the kit connected.
+    const queued = pendingSpawns.splice(0, pendingSpawns.length)
+    for (const options of queued)
+      await spawn(options)
+  })
 }
diff --git a/playgrounds/module-starter/playground/nuxt.config.ts b/playgrounds/module-starter/playground/nuxt.config.ts
index a7a77479c5..83c7cdfe57 100644
--- a/playgrounds/module-starter/playground/nuxt.config.ts
+++ b/playgrounds/module-starter/playground/nuxt.config.ts
@@ -13,7 +13,7 @@ export default defineNuxtConfig({
     /**
      * Start a sub Nuxt Server for developing the client
      *
-     * The terminal output can be found in the Terminals tab of the devtools.
+     * The terminal output can be found in the built-in Terminals dock of the devtools.
      */
     defineNuxtModule({
       setup(_, nuxt) {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e6ae2b6233..f97125c28c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -161,12 +161,6 @@ catalogs:
     '@vueuse/integrations':
       specifier: ^14.3.0
       version: 14.3.0
-    '@xterm/addon-fit':
-      specifier: ^0.11.0
-      version: 0.11.0
-    '@xterm/xterm':
-      specifier: ^6.0.0
-      version: 6.0.0
     birpc:
       specifier: ^4.0.0
       version: 4.0.0
@@ -672,12 +666,6 @@ importers:
       '@vueuse/nuxt':
         specifier: catalog:buildtools
         version: 14.3.0(magicast@0.5.3)(nuxt@4.4.8(@babel/plugin-syntax-jsx@7.29.7(@babel/core@7.29.7))(@babel/plugin-syntax-typescript@7.29.7(@babel/core@7.29.7))(@parcel/watcher@2.5.6)(@types/node@26.1.1)(@vitejs/devtools@0.4.1)(@vue/compiler-sfc@3.5.39)(cac@6.7.14)(db0@0.3.4)(esbuild@0.28.1)(eslint@10.7.0(jiti@2.7.0)(supports-color@8.1.1))(ioredis@5.11.1)(magicast@0.5.3)(optionator@0.9.4)(pinia@3.0.4(typescript@6.0.3)(vue@3.5.39(typescript@6.0.3)))(rolldown@1.1.5)(rollup-plugin-visualizer@7.0.1(rolldown@1.1.5)(rollup@4.62.2))(rollup@4.62.2)(srvx@0.11.22)(terser@5.49.0)(tsx@4.23.1)(typescript@6.0.3)(vite@8.0.16)(vue-tsc@3.3.7(typescript@6.0.3))(webpack@5.108.4(esbuild@0.28.1)(lightningcss@1.32.0)(postcss@8.5.18))(yaml@2.9.0))(vue@3.5.39(typescript@6.0.3))
-      '@xterm/addon-fit':
-        specifier: catalog:frontend
-        version: 0.11.0
-      '@xterm/xterm':
-        specifier: catalog:frontend
-        version: 6.0.0
       cronstrue:
         specifier: catalog:frontend
         version: 3.24.0
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 7b88ab50af..da0f897be6 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -114,8 +114,6 @@ catalogs:
     '@vue/devtools-core': ^8.1.5
     '@vueuse/core': ^14.3.0
     '@vueuse/integrations': ^14.3.0
-    '@xterm/addon-fit': ^0.11.0
-    '@xterm/xterm': ^6.0.0
     birpc: ^4.0.0
     cronstrue: ^3.24.0
     error-stack-parser-es: ^2.0.1