From a32cd63631245f90a6a5cb0f5301c4af1ad17de5 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Mon, 13 Mar 2023 11:30:45 +0100
Subject: [PATCH 1/6] wip: init terminal support

---
 local.ts                                      | 18 +++++---
 .../client/components/TerminalView.vue        | 41 +++++++++++++++++++
 .../client/pages/modules/terminals.vue        | 28 +++++++++++++
 packages/devtools/client/setup/client-rpc.ts  |  4 ++
 .../devtools/client/setup/unocss-runtime.ts   |  2 +-
 packages/devtools/package.json                |  4 +-
 packages/devtools/src/integrations/vscode.ts  | 17 +++++---
 packages/devtools/src/kit/index.ts            | 41 ++++++++++++++++++-
 packages/devtools/src/server-rpc/index.ts     |  2 +
 packages/devtools/src/server-rpc/terminal.ts  | 35 ++++++++++++++++
 packages/devtools/src/types/hooks.ts          | 18 ++++++++
 packages/devtools/src/types/integrations.ts   | 13 ++++++
 packages/devtools/src/types/rpc.ts            |  8 +++-
 pnpm-lock.yaml                                | 16 ++++++++
 14 files changed, 232 insertions(+), 15 deletions(-)
 create mode 100644 packages/devtools/client/components/TerminalView.vue
 create mode 100644 packages/devtools/client/pages/modules/terminals.vue
 create mode 100644 packages/devtools/src/server-rpc/terminal.ts

diff --git a/local.ts b/local.ts
index 3d90bf6f78..ef402e1c3d 100644
--- a/local.ts
+++ b/local.ts
@@ -18,7 +18,6 @@
  * ```
  */
 import { defineNuxtModule, logger } from '@nuxt/kit'
-import { execa } from 'execa'
 import { resolve } from 'pathe'
 import { getPort } from 'get-port-please'
 import { searchForWorkspaceRoot } from 'vite'
@@ -26,6 +25,7 @@ import { ROUTE_CLIENT, defaultOptions } from './packages/devtools/src/constant'
 import type { ModuleOptions } from './packages/devtools/src/types'
 import { packageDir } from './packages/devtools/src/dirs'
 import { enableModule } from './packages/devtools/src/module-main'
+import { startSubprocess } from './packages/devtools/src/kit'
 
 export type { ModuleOptions }
 
@@ -40,10 +40,6 @@ export default defineNuxtModule<ModuleOptions>({
     const workspaceRoot = resolve(packageDir, '../..')
     const PORT = await getPort({ port: 12442 })
 
-    // TODO: add embedded terminal and forward logs to it
-    const subprocess = execa('npx', ['nuxi', 'dev', '--port', PORT.toString()], { cwd: clientDir, stdio: 'pipe' })
-    subprocess.stderr?.pipe(process.stderr)
-
     nuxt.hook('vite:extendConfig', (config) => {
       config.server ||= {}
       // add proxy to client
@@ -61,6 +57,18 @@ export default defineNuxtModule<ModuleOptions>({
       config.server.fs.allow.push(workspaceRoot)
     })
 
+    nuxt.hook('app:resolve', () => {
+      const subprocess = startSubprocess({
+        name: 'Nuxt Devtools Local',
+        command: 'npx',
+        args: ['nuxi', 'dev', '--port', PORT.toString()],
+        cwd: clientDir,
+        stdio: 'pipe',
+      })
+
+      subprocess.stderr?.pipe(process.stderr)
+    })
+
     logger.info(`Nuxt Devtools is using local client from \`${clientDir}\``)
 
     return enableModule(options, nuxt)
diff --git a/packages/devtools/client/components/TerminalView.vue b/packages/devtools/client/components/TerminalView.vue
new file mode 100644
index 0000000000..82ea656111
--- /dev/null
+++ b/packages/devtools/client/components/TerminalView.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { Terminal } from 'xterm'
+import { FitAddon } from 'xterm-addon-fit'
+import 'xterm/css/xterm.css'
+
+const props = defineProps<{
+  id: string
+}>()
+
+const container = ref<HTMLElement>()
+const nuxt = useNuxtApp()
+
+onMounted(async () => {
+  const term = new Terminal({
+    cursorBlink: true,
+    convertEol: true,
+    cols: 140,
+  })
+  const fitAddon = new FitAddon()
+  term.loadAddon(fitAddon)
+  term.open(container.value!)
+  fitAddon.fit()
+
+  useEventListener(window, 'resize', () => {
+    fitAddon.fit()
+  })
+
+  const data = await rpc.getTerminal(props.id)
+  if (data?.content)
+    term.write(data.content)
+
+  nuxt.hook('devtools:terminal:data', ({ id, data }) => {
+    if (id === props.id)
+      term.write(data)
+  })
+})
+</script>
+
+<template>
+  <div ref="container" h-full px4 bg-black />
+</template>
diff --git a/packages/devtools/client/pages/modules/terminals.vue b/packages/devtools/client/pages/modules/terminals.vue
new file mode 100644
index 0000000000..19571429db
--- /dev/null
+++ b/packages/devtools/client/pages/modules/terminals.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { TerminalData } from '~~/../src/types'
+
+definePageMeta({
+  icon: 'carbon-terminal',
+  title: 'Terminals',
+})
+
+const terminals = await rpc.listTerminals()
+
+const selected = ref<TerminalData>(terminals[0])
+</script>
+
+<template>
+  <div v-if="terminals.length" h-full of-auto grid="~ rows-[max-content_1fr]">
+    <!-- TODO: Refactor to have general component -->
+    <div ref="navbar" flex="~ gap-2" border="b base" navbar-glass flex-1 items-center>
+      <button v-for="t of terminals" :key="t.id" border="r base" px3 py2 @click="selected = t">
+        {{ t.name }}
+      </button>
+    </div>
+
+    <TerminalView v-if="selected" :id="selected.id" :key="selected.id" />
+  </div>
+  <div h-full items-center flex justify-center>
+    <em op50>No terminal attached</em>
+  </div>
+</template>
diff --git a/packages/devtools/client/setup/client-rpc.ts b/packages/devtools/client/setup/client-rpc.ts
index 31cb582520..28c8f3a046 100644
--- a/packages/devtools/client/setup/client-rpc.ts
+++ b/packages/devtools/client/setup/client-rpc.ts
@@ -1,4 +1,5 @@
 import type { ClientFunctions } from '../../src/types'
+import type {} from '../../src/types/hooks'
 
 export function setupClientRPC() {
   const nuxt = useNuxtApp()
@@ -11,5 +12,8 @@ export function setupClientRPC() {
     async callHook(hook: string, ...args: any[]) {
       nuxt.hooks.callHookParallel(hook as any, ...args)
     },
+    async onTerminalData(id: string, data: string) {
+      nuxt.hooks.callHookParallel('devtools:terminal:data', { id, data })
+    },
   } satisfies ClientFunctions)
 }
diff --git a/packages/devtools/client/setup/unocss-runtime.ts b/packages/devtools/client/setup/unocss-runtime.ts
index 305bd905db..75eac9ac03 100644
--- a/packages/devtools/client/setup/unocss-runtime.ts
+++ b/packages/devtools/client/setup/unocss-runtime.ts
@@ -1,6 +1,6 @@
+// @ts-expect-error missin types
 import presetIcons from '@unocss/preset-icons/browser'
 import initUnocssRuntime from '@unocss/runtime'
-// @ts-expect-error missin types
 
 initUnocssRuntime({
   defaults: {
diff --git a/packages/devtools/package.json b/packages/devtools/package.json
index 9a91002919..05542e6236 100644
--- a/packages/devtools/package.json
+++ b/packages/devtools/package.json
@@ -110,6 +110,8 @@
     "vue-tsc": "^1.2.0",
     "wait-on": "^7.0.1",
     "which": "^3.0.0",
-    "ws": "^8.12.1"
+    "ws": "^8.12.1",
+    "xterm": "^5.1.0",
+    "xterm-addon-fit": "^0.7.0"
   }
 }
diff --git a/packages/devtools/src/integrations/vscode.ts b/packages/devtools/src/integrations/vscode.ts
index 9fda9fea54..f871ea4063 100644
--- a/packages/devtools/src/integrations/vscode.ts
+++ b/packages/devtools/src/integrations/vscode.ts
@@ -6,6 +6,7 @@ import which from 'which'
 import waitOn from 'wait-on'
 import { LOG_PREFIX } from '../logger'
 import type { RPCContext } from '../server-rpc/types'
+import { startSubprocess } from '../kit'
 
 export async function setup({ nuxt, options }: RPCContext) {
   const installed = !!await which('code-server').catch(() => null)
@@ -32,12 +33,16 @@ export async function setup({ nuxt, options }: RPCContext) {
 
     logger.info(LOG_PREFIX, `Starting VS Code Server at ${url} ...`)
 
-    const command = execa('code-server', [
-      'serve-local',
-      '--accept-server-license-terms',
-      '--without-connection-token',
-      `--port=${port}`,
-    ])
+    const command = startSubprocess({
+      name: 'VS Code Server',
+      command: 'code-server',
+      args: [
+        'serve-local',
+        '--accept-server-license-terms',
+        '--without-connection-token',
+        `--port=${port}`,
+      ],
+    })
 
     nuxt.hook('close', () => {
       command.kill()
diff --git a/packages/devtools/src/kit/index.ts b/packages/devtools/src/kit/index.ts
index 435ab5b21f..c719dd802a 100644
--- a/packages/devtools/src/kit/index.ts
+++ b/packages/devtools/src/kit/index.ts
@@ -1,6 +1,8 @@
 import { useNuxt } from '@nuxt/kit'
+import type { Options as ExecaOptions } from 'execa'
+import { execa } from 'execa'
 import type { ModuleCustomTab } from '../types'
-import '../types/hooks'
+import type {} from '../types/hooks'
 
 /**
  * Hooks to extend a custom tab in devtools.
@@ -21,3 +23,40 @@ export function addCustomTab(tab: ModuleCustomTab | (() => ModuleCustomTab | Pro
 export function refreshCustomTabs(nuxt = useNuxt()) {
   return nuxt.callHook('devtools:customTabs:refresh')
 }
+
+interface SubprocessOptions extends ExecaOptions {
+  name: string
+  command: string
+  args?: string[]
+}
+
+/**
+ * Create a subprocess that handled by the DevTools.
+ */
+export function startSubprocess(options: SubprocessOptions, nuxt = useNuxt()) {
+  const process = execa(
+    options.command,
+    options.args,
+    {
+      ...options,
+      env: {
+        COLORS: 'true',
+        FORCE_COLOR: 'true',
+        ...options.env,
+      },
+    },
+  )
+
+  const id = (process.pid || options.command).toString()
+  nuxt.callHook('devtools:terminal:register', {
+    id,
+    name: options.name,
+    stream: process.stdout!,
+  })
+
+  process.on('exit', () => {
+    // TODO: unregister terminal
+  })
+
+  return process
+}
diff --git a/packages/devtools/src/server-rpc/index.ts b/packages/devtools/src/server-rpc/index.ts
index 164eee309d..e8c69bc543 100644
--- a/packages/devtools/src/server-rpc/index.ts
+++ b/packages/devtools/src/server-rpc/index.ts
@@ -14,6 +14,7 @@ import { setupCustomTabRPC } from './custom-tabs'
 import { setupGeneralRPC } from './general'
 import { setupWizardRPC } from './wizard'
 import type { RPCContext } from './types'
+import { setupTerminalRPC } from './terminal'
 
 export function setupRPC(nuxt: Nuxt, options: ModuleOptions) {
   const serverFunctions = {} as ServerFunctions
@@ -37,6 +38,7 @@ export function setupRPC(nuxt: Nuxt, options: ModuleOptions) {
     ...setupAssetsRPC(ctx),
     ...setupNpmRPC(ctx),
     ...setupWizardRPC(ctx),
+    ...setupTerminalRPC(ctx),
   } satisfies ServerFunctions)
 
   const wsClients = new Set<WebSocket>()
diff --git a/packages/devtools/src/server-rpc/terminal.ts b/packages/devtools/src/server-rpc/terminal.ts
new file mode 100644
index 0000000000..8f1b744650
--- /dev/null
+++ b/packages/devtools/src/server-rpc/terminal.ts
@@ -0,0 +1,35 @@
+import type { ServerFunctions, TerminalData } from '../types'
+import type { RPCContext } from './types'
+
+export function setupTerminalRPC({ nuxt, birpc }: RPCContext) {
+  const terminals: TerminalData[] = []
+
+  nuxt.hook('devtools:terminal:register', (terminal) => {
+    const clone = {
+      ...terminal,
+    }
+    clone.id ||= Math.random().toString() // TODO: use random id
+    clone.content ||= ''
+    clone.stream?.on('data', (data) => {
+      const delta = data.toString()
+      clone.content += delta
+      birpc.broadcast.onTerminalData.asEvent(clone.id, delta)
+    })
+    terminals.push(clone)
+  })
+
+  return {
+    listTerminals() {
+      return terminals.map(i => ({
+        id: i.id,
+        name: i.name,
+        description: i.description,
+        icon: i.icon,
+      }))
+    },
+    getTerminal(id: string) {
+      const terminal = terminals.find(t => t.id === id)
+      return terminal
+    },
+  } satisfies Partial<ServerFunctions>
+}
diff --git a/packages/devtools/src/types/hooks.ts b/packages/devtools/src/types/hooks.ts
index 81f91217d5..af3a865b1b 100644
--- a/packages/devtools/src/types/hooks.ts
+++ b/packages/devtools/src/types/hooks.ts
@@ -1,4 +1,5 @@
 import type { ModuleCustomTab } from './custom-tabs'
+import type { TerminalData } from './integrations'
 
 declare module '@nuxt/schema' {
   interface NuxtHooks {
@@ -21,6 +22,23 @@ declare module '@nuxt/schema' {
      * Retrigger update for custom tabs, `devtools:customTabs` will be called again.
      */
     'devtools:customTabs:refresh': () => void
+
+    /**
+     * Register a terminal.
+     */
+    'devtools:terminal:register': (terminal: TerminalData) => void
+  }
+}
+
+declare module '@nuxt/schema' {
+  /**
+   * Runtime Hooks
+   */
+  interface RuntimeNuxtHooks {
+    /**
+     * On terminal data.
+     */
+    'devtools:terminal:data': (data: { id: string; data: string }) => void
   }
 }
 
diff --git a/packages/devtools/src/types/integrations.ts b/packages/devtools/src/types/integrations.ts
index 40b0fd05ba..d1cba7948b 100644
--- a/packages/devtools/src/types/integrations.ts
+++ b/packages/devtools/src/types/integrations.ts
@@ -1,3 +1,4 @@
+import type { Stream } from 'node:stream'
 import type { Import, UnimportMeta } from 'unimport'
 import type { VueInspectorClient } from 'vite-plugin-vue-inspector'
 import type { RouteRecordNormalized } from 'vue-router'
@@ -105,3 +106,15 @@ export interface CodeSnippet {
   name: string
   docs?: string
 }
+
+export interface TerminalInfo {
+  id: string
+  name: string
+  description?: string
+  icon?: string
+}
+
+export interface TerminalData extends TerminalInfo {
+  stream?: Stream
+  content?: string
+}
diff --git a/packages/devtools/src/types/rpc.ts b/packages/devtools/src/types/rpc.ts
index b379c1c1cd..c44a3d5a5b 100644
--- a/packages/devtools/src/types/rpc.ts
+++ b/packages/devtools/src/types/rpc.ts
@@ -4,7 +4,7 @@ import type { StorageValue } from 'unstorage'
 import type { Component } from 'vue'
 import type { WizardActions, WizardArgs } from '../wizard'
 import type { ModuleCustomTab } from './custom-tabs'
-import type { AssetInfo, AutoImportsWithMetadata, HookInfo, ImageMeta, UpdateInfo } from './integrations'
+import type { AssetInfo, AutoImportsWithMetadata, HookInfo, ImageMeta, TerminalData, TerminalInfo, UpdateInfo } from './integrations'
 import type { ComponentRelationship } from './module'
 
 export interface ServerFunctions {
@@ -20,6 +20,10 @@ export interface ServerFunctions {
   getStaticAssets(): Promise<AssetInfo[]>
   getPackageVersions(): UpdateInfo[]
 
+  // Terminal
+  listTerminals(): TerminalInfo[]
+  getTerminal(id: string): TerminalData | undefined
+
   // Storage
   getStorageMounts(): Promise<StorageMounts>
   getStorageKeys(base?: string): Promise<string[]>
@@ -40,6 +44,8 @@ export interface ServerFunctions {
 export interface ClientFunctions {
   refresh(event: ClientUpdateEvent): void
   callHook(hook: string, ...args: any[]): Promise<void>
+
+  onTerminalData(id: string, data: string): void
 }
 
 export type ClientUpdateEvent = keyof ServerFunctions
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 93fe326534..33ae9911d7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -128,6 +128,8 @@ importers:
       wait-on: ^7.0.1
       which: ^3.0.0
       ws: ^8.12.1
+      xterm: ^5.1.0
+      xterm-addon-fit: ^0.7.0
     dependencies:
       '@antfu/install-pkg': 0.1.1
       '@nuxt/kit': 3.2.3
@@ -190,6 +192,8 @@ importers:
       wait-on: 7.0.1
       which: 3.0.0
       ws: 8.12.1
+      xterm: 5.1.0
+      xterm-addon-fit: 0.7.0_xterm@5.1.0
 
   packages/devtools-ui-kit:
     specifiers:
@@ -12427,6 +12431,18 @@ packages:
     engines: {node: '>=0.4'}
     dev: true
 
+  /xterm-addon-fit/0.7.0_xterm@5.1.0:
+    resolution: {integrity: sha512-tQgHGoHqRTgeROPnvmtEJywLKoC/V9eNs4bLLz7iyJr1aW/QFzRwfd3MGiJ6odJd9xEfxcW36/xRU47JkD5NKQ==}
+    peerDependencies:
+      xterm: ^5.0.0
+    dependencies:
+      xterm: 5.1.0
+    dev: true
+
+  /xterm/5.1.0:
+    resolution: {integrity: sha512-LovENH4WDzpwynj+OTkLyZgJPeDom9Gra4DMlGAgz6pZhIDCQ+YuO7yfwanY+gVbn/mmZIStNOnVRU/ikQuAEQ==}
+    dev: true
+
   /xxhashjs/0.2.2:
     resolution: {integrity: sha512-AkTuIuVTET12tpsVIQo+ZU6f/qDmKuRUcjaqR+OIvm+aCBsZ95i7UVY5WJ9TMsSaZ0DA2WxoZ4acu0sPH+OKAw==}
     dependencies:

From 129ed2ac6f7c8203cef2e3c2f376fd16020c6f02 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Mon, 13 Mar 2023 12:09:15 +0100
Subject: [PATCH 2/6] refactor: `<NIconButton>`

---
 local.ts                                      | 20 +++++++++-----
 .../src/components/NDialog.vue                |  4 +--
 .../src/components/NIconButton.vue            | 19 +++++++++++++
 .../src/components/NSelect.vue                |  4 +--
 packages/devtools-ui-kit/src/unocss.ts        |  3 +++
 .../client/components/AssetDetails.vue        | 27 ++++++++++++-------
 .../client/components/AssetGridItem.vue       |  4 +--
 .../client/components/AssetPreview.vue        |  2 +-
 packages/devtools/client/components/Badge.vue |  2 +-
 .../client/components/ComponentDetails.vue    |  4 +--
 .../client/components/ComponentItem.vue       |  6 ++---
 .../client/components/DockingPanel.vue        |  2 +-
 .../client/components/DrawerRight.vue         |  6 ++---
 .../devtools/client/components/HooksTable.vue |  2 +-
 .../devtools/client/components/ModuleItem.vue |  2 +-
 .../client/components/ModuleTreeNode.vue      |  2 +-
 .../devtools/client/components/SideNav.vue    |  2 +-
 .../client/components/SideNavItem.vue         |  2 +-
 .../client/components/StateEditor.vue         |  8 +++---
 .../client/components/TerminalView.vue        |  6 ++---
 packages/devtools/client/layouts/default.vue  |  4 +--
 .../devtools/client/pages/modules/assets.vue  |  2 +-
 .../devtools/client/pages/modules/imports.vue |  2 +-
 .../devtools/client/pages/modules/storage.vue |  8 +++---
 .../client/pages/modules/terminals.vue        | 15 ++++++++---
 packages/devtools/client/unocss.config.ts     |  2 --
 packages/devtools/src/integrations/vscode.ts  | 24 ++++++++++-------
 packages/devtools/src/kit/index.ts            | 22 ++++++++-------
 packages/devtools/src/server-rpc/terminal.ts  | 13 ++++-----
 packages/devtools/src/types/integrations.ts   | 21 +++++++++++++--
 30 files changed, 149 insertions(+), 91 deletions(-)
 create mode 100644 packages/devtools-ui-kit/src/components/NIconButton.vue

diff --git a/local.ts b/local.ts
index ef402e1c3d..d66ca2b33f 100644
--- a/local.ts
+++ b/local.ts
@@ -58,13 +58,19 @@ export default defineNuxtModule<ModuleOptions>({
     })
 
     nuxt.hook('app:resolve', () => {
-      const subprocess = startSubprocess({
-        name: 'Nuxt Devtools Local',
-        command: 'npx',
-        args: ['nuxi', 'dev', '--port', PORT.toString()],
-        cwd: clientDir,
-        stdio: 'pipe',
-      })
+      const subprocess = startSubprocess(
+        {
+          command: 'npx',
+          args: ['nuxi', 'dev', '--port', PORT.toString()],
+          cwd: clientDir,
+          stdio: 'pipe',
+        },
+        {
+          id: 'devtools:local',
+          name: 'Nuxt Devtools Local',
+          icon: 'logos-nuxt-icon',
+        },
+      )
 
       subprocess.stderr?.pipe(process.stderr)
     })
diff --git a/packages/devtools-ui-kit/src/components/NDialog.vue b/packages/devtools-ui-kit/src/components/NDialog.vue
index 1d44c8187d..8d31822e46 100644
--- a/packages/devtools-ui-kit/src/components/NDialog.vue
+++ b/packages/devtools-ui-kit/src/components/NDialog.vue
@@ -45,13 +45,13 @@ export default {
 
 <template>
   <div
-    class="n-transition fixed flex items-center justify-center n-dialog inset-0 z-100"
+    class="n-transition fixed flex items-center justify-center z-100 n-dialog inset-0"
     :class="[
       show ? '' : 'op0 pointer-events-none',
     ]"
   >
     <div
-      class="absolute inset-0 -z-1"
+      class="inset-0 absolute -z-1"
       :class="[
         dim ? 'bg-black/50' : '',
       ]"
diff --git a/packages/devtools-ui-kit/src/components/NIconButton.vue b/packages/devtools-ui-kit/src/components/NIconButton.vue
new file mode 100644
index 0000000000..83616a526b
--- /dev/null
+++ b/packages/devtools-ui-kit/src/components/NIconButton.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { NuxtLink } from '#components'
+
+const props = defineProps<{
+  to?: string
+  icon: string
+}>()
+</script>
+
+<template>
+  <Component
+    :is="to ? NuxtLink : 'button'"
+    :to="to"
+    v-bind="$attrs"
+    class="n-transition n-icon-button"
+  >
+    <NIcon :icon="props.icon" />
+  </Component>
+</template>
diff --git a/packages/devtools-ui-kit/src/components/NSelect.vue b/packages/devtools-ui-kit/src/components/NSelect.vue
index cafac89c03..2e675ee3d8 100644
--- a/packages/devtools-ui-kit/src/components/NSelect.vue
+++ b/packages/devtools-ui-kit/src/components/NSelect.vue
@@ -20,12 +20,12 @@ const input = useVModel(props, 'modelValue', emit, { passive: true })
 
 <template>
   <div
-    class="n-bg-base rounded py-1 border n-border-base flex items-center flex n-text-input focus-within:n-focus-base focus-within:border-context px-2"
+    class="flex items-center flex n-bg-base rounded py-1 border n-border-base px-2 n-text-input focus-within:n-focus-base focus-within:border-context"
   >
     <slot name="icon">
       <NIcon v-if="icon" :icon="icon" class="op50 mr-0.4em text-1.1em" />
     </slot>
-    <select v-model="input" :disabled="disabled" class="flex-auto n-bg-base w-full !outline-none">
+    <select v-model="input" :disabled="disabled" class="n-bg-base flex-auto w-full !outline-none">
       <option v-if="placeholder" value="" disabled hidden>
         {{ placeholder }}
       </option>
diff --git a/packages/devtools-ui-kit/src/unocss.ts b/packages/devtools-ui-kit/src/unocss.ts
index 167c89d72e..2ec0ab6bca 100644
--- a/packages/devtools-ui-kit/src/unocss.ts
+++ b/packages/devtools-ui-kit/src/unocss.ts
@@ -121,6 +121,9 @@ export const unocssPreset = (): Preset => ({
 
     // code
     'n-code-block': 'dark:bg-[#121212] bg-white',
+
+    // icon-button
+    'n-icon-button': 'aspect-1/1 w-1.6em h-1.6em flex items-center justify-center rounded op50 hover:op100 hover:bg-active',
   },
 })
 
diff --git a/packages/devtools/client/components/AssetDetails.vue b/packages/devtools/client/components/AssetDetails.vue
index 594b67c0ca..eb975767f9 100644
--- a/packages/devtools/client/components/AssetDetails.vue
+++ b/packages/devtools/client/components/AssetDetails.vue
@@ -78,7 +78,7 @@ const supportsPreview = computed(() => {
 <template>
   <div flex="~ col gap-4" w-full of-hidden min-h-full p4>
     <template v-if="supportsPreview">
-      <div op50 mb--2 flex="~ gap2" items-center>
+      <div flex="~ gap2" op50 items-center mb--2>
         <div x-divider />
         <div flex-none>
           Preview
@@ -113,9 +113,11 @@ const supportsPreview = computed(() => {
             <div flex="~ gap-1" items-center>
               <FilepathItem :filepath="asset.filePath" w-full line-break ws-normal text-left />
               <div flex-auto />
-              <button n-icon-btn title="Open in Editor" @click="openInEditor(asset.filePath)">
-                <div i-carbon-launch />
-              </button>
+              <NIconButton
+                title="Open in Editor"
+                icon="carbon-launch"
+                @click="openInEditor(asset.filePath)"
+              />
             </div>
           </td>
         </tr>
@@ -129,12 +131,17 @@ const supportsPreview = computed(() => {
                 {{ asset.publicPath }}
               </div>
               <div flex-auto />
-              <NuxtLink n-icon-btn :to="asset.publicPath" target="_blank" title="Open in browser">
-                <div i-carbon-launch />
-              </NuxtLink>
-              <button n-icon-btn title="Copy public path" @click="copy(asset.publicPath)">
-                <div i-carbon-copy />
-              </button>
+              <NIconButton
+                :to="asset.publicPath"
+                icon="carbon-launch"
+                target="_blank"
+                title="Open in browser"
+              />
+              <NIconButton
+                title="Copy public path"
+                icon="carbon-copy"
+                @click="copy(asset.publicPath)"
+              />
             </div>
           </td>
         </tr>
diff --git a/packages/devtools/client/components/AssetGridItem.vue b/packages/devtools/client/components/AssetGridItem.vue
index e61fc4bcb5..fa09b5462a 100644
--- a/packages/devtools/client/components/AssetGridItem.vue
+++ b/packages/devtools/client/components/AssetGridItem.vue
@@ -14,9 +14,9 @@ const path = computed(() => {
 </script>
 
 <template>
-  <button flex="~ col gap-1" hover="bg-active" rounded p2 of-hidden items-center>
+  <button flex="~ col gap-1" hover="bg-active" rounded of-hidden items-center p2>
     <AssetPreview rounded w-30 h-30 border="~ base" :asset="asset" />
-    <div of-hidden w-full text-center ws-nowrap truncate text-xs>
+    <div of-hidden w-full ws-nowrap text-center truncate text-xs>
       {{ path }}
     </div>
   </button>
diff --git a/packages/devtools/client/components/AssetPreview.vue b/packages/devtools/client/components/AssetPreview.vue
index 67380d4c93..f41e3b4473 100644
--- a/packages/devtools/client/components/AssetPreview.vue
+++ b/packages/devtools/client/components/AssetPreview.vue
@@ -8,7 +8,7 @@ defineProps<{
 </script>
 
 <template>
-  <div flex items-center of-hidden justify-center p1 bg-active object-cover>
+  <div items-center of-hidden justify-center flex p1 bg-active object-cover>
     <template v-if="asset.type === 'image'">
       <img :src="asset.publicPath">
     </template>
diff --git a/packages/devtools/client/components/Badge.vue b/packages/devtools/client/components/Badge.vue
index 0d3d6e535b..1a71a0cacc 100644
--- a/packages/devtools/client/components/Badge.vue
+++ b/packages/devtools/client/components/Badge.vue
@@ -1,5 +1,5 @@
 <template>
-  <span class="text-xs whitespace-nowrap px-1.5 py-0.5 mx-0.5 rounded">
+  <span class="text-xs rounded whitespace-nowrap px-1.5 py-0.5 mx-0.5">
     <slot />
   </span>
 </template>
diff --git a/packages/devtools/client/components/ComponentDetails.vue b/packages/devtools/client/components/ComponentDetails.vue
index 650809b3cf..0311cb5afe 100644
--- a/packages/devtools/client/components/ComponentDetails.vue
+++ b/packages/devtools/client/components/ComponentDetails.vue
@@ -19,9 +19,7 @@ const copy = useCopy()
       <div>
         <ComponentName :component="component" />
       </div>
-      <button title="Copy name" n-icon-btn @click="copy(`<${name}></${name}>`)">
-        <div i-carbon-copy />
-      </button>
+      <NIconButton title="Copy name" icon="carbon-copy" @click="copy(`<${name}></${name}>`)" />
       <Badge
         v-if="component.global"
         bg-green-400:10 text-green-400
diff --git a/packages/devtools/client/components/ComponentItem.vue b/packages/devtools/client/components/ComponentItem.vue
index f453d6ee2b..6e55481553 100644
--- a/packages/devtools/client/components/ComponentItem.vue
+++ b/packages/devtools/client/components/ComponentItem.vue
@@ -11,13 +11,11 @@ const filePath = computed(() => props.component.filePath || props.component.file
 
 <template>
   <div
-    rounded
-    px2
-    py1
+
     hover="bg-active"
     class="group"
     flex="~ gap2"
-    w-full items-center
+    rounded w-full items-center px2 py1
   >
     <VDropdown>
       <button hover:text-primary>
diff --git a/packages/devtools/client/components/DockingPanel.vue b/packages/devtools/client/components/DockingPanel.vue
index e4d9388a3a..144cfab4ba 100644
--- a/packages/devtools/client/components/DockingPanel.vue
+++ b/packages/devtools/client/components/DockingPanel.vue
@@ -19,7 +19,7 @@ function refreshPage() {
 
 <template>
   <div>
-    <div v-if="client" px3 py2 border="b base" flex="~ col gap-1">
+    <div v-if="client" py2 px3 border="b base" flex="~ col gap-1">
       <div text-sm op50>
         Dock devtools to
       </div>
diff --git a/packages/devtools/client/components/DrawerRight.vue b/packages/devtools/client/components/DrawerRight.vue
index 24c1a91b4e..f2e13ebe04 100644
--- a/packages/devtools/client/components/DrawerRight.vue
+++ b/packages/devtools/client/components/DrawerRight.vue
@@ -41,13 +41,11 @@ export default {
       ref="el"
       border="l base"
       flex="~ col gap-1"
-      of-auto right-0 text-sm absolute bottom-0 glass-effect z-10 z-20
+      text-sm absolute of-auto right-0 bottom-0 glass-effect z-10 z-20
       :style="{ top: `${top}px` }"
       v-bind="$attrs"
     >
-      <button absolute z-20 n-icon-btn text-xl right-2 top-2 @click="$emit('close')">
-        <div i-carbon-close />
-      </button>
+      <NIconButton absolute z-20 text-xl right-2 top-2 icon="carbon-close" @click="$emit('close')" />
       <div w-full of-auto h-full relative>
         <slot />
       </div>
diff --git a/packages/devtools/client/components/HooksTable.vue b/packages/devtools/client/components/HooksTable.vue
index c6a19cc4a1..68013fd7a5 100644
--- a/packages/devtools/client/components/HooksTable.vue
+++ b/packages/devtools/client/components/HooksTable.vue
@@ -84,7 +84,7 @@ function toggleSortedBy(by: SortBy) {
   <table w-full>
     <thead border="b base">
       <tr>
-        <th p1 ws-nowrap select-none text-right font-bold>
+        <th p1 ws-nowrap text-right select-none font-bold>
           <button @click="toggleSortedBy('start')">
             Order
             <div text-xs ml--1 :class="[sortby === 'start' ? 'op50' : 'op0', direction === 'asc' ? 'carbon-arrow-down' : 'carbon-arrow-up']" />
diff --git a/packages/devtools/client/components/ModuleItem.vue b/packages/devtools/client/components/ModuleItem.vue
index 60783713aa..92986d420f 100644
--- a/packages/devtools/client/components/ModuleItem.vue
+++ b/packages/devtools/client/components/ModuleItem.vue
@@ -96,7 +96,7 @@ const npmBase = 'https://www.npmjs.com/package/'
       <div
         v-if="data.icon || isPackageModule"
 
-        p4 rounded flex-none h-20 w-20 bg-gray:3 flex
+        p4 rounded flex-none flex h-20 w-20 bg-gray:3
       >
         <img v-if="data.icon" :src="iconBase + data.icon" :alt="name" ma>
         <div op50 ma i-carbon-circle-dash text-4xl />
diff --git a/packages/devtools/client/components/ModuleTreeNode.vue b/packages/devtools/client/components/ModuleTreeNode.vue
index 456796a978..6094bda117 100644
--- a/packages/devtools/client/components/ModuleTreeNode.vue
+++ b/packages/devtools/client/components/ModuleTreeNode.vue
@@ -15,7 +15,7 @@ const route = useRoute()
   <details open>
     <summary
 
-      select-none text-sm cursor-default truncate
+      select-none text-sm truncate cursor-default
       p="y1"
       flex="~ gap2"
     >
diff --git a/packages/devtools/client/components/SideNav.vue b/packages/devtools/client/components/SideNav.vue
index 5a5d3cb481..498dc13093 100644
--- a/packages/devtools/client/components/SideNav.vue
+++ b/packages/devtools/client/components/SideNav.vue
@@ -5,7 +5,7 @@ const tabs = useTabs()
 
 <template>
   <div border="r base" flex="~ col gap-0.5" h-full items-center z-100 bg-base>
-    <div flex="~ col" items-center bg-base top-0 sticky z-1 pt3 mb1>
+    <div flex="~ col" items-center bg-base top-0 pt3 sticky z-1 mb1>
       <VDropdown placement="left-start" :distance="20">
         <button
 
diff --git a/packages/devtools/client/components/SideNavItem.vue b/packages/devtools/client/components/SideNavItem.vue
index c3ef11e0fe..977b4ddd04 100644
--- a/packages/devtools/client/components/SideNavItem.vue
+++ b/packages/devtools/client/components/SideNavItem.vue
@@ -20,7 +20,7 @@ const isEnabled = computed(() => {
       :to="'path' in tab ? tab.path : `/modules/custom-${tab.name}`"
       flex="~"
       hover="bg-active"
-      items-center justify-center p1 w-10 text-secondary select-none rounded-xl h-10
+      items-center justify-center p1 select-none w-10 text-secondary rounded-xl h-10
       exact-active-class="!text-primary bg-active"
     >
       <TabIcon
diff --git a/packages/devtools/client/components/StateEditor.vue b/packages/devtools/client/components/StateEditor.vue
index f2dde00d34..3d47f6374f 100644
--- a/packages/devtools/client/components/StateEditor.vue
+++ b/packages/devtools/client/components/StateEditor.vue
@@ -49,8 +49,8 @@ async function refresh() {
 <template>
   <div class="state-editor-details" :open="!name ? true : isOpen">
     <div
-      select-none px4
-      flex="~ gap2" items-center
+
+      flex="~ gap2" select-none items-center px4
     >
       <button
         v-if="name" flex="~"
@@ -65,9 +65,7 @@ async function refresh() {
         >{{ name }}</code>
       </button>
       <template v-if="isOpen">
-        <button title="Refresh" n-icon-btn @click="refresh">
-          <div i-carbon-renew />
-        </button>
+        <NIconButton title="Refresh" icon="carbon-renew " @click="refresh" />
       </template>
     </div>
     <template v-if="isOpen || !name">
diff --git a/packages/devtools/client/components/TerminalView.vue b/packages/devtools/client/components/TerminalView.vue
index 82ea656111..f5ffbc2dd9 100644
--- a/packages/devtools/client/components/TerminalView.vue
+++ b/packages/devtools/client/components/TerminalView.vue
@@ -26,8 +26,8 @@ onMounted(async () => {
   })
 
   const data = await rpc.getTerminal(props.id)
-  if (data?.content)
-    term.write(data.content)
+  if (data?.buffer)
+    term.write(data.buffer)
 
   nuxt.hook('devtools:terminal:data', ({ id, data }) => {
     if (id === props.id)
@@ -37,5 +37,5 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div ref="container" h-full px4 bg-black />
+  <div ref="container" h-full w-full of-auto px4 bg-black />
 </template>
diff --git a/packages/devtools/client/layouts/default.vue b/packages/devtools/client/layouts/default.vue
index 6c9c9e379e..88464fb989 100644
--- a/packages/devtools/client/layouts/default.vue
+++ b/packages/devtools/client/layouts/default.vue
@@ -8,11 +8,11 @@ const waiting = computed(() => !client.value && !showConnectionWarning.value)
     <Notification />
     <div v-if="waiting" h-full w-full flex>
       <div flex="~ col" text-lg items-center ma animate-pulse>
-        <div op50 i-carbon-circle-dash animate-spin text-4xl />
+        <div op50 i-carbon-circle-dash text-4xl animate-spin />
         Connecting...
       </div>
     </div>
-    <div v-else grid="~ cols-[50px_1fr]" h-full of-hidden>
+    <div v-else grid="~ cols-[50px_1fr]" h-full w-full of-hidden>
       <SideNav of-auto />
       <div h-full of-auto>
         <slot />
diff --git a/packages/devtools/client/pages/modules/assets.vue b/packages/devtools/client/pages/modules/assets.vue
index 75464f0e19..7327363a07 100644
--- a/packages/devtools/client/pages/modules/assets.vue
+++ b/packages/devtools/client/pages/modules/assets.vue
@@ -52,7 +52,7 @@ const navbar = ref<HTMLElement>()
 
 <template>
   <div h-full of-auto>
-    <div ref="navbar" flex="~ col gap-2" border="b base" p4 pb2 navbar-glass flex-1>
+    <div ref="navbar" flex="~ col gap-2" border="b base" p4 navbar-glass flex-1 pb2>
       <div flex="~ gap4">
         <NTextInput
           v-model="search"
diff --git a/packages/devtools/client/pages/modules/imports.vue b/packages/devtools/client/pages/modules/imports.vue
index 8eff3ec8da..ff27be7754 100644
--- a/packages/devtools/client/pages/modules/imports.vue
+++ b/packages/devtools/client/pages/modules/imports.vue
@@ -72,7 +72,7 @@ const filtered = computed(() => {
 
 <template>
   <div v-if="config" h-full of-auto>
-    <div flex="~ col gap4" border="b base" px4 flex-1 navbar-glass pt4 pb2>
+    <div flex="~ col gap4" border="b base" px4 flex-1 navbar-glass pb2 pt4>
       <NTextInput
         v-model="search"
         placeholder="Search..."
diff --git a/packages/devtools/client/pages/modules/storage.vue b/packages/devtools/client/pages/modules/storage.vue
index 3d129d83bc..2ad4f36035 100644
--- a/packages/devtools/client/pages/modules/storage.vue
+++ b/packages/devtools/client/pages/modules/storage.vue
@@ -121,9 +121,7 @@ async function renameCurrentItem() {
   <PanelLeftRight v-if="currentStorage" storage-key="tab-storage">
     <template #left>
       <div class="items-center flex justify-between px-3 h-[48px] gap1">
-        <button n-icon-btn ml--1 @click="currentStorage = ''">
-          <div i-carbon-chevron-left />
-        </button>
+        <NIconButton icon="carbon-chevron-left" ml--1 @click="currentStorage = ''" />
         <div class="w-full text-sm">
           <NSelect v-model="currentStorage" n="primary" icon="carbon-data-base">
             <option v-for="(_storage, name) of storageMounts" :key="name" :value="name">
@@ -163,10 +161,10 @@ async function renameCurrentItem() {
 
     <template #right>
       <div v-if="currentItem?.key" h-full of-hidden flex="~ col">
-        <div border="b base" class="text-sm flex items-center justify-between px-4 flex-none h-[49px]">
+        <div border="b base" class="text-sm flex items-center justify-between flex-none px-4 h-[49px]">
           <div class="flex items-center gap-4">
             <NTextInput v-if="currentItem.editingKey" v-model="currentItem.updatedKey" @keyup.enter="renameCurrentItem" />
-            <code v-else>{{ keyName(currentItem.key) }} <NIcon icon="carbon-edit" class="op50 hover:op100 cursor-pointer" @click="currentItem.editingKey = true" /></code>
+            <code v-else>{{ keyName(currentItem.key) }} <NIcon icon="carbon-edit" class="op50 cursor-pointer hover:op100" @click="currentItem.editingKey = true" /></code>
             <NButton v-if="!currentItem.editingKey" n="green xs" :disabled="currentItem.content === currentItem.updatedContent" :class="{ 'border-green': currentItem.content !== currentItem.updatedContent }" @click="saveCurrentItem">
               Save
             </NButton>
diff --git a/packages/devtools/client/pages/modules/terminals.vue b/packages/devtools/client/pages/modules/terminals.vue
index 19571429db..eb697f6a18 100644
--- a/packages/devtools/client/pages/modules/terminals.vue
+++ b/packages/devtools/client/pages/modules/terminals.vue
@@ -12,15 +12,24 @@ const selected = ref<TerminalData>(terminals[0])
 </script>
 
 <template>
-  <div v-if="terminals.length" h-full of-auto grid="~ rows-[max-content_1fr]">
+  <div v-if="terminals.length" h-full w-full of-hidden grid="~ rows-[max-content_max-content_1fr]">
     <!-- TODO: Refactor to have general component -->
     <div ref="navbar" flex="~ gap-2" border="b base" navbar-glass flex-1 items-center>
-      <button v-for="t of terminals" :key="t.id" border="r base" px3 py2 @click="selected = t">
+      <button v-for="t of terminals" :key="t.id" border="r base" px3 py2 flex="~ gap-1" items-center @click="selected = t">
+        <NIcon v-if="t.icon " :icon="t.icon" />
         {{ t.name }}
       </button>
     </div>
 
-    <TerminalView v-if="selected" :id="selected.id" :key="selected.id" />
+    <template v-if="selected">
+      <div border="b base" p2 flex="~">
+        <span>{{ selected.description }}</span>
+        <span class="flex-auto" />
+        <!-- TODO: -->
+        <NIconButton title="Refresh" icon="carbon-renew" />
+      </div>
+      <TerminalView :id="selected.id" :key="selected.id" />
+    </template>
   </div>
   <div h-full items-center flex justify-center>
     <em op50>No terminal attached</em>
diff --git a/packages/devtools/client/unocss.config.ts b/packages/devtools/client/unocss.config.ts
index 14853a2648..362eba62ec 100644
--- a/packages/devtools/client/unocss.config.ts
+++ b/packages/devtools/client/unocss.config.ts
@@ -13,8 +13,6 @@ export default defineConfig({
 
       'text-secondary': 'color-black/50 dark:color-white/50',
 
-      'n-icon-btn': 'aspect-1/1 w-1.6em h-1.6em flex items-center justify-center rounded op50 hover:op100 hover:bg-active',
-
       // Reusable
       'x-divider': 'h-1px w-full bg-gray/15',
     },
diff --git a/packages/devtools/src/integrations/vscode.ts b/packages/devtools/src/integrations/vscode.ts
index f871ea4063..953ad4e132 100644
--- a/packages/devtools/src/integrations/vscode.ts
+++ b/packages/devtools/src/integrations/vscode.ts
@@ -33,16 +33,22 @@ export async function setup({ nuxt, options }: RPCContext) {
 
     logger.info(LOG_PREFIX, `Starting VS Code Server at ${url} ...`)
 
-    const command = startSubprocess({
-      name: 'VS Code Server',
-      command: 'code-server',
-      args: [
-        'serve-local',
-        '--accept-server-license-terms',
-        '--without-connection-token',
+    const command = startSubprocess(
+      {
+        command: 'code-server',
+        args: [
+          'serve-local',
+          '--accept-server-license-terms',
+          '--without-connection-token',
         `--port=${port}`,
-      ],
-    })
+        ],
+      },
+      {
+        id: 'devtools:vscode',
+        name: 'VS Code Server',
+        icon: 'logos-visual-studio-code',
+      },
+    )
 
     nuxt.hook('close', () => {
       command.kill()
diff --git a/packages/devtools/src/kit/index.ts b/packages/devtools/src/kit/index.ts
index c719dd802a..990696e904 100644
--- a/packages/devtools/src/kit/index.ts
+++ b/packages/devtools/src/kit/index.ts
@@ -1,7 +1,7 @@
 import { useNuxt } from '@nuxt/kit'
 import type { Options as ExecaOptions } from 'execa'
 import { execa } from 'execa'
-import type { ModuleCustomTab } from '../types'
+import type { ModuleCustomTab, TerminalInfo } from '../types'
 import type {} from '../types/hooks'
 
 /**
@@ -25,7 +25,6 @@ export function refreshCustomTabs(nuxt = useNuxt()) {
 }
 
 interface SubprocessOptions extends ExecaOptions {
-  name: string
   command: string
   args?: string[]
 }
@@ -33,25 +32,28 @@ interface SubprocessOptions extends ExecaOptions {
 /**
  * Create a subprocess that handled by the DevTools.
  */
-export function startSubprocess(options: SubprocessOptions, nuxt = useNuxt()) {
+export function startSubprocess(execaOptions: SubprocessOptions, tabOptions: TerminalInfo, nuxt = useNuxt()) {
   const process = execa(
-    options.command,
-    options.args,
+    execaOptions.command,
+    execaOptions.args,
     {
-      ...options,
+      ...execaOptions,
       env: {
         COLORS: 'true',
         FORCE_COLOR: 'true',
-        ...options.env,
+        ...execaOptions.env,
       },
     },
   )
 
-  const id = (process.pid || options.command).toString()
+  const id = (tabOptions.id || process.pid || execaOptions.command).toString()
   nuxt.callHook('devtools:terminal:register', {
+    ...tabOptions,
     id,
-    name: options.name,
-    stream: process.stdout!,
+    streams: [
+      process.stdout!,
+      process.stderr!,
+    ],
   })
 
   process.on('exit', () => {
diff --git a/packages/devtools/src/server-rpc/terminal.ts b/packages/devtools/src/server-rpc/terminal.ts
index 8f1b744650..4144da41b3 100644
--- a/packages/devtools/src/server-rpc/terminal.ts
+++ b/packages/devtools/src/server-rpc/terminal.ts
@@ -9,12 +9,13 @@ export function setupTerminalRPC({ nuxt, birpc }: RPCContext) {
       ...terminal,
     }
     clone.id ||= Math.random().toString() // TODO: use random id
-    clone.content ||= ''
-    clone.stream?.on('data', (data) => {
-      const delta = data.toString()
-      clone.content += delta
-      birpc.broadcast.onTerminalData.asEvent(clone.id, delta)
-    })
+    clone.buffer ||= ''
+    clone.streams
+      ?.forEach(s => s.on('data', (data) => {
+        const delta = data.toString()
+        clone.buffer += delta
+        birpc.broadcast.onTerminalData.asEvent(clone.id, delta)
+      }))
     terminals.push(clone)
   })
 
diff --git a/packages/devtools/src/types/integrations.ts b/packages/devtools/src/types/integrations.ts
index d1cba7948b..874a8b5270 100644
--- a/packages/devtools/src/types/integrations.ts
+++ b/packages/devtools/src/types/integrations.ts
@@ -115,6 +115,23 @@ export interface TerminalInfo {
 }
 
 export interface TerminalData extends TerminalInfo {
-  stream?: Stream
-  content?: string
+  /**
+   * Streams to be piped to the terminal
+   */
+  streams?: Stream[]
+
+  /**
+   * User action to restart the terminal, when not provided, this action will be disabled
+   */
+  onRestart?: () => Promise<void>
+
+  /**
+   * User action to terminate the terminal, when not provided, this action will be disabled
+   */
+  onTerminate?: () => Promise<void>
+
+  /**
+   * Content buffer
+   */
+  buffer?: string
 }

From ff513ae11dac139a38fbe54674bcacfc4fb24e07 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Mon, 13 Mar 2023 20:09:52 +0100
Subject: [PATCH 3/6] refactor: update

---
 local.ts                                      |  4 +-
 .../client/components/TerminalView.vue        |  4 +-
 packages/devtools/client/composables/state.ts |  8 +-
 .../client/pages/modules/terminals.vue        | 17 ++--
 packages/devtools/src/integrations/vscode.ts  |  6 +-
 packages/devtools/src/kit/index.ts            | 81 ++++++++++++++-----
 packages/devtools/src/server-rpc/terminal.ts  | 74 +++++++++++------
 packages/devtools/src/types/hooks.ts          | 20 ++++-
 packages/devtools/src/types/integrations.ts   | 18 ++---
 packages/devtools/src/types/rpc.ts            |  6 +-
 10 files changed, 159 insertions(+), 79 deletions(-)

diff --git a/local.ts b/local.ts
index d66ca2b33f..97be7670ea 100644
--- a/local.ts
+++ b/local.ts
@@ -58,7 +58,7 @@ export default defineNuxtModule<ModuleOptions>({
     })
 
     nuxt.hook('app:resolve', () => {
-      const subprocess = startSubprocess(
+      startSubprocess(
         {
           command: 'npx',
           args: ['nuxi', 'dev', '--port', PORT.toString()],
@@ -71,8 +71,6 @@ export default defineNuxtModule<ModuleOptions>({
           icon: 'logos-nuxt-icon',
         },
       )
-
-      subprocess.stderr?.pipe(process.stderr)
     })
 
     logger.info(`Nuxt Devtools is using local client from \`${clientDir}\``)
diff --git a/packages/devtools/client/components/TerminalView.vue b/packages/devtools/client/components/TerminalView.vue
index f5ffbc2dd9..9a834221eb 100644
--- a/packages/devtools/client/components/TerminalView.vue
+++ b/packages/devtools/client/components/TerminalView.vue
@@ -25,11 +25,11 @@ onMounted(async () => {
     fitAddon.fit()
   })
 
-  const data = await rpc.getTerminal(props.id)
+  const data = await rpc.getTerminalDetail(props.id)
   if (data?.buffer)
     term.write(data.buffer)
 
-  nuxt.hook('devtools:terminal:data', ({ id, data }) => {
+  nuxt.hook('devtools:terminal:data', (id: string, data: string) => {
     if (id === props.id)
       term.write(data)
   })
diff --git a/packages/devtools/client/composables/state.ts b/packages/devtools/client/composables/state.ts
index 245fd65a85..bf867c79d5 100644
--- a/packages/devtools/client/composables/state.ts
+++ b/packages/devtools/client/composables/state.ts
@@ -28,13 +28,13 @@ export function useComponents() {
       .filter(i => !/^Lazy[A-Z]/.test(i.pascalName))
       // dedupe server components
       .filter(i => !(serverComponents.value || [])
-        .find(s => s.pascalName === i.pascalName)),
+        .find((s: any) => s.pascalName === i.pascalName)),
   )
 
   return computed(() => [
     ...globalComponents.value,
     ...serverComponents.value || [],
-  ].sort((a, b) => a.pascalName.localeCompare(b.pascalName)))
+  ].sort((a: any, b: any) => a.pascalName.localeCompare(b.pascalName)))
 }
 
 export function getPackageVersions() {
@@ -75,6 +75,10 @@ export function useCustomTabs() {
   return useAsyncState('getCustomTabs', () => rpc.getCustomTabs())
 }
 
+export function useTerminals() {
+  return useAsyncState('getTerminals', () => rpc.getTerminals())
+}
+
 export function useTabs() {
   const router = useRouter()
   const customTabs = useCustomTabs()
diff --git a/packages/devtools/client/pages/modules/terminals.vue b/packages/devtools/client/pages/modules/terminals.vue
index eb697f6a18..9dcb8b3ef6 100644
--- a/packages/devtools/client/pages/modules/terminals.vue
+++ b/packages/devtools/client/pages/modules/terminals.vue
@@ -1,21 +1,26 @@
 <script setup lang="ts">
-import type { TerminalData } from '~~/../src/types'
+import type { TerminalInfo } from '~~/../src/types'
 
 definePageMeta({
   icon: 'carbon-terminal',
   title: 'Terminals',
 })
 
-const terminals = await rpc.listTerminals()
+const terminals = useTerminals()
 
-const selected = ref<TerminalData>(terminals[0])
+const selected = ref<TerminalInfo | undefined>(terminals.value?.[0])
+
+watchEffect(() => {
+  if (terminals.value?.length && !selected.value)
+    selected.value = terminals.value[0]
+})
 </script>
 
 <template>
-  <div v-if="terminals.length" h-full w-full of-hidden grid="~ rows-[max-content_max-content_1fr]">
+  <div v-if="terminals?.length" h-full w-full of-hidden grid="~ rows-[max-content_max-content_1fr]">
     <!-- TODO: Refactor to have general component -->
     <div ref="navbar" flex="~ gap-2" border="b base" navbar-glass flex-1 items-center>
-      <button v-for="t of terminals" :key="t.id" border="r base" px3 py2 flex="~ gap-1" items-center @click="selected = t">
+      <button v-for="t of terminals" :key="t.id" border="r base" flex="~ gap-1" items-center px3 py2 @click="selected = t">
         <NIcon v-if="t.icon " :icon="t.icon" />
         {{ t.name }}
       </button>
@@ -31,7 +36,7 @@ const selected = ref<TerminalData>(terminals[0])
       <TerminalView :id="selected.id" :key="selected.id" />
     </template>
   </div>
-  <div h-full items-center flex justify-center>
+  <div v-else h-full items-center flex justify-center>
     <em op50>No terminal attached</em>
   </div>
 </template>
diff --git a/packages/devtools/src/integrations/vscode.ts b/packages/devtools/src/integrations/vscode.ts
index 953ad4e132..02ae104e79 100644
--- a/packages/devtools/src/integrations/vscode.ts
+++ b/packages/devtools/src/integrations/vscode.ts
@@ -33,7 +33,7 @@ export async function setup({ nuxt, options }: RPCContext) {
 
     logger.info(LOG_PREFIX, `Starting VS Code Server at ${url} ...`)
 
-    const command = startSubprocess(
+    startSubprocess(
       {
         command: 'code-server',
         args: [
@@ -50,10 +50,6 @@ export async function setup({ nuxt, options }: RPCContext) {
       },
     )
 
-    nuxt.hook('close', () => {
-      command.kill()
-    })
-
     await waitOn({
       resources: [url],
       timeout: 20_000,
diff --git a/packages/devtools/src/kit/index.ts b/packages/devtools/src/kit/index.ts
index 990696e904..59cca079f1 100644
--- a/packages/devtools/src/kit/index.ts
+++ b/packages/devtools/src/kit/index.ts
@@ -32,33 +32,72 @@ interface SubprocessOptions extends ExecaOptions {
 /**
  * Create a subprocess that handled by the DevTools.
  */
-export function startSubprocess(execaOptions: SubprocessOptions, tabOptions: TerminalInfo, nuxt = useNuxt()) {
-  const process = execa(
-    execaOptions.command,
-    execaOptions.args,
-    {
-      ...execaOptions,
-      env: {
-        COLORS: 'true',
-        FORCE_COLOR: 'true',
-        ...execaOptions.env,
+export function startSubprocess(
+  execaOptions: SubprocessOptions,
+  tabOptions: TerminalInfo,
+  nuxt = useNuxt(),
+) {
+  const id = tabOptions.id
+
+  function start() {
+    const process = execa(
+      execaOptions.command,
+      execaOptions.args,
+      {
+        ...execaOptions,
+        env: {
+          COLORS: 'true',
+          FORCE_COLOR: 'true',
+          ...execaOptions.env,
+        },
       },
-    },
-  )
+    )
+
+    process.stdout!.on('data', (data) => {
+      nuxt.callHook('devtools:terminal:write', id, data)
+    })
+    process.stderr!.on('data', (data) => {
+      nuxt.callHook('devtools:terminal:write', id, data)
+    })
+    process.on('exit', () => {
+      nuxt.callHook('devtools:terminal:remove', id)
+    })
+
+    return process
+  }
 
-  const id = (tabOptions.id || process.pid || execaOptions.command).toString()
   nuxt.callHook('devtools:terminal:register', {
+    onActionRestart: restart,
+    onActionTerminate: terminate,
     ...tabOptions,
-    id,
-    streams: [
-      process.stdout!,
-      process.stderr!,
-    ],
   })
 
-  process.on('exit', () => {
-    // TODO: unregister terminal
+  nuxt.hook('close', () => {
+    terminate()
   })
 
-  return process
+  let process = start()
+
+  function restart() {
+    process?.kill()
+    nuxt.callHook('devtools:terminal:register', tabOptions)
+    process = start()
+  }
+
+  function terminate() {
+    try {
+      process?.kill()
+    }
+    catch (e) {
+    }
+    nuxt.callHook('devtools:terminal:remove', id)
+  }
+
+  return {
+    getProcess() {
+      return process
+    },
+    terminate,
+    restart,
+  }
 }
diff --git a/packages/devtools/src/server-rpc/terminal.ts b/packages/devtools/src/server-rpc/terminal.ts
index 4144da41b3..8b7fb2db17 100644
--- a/packages/devtools/src/server-rpc/terminal.ts
+++ b/packages/devtools/src/server-rpc/terminal.ts
@@ -1,36 +1,60 @@
-import type { ServerFunctions, TerminalData } from '../types'
+import type { ServerFunctions, TerminalInfo, TerminalState } from '../types'
 import type { RPCContext } from './types'
+import type {} from '../types/hooks'
 
-export function setupTerminalRPC({ nuxt, birpc }: RPCContext) {
-  const terminals: TerminalData[] = []
+export function setupTerminalRPC({ nuxt, birpc, refresh }: RPCContext) {
+  const terminals = new Map<string, TerminalState>()
 
   nuxt.hook('devtools:terminal:register', (terminal) => {
-    const clone = {
-      ...terminal,
-    }
-    clone.id ||= Math.random().toString() // TODO: use random id
-    clone.buffer ||= ''
-    clone.streams
-      ?.forEach(s => s.on('data', (data) => {
-        const delta = data.toString()
-        clone.buffer += delta
-        birpc.broadcast.onTerminalData.asEvent(clone.id, delta)
-      }))
-    terminals.push(clone)
+    terminals.set(terminal.id, terminal)
+    refresh('getTerminals')
+    return terminal.id
+  })
+
+  nuxt.hook('devtools:terminal:remove', (id) => {
+    if (!terminals.has(id))
+      return false
+    terminals.delete(id)
+    refresh('getTerminals')
+    return true
+  })
+
+  nuxt.hook('devtools:terminal:write', (id: string, data: string) => {
+    const terminal = terminals.get(id)
+    if (!terminal)
+      return false
+
+    terminal.buffer ||= ''
+    terminal.buffer += data
+    birpc.broadcast.onTerminalData.asEvent(id, data)
+    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)
+      return
+    return {
+      id: terminal.id,
+      name: terminal.name,
+      description: terminal.description,
+      icon: terminal.icon,
+      terminatable: !!terminal.onActionTerminate,
+      restartable: !!terminal.onActionRestart,
+      buffer: buffer
+        ? terminal.buffer
+        : undefined,
+    }
+  }
+
   return {
-    listTerminals() {
-      return terminals.map(i => ({
-        id: i.id,
-        name: i.name,
-        description: i.description,
-        icon: i.icon,
-      }))
+    getTerminals() {
+      return Array.from(terminals.values())
+        .map(i => serializeTerminal(i))
     },
-    getTerminal(id: string) {
-      const terminal = terminals.find(t => t.id === id)
-      return terminal
+    getTerminalDetail(id: string) {
+      return serializeTerminal(terminals.get(id), true)
     },
   } satisfies Partial<ServerFunctions>
 }
diff --git a/packages/devtools/src/types/hooks.ts b/packages/devtools/src/types/hooks.ts
index af3a865b1b..f955ec4674 100644
--- a/packages/devtools/src/types/hooks.ts
+++ b/packages/devtools/src/types/hooks.ts
@@ -1,5 +1,5 @@
 import type { ModuleCustomTab } from './custom-tabs'
-import type { TerminalData } from './integrations'
+import type { TerminalState } from './integrations'
 
 declare module '@nuxt/schema' {
   interface NuxtHooks {
@@ -26,7 +26,21 @@ declare module '@nuxt/schema' {
     /**
      * Register a terminal.
      */
-    'devtools:terminal:register': (terminal: TerminalData) => void
+    'devtools:terminal:register': (terminal: TerminalState) => void
+
+    /**
+     * Write to a terminal.
+     *
+     * Returns true if terminal is found.
+     */
+    'devtools:terminal:write': (id: string, content: string) => void
+
+    /**
+     * Remove a terminal from devtools.
+     *
+     * Returns true if terminal is found and deleted.
+     */
+    'devtools:terminal:remove': (id: string) => void
   }
 }
 
@@ -38,7 +52,7 @@ declare module '@nuxt/schema' {
     /**
      * On terminal data.
      */
-    'devtools:terminal:data': (data: { id: string; data: string }) => void
+    'devtools:terminal:data': (id: string, data: string) => void
   }
 }
 
diff --git a/packages/devtools/src/types/integrations.ts b/packages/devtools/src/types/integrations.ts
index 874a8b5270..98b9b2615f 100644
--- a/packages/devtools/src/types/integrations.ts
+++ b/packages/devtools/src/types/integrations.ts
@@ -1,4 +1,3 @@
-import type { Stream } from 'node:stream'
 import type { Import, UnimportMeta } from 'unimport'
 import type { VueInspectorClient } from 'vite-plugin-vue-inspector'
 import type { RouteRecordNormalized } from 'vue-router'
@@ -107,28 +106,29 @@ export interface CodeSnippet {
   docs?: string
 }
 
-export interface TerminalInfo {
+export interface TerminalBase {
   id: string
   name: string
   description?: string
   icon?: string
 }
 
-export interface TerminalData extends TerminalInfo {
-  /**
-   * Streams to be piped to the terminal
-   */
-  streams?: Stream[]
+export interface TerminalInfo extends TerminalBase {
+  restartable?: boolean
+  terminatable?: boolean
+  buffer?: string
+}
 
+export interface TerminalState extends TerminalBase {
   /**
    * User action to restart the terminal, when not provided, this action will be disabled
    */
-  onRestart?: () => Promise<void>
+  onActionRestart?: () => Promise<void> | void
 
   /**
    * User action to terminate the terminal, when not provided, this action will be disabled
    */
-  onTerminate?: () => Promise<void>
+  onActionTerminate?: () => Promise<void> | void
 
   /**
    * Content buffer
diff --git a/packages/devtools/src/types/rpc.ts b/packages/devtools/src/types/rpc.ts
index c44a3d5a5b..05bd799142 100644
--- a/packages/devtools/src/types/rpc.ts
+++ b/packages/devtools/src/types/rpc.ts
@@ -4,7 +4,7 @@ import type { StorageValue } from 'unstorage'
 import type { Component } from 'vue'
 import type { WizardActions, WizardArgs } from '../wizard'
 import type { ModuleCustomTab } from './custom-tabs'
-import type { AssetInfo, AutoImportsWithMetadata, HookInfo, ImageMeta, TerminalData, TerminalInfo, UpdateInfo } from './integrations'
+import type { AssetInfo, AutoImportsWithMetadata, HookInfo, ImageMeta, TerminalInfo, UpdateInfo } from './integrations'
 import type { ComponentRelationship } from './module'
 
 export interface ServerFunctions {
@@ -21,8 +21,8 @@ export interface ServerFunctions {
   getPackageVersions(): UpdateInfo[]
 
   // Terminal
-  listTerminals(): TerminalInfo[]
-  getTerminal(id: string): TerminalData | undefined
+  getTerminals(): TerminalInfo[]
+  getTerminalDetail(id: string): TerminalInfo | undefined
 
   // Storage
   getStorageMounts(): Promise<StorageMounts>

From a7013c6e8bddf0336a11e35e0d0680432d8a0ba5 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Tue, 14 Mar 2023 12:18:40 +0100
Subject: [PATCH 4/6] feat: terminal actions

---
 .../client/components/TerminalView.vue        | 30 +++++++++----
 .../client/pages/modules/terminals.vue        | 42 ++++++++++++-------
 packages/devtools/client/setup/client-rpc.ts  |  5 +++
 packages/devtools/src/kit/index.ts            | 32 +++++++++-----
 packages/devtools/src/server-rpc/terminal.ts  | 24 ++++++++++-
 packages/devtools/src/types/integrations.ts   |  2 +
 packages/devtools/src/types/rpc.ts            |  4 +-
 7 files changed, 105 insertions(+), 34 deletions(-)

diff --git a/packages/devtools/client/components/TerminalView.vue b/packages/devtools/client/components/TerminalView.vue
index 9a834221eb..deda969306 100644
--- a/packages/devtools/client/components/TerminalView.vue
+++ b/packages/devtools/client/components/TerminalView.vue
@@ -2,6 +2,7 @@
 import { Terminal } from 'xterm'
 import { FitAddon } from 'xterm-addon-fit'
 import 'xterm/css/xterm.css'
+import type { TerminalInfo } from '../../src/types'
 
 const props = defineProps<{
   id: string
@@ -9,12 +10,14 @@ const props = defineProps<{
 
 const container = ref<HTMLElement>()
 const nuxt = useNuxtApp()
+const info = ref<TerminalInfo>()
+let term: Terminal
 
 onMounted(async () => {
-  const term = new Terminal({
-    cursorBlink: true,
+  term = new Terminal({
     convertEol: true,
-    cols: 140,
+    cols: 80,
+    screenReaderMode: true,
   })
   const fitAddon = new FitAddon()
   term.loadAddon(fitAddon)
@@ -25,17 +28,30 @@ onMounted(async () => {
     fitAddon.fit()
   })
 
-  const data = await rpc.getTerminalDetail(props.id)
-  if (data?.buffer)
-    term.write(data.buffer)
+  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: string, data: string) => {
     if (id === props.id)
       term.write(data)
   })
 })
+
+function clear() {
+  rpc.runTerminalAction(props.id, 'clear')
+  term?.clear()
+}
 </script>
 
 <template>
-  <div ref="container" h-full w-full of-auto px4 bg-black />
+  <div border="b base" p2 flex="~ gap-2">
+    <span>{{ info?.description }}</span>
+    <span class="flex-auto" />
+    <NIconButton title="Clear" icon="i-carbon-clean" @click="clear()" />
+    <NIconButton v-if="info?.restartable" title="Refresh" icon="carbon-renew" @click="rpc.runTerminalAction(id, 'restart')" />
+    <NIconButton v-if="info?.terminatable" title="Terminate" icon="carbon-delete" @click="rpc.runTerminalAction(id, 'terminate')" />
+  </div>
+  <div ref="container" h-full w-full of-auto bg-black />
 </template>
diff --git a/packages/devtools/client/pages/modules/terminals.vue b/packages/devtools/client/pages/modules/terminals.vue
index 9dcb8b3ef6..5994eb72cc 100644
--- a/packages/devtools/client/pages/modules/terminals.vue
+++ b/packages/devtools/client/pages/modules/terminals.vue
@@ -1,42 +1,56 @@
 <script setup lang="ts">
-import type { TerminalInfo } from '~~/../src/types'
-
 definePageMeta({
   icon: 'carbon-terminal',
   title: 'Terminals',
 })
 
 const terminals = useTerminals()
+const route = useRoute()
+const router = useRouter()
 
-const selected = ref<TerminalInfo | undefined>(terminals.value?.[0])
+const selected = computed(() => {
+  const id = route.query.id as string
+  return terminals.value?.find(t => t.id === id)
+})
 
 watchEffect(() => {
-  if (terminals.value?.length && !selected.value)
-    selected.value = terminals.value[0]
+  if (!route.query.id && terminals.value?.length)
+    router.replace(`/modules/terminals?id=${encodeURIComponent(terminals.value[0].id)}`)
 })
 </script>
 
 <template>
   <div v-if="terminals?.length" h-full w-full of-hidden grid="~ rows-[max-content_max-content_1fr]">
     <!-- TODO: Refactor to have general component -->
-    <div ref="navbar" flex="~ gap-2" border="b base" navbar-glass flex-1 items-center>
-      <button v-for="t of terminals" :key="t.id" border="r base" flex="~ gap-1" items-center px3 py2 @click="selected = t">
+    <div ref="navbar" flex="~" border="b base" navbar-glass flex-1 items-center>
+      <NuxtLink
+        v-for="t of terminals"
+        :key="t.id" border="r base"
+        flex="~ gap-2" items-center px3 py2
+        :to="`/modules/terminals?id=${encodeURIComponent(t.id)}` "
+      >
         <NIcon v-if="t.icon " :icon="t.icon" />
         {{ t.name }}
-      </button>
+      </NuxtLink>
     </div>
 
     <template v-if="selected">
-      <div border="b base" p2 flex="~">
-        <span>{{ selected.description }}</span>
-        <span class="flex-auto" />
-        <!-- TODO: -->
-        <NIconButton title="Refresh" icon="carbon-renew" />
-      </div>
       <TerminalView :id="selected.id" :key="selected.id" />
     </template>
+    <template v-else>
+      <div>
+        Terminal not found
+      </div>
+    </template>
   </div>
   <div v-else h-full items-center flex 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/setup/client-rpc.ts b/packages/devtools/client/setup/client-rpc.ts
index 28c8f3a046..3d34658bdf 100644
--- a/packages/devtools/client/setup/client-rpc.ts
+++ b/packages/devtools/client/setup/client-rpc.ts
@@ -3,6 +3,7 @@ import type {} from '../../src/types/hooks'
 
 export function setupClientRPC() {
   const nuxt = useNuxtApp()
+  const router = useRouter()
 
   Object.assign(clientFunctions, {
     async refresh(type) {
@@ -13,7 +14,11 @@ export function setupClientRPC() {
       nuxt.hooks.callHookParallel(hook as any, ...args)
     },
     async onTerminalData(id: string, data: string) {
+      // @ts-expect-error fail to extend hooks
       nuxt.hooks.callHookParallel('devtools:terminal:data', { id, data })
     },
+    async navigateTo(path: string) {
+      router.push(path)
+    },
   } satisfies ClientFunctions)
 }
diff --git a/packages/devtools/src/kit/index.ts b/packages/devtools/src/kit/index.ts
index 59cca079f1..cdd5b04eb4 100644
--- a/packages/devtools/src/kit/index.ts
+++ b/packages/devtools/src/kit/index.ts
@@ -1,7 +1,7 @@
 import { useNuxt } from '@nuxt/kit'
 import type { Options as ExecaOptions } from 'execa'
 import { execa } from 'execa'
-import type { ModuleCustomTab, TerminalInfo } from '../types'
+import type { ModuleCustomTab, TerminalState } from '../types'
 import type {} from '../types/hooks'
 
 /**
@@ -34,7 +34,7 @@ interface SubprocessOptions extends ExecaOptions {
  */
 export function startSubprocess(
   execaOptions: SubprocessOptions,
-  tabOptions: TerminalInfo,
+  tabOptions: TerminalState,
   nuxt = useNuxt(),
 ) {
   const id = tabOptions.id
@@ -59,19 +59,14 @@ export function startSubprocess(
     process.stderr!.on('data', (data) => {
       nuxt.callHook('devtools:terminal:write', id, data)
     })
-    process.on('exit', () => {
-      nuxt.callHook('devtools:terminal:remove', id)
+    process.on('exit', (code) => {
+      nuxt.callHook('devtools:terminal:write', id, `\nprocess terminalated with ${code}\n`)
     })
 
     return process
   }
 
-  nuxt.callHook('devtools:terminal:register', {
-    onActionRestart: restart,
-    onActionTerminate: terminate,
-    ...tabOptions,
-  })
-
+  register()
   nuxt.hook('close', () => {
     terminate()
   })
@@ -80,10 +75,16 @@ export function startSubprocess(
 
   function restart() {
     process?.kill()
-    nuxt.callHook('devtools:terminal:register', tabOptions)
+
+    clear()
     process = start()
   }
 
+  function clear() {
+    tabOptions.buffer = ''
+    register()
+  }
+
   function terminate() {
     try {
       process?.kill()
@@ -93,11 +94,20 @@ export function startSubprocess(
     nuxt.callHook('devtools:terminal:remove', id)
   }
 
+  function register() {
+    nuxt.callHook('devtools:terminal:register', {
+      onActionRestart: restart,
+      onActionTerminate: terminate,
+      ...tabOptions,
+    })
+  }
+
   return {
     getProcess() {
       return process
     },
     terminate,
     restart,
+    clear,
   }
 }
diff --git a/packages/devtools/src/server-rpc/terminal.ts b/packages/devtools/src/server-rpc/terminal.ts
index 8b7fb2db17..e44b9d2a33 100644
--- a/packages/devtools/src/server-rpc/terminal.ts
+++ b/packages/devtools/src/server-rpc/terminal.ts
@@ -1,4 +1,4 @@
-import type { ServerFunctions, TerminalInfo, TerminalState } from '../types'
+import type { ServerFunctions, TerminalAction, TerminalInfo, TerminalState } from '../types'
 import type { RPCContext } from './types'
 import type {} from '../types/hooks'
 
@@ -56,5 +56,27 @@ export function setupTerminalRPC({ nuxt, birpc, refresh }: RPCContext) {
     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 'clear':
+          terminal.buffer = ''
+          refresh('getTerminals')
+          return true
+      }
+    },
   } satisfies Partial<ServerFunctions>
 }
diff --git a/packages/devtools/src/types/integrations.ts b/packages/devtools/src/types/integrations.ts
index 98b9b2615f..e30f3d73bf 100644
--- a/packages/devtools/src/types/integrations.ts
+++ b/packages/devtools/src/types/integrations.ts
@@ -113,6 +113,8 @@ export interface TerminalBase {
   icon?: string
 }
 
+export type TerminalAction = 'restart' | 'terminate' | 'clear'
+
 export interface TerminalInfo extends TerminalBase {
   restartable?: boolean
   terminatable?: boolean
diff --git a/packages/devtools/src/types/rpc.ts b/packages/devtools/src/types/rpc.ts
index 05bd799142..e3fe8c910c 100644
--- a/packages/devtools/src/types/rpc.ts
+++ b/packages/devtools/src/types/rpc.ts
@@ -4,7 +4,7 @@ import type { StorageValue } from 'unstorage'
 import type { Component } from 'vue'
 import type { WizardActions, WizardArgs } from '../wizard'
 import type { ModuleCustomTab } from './custom-tabs'
-import type { AssetInfo, AutoImportsWithMetadata, HookInfo, ImageMeta, TerminalInfo, UpdateInfo } from './integrations'
+import type { AssetInfo, AutoImportsWithMetadata, HookInfo, ImageMeta, TerminalAction, TerminalInfo, UpdateInfo } from './integrations'
 import type { ComponentRelationship } from './module'
 
 export interface ServerFunctions {
@@ -23,6 +23,7 @@ export interface ServerFunctions {
   // Terminal
   getTerminals(): TerminalInfo[]
   getTerminalDetail(id: string): TerminalInfo | undefined
+  runTerminalAction(id: string, action: TerminalAction): Promise<boolean>
 
   // Storage
   getStorageMounts(): Promise<StorageMounts>
@@ -44,6 +45,7 @@ export interface ServerFunctions {
 export interface ClientFunctions {
   refresh(event: ClientUpdateEvent): void
   callHook(hook: string, ...args: any[]): Promise<void>
+  navigateTo(path: string): void
 
   onTerminalData(id: string, data: string): void
 }

From fcc57f0a824a6d2e20665cd95e8563142d51c41f Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Tue, 14 Mar 2023 12:22:17 +0100
Subject: [PATCH 5/6] chore: style terminals

---
 packages/devtools/client/pages/modules/terminals.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/devtools/client/pages/modules/terminals.vue b/packages/devtools/client/pages/modules/terminals.vue
index 5994eb72cc..095c8acb29 100644
--- a/packages/devtools/client/pages/modules/terminals.vue
+++ b/packages/devtools/client/pages/modules/terminals.vue
@@ -27,10 +27,13 @@ watchEffect(() => {
         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' : ''"
         :to="`/modules/terminals?id=${encodeURIComponent(t.id)}` "
       >
         <NIcon v-if="t.icon " :icon="t.icon" />
-        {{ t.name }}
+        <span :class="t.id === selected?.id ? '' : 'op50'">
+          {{ t.name }}
+        </span>
       </NuxtLink>
     </div>
 

From ba20357a014873d9854886976f65d1187a4c3319 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Tue, 14 Mar 2023 12:34:30 +0100
Subject: [PATCH 6/6] docs: update

---
 docs/content/2.module/0.guide.md              |  2 +
 docs/content/2.module/1.utils-kit.md          | 71 +++++++++++++++++++
 .../2.module/{1.ui-kit.md => 2.ui-kit.md}     |  0
 docs/nuxt.config.ts                           |  5 +-
 packages/devtools/src/integrations/vscode.ts  |  2 +-
 packages/devtools/src/kit/index.ts            |  2 +-
 6 files changed, 79 insertions(+), 3 deletions(-)
 create mode 100644 docs/content/2.module/1.utils-kit.md
 rename docs/content/2.module/{1.ui-kit.md => 2.ui-kit.md} (100%)

diff --git a/docs/content/2.module/0.guide.md b/docs/content/2.module/0.guide.md
index 2c9211a228..05271636cd 100644
--- a/docs/content/2.module/0.guide.md
+++ b/docs/content/2.module/0.guide.md
@@ -60,6 +60,8 @@ nuxt.hook('devtools:customTabs', (tabs) => {
 })
 ```
 
+Learn more about [DevTools Utility Kit](/module/utils-kit).
+
 ## Lazy Service Launching
 
 If the view you are contributing is heavy to load, you can have the tab first and let user launch it when they need it.
diff --git a/docs/content/2.module/1.utils-kit.md b/docs/content/2.module/1.utils-kit.md
new file mode 100644
index 0000000000..21c8f2fbc8
--- /dev/null
+++ b/docs/content/2.module/1.utils-kit.md
@@ -0,0 +1,71 @@
+# Utility Kit
+
+::alert{type=warning}
+APIs are subject to change.
+::
+
+Since v0.3.0, we are now providing a utility kit for easier DevTools integrations, similar to `@nuxt/kit`.
+
+It can be access via `@nuxt/devtools/kit`:
+
+```ts
+import { addCustomTab } from '@nuxt/devtools/kit'
+```
+
+Generally, we recommend to module authors to install `@nuxt/devtools` as a dev dependency and bundled `@nuxt/devtools/kit` into your module.
+
+## `addCustomTab()`
+
+A shorthand for calling the hook `devtools:customTabs`.
+
+```ts
+import { addCustomTab } from '@nuxt/devtools/kit'
+
+addCustomTab(() => ({
+  // unique identifier
+  name: 'my-module',
+  // title to display in the tab
+  title: 'My Module',
+  // any icon from Iconify, or a URL to an image
+  icon: 'carbon:apps',
+  // iframe view
+  view: {
+    type: 'iframe',
+    src: '/url-to-your-module-view',
+  },
+}))
+```
+
+## `refreshCustomTabs()`
+
+A shorthand for call hook `devtools:customTabs:refresh`. It will refresh all custom tabs.
+
+## `startSubprocess()`
+
+Start a sub process using `execa` and create a terminal tab in DevTools.
+
+```ts
+import { startSubprocess } from '@nuxt/devtools/kit'
+
+const subprocess = startSubprocess(
+  {
+    command: 'code-server',
+    args: [
+      'serve-local',
+      '--accept-server-license-terms',
+      '--without-connection-token',
+      `--port=${port}`,
+    ],
+  },
+  {
+    id: 'devtools:vscode',
+    name: 'VS Code Server',
+    icon: 'logos-visual-studio-code',
+  },
+)
+```
+
+```ts
+subprocess.restart()
+subprocess.terminate()
+```
diff --git a/docs/content/2.module/1.ui-kit.md b/docs/content/2.module/2.ui-kit.md
similarity index 100%
rename from docs/content/2.module/1.ui-kit.md
rename to docs/content/2.module/2.ui-kit.md
diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts
index 848bf1292b..771ebc4262 100644
--- a/docs/nuxt.config.ts
+++ b/docs/nuxt.config.ts
@@ -1,4 +1,7 @@
 export default defineNuxtConfig({
   extends: '@nuxt-themes/docus',
-  modules: ['@nuxtjs/plausible'],
+  modules: [
+    '@nuxtjs/plausible',
+    '../local',
+  ],
 })
diff --git a/packages/devtools/src/integrations/vscode.ts b/packages/devtools/src/integrations/vscode.ts
index 02ae104e79..88420ff4f3 100644
--- a/packages/devtools/src/integrations/vscode.ts
+++ b/packages/devtools/src/integrations/vscode.ts
@@ -40,7 +40,7 @@ export async function setup({ nuxt, options }: RPCContext) {
           'serve-local',
           '--accept-server-license-terms',
           '--without-connection-token',
-        `--port=${port}`,
+          `--port=${port}`,
         ],
       },
       {
diff --git a/packages/devtools/src/kit/index.ts b/packages/devtools/src/kit/index.ts
index cdd5b04eb4..31f285af44 100644
--- a/packages/devtools/src/kit/index.ts
+++ b/packages/devtools/src/kit/index.ts
@@ -24,7 +24,7 @@ export function refreshCustomTabs(nuxt = useNuxt()) {
   return nuxt.callHook('devtools:customTabs:refresh')
 }
 
-interface SubprocessOptions extends ExecaOptions {
+export interface SubprocessOptions extends ExecaOptions {
   command: string
   args?: string[]
 }