From d921bd2d9108d27e8b14e5c144d843c536e8fc73 Mon Sep 17 00:00:00 2001
From: zhullyb <zhullyb@outlook.com>
Date: Tue, 10 Feb 2026 20:37:57 +0800
Subject: [PATCH 01/10] feat(auth): add global Pinia permission store with
 supertoken override

---
 package.json                     |   1 +
 pnpm-lock.yaml                   |  72 +++++++
 src/App.vue                      |  10 +
 src/main.ts                      |   3 +
 src/stores/usePermissionStore.ts | 310 +++++++++++++++++++++++++++++++
 5 files changed, 396 insertions(+)
 create mode 100644 src/stores/usePermissionStore.ts

diff --git a/package.json b/package.json
index 4a078d1..1591e63 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-vue-next": "^0.563.0",
+    "pinia": "^3.0.4",
     "reka-ui": "^2.8.0",
     "tailwind-merge": "^3.4.0",
     "tailwindcss": "^4.1.18",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a960827..4791367 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -26,6 +26,9 @@ importers:
       lucide-vue-next:
         specifier: ^0.563.0
         version: 0.563.0(vue@3.5.27(typescript@5.9.3))
+      pinia:
+        specifier: ^3.0.4
+        version: 3.0.4(typescript@5.9.3)(vue@3.5.27(typescript@5.9.3))
       reka-ui:
         specifier: ^2.8.0
         version: 2.8.0(vue@3.5.27(typescript@5.9.3))
@@ -451,66 +454,79 @@ packages:
     resolution: {integrity: sha512-F8sWbhZ7tyuEfsmOxwc2giKDQzN3+kuBLPwwZGyVkLlKGdV1nvnNwYD0fKQ8+XS6hp9nY7B+ZeK01EBUE7aHaw==}
     cpu: [arm]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-arm-musleabihf@4.57.1':
     resolution: {integrity: sha512-rGfNUfn0GIeXtBP1wL5MnzSj98+PZe/AXaGBCRmT0ts80lU5CATYGxXukeTX39XBKsxzFpEeK+Mrp9faXOlmrw==}
     cpu: [arm]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-arm64-gnu@4.57.1':
     resolution: {integrity: sha512-MMtej3YHWeg/0klK2Qodf3yrNzz6CGjo2UntLvk2RSPlhzgLvYEB3frRvbEF2wRKh1Z2fDIg9KRPe1fawv7C+g==}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-arm64-musl@4.57.1':
     resolution: {integrity: sha512-1a/qhaaOXhqXGpMFMET9VqwZakkljWHLmZOX48R0I/YLbhdxr1m4gtG1Hq7++VhVUmf+L3sTAf9op4JlhQ5u1Q==}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-loong64-gnu@4.57.1':
     resolution: {integrity: sha512-QWO6RQTZ/cqYtJMtxhkRkidoNGXc7ERPbZN7dVW5SdURuLeVU7lwKMpo18XdcmpWYd0qsP1bwKPf7DNSUinhvA==}
     cpu: [loong64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-loong64-musl@4.57.1':
     resolution: {integrity: sha512-xpObYIf+8gprgWaPP32xiN5RVTi/s5FCR+XMXSKmhfoJjrpRAjCuuqQXyxUa/eJTdAE6eJ+KDKaoEqjZQxh3Gw==}
     cpu: [loong64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-ppc64-gnu@4.57.1':
     resolution: {integrity: sha512-4BrCgrpZo4hvzMDKRqEaW1zeecScDCR+2nZ86ATLhAoJ5FQ+lbHVD3ttKe74/c7tNT9c6F2viwB3ufwp01Oh2w==}
     cpu: [ppc64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-ppc64-musl@4.57.1':
     resolution: {integrity: sha512-NOlUuzesGauESAyEYFSe3QTUguL+lvrN1HtwEEsU2rOwdUDeTMJdO5dUYl/2hKf9jWydJrO9OL/XSSf65R5+Xw==}
     cpu: [ppc64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-riscv64-gnu@4.57.1':
     resolution: {integrity: sha512-ptA88htVp0AwUUqhVghwDIKlvJMD/fmL/wrQj99PRHFRAG6Z5nbWoWG4o81Nt9FT+IuqUQi+L31ZKAFeJ5Is+A==}
     cpu: [riscv64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-riscv64-musl@4.57.1':
     resolution: {integrity: sha512-S51t7aMMTNdmAMPpBg7OOsTdn4tySRQvklmL3RpDRyknk87+Sp3xaumlatU+ppQ+5raY7sSTcC2beGgvhENfuw==}
     cpu: [riscv64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-s390x-gnu@4.57.1':
     resolution: {integrity: sha512-Bl00OFnVFkL82FHbEqy3k5CUCKH6OEJL54KCyx2oqsmZnFTR8IoNqBF+mjQVcRCT5sB6yOvK8A37LNm/kPJiZg==}
     cpu: [s390x]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-x64-gnu@4.57.1':
     resolution: {integrity: sha512-ABca4ceT4N+Tv/GtotnWAeXZUZuM/9AQyCyKYyKnpk4yoA7QIAuBt6Hkgpw8kActYlew2mvckXkvx0FfoInnLg==}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-x64-musl@4.57.1':
     resolution: {integrity: sha512-HFps0JeGtuOR2convgRRkHCekD7j+gdAuXM+/i6kGzQtFhlCtQkpwtNzkNj6QhCDp7DRJ7+qC/1Vg2jt5iSOFw==}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-openbsd-x64@4.57.1':
     resolution: {integrity: sha512-H+hXEv9gdVQuDTgnqD+SQffoWoc0Of59AStSzTEj/feWTBAnSfSD3+Dql1ZruJQxmykT/JVY0dE8Ka7z0DH1hw==}
@@ -583,24 +599,28 @@ packages:
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@tailwindcss/oxide-linux-arm64-musl@4.1.18':
     resolution: {integrity: sha512-1px92582HkPQlaaCkdRcio71p8bc8i/ap5807tPRDK/uw953cauQBT8c5tVGkOwrHMfc2Yh6UuxaH4vtTjGvHg==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@tailwindcss/oxide-linux-x64-gnu@4.1.18':
     resolution: {integrity: sha512-v3gyT0ivkfBLoZGF9LyHmts0Isc8jHZyVcbzio6Wpzifg/+5ZJpDiRiUhDLkcr7f/r38SWNe7ucxmGW3j3Kb/g==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@tailwindcss/oxide-linux-x64-musl@4.1.18':
     resolution: {integrity: sha512-bhJ2y2OQNlcRwwgOAGMY0xTFStt4/wyU6pvI6LSuZpRgKQwxTec0/3Scu91O8ir7qCR3AuepQKLU/kX99FouqQ==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@tailwindcss/oxide-wasm32-wasi@4.1.18':
     resolution: {integrity: sha512-LffYTvPjODiP6PT16oNeUQJzNVyJl1cjIebq/rWWBF+3eDst5JGEFSc5cWxyRCJ0Mxl+KyIkqRxk1XPEs9x8TA==}
@@ -735,14 +755,23 @@ packages:
   '@vue/devtools-api@6.6.4':
     resolution: {integrity: sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==}
 
+  '@vue/devtools-api@7.7.9':
+    resolution: {integrity: sha512-kIE8wvwlcZ6TJTbNeU2HQNtaxLx3a84aotTITUuL/4bzfPxzajGBOoqjMhwZJ8L9qFYDU/lAYMEEm11dnZOD6g==}
+
   '@vue/devtools-core@8.0.5':
     resolution: {integrity: sha512-dpCw8nl0GDBuiL9SaY0mtDxoGIEmU38w+TQiYEPOLhW03VDC0lfNMYXS/qhl4I0YlysGp04NLY4UNn6xgD0VIQ==}
     peerDependencies:
       vue: ^3.0.0
 
+  '@vue/devtools-kit@7.7.9':
+    resolution: {integrity: sha512-PyQ6odHSgiDVd4hnTP+aDk2X4gl2HmLDfiyEnn3/oV+ckFDuswRs4IbBT7vacMuGdwY/XemxBoh302ctbsptuA==}
+
   '@vue/devtools-kit@8.0.5':
     resolution: {integrity: sha512-q2VV6x1U3KJMTQPUlRMyWEKVbcHuxhqJdSr6Jtjz5uAThAIrfJ6WVZdGZm5cuO63ZnSUz0RCsVwiUUb0mDV0Yg==}
 
+  '@vue/devtools-shared@7.7.9':
+    resolution: {integrity: sha512-iWAb0v2WYf0QWmxCGy0seZNDPdO3Sp5+u78ORnyeonS6MT4PC7VPrryX2BpMJrwlDeaZ6BD4vP4XKjK0SZqaeA==}
+
   '@vue/devtools-shared@8.0.5':
     resolution: {integrity: sha512-bRLn6/spxpmgLk+iwOrR29KrYnJjG9DGpHGkDFG82UM21ZpJ39ztUT9OXX3g+usW7/b2z+h46I9ZiYyB07XMXg==}
 
@@ -1007,24 +1036,28 @@ packages:
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   lightningcss-linux-arm64-musl@1.30.2:
     resolution: {integrity: sha512-5Vh9dGeblpTxWHpOx8iauV02popZDsCYMPIgiuw97OJ5uaDsL86cnqSFs5LZkG3ghHoX5isLgWzMs+eD1YzrnA==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   lightningcss-linux-x64-gnu@1.30.2:
     resolution: {integrity: sha512-Cfd46gdmj1vQ+lR6VRTTadNHu6ALuw2pKR9lYq4FnhvgBc4zWY1EtZcAc6EffShbb1MFrIPfLDXD6Xprbnni4w==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   lightningcss-linux-x64-musl@1.30.2:
     resolution: {integrity: sha512-XJaLUUFXb6/QG2lGIW6aIk6jKdtjtcffUT0NKvIqhSBY3hh9Ch+1LCeH80dR9q9LBjG3ewbDjnumefsLsP6aiA==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   lightningcss-win32-arm64-msvc@1.30.2:
     resolution: {integrity: sha512-FZn+vaj7zLv//D/192WFFVA0RgHawIcHqLX9xuWiQt7P0PtdFEVaxgF9rjM/IRYHQXNnk61/H/gb2Ei+kUQ4xQ==}
@@ -1109,6 +1142,9 @@ packages:
   pathe@2.0.3:
     resolution: {integrity: sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==}
 
+  perfect-debounce@1.0.0:
+    resolution: {integrity: sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==}
+
   perfect-debounce@2.1.0:
     resolution: {integrity: sha512-LjgdTytVFXeUgtHZr9WYViYSM/g8MkcTPYDlPa3cDqMirHjKiSZPYd6DoL7pK8AJQr+uWkQvCjHNdiMqsrJs+g==}
 
@@ -1124,6 +1160,15 @@ packages:
     engines: {node: '>=0.10'}
     hasBin: true
 
+  pinia@3.0.4:
+    resolution: {integrity: sha512-l7pqLUFTI/+ESXn6k3nu30ZIzW5E2WZF/LaHJEpoq6ElcLD+wduZoB2kBN19du6K/4FDpPMazY2wJr+IndBtQw==}
+    peerDependencies:
+      typescript: '>=4.5.0'
+      vue: ^3.5.11
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
   postcss@8.5.6:
     resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==}
     engines: {node: ^10 || ^12 || >=14}
@@ -1959,6 +2004,10 @@ snapshots:
 
   '@vue/devtools-api@6.6.4': {}
 
+  '@vue/devtools-api@7.7.9':
+    dependencies:
+      '@vue/devtools-kit': 7.7.9
+
   '@vue/devtools-core@8.0.5(vite@7.3.1(@types/node@24.10.9)(jiti@2.6.1)(lightningcss@1.30.2))(vue@3.5.27(typescript@5.9.3))':
     dependencies:
       '@vue/devtools-kit': 8.0.5
@@ -1971,6 +2020,16 @@ snapshots:
     transitivePeerDependencies:
       - vite
 
+  '@vue/devtools-kit@7.7.9':
+    dependencies:
+      '@vue/devtools-shared': 7.7.9
+      birpc: 2.9.0
+      hookable: 5.5.3
+      mitt: 3.0.1
+      perfect-debounce: 1.0.0
+      speakingurl: 14.0.1
+      superjson: 2.2.6
+
   '@vue/devtools-kit@8.0.5':
     dependencies:
       '@vue/devtools-shared': 8.0.5
@@ -1981,6 +2040,10 @@ snapshots:
       speakingurl: 14.0.1
       superjson: 2.2.6
 
+  '@vue/devtools-shared@7.7.9':
+    dependencies:
+      rfdc: 1.4.1
+
   '@vue/devtools-shared@8.0.5':
     dependencies:
       rfdc: 1.4.1
@@ -2292,6 +2355,8 @@ snapshots:
 
   pathe@2.0.3: {}
 
+  perfect-debounce@1.0.0: {}
+
   perfect-debounce@2.1.0: {}
 
   picocolors@1.1.1: {}
@@ -2300,6 +2365,13 @@ snapshots:
 
   pidtree@0.6.0: {}
 
+  pinia@3.0.4(typescript@5.9.3)(vue@3.5.27(typescript@5.9.3)):
+    dependencies:
+      '@vue/devtools-api': 7.7.9
+      vue: 3.5.27(typescript@5.9.3)
+    optionalDependencies:
+      typescript: 5.9.3
+
   postcss@8.5.6:
     dependencies:
       nanoid: 3.3.11
diff --git a/src/App.vue b/src/App.vue
index f710a5b..ceb3ca5 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,6 +4,7 @@ import FlickeringGrid from '@/components/ui/flickering-grid/FlickeringGrid.vue'
 import { ref, provide, onMounted, watch } from 'vue'
 import BackendSwitcher from '@/components/BackendSwitcher.vue'
 import { useBackendStore } from '@/composables/useBackendStore'
+import { usePermissionStore } from '@/stores/usePermissionStore'
 
 const background = ref<'default' | 'flickering'>('default')
 
@@ -23,6 +24,7 @@ const openBackendSwitcher = () => {
 provide('openBackendSwitcher', openBackendSwitcher)
 
 const { backends, currentBackend } = useBackendStore()
+const permissionStore = usePermissionStore()
 
 onMounted(() => {
   const bgCookie = document.cookie.split('; ').find(row => row.startsWith('background='))?.split('=')[1]
@@ -35,6 +37,14 @@ onMounted(() => {
       isBackendSwitcherOpen.value = true
   }
 })
+
+watch(
+  currentBackend,
+  (backend) => {
+    permissionStore.refreshByBackend(backend)
+  },
+  { deep: true, immediate: true },
+)
 </script>
 
 <template>
diff --git a/src/main.ts b/src/main.ts
index aac3ff2..de6f4e2 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,10 +1,13 @@
 import { createApp } from 'vue'
+import { createPinia } from 'pinia'
 import App from './App.vue'
 import router from './router'
 import './style/app.css'
 
 const app = createApp(App)
+const pinia = createPinia()
 
+app.use(pinia)
 app.use(router)
 
 app.mount('#app')
diff --git a/src/stores/usePermissionStore.ts b/src/stores/usePermissionStore.ts
new file mode 100644
index 0000000..ae0bb2b
--- /dev/null
+++ b/src/stores/usePermissionStore.ts
@@ -0,0 +1,310 @@
+import { computed, ref } from 'vue'
+import { defineStore } from 'pinia'
+import type { Backend } from '@/composables/useBackendStore'
+
+type PermissionValue = string | Record<string, unknown>
+
+interface PermissionEntry {
+  [resource: string]: PermissionValue
+}
+
+type ScopeEntry = 'global' | { global?: null; agent_uuid?: string } | string
+
+interface TokenLimit {
+  scopes?: ScopeEntry[]
+  permissions?: PermissionEntry[]
+}
+
+export interface TokenInfo {
+  id?: number
+  version?: number
+  token_key?: string
+  timestamp_from?: number | null
+  timestamp_to?: number | null
+  username?: string | null
+  token_limit?: TokenLimit[]
+}
+
+interface NormalizedPermission {
+  scope: string
+  resource: string
+  action: string
+  field?: string
+}
+
+// Compact lookup key so permission checks are O(1).
+const buildPermissionKey = (scope: string, resource: string, action: string, field = '*') =>
+  `${scope}|${resource}|${action}|${field}`
+
+const normalizeText = (value: unknown) => String(value ?? '').trim().toLowerCase()
+
+const normalizeScope = (scope: ScopeEntry): string | null => {
+  if (scope === 'global') return 'global'
+  if (typeof scope === 'string') return scope
+  if (!scope || typeof scope !== 'object') return null
+  if ('global' in scope) return 'global'
+  if (typeof scope.agent_uuid === 'string' && scope.agent_uuid) return `agent_uuid:${scope.agent_uuid}`
+  return null
+}
+
+// Flattens both forms:
+// 1) { crontab: "read" }
+// 2) { task: { write: "ping" } }
+const normalizePermissionEntry = (entry: PermissionEntry): NormalizedPermission[] => {
+  const records: NormalizedPermission[] = []
+
+  for (const [resourceRaw, value] of Object.entries(entry)) {
+    const resource = normalizeText(resourceRaw)
+    if (!resource) continue
+
+    if (typeof value === 'string') {
+      const action = normalizeText(value)
+      if (action) {
+        records.push({ scope: '', resource, action })
+      }
+      continue
+    }
+
+    if (!value || typeof value !== 'object' || Array.isArray(value)) continue
+
+    for (const [actionRaw, fieldRaw] of Object.entries(value)) {
+      const action = normalizeText(actionRaw)
+      if (!action) continue
+      records.push({
+        scope: '',
+        resource,
+        action,
+        field: normalizeText(fieldRaw),
+      })
+    }
+  }
+
+  return records
+}
+
+// One-shot RPC call over WS, used to fetch current token details.
+const requestTokenGet = (url: string, params: unknown[]): Promise<TokenInfo> => {
+  return new Promise((resolve, reject) => {
+    const ws = new WebSocket(url)
+    const requestId = Date.now()
+    const timeout = setTimeout(() => {
+      ws.close()
+      reject(new Error('token_get request timeout'))
+    }, 8000)
+
+    const cleanup = () => clearTimeout(timeout)
+
+    ws.onopen = () => {
+      ws.send(
+        JSON.stringify({
+          jsonrpc: '2.0',
+          id: requestId,
+          method: 'token_get',
+          params,
+        }),
+      )
+    }
+
+    ws.onerror = () => {
+      cleanup()
+      reject(new Error('token_get websocket error'))
+      ws.close()
+    }
+
+    ws.onmessage = (event) => {
+      let msg: any
+      try {
+        msg = JSON.parse(event.data)
+      } catch {
+        cleanup()
+        reject(new Error('token_get invalid response'))
+        ws.close()
+        return
+      }
+
+      if (msg?.id !== requestId) return
+
+      if (msg?.error) {
+        const message = typeof msg.error === 'string' ? msg.error : msg.error.message
+        cleanup()
+        reject(new Error(message || 'token_get rpc error'))
+        ws.close()
+        return
+      }
+
+      if (msg?.result?.error_message) {
+        cleanup()
+        reject(new Error(msg.result.error_message))
+        ws.close()
+        return
+      }
+
+      if (!msg?.result || typeof msg.result !== 'object') {
+        cleanup()
+        reject(new Error('token_get empty result'))
+        ws.close()
+        return
+      }
+
+      cleanup()
+      resolve(msg.result as TokenInfo)
+      ws.close()
+    }
+  })
+}
+
+export const usePermissionStore = defineStore('permission', () => {
+  const status = ref<'idle' | 'loading' | 'ready' | 'error'>('idle')
+  const error = ref('')
+  const tokenInfo = ref<TokenInfo | null>(null)
+  const currentBackendKey = ref('')
+  const permissionIndex = ref(new Set<string>())
+  const normalizedPermissions = ref<NormalizedPermission[]>([])
+  const isSuperToken = computed(
+    () => tokenInfo.value?.id === 1 && normalizeText(tokenInfo.value?.username) === 'root',
+  )
+
+  const clear = () => {
+    status.value = 'idle'
+    error.value = ''
+    tokenInfo.value = null
+    currentBackendKey.value = ''
+    permissionIndex.value = new Set<string>()
+    normalizedPermissions.value = []
+  }
+
+  const rebuildPermissions = (token: TokenInfo | null) => {
+    const nextPermissions: NormalizedPermission[] = []
+    const nextIndex = new Set<string>()
+    const limits = token?.token_limit ?? []
+
+    for (const limit of limits) {
+      const scopes = (limit.scopes ?? []).map(normalizeScope).filter((scope): scope is string => Boolean(scope))
+      const effectiveScopes = scopes.length > 0 ? scopes : ['global']
+
+      for (const permission of limit.permissions ?? []) {
+        const normalized = normalizePermissionEntry(permission)
+        for (const row of normalized) {
+          for (const scope of effectiveScopes) {
+            const rowWithScope: NormalizedPermission = { ...row, scope }
+            nextPermissions.push(rowWithScope)
+            // Index both wildcard-field and exact-field forms.
+            nextIndex.add(buildPermissionKey(scope, row.resource, row.action))
+            if (row.field) {
+              nextIndex.add(buildPermissionKey(scope, row.resource, row.action, row.field))
+            }
+          }
+        }
+      }
+    }
+
+    normalizedPermissions.value = nextPermissions
+    permissionIndex.value = nextIndex
+  }
+
+  const refreshByBackend = async (backend: Backend | null) => {
+    if (!backend?.url || !backend?.token) {
+      clear()
+      return
+    }
+
+    const backendKey = `${backend.url}::${backend.token}`
+    if (backendKey === currentBackendKey.value && status.value === 'ready') return
+
+    status.value = 'loading'
+    error.value = ''
+    currentBackendKey.value = backendKey
+
+    try {
+      let result: TokenInfo
+      try {
+        // Preferred payload format in docs.
+        result = await requestTokenGet(backend.url, [{ token: backend.token }])
+      } catch {
+        // Compatibility fallback for servers expecting raw token param.
+        result = await requestTokenGet(backend.url, [backend.token])
+      }
+
+      tokenInfo.value = result
+      rebuildPermissions(result)
+      status.value = 'ready'
+    } catch (e: any) {
+      tokenInfo.value = null
+      permissionIndex.value = new Set<string>()
+      normalizedPermissions.value = []
+      status.value = 'error'
+      error.value = e?.message || 'Failed to fetch token permissions'
+    }
+  }
+
+  const hasPermission = (
+    resourceRaw: string,
+    actionRaw: string,
+    options?: { field?: string; scope?: string },
+  ) => {
+    if (isSuperToken.value) return true
+
+    const resource = normalizeText(resourceRaw)
+    const action = normalizeText(actionRaw)
+    const field = options?.field ? normalizeText(options.field) : ''
+    const scopes = options?.scope
+      ? [normalizeText(options.scope)]
+      : availableScopes.value.length > 0
+        // By default, treat permissions as valid if any scope grants it.
+        ? availableScopes.value
+        : ['global']
+
+    for (const scope of scopes) {
+      if (!scope) continue
+      if (field && permissionIndex.value.has(buildPermissionKey(scope, resource, action, field))) {
+        return true
+      }
+      if (permissionIndex.value.has(buildPermissionKey(scope, resource, action))) {
+        return true
+      }
+    }
+
+    return false
+  }
+
+  const hasAnyScopePermission = (
+    resourceRaw: string,
+    actionRaw: string,
+    options?: { field?: string },
+  ) => {
+    if (isSuperToken.value) return true
+
+    const resource = normalizeText(resourceRaw)
+    const action = normalizeText(actionRaw)
+    const field = options?.field ? normalizeText(options.field) : ''
+
+    for (const key of permissionIndex.value) {
+      const [, kResource, kAction, kField] = key.split('|')
+      if (kResource !== resource || kAction !== action) continue
+      if (!field) return true
+      if (kField === field) return true
+    }
+    return false
+  }
+
+  const availableScopes = computed(() => {
+    const scopes = new Set<string>()
+    for (const row of normalizedPermissions.value) {
+      scopes.add(row.scope)
+    }
+    return [...scopes]
+  })
+
+  return {
+    status,
+    error,
+    tokenInfo,
+    isSuperToken,
+    normalizedPermissions,
+    availableScopes,
+    refreshByBackend,
+    clear,
+    hasPermission,
+    hasAnyScopePermission,
+  }
+})

From 00beb22191e67283a089f93300e865381ffd8f81 Mon Sep 17 00:00:00 2001
From: zhullyb <zhullyb@outlook.com>
Date: Tue, 10 Feb 2026 21:39:53 +0800
Subject: [PATCH 02/10] fix(permission): remove unused id field from TokenInfo
 interface

---
 src/stores/usePermissionStore.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/stores/usePermissionStore.ts b/src/stores/usePermissionStore.ts
index ae0bb2b..2296f0a 100644
--- a/src/stores/usePermissionStore.ts
+++ b/src/stores/usePermissionStore.ts
@@ -16,7 +16,6 @@ interface TokenLimit {
 }
 
 export interface TokenInfo {
-  id?: number
   version?: number
   token_key?: string
   timestamp_from?: number | null
@@ -161,7 +160,7 @@ export const usePermissionStore = defineStore('permission', () => {
   const permissionIndex = ref(new Set<string>())
   const normalizedPermissions = ref<NormalizedPermission[]>([])
   const isSuperToken = computed(
-    () => tokenInfo.value?.id === 1 && normalizeText(tokenInfo.value?.username) === 'root',
+    () => normalizeText(tokenInfo.value?.username) === 'root',
   )
 
   const clear = () => {

From ac836850bde11949b9743ea39181c1846498ad03 Mon Sep 17 00:00:00 2001
From: zhullyb <zhullyb@outlook.com>
Date: Thu, 12 Feb 2026 21:24:08 +0800
Subject: [PATCH 03/10] feat(permission): enhance ScopeEntry type and improve
 requestTokenGet error handling

---
 src/stores/usePermissionStore.ts | 25 ++++++++++++++-----------
 1 file changed, 14 insertions(+), 11 deletions(-)

diff --git a/src/stores/usePermissionStore.ts b/src/stores/usePermissionStore.ts
index 2296f0a..c740159 100644
--- a/src/stores/usePermissionStore.ts
+++ b/src/stores/usePermissionStore.ts
@@ -8,7 +8,10 @@ interface PermissionEntry {
   [resource: string]: PermissionValue
 }
 
-type ScopeEntry = 'global' | { global?: null; agent_uuid?: string } | string
+type ScopeEntry =
+  | 'global'
+  | { global?: null; agent_uuid?: string; kv_namespace?: string }
+  | string
 
 interface TokenLimit {
   scopes?: ScopeEntry[]
@@ -43,6 +46,9 @@ const normalizeScope = (scope: ScopeEntry): string | null => {
   if (!scope || typeof scope !== 'object') return null
   if ('global' in scope) return 'global'
   if (typeof scope.agent_uuid === 'string' && scope.agent_uuid) return `agent_uuid:${scope.agent_uuid}`
+  if (typeof scope.kv_namespace === 'string' && scope.kv_namespace) {
+    return `kv_namespace:${scope.kv_namespace}`
+  }
   return null
 }
 
@@ -82,7 +88,7 @@ const normalizePermissionEntry = (entry: PermissionEntry): NormalizedPermission[
 }
 
 // One-shot RPC call over WS, used to fetch current token details.
-const requestTokenGet = (url: string, params: unknown[]): Promise<TokenInfo> => {
+const requestTokenGet = (url: string, params: unknown): Promise<TokenInfo> => {
   return new Promise((resolve, reject) => {
     const ws = new WebSocket(url)
     const requestId = Date.now()
@@ -124,7 +130,10 @@ const requestTokenGet = (url: string, params: unknown[]): Promise<TokenInfo> =>
       if (msg?.id !== requestId) return
 
       if (msg?.error) {
-        const message = typeof msg.error === 'string' ? msg.error : msg.error.message
+        const message =
+          typeof msg.error === 'string'
+            ? msg.error
+            : [msg.error.message, msg.error.data].filter(Boolean).join(' | ')
         cleanup()
         reject(new Error(message || 'token_get rpc error'))
         ws.close()
@@ -215,14 +224,8 @@ export const usePermissionStore = defineStore('permission', () => {
     currentBackendKey.value = backendKey
 
     try {
-      let result: TokenInfo
-      try {
-        // Preferred payload format in docs.
-        result = await requestTokenGet(backend.url, [{ token: backend.token }])
-      } catch {
-        // Compatibility fallback for servers expecting raw token param.
-        result = await requestTokenGet(backend.url, [backend.token])
-      }
+      // token_get docs format: params = { token: "..." }
+      const result = await requestTokenGet(backend.url, { token: backend.token })
 
       tokenInfo.value = result
       rebuildPermissions(result)

From f28a4f69e86a37014bccb469d68b63ba7c52d879 Mon Sep 17 00:00:00 2001
From: zhullyb <zhullyb@outlook.com>
Date: Thu, 12 Feb 2026 21:29:37 +0800
Subject: [PATCH 04/10] feat(wsRpc): implement wsRpcCall for token retrieval in
 usePermissionStore

---
 src/composables/useWsRpc.ts      | 134 +++++++++++++++++++++++++++++++
 src/stores/usePermissionStore.ts |  80 ++----------------
 2 files changed, 139 insertions(+), 75 deletions(-)
 create mode 100644 src/composables/useWsRpc.ts

diff --git a/src/composables/useWsRpc.ts b/src/composables/useWsRpc.ts
new file mode 100644
index 0000000..dd8a961
--- /dev/null
+++ b/src/composables/useWsRpc.ts
@@ -0,0 +1,134 @@
+interface RpcErrorShape {
+  message?: unknown
+  data?: unknown
+}
+
+interface WsRpcMessage {
+  id?: unknown
+  result?: unknown
+  error?: unknown
+}
+
+interface WsRpcCallOptions {
+  timeoutMs?: number
+  requestId?: number
+}
+
+interface WsRpcFallbackOptions extends WsRpcCallOptions {
+  shouldRetry?: (error: Error, attemptIndex: number, totalAttempts: number) => boolean
+}
+
+const formatRpcError = (error: unknown): string => {
+  if (typeof error === 'string') return error
+  if (!error || typeof error !== 'object') return ''
+
+  const rpcError = error as RpcErrorShape
+  const parts = [rpcError.message, rpcError.data].filter(Boolean).map((part) => String(part))
+  if (parts.length > 0) return parts.join(' | ')
+
+  try {
+    return JSON.stringify(error)
+  } catch {
+    return ''
+  }
+}
+
+export const wsRpcCall = <T = unknown>(
+  url: string,
+  method: string,
+  params: unknown,
+  options: WsRpcCallOptions = {},
+): Promise<T> => {
+  return new Promise((resolve, reject) => {
+    const ws = new WebSocket(url)
+    const requestId = options.requestId ?? Date.now() + Math.floor(Math.random() * 1000)
+    const timeoutMs = options.timeoutMs ?? 8000
+    const timeout = setTimeout(() => {
+      ws.close()
+      reject(new Error(`${method} request timeout`))
+    }, timeoutMs)
+
+    const cleanup = () => clearTimeout(timeout)
+
+    ws.onopen = () => {
+      ws.send(
+        JSON.stringify({
+          jsonrpc: '2.0',
+          id: requestId,
+          method,
+          params,
+        }),
+      )
+    }
+
+    ws.onerror = () => {
+      cleanup()
+      reject(new Error(`${method} websocket error`))
+      ws.close()
+    }
+
+    ws.onmessage = (event) => {
+      let msg: WsRpcMessage
+      try {
+        msg = JSON.parse(event.data)
+      } catch {
+        cleanup()
+        reject(new Error(`${method} invalid response`))
+        ws.close()
+        return
+      }
+
+      if (msg?.id !== requestId) return
+
+      if (msg?.error) {
+        cleanup()
+        reject(new Error(formatRpcError(msg.error) || `${method} rpc error`))
+        ws.close()
+        return
+      }
+
+      if (
+        msg?.result &&
+        typeof msg.result === 'object' &&
+        !Array.isArray(msg.result) &&
+        'error_message' in msg.result
+      ) {
+        cleanup()
+        reject(new Error(String((msg.result as { error_message?: unknown }).error_message || `${method} rpc error`)))
+        ws.close()
+        return
+      }
+
+      cleanup()
+      resolve(msg?.result as T)
+      ws.close()
+    }
+  })
+}
+
+export const wsRpcCallWithFallback = async <T = unknown>(
+  url: string,
+  method: string,
+  paramCandidates: unknown[],
+  options: WsRpcFallbackOptions = {},
+): Promise<T> => {
+  let lastError: Error | null = null
+
+  for (let index = 0; index < paramCandidates.length; index += 1) {
+    try {
+      return await wsRpcCall<T>(url, method, paramCandidates[index], options)
+    } catch (error: unknown) {
+      const normalizedError = error instanceof Error ? error : new Error(String(error))
+      lastError = normalizedError
+      const isLast = index === paramCandidates.length - 1
+      if (isLast) throw normalizedError
+
+      const shouldRetry = options.shouldRetry
+        ? options.shouldRetry(normalizedError, index, paramCandidates.length)
+        : true
+      if (!shouldRetry) throw normalizedError
+    }
+  }
+
+  throw lastError || new Error(`${method} failed`)
+}
diff --git a/src/stores/usePermissionStore.ts b/src/stores/usePermissionStore.ts
index c740159..06a5ded 100644
--- a/src/stores/usePermissionStore.ts
+++ b/src/stores/usePermissionStore.ts
@@ -1,6 +1,7 @@
 import { computed, ref } from 'vue'
 import { defineStore } from 'pinia'
 import type { Backend } from '@/composables/useBackendStore'
+import { wsRpcCall } from '@/composables/useWsRpc'
 
 type PermissionValue = string | Record<string, unknown>
 
@@ -87,80 +88,6 @@ const normalizePermissionEntry = (entry: PermissionEntry): NormalizedPermission[
   return records
 }
 
-// One-shot RPC call over WS, used to fetch current token details.
-const requestTokenGet = (url: string, params: unknown): Promise<TokenInfo> => {
-  return new Promise((resolve, reject) => {
-    const ws = new WebSocket(url)
-    const requestId = Date.now()
-    const timeout = setTimeout(() => {
-      ws.close()
-      reject(new Error('token_get request timeout'))
-    }, 8000)
-
-    const cleanup = () => clearTimeout(timeout)
-
-    ws.onopen = () => {
-      ws.send(
-        JSON.stringify({
-          jsonrpc: '2.0',
-          id: requestId,
-          method: 'token_get',
-          params,
-        }),
-      )
-    }
-
-    ws.onerror = () => {
-      cleanup()
-      reject(new Error('token_get websocket error'))
-      ws.close()
-    }
-
-    ws.onmessage = (event) => {
-      let msg: any
-      try {
-        msg = JSON.parse(event.data)
-      } catch {
-        cleanup()
-        reject(new Error('token_get invalid response'))
-        ws.close()
-        return
-      }
-
-      if (msg?.id !== requestId) return
-
-      if (msg?.error) {
-        const message =
-          typeof msg.error === 'string'
-            ? msg.error
-            : [msg.error.message, msg.error.data].filter(Boolean).join(' | ')
-        cleanup()
-        reject(new Error(message || 'token_get rpc error'))
-        ws.close()
-        return
-      }
-
-      if (msg?.result?.error_message) {
-        cleanup()
-        reject(new Error(msg.result.error_message))
-        ws.close()
-        return
-      }
-
-      if (!msg?.result || typeof msg.result !== 'object') {
-        cleanup()
-        reject(new Error('token_get empty result'))
-        ws.close()
-        return
-      }
-
-      cleanup()
-      resolve(msg.result as TokenInfo)
-      ws.close()
-    }
-  })
-}
-
 export const usePermissionStore = defineStore('permission', () => {
   const status = ref<'idle' | 'loading' | 'ready' | 'error'>('idle')
   const error = ref('')
@@ -225,7 +152,10 @@ export const usePermissionStore = defineStore('permission', () => {
 
     try {
       // token_get docs format: params = { token: "..." }
-      const result = await requestTokenGet(backend.url, { token: backend.token })
+      const result = await wsRpcCall<TokenInfo>(backend.url, 'token_get', { token: backend.token })
+      if (!result || typeof result !== 'object') {
+        throw new Error('token_get empty result')
+      }
 
       tokenInfo.value = result
       rebuildPermissions(result)

From d73e79218bdc7605e10a4d2069144e749d440a30 Mon Sep 17 00:00:00 2001
From: zhullyb <zhullyb@outlook.com>
Date: Thu, 12 Feb 2026 22:04:42 +0800
Subject: [PATCH 05/10] feat(token): add TokenManageView component and route
 for token management

---
 src/router.ts                 |   5 +
 src/views/TokenManageView.vue | 699 ++++++++++++++++++++++++++++++++++
 2 files changed, 704 insertions(+)
 create mode 100644 src/views/TokenManageView.vue

diff --git a/src/router.ts b/src/router.ts
index e08eff2..f3e6dc8 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -13,6 +13,11 @@ const router = createRouter({
       name: 'server-detail',
       component: () => import('./views/ServerDetailView.vue'),
     },
+    {
+      path: '/token',
+      name: 'token-manage',
+      component: () => import('./views/TokenManageView.vue'),
+    },
   ],
 })
 
diff --git a/src/views/TokenManageView.vue b/src/views/TokenManageView.vue
new file mode 100644
index 0000000..ab5ef44
--- /dev/null
+++ b/src/views/TokenManageView.vue
@@ -0,0 +1,699 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { ArrowLeft, Copy, KeyRound, ShieldAlert, ShieldCheck, Trash2 } from 'lucide-vue-next'
+import { storeToRefs } from 'pinia'
+import { useBackendStore } from '@/composables/useBackendStore'
+import HeaderView from '@/components/HeaderView.vue'
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { usePermissionStore } from '@/stores/usePermissionStore'
+import { wsRpcCallWithFallback } from '@/composables/useWsRpc'
+
+type ToastState = {
+  type: 'success' | 'error'
+  title: string
+  message: string
+}
+
+type ScopeMode = 'global' | 'agent'
+
+const STATIC_FIELDS = ['cpu', 'system', 'gpu'] as const
+const DYNAMIC_FIELDS = ['cpu', 'ram', 'load', 'system', 'disk', 'network', 'gpu'] as const
+const TASK_TYPES = ['ping', 'tcp_ping', 'http_ping', 'web_shell', 'execute', 'ip'] as const
+
+const { currentBackend } = useBackendStore()
+
+const backendStatus = computed<'disconnected' | 'connecting' | 'connected'>(() =>
+  currentBackend.value?.url ? 'connected' : 'disconnected',
+)
+const backendUrl = computed(() => currentBackend.value?.url ?? '')
+
+const scopeMode = ref<ScopeMode>('global')
+const agentUuidsText = ref('')
+
+const username = ref('')
+const password = ref('')
+const timestampFrom = ref('')
+const timestampTo = ref('')
+const showOptionalOptions = ref(false)
+const showPayloadPreview = ref(false)
+
+const staticWrite = ref(false)
+const staticReads = ref<string[]>([])
+const dynamicWrite = ref(false)
+const dynamicReads = ref<string[]>([])
+const taskListen = ref(false)
+const taskCreate = ref<string[]>([])
+const taskRead = ref<string[]>([])
+const taskWrite = ref<string[]>([])
+const metadataRead = ref(false)
+const metadataWrite = ref(false)
+const crontabRead = ref(false)
+const crontabWrite = ref(false)
+const crontabDelete = ref(false)
+
+const createLoading = ref(false)
+const createToast = ref<ToastState | null>(null)
+const createdCredential = ref<{ key: string; secret: string } | null>(null)
+
+const deleteToken = ref('')
+const deleteTargetTokenKey = ref('')
+const deleteLoading = ref(false)
+const deleteToast = ref<ToastState | null>(null)
+
+const permissionStore = usePermissionStore()
+const { isSuperToken, tokenInfo } = storeToRefs(permissionStore)
+const currentTokenKey = computed(() => tokenInfo.value?.token_key?.trim() || '')
+
+const toggleList = (list: string[], val: string) => {
+  const idx = list.indexOf(val)
+  if (idx >= 0) {
+    list.splice(idx, 1)
+    return
+  }
+  list.push(val)
+}
+
+const parseTimestamp = (val: string) => {
+  if (!val.trim()) return null
+  const ms = new Date(val).getTime()
+  return Number.isFinite(ms) ? ms : NaN
+}
+
+const isLikelyParamShapeError = (msg: string) =>
+  /invalid\s*params|unknown field|missing field|invalid type|expected/i.test(msg)
+
+const rpcCallWithFallback = async <T = any>(
+  url: string,
+  method: string,
+  candidates: unknown[],
+): Promise<T> => {
+  return wsRpcCallWithFallback<T>(url, method, candidates, {
+    shouldRetry: (error, idx, total) => idx < total - 1 && isLikelyParamShapeError(error.message),
+  })
+}
+
+const buildPermissions = () => {
+  const permissions: Record<string, unknown>[] = []
+
+  if (staticWrite.value) permissions.push({ static_monitoring: 'write' })
+  for (const field of staticReads.value) permissions.push({ static_monitoring: { read: field } })
+
+  if (dynamicWrite.value) permissions.push({ dynamic_monitoring: 'write' })
+  for (const field of dynamicReads.value) permissions.push({ dynamic_monitoring: { read: field } })
+
+  if (taskListen.value) permissions.push({ task: 'listen' })
+  for (const taskType of taskCreate.value) permissions.push({ task: { create: taskType } })
+  for (const taskType of taskRead.value) permissions.push({ task: { read: taskType } })
+  for (const taskType of taskWrite.value) permissions.push({ task: { write: taskType } })
+
+  if (metadataRead.value) permissions.push({ metadata: 'read' })
+  if (metadataWrite.value) permissions.push({ metadata: 'write' })
+
+  if (crontabRead.value) permissions.push({ crontab: 'read' })
+  if (crontabWrite.value) permissions.push({ crontab: 'write' })
+  if (crontabDelete.value) permissions.push({ crontab: 'delete' })
+
+  return permissions
+}
+
+const selectedPermissionCount = computed(() => buildPermissions().length)
+
+const scopePreview = computed(() => {
+  if (scopeMode.value === 'global') return ['global']
+  return agentUuidsText.value
+    .split(/[\n,\s]+/g)
+    .map((s) => s.trim())
+    .filter(Boolean)
+    .map((agentUuid) => ({ agent_uuid: agentUuid }))
+})
+
+const tokenLimitPreview = computed(() => [
+  {
+    scopes: scopePreview.value,
+    permissions: buildPermissions(),
+  },
+])
+
+const createdTokenText = computed(() => {
+  if (!createdCredential.value) return ''
+  return `${createdCredential.value.key}:${createdCredential.value.secret}`
+})
+
+const handleCreateToken = async () => {
+  createToast.value = null
+  createdCredential.value = null
+
+  const url = backendUrl.value
+  if (!url) {
+    createToast.value = {
+      type: 'error',
+      title: 'Creation Failed',
+      message: 'No backend is selected. Configure one from the top-right backend switcher.',
+    }
+    return
+  }
+
+  const creatorToken = currentBackend.value?.token?.trim() || ''
+  if (!creatorToken) {
+    createToast.value = {
+      type: 'error',
+      title: 'Creation Failed',
+      message: 'Current backend token is empty. Select a backend with a valid token first.',
+    }
+    return
+  }
+
+  const userVal = username.value.trim()
+  const passVal = password.value
+  if ((userVal && !passVal) || (!userVal && passVal)) {
+    createToast.value = {
+      type: 'error',
+      title: 'Creation Failed',
+      message: 'username and password must be provided together or omitted together.',
+    }
+    return
+  }
+
+  const fromMs = parseTimestamp(timestampFrom.value)
+  if (Number.isNaN(fromMs)) {
+    createToast.value = {
+      type: 'error',
+      title: 'Creation Failed',
+      message: 'timestamp_from is not a valid datetime.',
+    }
+    return
+  }
+
+  const toMs = parseTimestamp(timestampTo.value)
+  if (Number.isNaN(toMs)) {
+    createToast.value = {
+      type: 'error',
+      title: 'Creation Failed',
+      message: 'timestamp_to is not a valid datetime.',
+    }
+    return
+  }
+
+  if (fromMs !== null && toMs !== null && fromMs > toMs) {
+    createToast.value = {
+      type: 'error',
+      title: 'Creation Failed',
+      message: 'timestamp_from cannot be greater than timestamp_to.',
+    }
+    return
+  }
+
+  const scopes = scopePreview.value
+  if (scopeMode.value === 'agent' && scopes.length === 0) {
+    createToast.value = {
+      type: 'error',
+      title: 'Creation Failed',
+      message: 'Scope is set to agent_uuid but no agent UUID is provided.',
+    }
+    return
+  }
+
+  const permissions = buildPermissions()
+  if (permissions.length === 0) {
+    createToast.value = {
+      type: 'error',
+      title: 'Creation Failed',
+      message: 'At least one permission is required.',
+    }
+    return
+  }
+
+  const tokenCreation: Record<string, unknown> = {
+    username: userVal || null,
+    password: passVal || null,
+    timestamp_from: fromMs,
+    timestamp_to: toMs,
+    version: 1,
+    token_limit: [{ scopes, permissions }],
+  }
+
+  const payloadObj = {
+    father_token: creatorToken,
+    token_creation: tokenCreation,
+  }
+
+  createLoading.value = true
+  try {
+    const result = await rpcCallWithFallback<{ key?: string; secret?: string }>(url, 'token_create', [
+      payloadObj,
+      [payloadObj],
+      [creatorToken, tokenCreation],
+    ])
+
+    const key = result?.key || ''
+    const secret = result?.secret || ''
+    if (!key || !secret) {
+      throw new Error('Token was created but key/secret is missing in response.')
+    }
+
+    createdCredential.value = { key, secret }
+    createToast.value = {
+      type: 'success',
+      title: 'Token Created',
+      message: 'Save the generated credential now. Secret is not retrievable later.',
+    }
+  } catch (e: any) {
+    createToast.value = {
+      type: 'error',
+      title: 'Creation Failed',
+      message: e?.message || 'Unknown error',
+    }
+  } finally {
+    createLoading.value = false
+  }
+}
+
+const handleDeleteToken = async () => {
+  deleteToast.value = null
+
+  const url = backendUrl.value
+  if (!url) {
+    deleteToast.value = {
+      type: 'error',
+      title: 'Delete Failed',
+      message: 'No backend is selected. Configure one from the top-right backend switcher.',
+    }
+    return
+  }
+
+  const token = deleteToken.value.trim()
+  if (!token) {
+    deleteToast.value = { type: 'error', title: 'Delete Failed', message: 'token is required.' }
+    return
+  }
+
+  const targetKey = deleteTargetTokenKey.value.split(':')[0]?.trim() || '' // in case user pastes key:secret
+
+  if (deleteTargetTokenKey.value.includes(':')) {
+    deleteTargetTokenKey.value = targetKey
+  }
+
+  if (!isSuperToken.value && targetKey) {
+    deleteToast.value = {
+      type: 'error',
+      title: 'Delete Failed',
+      message: 'Only super token can delete other tokens. Leave target_token_key empty to delete self.',
+    }
+    return
+  }
+  if (isSuperToken.value && !targetKey) {
+    deleteToast.value = {
+      type: 'error',
+      title: 'Delete Failed',
+      message: 'target_token_key is required for super token deletion of another token.',
+    }
+    return
+  }
+  if (isSuperToken.value && currentTokenKey.value && targetKey === currentTokenKey.value) {
+    deleteToast.value = {
+      type: 'error',
+      title: 'Delete Failed',
+      message: 'Super token can only delete non-self token here.',
+    }
+    return
+  }
+
+  const payloadObj: Record<string, unknown> = { token }
+  if (isSuperToken.value && targetKey) payloadObj.target_token_key = targetKey
+
+  deleteLoading.value = true
+  try {
+    const fallbackParams = isSuperToken.value && targetKey ? [token, targetKey] : [token]
+    const res = await rpcCallWithFallback(url, 'token_delete', [payloadObj, [payloadObj], fallbackParams])
+    if (res.success !== true) {
+      throw new Error(res?.message || 'Token deletion failed without error message.')
+    }
+    deleteToast.value = {
+      type: 'success',
+      title: 'Delete Requested',
+      message: isSuperToken.value && targetKey
+        ? `Token with key ${targetKey} has been deleted.`
+        : 'Token has been deleted.',
+    }
+  } catch (e: any) {
+    deleteToast.value = {
+      type: 'error',
+      title: 'Delete Failed',
+      message: e?.message || 'Unknown error',
+    }
+  } finally {
+    deleteLoading.value = false
+  }
+}
+
+const copyText = async (text: string) => {
+  if (!text) return
+  await navigator.clipboard.writeText(text)
+}
+
+watch(
+  () => currentBackend.value?.token,
+  (next, prev) => {
+    if (!deleteToken.value || deleteToken.value === prev) deleteToken.value = next || ''
+  },
+  { immediate: true },
+)
+
+watch(isSuperToken, (next) => {
+  if (!next) deleteTargetTokenKey.value = ''
+})
+</script>
+
+<template>
+  <div class="min-h-screen">
+    <div class="container mx-auto p-6 space-y-6">
+      <HeaderView :status="backendStatus" />
+
+      <div class="flex items-center justify-between gap-4">
+        <Button variant="outline" as-child>
+          <router-link to="/" class="inline-flex items-center gap-2">
+            <ArrowLeft class="h-4 w-4" />
+            Back to Home
+          </router-link>
+        </Button>
+      </div>
+
+      <div class="grid gap-6" :class="isSuperToken ? 'xl:grid-cols-2' : 'xl:grid-cols-1'">
+        <Card v-if="isSuperToken">
+          <CardHeader>
+            <CardTitle class="flex items-center gap-2">
+              <KeyRound class="h-5 w-5" />
+              Create Token
+            </CardTitle>
+          </CardHeader>
+          <CardContent class="space-y-5">
+            <div class="space-y-3">
+              <Label>Scope</Label>
+              <div class="flex flex-wrap gap-2">
+                <Button
+                  :variant="scopeMode === 'global' ? 'default' : 'outline'"
+                  size="sm"
+                  @click="scopeMode = 'global'"
+                >
+                  global
+                </Button>
+                <Button
+                  :variant="scopeMode === 'agent' ? 'default' : 'outline'"
+                  size="sm"
+                  @click="scopeMode = 'agent'"
+                >
+                  agent_uuid
+                </Button>
+              </div>
+              <textarea
+                v-if="scopeMode === 'agent'"
+                v-model="agentUuidsText"
+                class="flex min-h-[96px] w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]"
+                placeholder="One UUID per line, or split by comma/space."
+              />
+            </div>
+
+            <div class="space-y-3">
+              <div class="flex items-center justify-between">
+                <Label>Permissions</Label>
+                <Badge variant="secondary">{{ selectedPermissionCount }} selected</Badge>
+              </div>
+
+              <details class="rounded-md border p-3" open>
+                <summary class="cursor-pointer select-none text-sm font-medium">static_monitoring</summary>
+                <div class="mt-3 space-y-2">
+                  <div class="flex flex-wrap gap-2">
+                    <Button
+                      :variant="staticWrite ? 'default' : 'outline'"
+                      size="sm"
+                      @click="staticWrite = !staticWrite"
+                    >
+                      write
+                    </Button>
+                  </div>
+                  <div class="flex flex-wrap gap-2">
+                    <Button
+                      v-for="field in STATIC_FIELDS"
+                      :key="`sm-read-${field}`"
+                      :variant="staticReads.includes(field) ? 'default' : 'outline'"
+                      size="sm"
+                      @click="toggleList(staticReads, field)"
+                    >
+                      read:{{ field }}
+                    </Button>
+                  </div>
+                </div>
+              </details>
+
+              <details class="rounded-md border p-3">
+                <summary class="cursor-pointer select-none text-sm font-medium">dynamic_monitoring</summary>
+                <div class="mt-3 space-y-2">
+                  <div class="flex flex-wrap gap-2">
+                    <Button
+                      :variant="dynamicWrite ? 'default' : 'outline'"
+                      size="sm"
+                      @click="dynamicWrite = !dynamicWrite"
+                    >
+                      write
+                    </Button>
+                  </div>
+                  <div class="flex flex-wrap gap-2">
+                    <Button
+                      v-for="field in DYNAMIC_FIELDS"
+                      :key="`dm-read-${field}`"
+                      :variant="dynamicReads.includes(field) ? 'default' : 'outline'"
+                      size="sm"
+                      @click="toggleList(dynamicReads, field)"
+                    >
+                      read:{{ field }}
+                    </Button>
+                  </div>
+                </div>
+              </details>
+
+              <details class="rounded-md border p-3">
+                <summary class="cursor-pointer select-none text-sm font-medium">task</summary>
+                <div class="mt-3 space-y-3">
+                  <div class="flex flex-wrap gap-2">
+                    <Button
+                      :variant="taskListen ? 'default' : 'outline'"
+                      size="sm"
+                      @click="taskListen = !taskListen"
+                    >
+                      listen
+                    </Button>
+                  </div>
+
+                  <details class="rounded-md border p-2">
+                    <summary class="cursor-pointer select-none text-xs font-medium">create</summary>
+                    <div class="mt-2 flex flex-wrap gap-2">
+                      <Button
+                        v-for="taskType in TASK_TYPES"
+                        :key="`task-create-${taskType}`"
+                        :variant="taskCreate.includes(taskType) ? 'default' : 'outline'"
+                        size="sm"
+                        @click="toggleList(taskCreate, taskType)"
+                      >
+                        {{ taskType }}
+                      </Button>
+                    </div>
+                  </details>
+
+                  <details class="rounded-md border p-2">
+                    <summary class="cursor-pointer select-none text-xs font-medium">read</summary>
+                    <div class="mt-2 flex flex-wrap gap-2">
+                      <Button
+                        v-for="taskType in TASK_TYPES"
+                        :key="`task-read-${taskType}`"
+                        :variant="taskRead.includes(taskType) ? 'default' : 'outline'"
+                        size="sm"
+                        @click="toggleList(taskRead, taskType)"
+                      >
+                        {{ taskType }}
+                      </Button>
+                    </div>
+                  </details>
+
+                  <details class="rounded-md border p-2">
+                    <summary class="cursor-pointer select-none text-xs font-medium">write</summary>
+                    <div class="mt-2 flex flex-wrap gap-2">
+                      <Button
+                        v-for="taskType in TASK_TYPES"
+                        :key="`task-write-${taskType}`"
+                        :variant="taskWrite.includes(taskType) ? 'default' : 'outline'"
+                        size="sm"
+                        @click="toggleList(taskWrite, taskType)"
+                      >
+                        {{ taskType }}
+                      </Button>
+                    </div>
+                  </details>
+                </div>
+              </details>
+
+              <details class="rounded-md border p-3">
+                <summary class="cursor-pointer select-none text-sm font-medium">metadata</summary>
+                <div class="mt-3 flex flex-wrap gap-2">
+                  <Button
+                    :variant="metadataRead ? 'default' : 'outline'"
+                    size="sm"
+                    @click="metadataRead = !metadataRead"
+                  >
+                    read
+                  </Button>
+                  <Button
+                    :variant="metadataWrite ? 'default' : 'outline'"
+                    size="sm"
+                    @click="metadataWrite = !metadataWrite"
+                  >
+                    write
+                  </Button>
+                </div>
+              </details>
+
+              <details class="rounded-md border p-3">
+                <summary class="cursor-pointer select-none text-sm font-medium">crontab</summary>
+                <div class="mt-3 flex flex-wrap gap-2">
+                  <Button
+                    :variant="crontabRead ? 'default' : 'outline'"
+                    size="sm"
+                    @click="crontabRead = !crontabRead"
+                  >
+                    read
+                  </Button>
+                  <Button
+                    :variant="crontabWrite ? 'default' : 'outline'"
+                    size="sm"
+                    @click="crontabWrite = !crontabWrite"
+                  >
+                    write
+                  </Button>
+                  <Button
+                    :variant="crontabDelete ? 'default' : 'outline'"
+                    size="sm"
+                    @click="crontabDelete = !crontabDelete"
+                  >
+                    delete
+                  </Button>
+                </div>
+              </details>
+            </div>
+
+            <div class="space-y-2">
+              <Button variant="outline" size="sm" @click="showOptionalOptions = !showOptionalOptions">
+                {{ showOptionalOptions ? 'Hide Optional Fields' : 'Show Optional Fields' }}
+              </Button>
+            </div>
+
+            <div v-if="showOptionalOptions" class="grid gap-4 md:grid-cols-2">
+              <div class="space-y-2">
+                <Label for="username">username</Label>
+                <Input id="username" v-model="username" placeholder="Optional" />
+              </div>
+              <div class="space-y-2">
+                <Label for="password">password</Label>
+                <Input id="password" v-model="password" type="password" placeholder="Optional" />
+              </div>
+              <div class="space-y-2">
+                <Label for="timestamp-from">timestamp_from</Label>
+                <Input id="timestamp-from" v-model="timestampFrom" type="datetime-local" />
+              </div>
+              <div class="space-y-2">
+                <Label for="timestamp-to">timestamp_to</Label>
+                <Input id="timestamp-to" v-model="timestampTo" type="datetime-local" />
+              </div>
+            </div>
+
+            <div class="space-y-2">
+              <Button variant="outline" size="sm" @click="showPayloadPreview = !showPayloadPreview">
+                {{ showPayloadPreview ? 'Hide Payload Preview' : 'Show Payload Preview' }}
+              </Button>
+              <div v-if="showPayloadPreview" class="space-y-3 rounded-md border p-3">
+                <div class="text-sm font-medium">token_limit preview</div>
+                <pre class="text-xs leading-5 overflow-x-auto">{{
+                  JSON.stringify(tokenLimitPreview, null, 2)
+                }}</pre>
+              </div>
+            </div>
+
+            <Button class="w-full" :disabled="createLoading" @click="handleCreateToken">
+              <span v-if="createLoading">Creating...</span>
+              <span v-else>Create Token</span>
+            </Button>
+
+            <Alert v-if="createToast" :variant="createToast.type === 'success' ? 'default' : 'destructive'">
+              <ShieldCheck v-if="createToast.type === 'success'" class="h-4 w-4" />
+              <ShieldAlert v-else class="h-4 w-4" />
+              <AlertTitle>{{ createToast.title }}</AlertTitle>
+              <AlertDescription>{{ createToast.message }}</AlertDescription>
+            </Alert>
+
+            <div v-if="createdCredential" class="rounded-md border p-3 space-y-2">
+              <div class="flex items-center justify-between gap-2">
+                <Badge variant="secondary">Result</Badge>
+                <Button variant="outline" size="sm" @click="copyText(createdTokenText)">
+                  <Copy class="h-3.5 w-3.5 mr-1" />
+                  Copy key:secret
+                </Button>
+              </div>
+              <div class="text-xs font-mono break-all">key: {{ createdCredential.key }}</div>
+              <div class="text-xs font-mono break-all">secret: {{ createdCredential.secret }}</div>
+              <div class="text-xs font-mono break-all">token: {{ createdTokenText }}</div>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle class="flex items-center gap-2">
+              <Trash2 class="h-5 w-5" />
+              Delete Token
+            </CardTitle>
+          </CardHeader>
+          <CardContent class="space-y-5">
+            <div class="space-y-2">
+              <Label for="delete-token">token</Label>
+              <Input id="delete-token" v-model="deleteToken" placeholder="Token performing this deletion" />
+            </div>
+            <div class="space-y-2">
+              <Label for="delete-target-token-key">
+                {{
+                  isSuperToken
+                    ? 'target_token_key (required, must be non-self)'
+                    : 'target_token_key (disabled for non-super token)'
+                }}
+              </Label>
+              <Input
+                id="delete-target-token-key"
+                v-model="deleteTargetTokenKey"
+                :disabled="!isSuperToken"
+                :placeholder="
+                  isSuperToken
+                    ? 'Provide another token_key to delete'
+                    : 'Non-super token can only self-delete'
+                "
+              />
+            </div>
+
+            <Button class="w-full" variant="destructive" :disabled="deleteLoading" @click="handleDeleteToken">
+              <span v-if="deleteLoading">Deleting...</span>
+              <span v-else>Delete Token</span>
+            </Button>
+
+            <Alert v-if="deleteToast" :variant="deleteToast.type === 'success' ? 'default' : 'destructive'">
+              <ShieldCheck v-if="deleteToast.type === 'success'" class="h-4 w-4" />
+              <ShieldAlert v-else class="h-4 w-4" />
+              <AlertTitle>{{ deleteToast.title }}</AlertTitle>
+              <AlertDescription>{{ deleteToast.message }}</AlertDescription>
+            </Alert>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  </div>
+</template>

From db5cb6c25c4853481fed7afa91194c1d45629984 Mon Sep 17 00:00:00 2001
From: zhullyb <zhullyb@outlook.com>
Date: Thu, 12 Feb 2026 23:04:02 +0800
Subject: [PATCH 06/10] refactor(wsRpc): remove wsRpcCallWithFallback function

---
 src/composables/useWsRpc.ts | 27 ---------------------------
 1 file changed, 27 deletions(-)

diff --git a/src/composables/useWsRpc.ts b/src/composables/useWsRpc.ts
index dd8a961..abfd950 100644
--- a/src/composables/useWsRpc.ts
+++ b/src/composables/useWsRpc.ts
@@ -105,30 +105,3 @@ export const wsRpcCall = <T = unknown>(
     }
   })
 }
-
-export const wsRpcCallWithFallback = async <T = unknown>(
-  url: string,
-  method: string,
-  paramCandidates: unknown[],
-  options: WsRpcFallbackOptions = {},
-): Promise<T> => {
-  let lastError: Error | null = null
-
-  for (let index = 0; index < paramCandidates.length; index += 1) {
-    try {
-      return await wsRpcCall<T>(url, method, paramCandidates[index], options)
-    } catch (error: unknown) {
-      const normalizedError = error instanceof Error ? error : new Error(String(error))
-      lastError = normalizedError
-      const isLast = index === paramCandidates.length - 1
-      if (isLast) throw normalizedError
-
-      const shouldRetry = options.shouldRetry
-        ? options.shouldRetry(normalizedError, index, paramCandidates.length)
-        : true
-      if (!shouldRetry) throw normalizedError
-    }
-  }
-
-  throw lastError || new Error(`${method} failed`)
-}

From d2d8728bd1b5a665216690f9d6d6ac226c830b78 Mon Sep 17 00:00:00 2001
From: zhullyb <zhullyb@outlook.com>
Date: Thu, 12 Feb 2026 23:14:14 +0800
Subject: [PATCH 07/10] feat: add DeleteTokenCard component and refactor
 TokenManageView

- Introduced a new DeleteTokenCard component for handling token deletion.
- Refactored TokenManageView to utilize the new DeleteTokenCard component.
- Removed inline delete token logic from TokenManageView for better separation of concerns.
---
 .../token-manage/CreateTokenCard.vue          | 454 ++++++++++++
 .../token-manage/DeleteTokenCard.vue          | 167 +++++
 src/views/TokenManageView.vue                 | 684 +-----------------
 3 files changed, 628 insertions(+), 677 deletions(-)
 create mode 100644 src/components/token-manage/CreateTokenCard.vue
 create mode 100644 src/components/token-manage/DeleteTokenCard.vue

diff --git a/src/components/token-manage/CreateTokenCard.vue b/src/components/token-manage/CreateTokenCard.vue
new file mode 100644
index 0000000..eeaf6a8
--- /dev/null
+++ b/src/components/token-manage/CreateTokenCard.vue
@@ -0,0 +1,454 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { Copy, KeyRound, ShieldAlert, ShieldCheck } from 'lucide-vue-next'
+import { useBackendStore } from '@/composables/useBackendStore'
+import { wsRpcCall } from '@/composables/useWsRpc'
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+
+type ToastState = {
+  type: 'success' | 'error'
+  title: string
+  message: string
+}
+
+type ScopeMode = 'global' | 'agent'
+
+const STATIC_FIELDS = ['cpu', 'system', 'gpu'] as const
+const DYNAMIC_FIELDS = ['cpu', 'ram', 'load', 'system', 'disk', 'network', 'gpu'] as const
+const TASK_TYPES = ['ping', 'tcp_ping', 'http_ping', 'web_shell', 'execute', 'ip'] as const
+
+const { currentBackend } = useBackendStore()
+const backendUrl = computed(() => currentBackend.value?.url ?? '')
+
+const scopeMode = ref<ScopeMode>('global')
+const agentUuidsText = ref('')
+
+const username = ref('')
+const password = ref('')
+const timestampFrom = ref('')
+const timestampTo = ref('')
+const showOptionalOptions = ref(false)
+const showPayloadPreview = ref(false)
+
+const staticWrite = ref(false)
+const staticReads = ref<string[]>([])
+const dynamicWrite = ref(false)
+const dynamicReads = ref<string[]>([])
+const taskListen = ref(false)
+const taskCreate = ref<string[]>([])
+const taskRead = ref<string[]>([])
+const taskWrite = ref<string[]>([])
+const crontabRead = ref(false)
+const crontabWrite = ref(false)
+const crontabDelete = ref(false)
+
+const createLoading = ref(false)
+const createToast = ref<ToastState | null>(null)
+const createdCredential = ref<{ key: string; secret: string } | null>(null)
+
+const toggleList = (list: string[], val: string) => {
+  const idx = list.indexOf(val)
+  if (idx >= 0) {
+    list.splice(idx, 1)
+    return
+  }
+  list.push(val)
+}
+
+const parseTimestamp = (val: string) => {
+  if (!val.trim()) return null
+  const ms = new Date(val).getTime()
+  return Number.isFinite(ms) ? ms : NaN
+}
+
+const buildPermissions = () => {
+  const permissions: Record<string, unknown>[] = []
+
+  if (staticWrite.value) permissions.push({ static_monitoring: 'write' })
+  for (const field of staticReads.value) permissions.push({ static_monitoring: { read: field } })
+
+  if (dynamicWrite.value) permissions.push({ dynamic_monitoring: 'write' })
+  for (const field of dynamicReads.value) permissions.push({ dynamic_monitoring: { read: field } })
+
+  if (taskListen.value) permissions.push({ task: 'listen' })
+  for (const taskType of taskCreate.value) permissions.push({ task: { create: taskType } })
+  for (const taskType of taskRead.value) permissions.push({ task: { read: taskType } })
+  for (const taskType of taskWrite.value) permissions.push({ task: { write: taskType } })
+
+  if (crontabRead.value) permissions.push({ crontab: 'read' })
+  if (crontabWrite.value) permissions.push({ crontab: 'write' })
+  if (crontabDelete.value) permissions.push({ crontab: 'delete' })
+
+  return permissions
+}
+
+const selectedPermissionCount = computed(() => buildPermissions().length)
+
+const scopePreview = computed(() => {
+  if (scopeMode.value === 'global') return ['global']
+  return agentUuidsText.value
+    .split(/[\n,\s]+/g)
+    .map((s) => s.trim())
+    .filter(Boolean)
+    .map((agentUuid) => ({ agent_uuid: agentUuid }))
+})
+
+const tokenLimitPreview = computed(() => [
+  {
+    scopes: scopePreview.value,
+    permissions: buildPermissions(),
+  },
+])
+
+const createdTokenText = computed(() => {
+  if (!createdCredential.value) return ''
+  return `${createdCredential.value.key}:${createdCredential.value.secret}`
+})
+
+const handleCreateToken = async () => {
+  createToast.value = null
+  createdCredential.value = null
+
+  const url = backendUrl.value
+  if (!url) {
+    createToast.value = {
+      type: 'error',
+      title: 'Creation Failed',
+      message: 'No backend is selected. Configure one from the top-right backend switcher.',
+    }
+    return
+  }
+
+  const creatorToken = currentBackend.value?.token?.trim() || ''
+  if (!creatorToken) {
+    createToast.value = {
+      type: 'error',
+      title: 'Creation Failed',
+      message: 'Current backend token is empty. Select a backend with a valid token first.',
+    }
+    return
+  }
+
+  const userVal = username.value.trim()
+  const passVal = password.value
+  if ((userVal && !passVal) || (!userVal && passVal)) {
+    createToast.value = {
+      type: 'error',
+      title: 'Creation Failed',
+      message: 'username and password must be provided together or omitted together.',
+    }
+    return
+  }
+
+  const fromMs = parseTimestamp(timestampFrom.value)
+  if (Number.isNaN(fromMs)) {
+    createToast.value = {
+      type: 'error',
+      title: 'Creation Failed',
+      message: 'timestamp_from is not a valid datetime.',
+    }
+    return
+  }
+
+  const toMs = parseTimestamp(timestampTo.value)
+  if (Number.isNaN(toMs)) {
+    createToast.value = {
+      type: 'error',
+      title: 'Creation Failed',
+      message: 'timestamp_to is not a valid datetime.',
+    }
+    return
+  }
+
+  if (fromMs !== null && toMs !== null && fromMs > toMs) {
+    createToast.value = {
+      type: 'error',
+      title: 'Creation Failed',
+      message: 'timestamp_from cannot be greater than timestamp_to.',
+    }
+    return
+  }
+
+  const scopes = scopePreview.value
+  if (scopeMode.value === 'agent' && scopes.length === 0) {
+    createToast.value = {
+      type: 'error',
+      title: 'Creation Failed',
+      message: 'Scope is set to agent_uuid but no agent UUID is provided.',
+    }
+    return
+  }
+
+  const permissions = buildPermissions()
+  if (permissions.length === 0) {
+    createToast.value = {
+      type: 'error',
+      title: 'Creation Failed',
+      message: 'At least one permission is required.',
+    }
+    return
+  }
+
+  const tokenCreation: Record<string, unknown> = {
+    username: userVal || null,
+    password: passVal || null,
+    timestamp_from: fromMs,
+    timestamp_to: toMs,
+    version: 1,
+    token_limit: [{ scopes, permissions }],
+  }
+
+  const payloadObj = {
+    father_token: creatorToken,
+    token_creation: tokenCreation,
+  }
+
+  createLoading.value = true
+  try {
+    const result = await wsRpcCall<{ key?: string; secret?: string }>(url, 'token_create', payloadObj)
+
+    const key = result?.key || ''
+    const secret = result?.secret || ''
+    if (!key || !secret) {
+      throw new Error('Token was created but key/secret is missing in response.')
+    }
+
+    createdCredential.value = { key, secret }
+    createToast.value = {
+      type: 'success',
+      title: 'Token Created',
+      message: 'Save the generated credential now. Secret is not retrievable later.',
+    }
+  } catch (e: any) {
+    createToast.value = {
+      type: 'error',
+      title: 'Creation Failed',
+      message: e?.message || 'Unknown error',
+    }
+  } finally {
+    createLoading.value = false
+  }
+}
+
+const copyText = async (text: string) => {
+  if (!text) return
+  await navigator.clipboard.writeText(text)
+}
+</script>
+
+<template>
+  <Card>
+    <CardHeader>
+      <CardTitle class="flex items-center gap-2">
+        <KeyRound class="h-5 w-5" />
+        Create Token
+      </CardTitle>
+    </CardHeader>
+    <CardContent class="space-y-5">
+      <div class="space-y-3">
+        <Label>Scope</Label>
+        <div class="flex flex-wrap gap-2">
+          <Button :variant="scopeMode === 'global' ? 'default' : 'outline'" size="sm" @click="scopeMode = 'global'">
+            global
+          </Button>
+          <Button :variant="scopeMode === 'agent' ? 'default' : 'outline'" size="sm" @click="scopeMode = 'agent'">
+            agent_uuid
+          </Button>
+        </div>
+        <textarea
+          v-if="scopeMode === 'agent'"
+          v-model="agentUuidsText"
+          class="flex min-h-[96px] w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]"
+          placeholder="One UUID per line, or split by comma/space."
+        />
+      </div>
+
+      <div class="space-y-3">
+        <div class="flex items-center justify-between">
+          <Label>Permissions</Label>
+          <Badge variant="secondary">{{ selectedPermissionCount }} selected</Badge>
+        </div>
+
+        <details class="rounded-md border p-3" open>
+          <summary class="cursor-pointer select-none text-sm font-medium">static_monitoring</summary>
+          <div class="mt-3 space-y-2">
+            <div class="flex flex-wrap gap-2">
+              <Button :variant="staticWrite ? 'default' : 'outline'" size="sm" @click="staticWrite = !staticWrite">
+                write
+              </Button>
+            </div>
+            <div class="flex flex-wrap gap-2">
+              <Button
+                v-for="field in STATIC_FIELDS"
+                :key="`sm-read-${field}`"
+                :variant="staticReads.includes(field) ? 'default' : 'outline'"
+                size="sm"
+                @click="toggleList(staticReads, field)"
+              >
+                read:{{ field }}
+              </Button>
+            </div>
+          </div>
+        </details>
+
+        <details class="rounded-md border p-3">
+          <summary class="cursor-pointer select-none text-sm font-medium">dynamic_monitoring</summary>
+          <div class="mt-3 space-y-2">
+            <div class="flex flex-wrap gap-2">
+              <Button :variant="dynamicWrite ? 'default' : 'outline'" size="sm" @click="dynamicWrite = !dynamicWrite">
+                write
+              </Button>
+            </div>
+            <div class="flex flex-wrap gap-2">
+              <Button
+                v-for="field in DYNAMIC_FIELDS"
+                :key="`dm-read-${field}`"
+                :variant="dynamicReads.includes(field) ? 'default' : 'outline'"
+                size="sm"
+                @click="toggleList(dynamicReads, field)"
+              >
+                read:{{ field }}
+              </Button>
+            </div>
+          </div>
+        </details>
+
+        <details class="rounded-md border p-3">
+          <summary class="cursor-pointer select-none text-sm font-medium">task</summary>
+          <div class="mt-3 space-y-3">
+            <div class="flex flex-wrap gap-2">
+              <Button :variant="taskListen ? 'default' : 'outline'" size="sm" @click="taskListen = !taskListen">
+                listen
+              </Button>
+            </div>
+
+            <details class="rounded-md border p-2">
+              <summary class="cursor-pointer select-none text-xs font-medium">create</summary>
+              <div class="mt-2 flex flex-wrap gap-2">
+                <Button
+                  v-for="taskType in TASK_TYPES"
+                  :key="`task-create-${taskType}`"
+                  :variant="taskCreate.includes(taskType) ? 'default' : 'outline'"
+                  size="sm"
+                  @click="toggleList(taskCreate, taskType)"
+                >
+                  {{ taskType }}
+                </Button>
+              </div>
+            </details>
+
+            <details class="rounded-md border p-2">
+              <summary class="cursor-pointer select-none text-xs font-medium">read</summary>
+              <div class="mt-2 flex flex-wrap gap-2">
+                <Button
+                  v-for="taskType in TASK_TYPES"
+                  :key="`task-read-${taskType}`"
+                  :variant="taskRead.includes(taskType) ? 'default' : 'outline'"
+                  size="sm"
+                  @click="toggleList(taskRead, taskType)"
+                >
+                  {{ taskType }}
+                </Button>
+              </div>
+            </details>
+
+            <details class="rounded-md border p-2">
+              <summary class="cursor-pointer select-none text-xs font-medium">write</summary>
+              <div class="mt-2 flex flex-wrap gap-2">
+                <Button
+                  v-for="taskType in TASK_TYPES"
+                  :key="`task-write-${taskType}`"
+                  :variant="taskWrite.includes(taskType) ? 'default' : 'outline'"
+                  size="sm"
+                  @click="toggleList(taskWrite, taskType)"
+                >
+                  {{ taskType }}
+                </Button>
+              </div>
+            </details>
+          </div>
+        </details>
+
+        <details class="rounded-md border p-3">
+          <summary class="cursor-pointer select-none text-sm font-medium">crontab</summary>
+          <div class="mt-3 flex flex-wrap gap-2">
+            <Button :variant="crontabRead ? 'default' : 'outline'" size="sm" @click="crontabRead = !crontabRead">
+              read
+            </Button>
+            <Button :variant="crontabWrite ? 'default' : 'outline'" size="sm" @click="crontabWrite = !crontabWrite">
+              write
+            </Button>
+            <Button :variant="crontabDelete ? 'default' : 'outline'" size="sm" @click="crontabDelete = !crontabDelete">
+              delete
+            </Button>
+          </div>
+        </details>
+      </div>
+
+      <div class="space-y-2">
+        <Button variant="outline" size="sm" @click="showOptionalOptions = !showOptionalOptions">
+          {{ showOptionalOptions ? 'Hide Optional Fields' : 'Show Optional Fields' }}
+        </Button>
+      </div>
+
+      <div v-if="showOptionalOptions" class="grid gap-4 md:grid-cols-2">
+        <div class="space-y-2">
+          <Label for="username">username</Label>
+          <Input id="username" v-model="username" placeholder="Optional" />
+        </div>
+        <div class="space-y-2">
+          <Label for="password">password</Label>
+          <Input id="password" v-model="password" type="password" placeholder="Optional" />
+        </div>
+        <div class="space-y-2">
+          <Label for="timestamp-from">timestamp_from</Label>
+          <Input id="timestamp-from" v-model="timestampFrom" type="datetime-local" />
+        </div>
+        <div class="space-y-2">
+          <Label for="timestamp-to">timestamp_to</Label>
+          <Input id="timestamp-to" v-model="timestampTo" type="datetime-local" />
+        </div>
+      </div>
+
+      <div class="space-y-2">
+        <Button variant="outline" size="sm" @click="showPayloadPreview = !showPayloadPreview">
+          {{ showPayloadPreview ? 'Hide Payload Preview' : 'Show Payload Preview' }}
+        </Button>
+        <div v-if="showPayloadPreview" class="space-y-3 rounded-md border p-3">
+          <div class="text-sm font-medium">token_limit preview</div>
+          <pre class="text-xs leading-5 overflow-x-auto">{{ JSON.stringify(tokenLimitPreview, null, 2) }}</pre>
+        </div>
+      </div>
+
+      <Button class="w-full" :disabled="createLoading" @click="handleCreateToken">
+        <span v-if="createLoading">Creating...</span>
+        <span v-else>Create Token</span>
+      </Button>
+
+      <Alert v-if="createToast" :variant="createToast.type === 'success' ? 'default' : 'destructive'">
+        <ShieldCheck v-if="createToast.type === 'success'" class="h-4 w-4" />
+        <ShieldAlert v-else class="h-4 w-4" />
+        <AlertTitle>{{ createToast.title }}</AlertTitle>
+        <AlertDescription>{{ createToast.message }}</AlertDescription>
+      </Alert>
+
+      <div v-if="createdCredential" class="rounded-md border p-3 space-y-2">
+        <div class="flex items-center justify-between gap-2">
+          <Badge variant="secondary">Result</Badge>
+          <Button variant="outline" size="sm" @click="copyText(createdTokenText)">
+            <Copy class="h-3.5 w-3.5 mr-1" />
+            Copy key:secret
+          </Button>
+        </div>
+        <div class="text-xs font-mono break-all">key: {{ createdCredential.key }}</div>
+        <div class="text-xs font-mono break-all">secret: {{ createdCredential.secret }}</div>
+        <div class="text-xs font-mono break-all">token: {{ createdTokenText }}</div>
+      </div>
+    </CardContent>
+  </Card>
+</template>
diff --git a/src/components/token-manage/DeleteTokenCard.vue b/src/components/token-manage/DeleteTokenCard.vue
new file mode 100644
index 0000000..24a0763
--- /dev/null
+++ b/src/components/token-manage/DeleteTokenCard.vue
@@ -0,0 +1,167 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { storeToRefs } from 'pinia'
+import { ShieldAlert, ShieldCheck, Trash2 } from 'lucide-vue-next'
+import { useBackendStore } from '@/composables/useBackendStore'
+import { wsRpcCall } from '@/composables/useWsRpc'
+import { usePermissionStore } from '@/stores/usePermissionStore'
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+
+type ToastState = {
+  type: 'success' | 'error'
+  title: string
+  message: string
+}
+
+const { currentBackend } = useBackendStore()
+const backendUrl = computed(() => currentBackend.value?.url ?? '')
+
+const permissionStore = usePermissionStore()
+const { isSuperToken, tokenInfo } = storeToRefs(permissionStore)
+const currentTokenKey = computed(() => tokenInfo.value?.token_key?.trim() || '')
+
+const deleteToken = ref('')
+const deleteTargetTokenKey = ref('')
+const deleteLoading = ref(false)
+const deleteToast = ref<ToastState | null>(null)
+
+const handleDeleteToken = async () => {
+  deleteToast.value = null
+
+  const url = backendUrl.value
+  if (!url) {
+    deleteToast.value = {
+      type: 'error',
+      title: 'Delete Failed',
+      message: 'No backend is selected. Configure one from the top-right backend switcher.',
+    }
+    return
+  }
+
+  const token = deleteToken.value.trim()
+  if (!token) {
+    deleteToast.value = { type: 'error', title: 'Delete Failed', message: 'token is required.' }
+    return
+  }
+
+  const targetKey = deleteTargetTokenKey.value.split(':')[0]?.trim() || ''
+
+  if (deleteTargetTokenKey.value.includes(':')) {
+    deleteTargetTokenKey.value = targetKey
+  }
+
+  if (!isSuperToken.value && targetKey) {
+    deleteToast.value = {
+      type: 'error',
+      title: 'Delete Failed',
+      message: 'Only super token can delete other tokens. Leave target_token_key empty to delete self.',
+    }
+    return
+  }
+  if (isSuperToken.value && !targetKey) {
+    deleteToast.value = {
+      type: 'error',
+      title: 'Delete Failed',
+      message: 'target_token_key is required for super token deletion of another token.',
+    }
+    return
+  }
+  if (isSuperToken.value && currentTokenKey.value && targetKey === currentTokenKey.value) {
+    deleteToast.value = {
+      type: 'error',
+      title: 'Delete Failed',
+      message: 'Super token can only delete non-self token here.',
+    }
+    return
+  }
+
+  const payloadObj: Record<string, unknown> = { token }
+  if (isSuperToken.value && targetKey) payloadObj.target_token_key = targetKey
+
+  deleteLoading.value = true
+  try {
+    const res = await wsRpcCall<{ success?: boolean; message?: string }>(url, 'token_delete', payloadObj)
+    if (res.success !== true) {
+      throw new Error(res?.message || 'Token deletion failed without error message.')
+    }
+    deleteToast.value = {
+      type: 'success',
+      title: 'Delete Requested',
+      message:
+        isSuperToken.value && targetKey
+          ? `Token with key ${targetKey} has been deleted.`
+          : 'Token has been deleted.',
+    }
+  } catch (e: any) {
+    deleteToast.value = {
+      type: 'error',
+      title: 'Delete Failed',
+      message: e?.message || 'Unknown error',
+    }
+  } finally {
+    deleteLoading.value = false
+  }
+}
+
+watch(
+  () => currentBackend.value?.token,
+  (next, prev) => {
+    if (!deleteToken.value || deleteToken.value === prev) deleteToken.value = next || ''
+  },
+  { immediate: true },
+)
+
+watch(isSuperToken, (next) => {
+  if (!next) deleteTargetTokenKey.value = ''
+})
+</script>
+
+<template>
+  <Card>
+    <CardHeader>
+      <CardTitle class="flex items-center gap-2">
+        <Trash2 class="h-5 w-5" />
+        Delete Token
+      </CardTitle>
+    </CardHeader>
+    <CardContent class="space-y-5">
+      <div class="space-y-2">
+        <Label for="delete-token">token</Label>
+        <Input id="delete-token" v-model="deleteToken" placeholder="Token performing this deletion" />
+      </div>
+      <div class="space-y-2">
+        <Label for="delete-target-token-key">
+          {{
+            isSuperToken
+              ? 'target_token_key (required, must be non-self)'
+              : 'target_token_key (disabled for non-super token)'
+          }}
+        </Label>
+        <Input
+          id="delete-target-token-key"
+          v-model="deleteTargetTokenKey"
+          :disabled="!isSuperToken"
+          :placeholder="
+            isSuperToken ? 'Provide another token_key to delete' : 'Non-super token can only self-delete'
+          "
+        />
+      </div>
+
+      <Button class="w-full" variant="destructive" :disabled="deleteLoading" @click="handleDeleteToken">
+        <span v-if="deleteLoading">Deleting...</span>
+        <span v-else>Delete Token</span>
+      </Button>
+
+      <Alert v-if="deleteToast" :variant="deleteToast.type === 'success' ? 'default' : 'destructive'">
+        <ShieldCheck v-if="deleteToast.type === 'success'" class="h-4 w-4" />
+        <ShieldAlert v-else class="h-4 w-4" />
+        <AlertTitle>{{ deleteToast.title }}</AlertTitle>
+        <AlertDescription>{{ deleteToast.message }}</AlertDescription>
+      </Alert>
+    </CardContent>
+  </Card>
+</template>
diff --git a/src/views/TokenManageView.vue b/src/views/TokenManageView.vue
index ab5ef44..afb7db7 100644
--- a/src/views/TokenManageView.vue
+++ b/src/views/TokenManageView.vue
@@ -1,698 +1,28 @@
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue'
-import { ArrowLeft, Copy, KeyRound, ShieldAlert, ShieldCheck, Trash2 } from 'lucide-vue-next'
+import { computed } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useBackendStore } from '@/composables/useBackendStore'
 import HeaderView from '@/components/HeaderView.vue'
-import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
-import { Badge } from '@/components/ui/badge'
-import { Button } from '@/components/ui/button'
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
-import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
+import CreateTokenCard from '@/components/token-manage/CreateTokenCard.vue'
+import DeleteTokenCard from '@/components/token-manage/DeleteTokenCard.vue'
 import { usePermissionStore } from '@/stores/usePermissionStore'
-import { wsRpcCallWithFallback } from '@/composables/useWsRpc'
-
-type ToastState = {
-  type: 'success' | 'error'
-  title: string
-  message: string
-}
-
-type ScopeMode = 'global' | 'agent'
-
-const STATIC_FIELDS = ['cpu', 'system', 'gpu'] as const
-const DYNAMIC_FIELDS = ['cpu', 'ram', 'load', 'system', 'disk', 'network', 'gpu'] as const
-const TASK_TYPES = ['ping', 'tcp_ping', 'http_ping', 'web_shell', 'execute', 'ip'] as const
 
 const { currentBackend } = useBackendStore()
+const permissionStore = usePermissionStore()
+const { isSuperToken } = storeToRefs(permissionStore)
 
 const backendStatus = computed<'disconnected' | 'connecting' | 'connected'>(() =>
   currentBackend.value?.url ? 'connected' : 'disconnected',
 )
-const backendUrl = computed(() => currentBackend.value?.url ?? '')
-
-const scopeMode = ref<ScopeMode>('global')
-const agentUuidsText = ref('')
-
-const username = ref('')
-const password = ref('')
-const timestampFrom = ref('')
-const timestampTo = ref('')
-const showOptionalOptions = ref(false)
-const showPayloadPreview = ref(false)
-
-const staticWrite = ref(false)
-const staticReads = ref<string[]>([])
-const dynamicWrite = ref(false)
-const dynamicReads = ref<string[]>([])
-const taskListen = ref(false)
-const taskCreate = ref<string[]>([])
-const taskRead = ref<string[]>([])
-const taskWrite = ref<string[]>([])
-const metadataRead = ref(false)
-const metadataWrite = ref(false)
-const crontabRead = ref(false)
-const crontabWrite = ref(false)
-const crontabDelete = ref(false)
-
-const createLoading = ref(false)
-const createToast = ref<ToastState | null>(null)
-const createdCredential = ref<{ key: string; secret: string } | null>(null)
-
-const deleteToken = ref('')
-const deleteTargetTokenKey = ref('')
-const deleteLoading = ref(false)
-const deleteToast = ref<ToastState | null>(null)
-
-const permissionStore = usePermissionStore()
-const { isSuperToken, tokenInfo } = storeToRefs(permissionStore)
-const currentTokenKey = computed(() => tokenInfo.value?.token_key?.trim() || '')
-
-const toggleList = (list: string[], val: string) => {
-  const idx = list.indexOf(val)
-  if (idx >= 0) {
-    list.splice(idx, 1)
-    return
-  }
-  list.push(val)
-}
-
-const parseTimestamp = (val: string) => {
-  if (!val.trim()) return null
-  const ms = new Date(val).getTime()
-  return Number.isFinite(ms) ? ms : NaN
-}
-
-const isLikelyParamShapeError = (msg: string) =>
-  /invalid\s*params|unknown field|missing field|invalid type|expected/i.test(msg)
-
-const rpcCallWithFallback = async <T = any>(
-  url: string,
-  method: string,
-  candidates: unknown[],
-): Promise<T> => {
-  return wsRpcCallWithFallback<T>(url, method, candidates, {
-    shouldRetry: (error, idx, total) => idx < total - 1 && isLikelyParamShapeError(error.message),
-  })
-}
-
-const buildPermissions = () => {
-  const permissions: Record<string, unknown>[] = []
-
-  if (staticWrite.value) permissions.push({ static_monitoring: 'write' })
-  for (const field of staticReads.value) permissions.push({ static_monitoring: { read: field } })
-
-  if (dynamicWrite.value) permissions.push({ dynamic_monitoring: 'write' })
-  for (const field of dynamicReads.value) permissions.push({ dynamic_monitoring: { read: field } })
-
-  if (taskListen.value) permissions.push({ task: 'listen' })
-  for (const taskType of taskCreate.value) permissions.push({ task: { create: taskType } })
-  for (const taskType of taskRead.value) permissions.push({ task: { read: taskType } })
-  for (const taskType of taskWrite.value) permissions.push({ task: { write: taskType } })
-
-  if (metadataRead.value) permissions.push({ metadata: 'read' })
-  if (metadataWrite.value) permissions.push({ metadata: 'write' })
-
-  if (crontabRead.value) permissions.push({ crontab: 'read' })
-  if (crontabWrite.value) permissions.push({ crontab: 'write' })
-  if (crontabDelete.value) permissions.push({ crontab: 'delete' })
-
-  return permissions
-}
-
-const selectedPermissionCount = computed(() => buildPermissions().length)
-
-const scopePreview = computed(() => {
-  if (scopeMode.value === 'global') return ['global']
-  return agentUuidsText.value
-    .split(/[\n,\s]+/g)
-    .map((s) => s.trim())
-    .filter(Boolean)
-    .map((agentUuid) => ({ agent_uuid: agentUuid }))
-})
-
-const tokenLimitPreview = computed(() => [
-  {
-    scopes: scopePreview.value,
-    permissions: buildPermissions(),
-  },
-])
-
-const createdTokenText = computed(() => {
-  if (!createdCredential.value) return ''
-  return `${createdCredential.value.key}:${createdCredential.value.secret}`
-})
-
-const handleCreateToken = async () => {
-  createToast.value = null
-  createdCredential.value = null
-
-  const url = backendUrl.value
-  if (!url) {
-    createToast.value = {
-      type: 'error',
-      title: 'Creation Failed',
-      message: 'No backend is selected. Configure one from the top-right backend switcher.',
-    }
-    return
-  }
-
-  const creatorToken = currentBackend.value?.token?.trim() || ''
-  if (!creatorToken) {
-    createToast.value = {
-      type: 'error',
-      title: 'Creation Failed',
-      message: 'Current backend token is empty. Select a backend with a valid token first.',
-    }
-    return
-  }
-
-  const userVal = username.value.trim()
-  const passVal = password.value
-  if ((userVal && !passVal) || (!userVal && passVal)) {
-    createToast.value = {
-      type: 'error',
-      title: 'Creation Failed',
-      message: 'username and password must be provided together or omitted together.',
-    }
-    return
-  }
-
-  const fromMs = parseTimestamp(timestampFrom.value)
-  if (Number.isNaN(fromMs)) {
-    createToast.value = {
-      type: 'error',
-      title: 'Creation Failed',
-      message: 'timestamp_from is not a valid datetime.',
-    }
-    return
-  }
-
-  const toMs = parseTimestamp(timestampTo.value)
-  if (Number.isNaN(toMs)) {
-    createToast.value = {
-      type: 'error',
-      title: 'Creation Failed',
-      message: 'timestamp_to is not a valid datetime.',
-    }
-    return
-  }
-
-  if (fromMs !== null && toMs !== null && fromMs > toMs) {
-    createToast.value = {
-      type: 'error',
-      title: 'Creation Failed',
-      message: 'timestamp_from cannot be greater than timestamp_to.',
-    }
-    return
-  }
-
-  const scopes = scopePreview.value
-  if (scopeMode.value === 'agent' && scopes.length === 0) {
-    createToast.value = {
-      type: 'error',
-      title: 'Creation Failed',
-      message: 'Scope is set to agent_uuid but no agent UUID is provided.',
-    }
-    return
-  }
-
-  const permissions = buildPermissions()
-  if (permissions.length === 0) {
-    createToast.value = {
-      type: 'error',
-      title: 'Creation Failed',
-      message: 'At least one permission is required.',
-    }
-    return
-  }
-
-  const tokenCreation: Record<string, unknown> = {
-    username: userVal || null,
-    password: passVal || null,
-    timestamp_from: fromMs,
-    timestamp_to: toMs,
-    version: 1,
-    token_limit: [{ scopes, permissions }],
-  }
-
-  const payloadObj = {
-    father_token: creatorToken,
-    token_creation: tokenCreation,
-  }
-
-  createLoading.value = true
-  try {
-    const result = await rpcCallWithFallback<{ key?: string; secret?: string }>(url, 'token_create', [
-      payloadObj,
-      [payloadObj],
-      [creatorToken, tokenCreation],
-    ])
-
-    const key = result?.key || ''
-    const secret = result?.secret || ''
-    if (!key || !secret) {
-      throw new Error('Token was created but key/secret is missing in response.')
-    }
-
-    createdCredential.value = { key, secret }
-    createToast.value = {
-      type: 'success',
-      title: 'Token Created',
-      message: 'Save the generated credential now. Secret is not retrievable later.',
-    }
-  } catch (e: any) {
-    createToast.value = {
-      type: 'error',
-      title: 'Creation Failed',
-      message: e?.message || 'Unknown error',
-    }
-  } finally {
-    createLoading.value = false
-  }
-}
-
-const handleDeleteToken = async () => {
-  deleteToast.value = null
-
-  const url = backendUrl.value
-  if (!url) {
-    deleteToast.value = {
-      type: 'error',
-      title: 'Delete Failed',
-      message: 'No backend is selected. Configure one from the top-right backend switcher.',
-    }
-    return
-  }
-
-  const token = deleteToken.value.trim()
-  if (!token) {
-    deleteToast.value = { type: 'error', title: 'Delete Failed', message: 'token is required.' }
-    return
-  }
-
-  const targetKey = deleteTargetTokenKey.value.split(':')[0]?.trim() || '' // in case user pastes key:secret
-
-  if (deleteTargetTokenKey.value.includes(':')) {
-    deleteTargetTokenKey.value = targetKey
-  }
-
-  if (!isSuperToken.value && targetKey) {
-    deleteToast.value = {
-      type: 'error',
-      title: 'Delete Failed',
-      message: 'Only super token can delete other tokens. Leave target_token_key empty to delete self.',
-    }
-    return
-  }
-  if (isSuperToken.value && !targetKey) {
-    deleteToast.value = {
-      type: 'error',
-      title: 'Delete Failed',
-      message: 'target_token_key is required for super token deletion of another token.',
-    }
-    return
-  }
-  if (isSuperToken.value && currentTokenKey.value && targetKey === currentTokenKey.value) {
-    deleteToast.value = {
-      type: 'error',
-      title: 'Delete Failed',
-      message: 'Super token can only delete non-self token here.',
-    }
-    return
-  }
-
-  const payloadObj: Record<string, unknown> = { token }
-  if (isSuperToken.value && targetKey) payloadObj.target_token_key = targetKey
-
-  deleteLoading.value = true
-  try {
-    const fallbackParams = isSuperToken.value && targetKey ? [token, targetKey] : [token]
-    const res = await rpcCallWithFallback(url, 'token_delete', [payloadObj, [payloadObj], fallbackParams])
-    if (res.success !== true) {
-      throw new Error(res?.message || 'Token deletion failed without error message.')
-    }
-    deleteToast.value = {
-      type: 'success',
-      title: 'Delete Requested',
-      message: isSuperToken.value && targetKey
-        ? `Token with key ${targetKey} has been deleted.`
-        : 'Token has been deleted.',
-    }
-  } catch (e: any) {
-    deleteToast.value = {
-      type: 'error',
-      title: 'Delete Failed',
-      message: e?.message || 'Unknown error',
-    }
-  } finally {
-    deleteLoading.value = false
-  }
-}
-
-const copyText = async (text: string) => {
-  if (!text) return
-  await navigator.clipboard.writeText(text)
-}
-
-watch(
-  () => currentBackend.value?.token,
-  (next, prev) => {
-    if (!deleteToken.value || deleteToken.value === prev) deleteToken.value = next || ''
-  },
-  { immediate: true },
-)
-
-watch(isSuperToken, (next) => {
-  if (!next) deleteTargetTokenKey.value = ''
-})
 </script>
 
 <template>
   <div class="min-h-screen">
     <div class="container mx-auto p-6 space-y-6">
       <HeaderView :status="backendStatus" />
-
-      <div class="flex items-center justify-between gap-4">
-        <Button variant="outline" as-child>
-          <router-link to="/" class="inline-flex items-center gap-2">
-            <ArrowLeft class="h-4 w-4" />
-            Back to Home
-          </router-link>
-        </Button>
-      </div>
-
       <div class="grid gap-6" :class="isSuperToken ? 'xl:grid-cols-2' : 'xl:grid-cols-1'">
-        <Card v-if="isSuperToken">
-          <CardHeader>
-            <CardTitle class="flex items-center gap-2">
-              <KeyRound class="h-5 w-5" />
-              Create Token
-            </CardTitle>
-          </CardHeader>
-          <CardContent class="space-y-5">
-            <div class="space-y-3">
-              <Label>Scope</Label>
-              <div class="flex flex-wrap gap-2">
-                <Button
-                  :variant="scopeMode === 'global' ? 'default' : 'outline'"
-                  size="sm"
-                  @click="scopeMode = 'global'"
-                >
-                  global
-                </Button>
-                <Button
-                  :variant="scopeMode === 'agent' ? 'default' : 'outline'"
-                  size="sm"
-                  @click="scopeMode = 'agent'"
-                >
-                  agent_uuid
-                </Button>
-              </div>
-              <textarea
-                v-if="scopeMode === 'agent'"
-                v-model="agentUuidsText"
-                class="flex min-h-[96px] w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]"
-                placeholder="One UUID per line, or split by comma/space."
-              />
-            </div>
-
-            <div class="space-y-3">
-              <div class="flex items-center justify-between">
-                <Label>Permissions</Label>
-                <Badge variant="secondary">{{ selectedPermissionCount }} selected</Badge>
-              </div>
-
-              <details class="rounded-md border p-3" open>
-                <summary class="cursor-pointer select-none text-sm font-medium">static_monitoring</summary>
-                <div class="mt-3 space-y-2">
-                  <div class="flex flex-wrap gap-2">
-                    <Button
-                      :variant="staticWrite ? 'default' : 'outline'"
-                      size="sm"
-                      @click="staticWrite = !staticWrite"
-                    >
-                      write
-                    </Button>
-                  </div>
-                  <div class="flex flex-wrap gap-2">
-                    <Button
-                      v-for="field in STATIC_FIELDS"
-                      :key="`sm-read-${field}`"
-                      :variant="staticReads.includes(field) ? 'default' : 'outline'"
-                      size="sm"
-                      @click="toggleList(staticReads, field)"
-                    >
-                      read:{{ field }}
-                    </Button>
-                  </div>
-                </div>
-              </details>
-
-              <details class="rounded-md border p-3">
-                <summary class="cursor-pointer select-none text-sm font-medium">dynamic_monitoring</summary>
-                <div class="mt-3 space-y-2">
-                  <div class="flex flex-wrap gap-2">
-                    <Button
-                      :variant="dynamicWrite ? 'default' : 'outline'"
-                      size="sm"
-                      @click="dynamicWrite = !dynamicWrite"
-                    >
-                      write
-                    </Button>
-                  </div>
-                  <div class="flex flex-wrap gap-2">
-                    <Button
-                      v-for="field in DYNAMIC_FIELDS"
-                      :key="`dm-read-${field}`"
-                      :variant="dynamicReads.includes(field) ? 'default' : 'outline'"
-                      size="sm"
-                      @click="toggleList(dynamicReads, field)"
-                    >
-                      read:{{ field }}
-                    </Button>
-                  </div>
-                </div>
-              </details>
-
-              <details class="rounded-md border p-3">
-                <summary class="cursor-pointer select-none text-sm font-medium">task</summary>
-                <div class="mt-3 space-y-3">
-                  <div class="flex flex-wrap gap-2">
-                    <Button
-                      :variant="taskListen ? 'default' : 'outline'"
-                      size="sm"
-                      @click="taskListen = !taskListen"
-                    >
-                      listen
-                    </Button>
-                  </div>
-
-                  <details class="rounded-md border p-2">
-                    <summary class="cursor-pointer select-none text-xs font-medium">create</summary>
-                    <div class="mt-2 flex flex-wrap gap-2">
-                      <Button
-                        v-for="taskType in TASK_TYPES"
-                        :key="`task-create-${taskType}`"
-                        :variant="taskCreate.includes(taskType) ? 'default' : 'outline'"
-                        size="sm"
-                        @click="toggleList(taskCreate, taskType)"
-                      >
-                        {{ taskType }}
-                      </Button>
-                    </div>
-                  </details>
-
-                  <details class="rounded-md border p-2">
-                    <summary class="cursor-pointer select-none text-xs font-medium">read</summary>
-                    <div class="mt-2 flex flex-wrap gap-2">
-                      <Button
-                        v-for="taskType in TASK_TYPES"
-                        :key="`task-read-${taskType}`"
-                        :variant="taskRead.includes(taskType) ? 'default' : 'outline'"
-                        size="sm"
-                        @click="toggleList(taskRead, taskType)"
-                      >
-                        {{ taskType }}
-                      </Button>
-                    </div>
-                  </details>
-
-                  <details class="rounded-md border p-2">
-                    <summary class="cursor-pointer select-none text-xs font-medium">write</summary>
-                    <div class="mt-2 flex flex-wrap gap-2">
-                      <Button
-                        v-for="taskType in TASK_TYPES"
-                        :key="`task-write-${taskType}`"
-                        :variant="taskWrite.includes(taskType) ? 'default' : 'outline'"
-                        size="sm"
-                        @click="toggleList(taskWrite, taskType)"
-                      >
-                        {{ taskType }}
-                      </Button>
-                    </div>
-                  </details>
-                </div>
-              </details>
-
-              <details class="rounded-md border p-3">
-                <summary class="cursor-pointer select-none text-sm font-medium">metadata</summary>
-                <div class="mt-3 flex flex-wrap gap-2">
-                  <Button
-                    :variant="metadataRead ? 'default' : 'outline'"
-                    size="sm"
-                    @click="metadataRead = !metadataRead"
-                  >
-                    read
-                  </Button>
-                  <Button
-                    :variant="metadataWrite ? 'default' : 'outline'"
-                    size="sm"
-                    @click="metadataWrite = !metadataWrite"
-                  >
-                    write
-                  </Button>
-                </div>
-              </details>
-
-              <details class="rounded-md border p-3">
-                <summary class="cursor-pointer select-none text-sm font-medium">crontab</summary>
-                <div class="mt-3 flex flex-wrap gap-2">
-                  <Button
-                    :variant="crontabRead ? 'default' : 'outline'"
-                    size="sm"
-                    @click="crontabRead = !crontabRead"
-                  >
-                    read
-                  </Button>
-                  <Button
-                    :variant="crontabWrite ? 'default' : 'outline'"
-                    size="sm"
-                    @click="crontabWrite = !crontabWrite"
-                  >
-                    write
-                  </Button>
-                  <Button
-                    :variant="crontabDelete ? 'default' : 'outline'"
-                    size="sm"
-                    @click="crontabDelete = !crontabDelete"
-                  >
-                    delete
-                  </Button>
-                </div>
-              </details>
-            </div>
-
-            <div class="space-y-2">
-              <Button variant="outline" size="sm" @click="showOptionalOptions = !showOptionalOptions">
-                {{ showOptionalOptions ? 'Hide Optional Fields' : 'Show Optional Fields' }}
-              </Button>
-            </div>
-
-            <div v-if="showOptionalOptions" class="grid gap-4 md:grid-cols-2">
-              <div class="space-y-2">
-                <Label for="username">username</Label>
-                <Input id="username" v-model="username" placeholder="Optional" />
-              </div>
-              <div class="space-y-2">
-                <Label for="password">password</Label>
-                <Input id="password" v-model="password" type="password" placeholder="Optional" />
-              </div>
-              <div class="space-y-2">
-                <Label for="timestamp-from">timestamp_from</Label>
-                <Input id="timestamp-from" v-model="timestampFrom" type="datetime-local" />
-              </div>
-              <div class="space-y-2">
-                <Label for="timestamp-to">timestamp_to</Label>
-                <Input id="timestamp-to" v-model="timestampTo" type="datetime-local" />
-              </div>
-            </div>
-
-            <div class="space-y-2">
-              <Button variant="outline" size="sm" @click="showPayloadPreview = !showPayloadPreview">
-                {{ showPayloadPreview ? 'Hide Payload Preview' : 'Show Payload Preview' }}
-              </Button>
-              <div v-if="showPayloadPreview" class="space-y-3 rounded-md border p-3">
-                <div class="text-sm font-medium">token_limit preview</div>
-                <pre class="text-xs leading-5 overflow-x-auto">{{
-                  JSON.stringify(tokenLimitPreview, null, 2)
-                }}</pre>
-              </div>
-            </div>
-
-            <Button class="w-full" :disabled="createLoading" @click="handleCreateToken">
-              <span v-if="createLoading">Creating...</span>
-              <span v-else>Create Token</span>
-            </Button>
-
-            <Alert v-if="createToast" :variant="createToast.type === 'success' ? 'default' : 'destructive'">
-              <ShieldCheck v-if="createToast.type === 'success'" class="h-4 w-4" />
-              <ShieldAlert v-else class="h-4 w-4" />
-              <AlertTitle>{{ createToast.title }}</AlertTitle>
-              <AlertDescription>{{ createToast.message }}</AlertDescription>
-            </Alert>
-
-            <div v-if="createdCredential" class="rounded-md border p-3 space-y-2">
-              <div class="flex items-center justify-between gap-2">
-                <Badge variant="secondary">Result</Badge>
-                <Button variant="outline" size="sm" @click="copyText(createdTokenText)">
-                  <Copy class="h-3.5 w-3.5 mr-1" />
-                  Copy key:secret
-                </Button>
-              </div>
-              <div class="text-xs font-mono break-all">key: {{ createdCredential.key }}</div>
-              <div class="text-xs font-mono break-all">secret: {{ createdCredential.secret }}</div>
-              <div class="text-xs font-mono break-all">token: {{ createdTokenText }}</div>
-            </div>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle class="flex items-center gap-2">
-              <Trash2 class="h-5 w-5" />
-              Delete Token
-            </CardTitle>
-          </CardHeader>
-          <CardContent class="space-y-5">
-            <div class="space-y-2">
-              <Label for="delete-token">token</Label>
-              <Input id="delete-token" v-model="deleteToken" placeholder="Token performing this deletion" />
-            </div>
-            <div class="space-y-2">
-              <Label for="delete-target-token-key">
-                {{
-                  isSuperToken
-                    ? 'target_token_key (required, must be non-self)'
-                    : 'target_token_key (disabled for non-super token)'
-                }}
-              </Label>
-              <Input
-                id="delete-target-token-key"
-                v-model="deleteTargetTokenKey"
-                :disabled="!isSuperToken"
-                :placeholder="
-                  isSuperToken
-                    ? 'Provide another token_key to delete'
-                    : 'Non-super token can only self-delete'
-                "
-              />
-            </div>
-
-            <Button class="w-full" variant="destructive" :disabled="deleteLoading" @click="handleDeleteToken">
-              <span v-if="deleteLoading">Deleting...</span>
-              <span v-else>Delete Token</span>
-            </Button>
-
-            <Alert v-if="deleteToast" :variant="deleteToast.type === 'success' ? 'default' : 'destructive'">
-              <ShieldCheck v-if="deleteToast.type === 'success'" class="h-4 w-4" />
-              <ShieldAlert v-else class="h-4 w-4" />
-              <AlertTitle>{{ deleteToast.title }}</AlertTitle>
-              <AlertDescription>{{ deleteToast.message }}</AlertDescription>
-            </Alert>
-          </CardContent>
-        </Card>
+        <CreateTokenCard v-if="isSuperToken" />
+        <DeleteTokenCard />
       </div>
     </div>
   </div>

From fddbfeeb490b1ab15aacb439febab1cb3dddcd31 Mon Sep 17 00:00:00 2001
From: zhullyb <zhullyb@outlook.com>
Date: Fri, 13 Feb 2026 01:27:40 +0800
Subject: [PATCH 08/10] style(TokenManageView): adjust layout for
 DeleteTokenCard based on token permissions

---
 src/views/TokenManageView.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/views/TokenManageView.vue b/src/views/TokenManageView.vue
index afb7db7..2e947ca 100644
--- a/src/views/TokenManageView.vue
+++ b/src/views/TokenManageView.vue
@@ -20,9 +20,11 @@ const backendStatus = computed<'disconnected' | 'connecting' | 'connected'>(() =
   <div class="min-h-screen">
     <div class="container mx-auto p-6 space-y-6">
       <HeaderView :status="backendStatus" />
-      <div class="grid gap-6" :class="isSuperToken ? 'xl:grid-cols-2' : 'xl:grid-cols-1'">
+      <div class="grid gap-6 xl:grid-cols-2">
         <CreateTokenCard v-if="isSuperToken" />
-        <DeleteTokenCard />
+        <div :class="isSuperToken ? '' : 'xl:col-span-2 xl:w-1/2 xl:mx-auto w-full'">
+          <DeleteTokenCard />
+        </div>
       </div>
     </div>
   </div>

From 5f0e94169f178ae57b1f7db11055bcf55c81cb41 Mon Sep 17 00:00:00 2001
From: zhullyb <zhullyb@outlook.com>
Date: Sat, 28 Feb 2026 01:19:33 +0800
Subject: [PATCH 09/10] feat: restrict token deletion to supertoken and hide
 delete UI for normal tokens

---
 .../token-manage/DeleteTokenCard.vue          | 45 +++++--------------
 src/views/TokenManageView.vue                 | 11 +----
 2 files changed, 14 insertions(+), 42 deletions(-)

diff --git a/src/components/token-manage/DeleteTokenCard.vue b/src/components/token-manage/DeleteTokenCard.vue
index 24a0763..15394ca 100644
--- a/src/components/token-manage/DeleteTokenCard.vue
+++ b/src/components/token-manage/DeleteTokenCard.vue
@@ -21,7 +21,7 @@ const { currentBackend } = useBackendStore()
 const backendUrl = computed(() => currentBackend.value?.url ?? '')
 
 const permissionStore = usePermissionStore()
-const { isSuperToken, tokenInfo } = storeToRefs(permissionStore)
+const { tokenInfo } = storeToRefs(permissionStore)
 const currentTokenKey = computed(() => tokenInfo.value?.token_key?.trim() || '')
 
 const deleteToken = ref('')
@@ -54,23 +54,15 @@ const handleDeleteToken = async () => {
     deleteTargetTokenKey.value = targetKey
   }
 
-  if (!isSuperToken.value && targetKey) {
+  if (!targetKey) {
     deleteToast.value = {
       type: 'error',
       title: 'Delete Failed',
-      message: 'Only super token can delete other tokens. Leave target_token_key empty to delete self.',
+      message: 'target_token_key is required.',
     }
     return
   }
-  if (isSuperToken.value && !targetKey) {
-    deleteToast.value = {
-      type: 'error',
-      title: 'Delete Failed',
-      message: 'target_token_key is required for super token deletion of another token.',
-    }
-    return
-  }
-  if (isSuperToken.value && currentTokenKey.value && targetKey === currentTokenKey.value) {
+  if (currentTokenKey.value && targetKey === currentTokenKey.value) {
     deleteToast.value = {
       type: 'error',
       title: 'Delete Failed',
@@ -79,8 +71,10 @@ const handleDeleteToken = async () => {
     return
   }
 
-  const payloadObj: Record<string, unknown> = { token }
-  if (isSuperToken.value && targetKey) payloadObj.target_token_key = targetKey
+  const payloadObj: Record<string, unknown> = {
+    token,
+    target_token_key: targetKey,
+  }
 
   deleteLoading.value = true
   try {
@@ -91,10 +85,7 @@ const handleDeleteToken = async () => {
     deleteToast.value = {
       type: 'success',
       title: 'Delete Requested',
-      message:
-        isSuperToken.value && targetKey
-          ? `Token with key ${targetKey} has been deleted.`
-          : 'Token has been deleted.',
+      message: `Token with key ${targetKey} has been deleted.`,
     }
   } catch (e: any) {
     deleteToast.value = {
@@ -115,9 +106,6 @@ watch(
   { immediate: true },
 )
 
-watch(isSuperToken, (next) => {
-  if (!next) deleteTargetTokenKey.value = ''
-})
 </script>
 
 <template>
@@ -131,23 +119,14 @@ watch(isSuperToken, (next) => {
     <CardContent class="space-y-5">
       <div class="space-y-2">
         <Label for="delete-token">token</Label>
-        <Input id="delete-token" v-model="deleteToken" placeholder="Token performing this deletion" />
+        <Input id="delete-token" v-model="deleteToken" placeholder="Super token performing this deletion" />
       </div>
       <div class="space-y-2">
-        <Label for="delete-target-token-key">
-          {{
-            isSuperToken
-              ? 'target_token_key (required, must be non-self)'
-              : 'target_token_key (disabled for non-super token)'
-          }}
-        </Label>
+        <Label for="delete-target-token-key">target_token_key (required, must be non-self)</Label>
         <Input
           id="delete-target-token-key"
           v-model="deleteTargetTokenKey"
-          :disabled="!isSuperToken"
-          :placeholder="
-            isSuperToken ? 'Provide another token_key to delete' : 'Non-super token can only self-delete'
-          "
+          placeholder="Provide another token_key to delete"
         />
       </div>
 
diff --git a/src/views/TokenManageView.vue b/src/views/TokenManageView.vue
index 2e947ca..a8183ab 100644
--- a/src/views/TokenManageView.vue
+++ b/src/views/TokenManageView.vue
@@ -1,15 +1,10 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { storeToRefs } from 'pinia'
 import { useBackendStore } from '@/composables/useBackendStore'
 import HeaderView from '@/components/HeaderView.vue'
 import CreateTokenCard from '@/components/token-manage/CreateTokenCard.vue'
 import DeleteTokenCard from '@/components/token-manage/DeleteTokenCard.vue'
-import { usePermissionStore } from '@/stores/usePermissionStore'
-
 const { currentBackend } = useBackendStore()
-const permissionStore = usePermissionStore()
-const { isSuperToken } = storeToRefs(permissionStore)
 
 const backendStatus = computed<'disconnected' | 'connecting' | 'connected'>(() =>
   currentBackend.value?.url ? 'connected' : 'disconnected',
@@ -21,10 +16,8 @@ const backendStatus = computed<'disconnected' | 'connecting' | 'connected'>(() =
     <div class="container mx-auto p-6 space-y-6">
       <HeaderView :status="backendStatus" />
       <div class="grid gap-6 xl:grid-cols-2">
-        <CreateTokenCard v-if="isSuperToken" />
-        <div :class="isSuperToken ? '' : 'xl:col-span-2 xl:w-1/2 xl:mx-auto w-full'">
-          <DeleteTokenCard />
-        </div>
+        <CreateTokenCard />
+        <DeleteTokenCard />
       </div>
     </div>
   </div>

From acf429359b507a0af7b36721713ed767617c37cb Mon Sep 17 00:00:00 2001
From: zhullyb <zhullyb@outlook.com>
Date: Mon, 2 Mar 2026 20:24:49 +0800
Subject: [PATCH 10/10] feat(token-manage): use agent uuid list API to improve
 token creation UX

---
 .../token-manage/CreateTokenCard.vue          | 148 +++++++++++++++---
 1 file changed, 127 insertions(+), 21 deletions(-)

diff --git a/src/components/token-manage/CreateTokenCard.vue b/src/components/token-manage/CreateTokenCard.vue
index eeaf6a8..a141b31 100644
--- a/src/components/token-manage/CreateTokenCard.vue
+++ b/src/components/token-manage/CreateTokenCard.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { Copy, KeyRound, ShieldAlert, ShieldCheck } from 'lucide-vue-next'
 import { useBackendStore } from '@/composables/useBackendStore'
 import { wsRpcCall } from '@/composables/useWsRpc'
@@ -7,6 +7,7 @@ import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Checkbox } from '@/components/ui/checkbox'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 
@@ -15,7 +16,6 @@ type ToastState = {
   title: string
   message: string
 }
-
 type ScopeMode = 'global' | 'agent'
 
 const STATIC_FIELDS = ['cpu', 'system', 'gpu'] as const
@@ -26,7 +26,11 @@ const { currentBackend } = useBackendStore()
 const backendUrl = computed(() => currentBackend.value?.url ?? '')
 
 const scopeMode = ref<ScopeMode>('global')
-const agentUuidsText = ref('')
+const knownAgentUuids = ref<string[]>([])
+const selectedKnownAgentUuids = ref<string[]>([])
+const otherAgentUuidsText = ref('')
+const listAgentsLoading = ref(false)
+const listAgentsError = ref('')
 
 const username = ref('')
 const password = ref('')
@@ -66,6 +70,94 @@ const parseTimestamp = (val: string) => {
   return Number.isFinite(ms) ? ms : NaN
 }
 
+const parseAgentUuidsText = (text: string) => {
+  return text
+    .split(/[\n,\s]+/g)
+    .map((s) => s.trim())
+    .filter(Boolean)
+}
+
+const selectedAgentUuids = computed(() => {
+  const dedup = new Set<string>()
+  for (const uuid of selectedKnownAgentUuids.value) dedup.add(uuid)
+  for (const uuid of parseAgentUuidsText(otherAgentUuidsText.value)) dedup.add(uuid)
+  return [...dedup]
+})
+
+const toggleKnownAgentUuid = (agentUuid: string) => {
+  const idx = selectedKnownAgentUuids.value.indexOf(agentUuid)
+  if (idx >= 0) {
+    selectedKnownAgentUuids.value.splice(idx, 1)
+    return
+  }
+  selectedKnownAgentUuids.value.push(agentUuid)
+}
+
+const extractAgentUuidList = (result: unknown) => {
+  if (Array.isArray(result)) {
+    return result
+      .map((it) => {
+        if (typeof it === 'string') return it.trim()
+        if (it && typeof it === 'object') {
+          const obj = it as Record<string, unknown>
+          if (typeof obj.agent_uuid === 'string') return obj.agent_uuid.trim()
+          if (typeof obj.uuid === 'string') return obj.uuid.trim()
+        }
+        return ''
+      })
+      .filter(Boolean)
+  }
+
+  if (result && typeof result === 'object') {
+    const obj = result as Record<string, unknown>
+    for (const key of ['agent_uuid_list', 'agent_uuids', 'uuids', 'list']) {
+      if (!Array.isArray(obj[key])) continue
+      return (obj[key] as unknown[])
+        .map((it) => (typeof it === 'string' ? it.trim() : ''))
+        .filter(Boolean)
+    }
+  }
+
+  return []
+}
+
+const loadKnownAgentUuids = async () => {
+  const url = backendUrl.value
+  const token = currentBackend.value?.token?.trim() || ''
+  const selectedSet = new Set(selectedKnownAgentUuids.value)
+  knownAgentUuids.value = []
+  listAgentsError.value = ''
+  if (!url) return
+  if (!token) {
+    listAgentsError.value = 'Current backend token is empty. Cannot list agents.'
+    return
+  }
+
+  listAgentsLoading.value = true
+  try {
+    const result = await wsRpcCall<unknown>(url, 'nodeget-server_list_all_agent_uuid', { token })
+    knownAgentUuids.value = extractAgentUuidList(result)
+    selectedKnownAgentUuids.value = knownAgentUuids.value.filter((uuid) => selectedSet.has(uuid))
+  } catch (e: any) {
+    listAgentsError.value = e?.message || 'Failed to load agent list'
+  } finally {
+    listAgentsLoading.value = false
+  }
+}
+
+const setScopeMode = async (mode: ScopeMode) => {
+  if (scopeMode.value === mode) return
+  scopeMode.value = mode
+
+  if (mode === 'global') {
+    selectedKnownAgentUuids.value = []
+    otherAgentUuidsText.value = ''
+    return
+  }
+
+  await loadKnownAgentUuids()
+}
+
 const buildPermissions = () => {
   const permissions: Record<string, unknown>[] = []
 
@@ -91,11 +183,7 @@ const selectedPermissionCount = computed(() => buildPermissions().length)
 
 const scopePreview = computed(() => {
   if (scopeMode.value === 'global') return ['global']
-  return agentUuidsText.value
-    .split(/[\n,\s]+/g)
-    .map((s) => s.trim())
-    .filter(Boolean)
-    .map((agentUuid) => ({ agent_uuid: agentUuid }))
+  return selectedAgentUuids.value.map((agentUuid) => ({ agent_uuid: agentUuid }))
 })
 
 const tokenLimitPreview = computed(() => [
@@ -179,7 +267,7 @@ const handleCreateToken = async () => {
     createToast.value = {
       type: 'error',
       title: 'Creation Failed',
-      message: 'Scope is set to agent_uuid but no agent UUID is provided.',
+      message: 'Scope is agent_uuid, but no agent UUID is selected.',
     }
     return
   }
@@ -239,6 +327,14 @@ const copyText = async (text: string) => {
   if (!text) return
   await navigator.clipboard.writeText(text)
 }
+
+onMounted(() => {
+  if (scopeMode.value === 'agent') loadKnownAgentUuids()
+})
+
+watch([backendUrl, () => currentBackend.value?.token], () => {
+  if (scopeMode.value === 'agent') loadKnownAgentUuids()
+})
 </script>
 
 <template>
@@ -252,20 +348,30 @@ const copyText = async (text: string) => {
     <CardContent class="space-y-5">
       <div class="space-y-3">
         <Label>Scope</Label>
-        <div class="flex flex-wrap gap-2">
-          <Button :variant="scopeMode === 'global' ? 'default' : 'outline'" size="sm" @click="scopeMode = 'global'">
-            global
-          </Button>
-          <Button :variant="scopeMode === 'agent' ? 'default' : 'outline'" size="sm" @click="scopeMode = 'agent'">
-            agent_uuid
+        <div class="flex flex-wrap items-center justify-between gap-2">
+          <div class="flex items-center gap-2">
+            <Button :variant="scopeMode === 'global' ? 'default' : 'outline'" size="sm" @click="setScopeMode('global')">global</Button>
+            <Button :variant="scopeMode === 'agent' ? 'default' : 'outline'" size="sm" @click="setScopeMode('agent')">agent_uuid</Button>
+          </div>
+          <Button v-if="scopeMode === 'agent'" variant="outline" size="sm" :disabled="listAgentsLoading" @click="loadKnownAgentUuids">
+            {{ listAgentsLoading ? 'Loading...' : 'Refresh Agents' }}
           </Button>
         </div>
-        <textarea
-          v-if="scopeMode === 'agent'"
-          v-model="agentUuidsText"
-          class="flex min-h-[96px] w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]"
-          placeholder="One UUID per line, or split by comma/space."
-        />
+        <div v-if="scopeMode === 'agent'" class="rounded-md border p-3 space-y-3">
+          <div v-if="listAgentsError" class="text-sm text-destructive">{{ listAgentsError }}</div>
+          <div v-else-if="knownAgentUuids.length === 0" class="text-sm text-muted-foreground">No known agents found on current server.</div>
+          <div v-else class="grid gap-2 max-h-48 overflow-auto pr-1">
+            <label v-for="agentUuid in knownAgentUuids" :key="`known-agent-${agentUuid}`" class="flex items-center gap-2 text-sm break-all">
+              <Checkbox :checked="selectedKnownAgentUuids.includes(agentUuid)" @click.stop="toggleKnownAgentUuid(agentUuid)" />
+              <span>{{ agentUuid }}</span>
+            </label>
+          </div>
+
+          <div class="space-y-2">
+            <Label for="other-agent-uuids">Other agent UUIDs</Label>
+            <textarea id="other-agent-uuids" v-model="otherAgentUuidsText" class="flex min-h-[96px] w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]" placeholder="Optional. One UUID per line, or split by comma/space." />
+          </div>
+        </div>
       </div>
 
       <div class="space-y-3">