feat(self-inspect): add auth tokens management tab

Add an "Auth Tokens" tab to the self-inspect debug panel that lists all
trusted clients with their auth ID, user agent, origin, and trust date.
Each token can be revoked individually.

- Add get-auth-tokens and revoke-auth-token RPC functions
- Export getInternalContext from @vitejs/devtools for cross-package access
- Add AuthTokensList component and auth page to self-inspect UI

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: antfu

packages/core/src/index.ts

@@ -1,3 +1,5 @@
 export { createDevToolsContext } from './node/context'
+export { getInternalContext } from './node/context-internal'
+export type { DevToolsInternalContext, InternalAnonymousAuthStorage } from './node/context-internal'
 export { DevTools } from './node/plugins'
 export { createDevToolsMiddleware } from './node/server'

packages/self-inspect/package.json

@@ -32,6 +32,7 @@
     "prepack": "pnpm build"
   },
   "dependencies": {
+    "@vitejs/devtools": "workspace:*",
     "@vitejs/devtools-kit": "workspace:*",
     "@vitejs/devtools-rpc": "workspace:*",
     "birpc": "catalog:deps",

packages/self-inspect/src/app/app.vue

@@ -16,6 +16,7 @@ const navItems = [
   { title: 'Docks', to: '/docks', icon: 'i-ph-layout-duotone' },
   { title: 'Client Scripts', to: '/scripts', icon: 'i-ph-code-duotone' },
   { title: 'Plugins', to: '/plugins', icon: 'i-ph-puzzle-piece-duotone' },
+  { title: 'Auth Tokens', to: '/auth', icon: 'i-ph-key-duotone' },
 ]
 
 const { refresh, loading } = useRefresh()

packages/self-inspect/src/app/components/AuthTokensList.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+interface AuthToken {
+  authId: string
+  ua: string
+  origin: string
+  timestamp: number
+}
+
+defineProps<{
+  tokens: AuthToken[]
+}>()
+
+const emit = defineEmits<{
+  revoke: [authId: string]
+}>()
+
+function formatDate(timestamp: number): string {
+  return new Date(timestamp).toLocaleString()
+}
+</script>
+
+<template>
+  <div flex="~ col gap-3" p4>
+    <div flex="~ items-center gap-3" text-xs>
+      <span op60>
+        {{ tokens.length }} trusted client{{ tokens.length !== 1 ? 's' : '' }}
+      </span>
+    </div>
+
+    <div v-if="tokens.length === 0" op40 text-sm py4 text-center>
+      No auth tokens found.
+    </div>
+
+    <table v-else w-full text-sm>
+      <thead>
+        <tr border="b base" text-left>
+          <th px2 py1 font-medium op60 text-xs>
+            Auth ID
+          </th>
+          <th px2 py1 font-medium op60 text-xs>
+            User Agent
+          </th>
+          <th px2 py1 font-medium op60 text-xs>
+            Origin
+          </th>
+          <th px2 py1 font-medium op60 text-xs>
+            Trusted At
+          </th>
+          <th px2 py1 font-medium op60 text-xs text-center>
+            Actions
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr
+          v-for="token in tokens" :key="token.authId"
+          border="b base" hover:bg-active
+        >
+          <td px2 py1.5 font-mono text-xs>
+            {{ token.authId }}
+          </td>
+          <td px2 py1.5 text-xs op75 max-w-60 truncate>
+            {{ token.ua || '-' }}
+          </td>
+          <td px2 py1.5 text-xs op75>
+            {{ token.origin || '-' }}
+          </td>
+          <td px2 py1.5 text-xs op75>
+            {{ formatDate(token.timestamp) }}
+          </td>
+          <td px2 py1.5 text-center>
+            <button
+              text-xs px2 py0.5 rounded
+              text-red border="~ red/30"
+              hover:bg-red:10
+              @click="emit('revoke', token.authId)"
+            >
+              Revoke
+            </button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>

packages/self-inspect/src/app/pages/auth.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { useRpc } from '#imports'
+import { onMounted, shallowRef } from 'vue'
+import { useRefreshProvider } from '../composables/refresh'
+
+interface AuthToken {
+  authId: string
+  ua: string
+  origin: string
+  timestamp: number
+}
+
+const rpc = useRpc()
+const data = shallowRef<AuthToken[]>()
+
+async function fetchData() {
+  data.value = await rpc.value.call('devtoolskit:self-inspect:get-auth-tokens')
+}
+
+async function revoke(authId: string) {
+  await rpc.value.call('devtoolskit:self-inspect:revoke-auth-token', authId)
+  await fetchData()
+}
+
+useRefreshProvider(fetchData)
+onMounted(fetchData)
+</script>
+
+<template>
+  <VisualLoading v-if="!data" />
+  <AuthTokensList v-else :tokens="data" @revoke="revoke" />
+</template>

packages/self-inspect/src/node/rpc/functions/get-auth-tokens.ts

@@ -0,0 +1,17 @@
+import { getInternalContext } from '@vitejs/devtools'
+import { defineRpcFunction } from '@vitejs/devtools-kit'
+
+export const getAuthTokens = defineRpcFunction({
+  name: 'devtoolskit:self-inspect:get-auth-tokens',
+  type: 'query',
+  setup: (context) => {
+    const internal = getInternalContext(context)
+    const storage = internal.storage.auth
+    return {
+      handler: async () => {
+        const trusted = storage.value().trusted
+        return Object.values(trusted)
+      },
+    }
+  },
+})

packages/self-inspect/src/node/rpc/functions/revoke-auth-token.ts

@@ -0,0 +1,18 @@
+import { getInternalContext } from '@vitejs/devtools'
+import { defineRpcFunction } from '@vitejs/devtools-kit'
+
+export const revokeAuthToken = defineRpcFunction({
+  name: 'devtoolskit:self-inspect:revoke-auth-token',
+  type: 'action',
+  setup: (context) => {
+    const internal = getInternalContext(context)
+    const storage = internal.storage.auth
+    return {
+      handler: async (authId: string) => {
+        storage.mutate((state) => {
+          delete state.trusted[authId]
+        })
+      },
+    }
+  },
+})

packages/self-inspect/src/node/rpc/index.ts

@@ -1,15 +1,19 @@
 import type { RpcDefinitionsFilter, RpcDefinitionsToFunctions } from '@vitejs/devtools-kit'
+import { getAuthTokens } from './functions/get-auth-tokens'
 import { getClientScripts } from './functions/get-client-scripts'
 import { getDevtoolsPlugins } from './functions/get-devtools-plugins'
 import { getDocks } from './functions/get-docks'
 import { getRpcFunctions } from './functions/get-rpc-functions'
+import { revokeAuthToken } from './functions/revoke-auth-token'
 import '@vitejs/devtools-kit'
 
 export const rpcFunctions = [
   getDocks,
   getRpcFunctions,
   getClientScripts,
   getDevtoolsPlugins,
+  getAuthTokens,
+  revokeAuthToken,
 ] as const
 
 export type ServerFunctions = RpcDefinitionsToFunctions<typeof rpcFunctions>