From 1a509c6102dc8b9dcddabb0179edc8882d1df78a Mon Sep 17 00:00:00 2001
From: Hugo Richard <hugo.richard@vercel.com>
Date: Tue, 21 Apr 2026 18:05:56 +0200
Subject: [PATCH] feat(app): expose full token scoping + polish audit logs UI
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Tokens

- Replace the cramped create-token popover with a modal so there is
  room for the full scope surface the backend already supports: teams,
  projects, environments, and IP allowlist (CIDR ranges with inline
  validation). Project/environment pickers cascade from the selected
  teams.
- Show a clear "unscoped token" warning when no restriction is applied.
- Table now shows what each token is actually scoped to (teams /
  projects / envs / CIDRs counts, tooltip with the ids) instead of a
  generic "scoped" badge.
- Type: Token.allowedCidrs is now part of the public Token type (the
  API already returned it).

Audit logs

- Color-code action badges by category (create=success, delete=error,
  update/token.*=warning, auth.*=info) and add resource icons.
- Actor badges carry a matching icon (user/key-round/cpu).
- IP rendered as a monospace pill.
- Parse the raw User-Agent into a friendly client label (e.g.
  "Shelve CLI 5.0.0", "Chrome 147 · macOS", "Node.js", "curl 8.6.0")
  with the full UA on hover, instead of taking half the row.
- New metadata popover ({} icon) showing the full JSON payload for
  each event.
- Empty state + centered "Load more".
---
 .changeset/token-ui-restrictions.md           |  21 +
 apps/shelve/app/components/token/Create.vue   | 393 ++++++++++++++++--
 apps/shelve/app/components/token/Scopes.vue   |  58 +++
 .../app/pages/[teamSlug]/team/audit-logs.vue  | 144 ++++++-
 apps/shelve/app/pages/user/tokens.vue         |  22 +-
 apps/shelve/app/utils/userAgent.ts            |  71 ++++
 packages/types/src/Token.ts                   |   1 +
 7 files changed, 640 insertions(+), 70 deletions(-)
 create mode 100644 .changeset/token-ui-restrictions.md
 create mode 100644 apps/shelve/app/components/token/Scopes.vue
 create mode 100644 apps/shelve/app/utils/userAgent.ts

diff --git a/.changeset/token-ui-restrictions.md b/.changeset/token-ui-restrictions.md
new file mode 100644
index 00000000..0827671f
--- /dev/null
+++ b/.changeset/token-ui-restrictions.md
@@ -0,0 +1,21 @@
+---
+"@shelve/app": minor
+---
+
+Two related UI improvements around the v5 security surface.
+
+**Tokens**
+
+- Token creation now exposes the full scope surface that the backend already supports: restrict a token to specific **teams**, **projects**, and **environments** via cascading multi-select pickers, and add an **IP allowlist** (CIDR ranges) with inline validation.
+- A clear "unscoped token" warning when no restriction is applied.
+- The tokens table shows what each token is actually scoped to (teams / projects / envs / CIDRs counts) instead of a generic "scoped" badge.
+- The popover form was replaced with a roomier modal so the new options have space to breathe. `Token.allowedCidrs` is now part of the public `Token` type.
+
+**Audit logs**
+
+- Color-coded action badges (create=success, delete=error, update / token.* = warning, auth.* = info) and resource icons (variable / environment / project / token / …).
+- Actor badges include a matching icon (`user`, `key-round`, `cpu`).
+- IP rendered as a monospace pill.
+- The very long raw `User-Agent` string is parsed to a friendly client label (e.g. `Shelve CLI 5.0.0`, `Chrome 147 · macOS`, `Node.js`, `curl 8.6.0`) with the full UA available on hover.
+- New per-row metadata popover (`{}` icon) showing the full JSON payload for that event, instead of having no way to inspect it.
+- Empty state and centered "Load more" button.
diff --git a/apps/shelve/app/components/token/Create.vue b/apps/shelve/app/components/token/Create.vue
index 6fbeaacd..6839dccb 100644
--- a/apps/shelve/app/components/token/Create.vue
+++ b/apps/shelve/app/components/token/Create.vue
@@ -1,14 +1,35 @@
 <script setup lang="ts">
-import type { TokenPermission, TokenWithSecret } from '@types'
+import type { Environment, Project, Team, TokenPermission, TokenWithSecret } from '@types'
 
+type ScopeOption = {
+  label: string
+  value: number
+  hint?: string
+}
+
+const emits = defineEmits(['create'])
+
+const open = ref(false)
 const tokenName = ref('')
 const expiresIn = ref<string>('2592000')
 const permissions = ref<TokenPermission[]>(['read', 'write'])
+
+const restrictionsOpen = ref(false)
+const selectedTeamIds = ref<number[]>([])
+const selectedProjectIds = ref<number[]>([])
+const selectedEnvironmentIds = ref<number[]>([])
+const allowedCidrs = ref<string[]>([])
+const cidrDraft = ref('')
+
 const loading = ref(false)
-const createdToken = ref<TokenWithSecret | null>(null)
-const popoverOpen = ref(false)
+const teamsLoading = ref(false)
+const childLoading = ref(false)
 
-const emits = defineEmits(['create'])
+const teams = ref<Team[]>([])
+const projectsByTeam = ref<Record<number, Project[]>>({})
+const envsByTeam = ref<Record<number, Environment[]>>({})
+
+const createdToken = ref<TokenWithSecret | null>(null)
 
 const expiryOptions = [
   { value: '3600', label: '1 hour' },
@@ -24,24 +45,173 @@ const permissionOptions = [
   { value: 'write', label: 'write' },
 ]
 
+const teamOptions = computed<ScopeOption[]>(() =>
+  teams.value.map(team => ({ label: team.name, value: team.id, hint: team.slug }))
+)
+
+const projectOptions = computed<ScopeOption[]>(() => {
+  const scope = selectedTeamIds.value.length ? selectedTeamIds.value : teams.value.map(t => t.id)
+  const out: ScopeOption[] = []
+  for (const teamId of scope) {
+    const team = teams.value.find(t => t.id === teamId)
+    const list = projectsByTeam.value[teamId] ?? []
+    for (const project of list) {
+      out.push({ label: project.name, value: project.id, hint: team?.slug })
+    }
+  }
+  return out
+})
+
+const environmentOptions = computed<ScopeOption[]>(() => {
+  const scope = selectedTeamIds.value.length ? selectedTeamIds.value : teams.value.map(t => t.id)
+  const out: ScopeOption[] = []
+  for (const teamId of scope) {
+    const team = teams.value.find(t => t.id === teamId)
+    const list = envsByTeam.value[teamId] ?? []
+    for (const env of list) {
+      out.push({ label: env.name, value: env.id, hint: team?.slug })
+    }
+  }
+  return out
+})
+
+const restrictionSummary = computed(() => {
+  const parts: string[] = []
+  if (selectedTeamIds.value.length) parts.push(`${selectedTeamIds.value.length} team(s)`)
+  if (selectedProjectIds.value.length) parts.push(`${selectedProjectIds.value.length} project(s)`)
+  if (selectedEnvironmentIds.value.length) parts.push(`${selectedEnvironmentIds.value.length} environment(s)`)
+  if (allowedCidrs.value.length) parts.push(`${allowedCidrs.value.length} CIDR(s)`)
+  return parts.length ? parts.join(' · ') : 'None — token can access everything you can'
+})
+
+const cidrPattern = /^(?:(?:25[0-5]|2[0-4]\d|1?\d?\d)(?:\.(?:25[0-5]|2[0-4]\d|1?\d?\d)){3}\/(?:3[0-2]|[12]?\d))$|^(?:[A-Fa-f0-9:]+)\/(?:12[0-8]|1[01]\d|[1-9]?\d)$/
+const cidrDraftValid = computed(() => !cidrDraft.value || cidrPattern.test(cidrDraft.value.trim()))
+
+async function loadTeams() {
+  if (teams.value.length) return
+  teamsLoading.value = true
+  try {
+    teams.value = await $fetch<Team[]>('/api/teams')
+  } catch {
+    toast.error('Failed to load teams')
+  } finally {
+    teamsLoading.value = false
+  }
+}
+
+async function loadTeamChildren(teamId: number) {
+  const team = teams.value.find(t => t.id === teamId)
+  if (!team) return
+  if (projectsByTeam.value[teamId] && envsByTeam.value[teamId]) return
+
+  childLoading.value = true
+  try {
+    const [projects, envs] = await Promise.all([
+      projectsByTeam.value[teamId]
+        ? Promise.resolve(projectsByTeam.value[teamId]!)
+        : $fetch<Project[]>(`/api/teams/${team.slug}/projects`),
+      envsByTeam.value[teamId]
+        ? Promise.resolve(envsByTeam.value[teamId]!)
+        : $fetch<Environment[]>(`/api/teams/${team.slug}/environments`),
+    ])
+    projectsByTeam.value[teamId] = projects
+    envsByTeam.value[teamId] = envs
+  } catch {
+    toast.error(`Failed to load resources for ${team.name}`)
+  } finally {
+    childLoading.value = false
+  }
+}
+
+watch(selectedTeamIds, async (next, prev) => {
+  const added = next.filter(id => !prev?.includes(id))
+  await Promise.all(added.map(loadTeamChildren))
+
+  const validProjects = new Set(
+    next.flatMap(id => (projectsByTeam.value[id] ?? []).map(p => p.id))
+  )
+  selectedProjectIds.value = selectedProjectIds.value.filter(id => validProjects.has(id))
+
+  const validEnvs = new Set(
+    next.flatMap(id => (envsByTeam.value[id] ?? []).map(e => e.id))
+  )
+  selectedEnvironmentIds.value = selectedEnvironmentIds.value.filter(id => validEnvs.has(id))
+})
+
+watch(open, async (value) => {
+  if (!value) return
+  await loadTeams()
+  if (selectedTeamIds.value.length) {
+    await Promise.all(selectedTeamIds.value.map(loadTeamChildren))
+  } else {
+    await Promise.all(teams.value.map(t => loadTeamChildren(t.id)))
+  }
+})
+
+function addCidr() {
+  const value = cidrDraft.value.trim()
+  if (!value) return
+  if (!cidrPattern.test(value)) {
+    toast.error('Invalid CIDR (e.g. 203.0.113.0/24 or 2001:db8::/32)')
+    return
+  }
+  if (allowedCidrs.value.includes(value)) {
+    cidrDraft.value = ''
+    return
+  }
+  allowedCidrs.value.push(value)
+  cidrDraft.value = ''
+}
+
+function removeCidr(value: string) {
+  allowedCidrs.value = allowedCidrs.value.filter(c => c !== value)
+}
+
+function resetForm() {
+  tokenName.value = ''
+  expiresIn.value = '2592000'
+  permissions.value = ['read', 'write']
+  selectedTeamIds.value = []
+  selectedProjectIds.value = []
+  selectedEnvironmentIds.value = []
+  allowedCidrs.value = []
+  cidrDraft.value = ''
+  restrictionsOpen.value = false
+}
+
 async function createToken() {
+  if (!tokenName.value.trim()) {
+    toast.error('Token name is required')
+    return
+  }
+  if (!permissions.value.length) {
+    toast.error('Pick at least one permission')
+    return
+  }
+
   loading.value = true
   try {
     const expiresInNum = expiresIn.value === '0' ? null : Number(expiresIn.value)
+    const scopes: Record<string, unknown> = { permissions: permissions.value }
+    if (selectedTeamIds.value.length) scopes.teamIds = selectedTeamIds.value
+    if (selectedProjectIds.value.length) scopes.projectIds = selectedProjectIds.value
+    if (selectedEnvironmentIds.value.length) scopes.environmentIds = selectedEnvironmentIds.value
+
     const created = await $fetch<TokenWithSecret>('/api/tokens', {
       method: 'POST',
       body: {
-        name: tokenName.value,
+        name: tokenName.value.trim(),
         expiresIn: expiresInNum,
-        scopes: { permissions: permissions.value },
+        scopes,
+        allowedCidrs: allowedCidrs.value.length ? allowedCidrs.value : undefined,
       },
     })
     createdToken.value = created
     emits('create')
-    tokenName.value = ''
     toast.success('Token created — copy it now, you will not see it again.')
-  } catch {
-    toast.error('Failed to create token')
+  } catch (error: any) {
+    const message = error?.data?.message ?? error?.statusMessage ?? 'Failed to create token'
+    toast.error(message)
   }
   loading.value = false
 }
@@ -54,41 +224,186 @@ function copyToken() {
 
 function dismissCreated() {
   createdToken.value = null
-  popoverOpen.value = false
+  resetForm()
+  open.value = false
 }
 </script>
 
 <template>
-  <div class="hidden items-center justify-end gap-2 sm:flex">
-    <UPopover v-model:open="popoverOpen" arrow>
-      <CustomButton size="sm" label="Create token" />
-      <template #content>
-        <UCard v-if="!createdToken">
-          <form class="flex flex-col gap-3" @submit.prevent="createToken()">
-            <p class="text-sm font-semibold leading-6">
-              Create a token
-            </p>
-            <UInput v-model="tokenName" label="Token name" placeholder="My CI token" />
-            <USelect v-model="expiresIn" :items="expiryOptions" placeholder="Expiry" />
+  <UModal
+    v-model:open="open"
+    title="Create a token"
+    description="Generate a CLI/API token, optionally restricted to specific teams, projects, environments, or IP ranges."
+    :ui="{ content: 'sm:max-w-xl' }"
+  >
+    <CustomButton size="sm" label="Create token" />
+
+    <template #body>
+      <div v-if="!createdToken" class="flex flex-col gap-5">
+        <div class="flex flex-col gap-3">
+          <UFormField label="Name" required>
+            <UInput v-model="tokenName" placeholder="My CI token" class="w-full" autofocus />
+          </UFormField>
+
+          <UFormField label="Expiry">
+            <USelect v-model="expiresIn" :items="expiryOptions" class="w-full" />
+          </UFormField>
+
+          <UFormField label="Permissions" hint="What this token can do">
             <UCheckboxGroup v-model="permissions" :items="permissionOptions" orientation="horizontal" />
-            <UButton :loading label="Create" type="submit" />
-          </form>
-        </UCard>
-        <UCard v-else>
-          <div class="flex flex-col gap-3">
-            <p class="text-sm font-semibold leading-6">
-              Save this token — you will not see it again
-            </p>
-            <div class="flex items-center gap-2 rounded-md border border-default bg-muted/40 p-2 font-mono text-xs break-all">
-              {{ createdToken.token }}
+          </UFormField>
+        </div>
+
+        <Separator />
+
+        <UCollapsible v-model:open="restrictionsOpen">
+          <button
+            type="button"
+            class="flex w-full items-center justify-between rounded-md px-1 py-2 text-left hover:bg-elevated/40"
+          >
+            <div class="flex flex-col">
+              <span class="text-sm font-medium">Restrictions</span>
+              <span class="text-xs text-muted">{{ restrictionSummary }}</span>
             </div>
-            <div class="flex justify-end gap-2">
-              <UButton variant="ghost" label="Done" @click="dismissCreated" />
-              <UButton icon="lucide:copy" label="Copy" @click="copyToken" />
+            <UIcon
+              name="lucide:chevron-down"
+              class="size-4 text-muted transition-transform"
+              :class="{ 'rotate-180': restrictionsOpen }"
+            />
+          </button>
+
+          <template #content>
+            <div class="flex flex-col gap-3 pt-3">
+              <UFormField
+                label="Teams"
+                hint="Empty = all teams you belong to"
+              >
+                <USelectMenu
+                  v-model="selectedTeamIds"
+                  multiple
+                  :items="teamOptions"
+                  value-key="value"
+                  :loading="teamsLoading"
+                  placeholder="All teams"
+                  class="w-full"
+                />
+              </UFormField>
+
+              <UFormField
+                label="Projects"
+                hint="Empty = all projects in the selected teams"
+              >
+                <USelectMenu
+                  v-model="selectedProjectIds"
+                  multiple
+                  :items="projectOptions"
+                  value-key="value"
+                  :loading="childLoading"
+                  :disabled="!projectOptions.length"
+                  placeholder="All projects"
+                  class="w-full"
+                />
+              </UFormField>
+
+              <UFormField
+                label="Environments"
+                hint="Empty = all environments in the selected teams"
+              >
+                <USelectMenu
+                  v-model="selectedEnvironmentIds"
+                  multiple
+                  :items="environmentOptions"
+                  value-key="value"
+                  :loading="childLoading"
+                  :disabled="!environmentOptions.length"
+                  placeholder="All environments"
+                  class="w-full"
+                />
+              </UFormField>
+
+              <UFormField
+                label="IP allowlist"
+                hint="CIDR ranges allowed to use this token (IPv4 or IPv6). Empty = any IP."
+                :error="cidrDraft && !cidrDraftValid ? 'Invalid CIDR notation' : undefined"
+              >
+                <div class="flex gap-2">
+                  <UInput
+                    v-model="cidrDraft"
+                    placeholder="203.0.113.0/24"
+                    class="flex-1"
+                    :color="cidrDraft && !cidrDraftValid ? 'error' : undefined"
+                    @keydown.enter.prevent="addCidr"
+                  />
+                  <UButton
+                    icon="lucide:plus"
+                    variant="soft"
+                    :disabled="!cidrDraft || !cidrDraftValid"
+                    @click="addCidr"
+                  />
+                </div>
+                <div v-if="allowedCidrs.length" class="mt-2 flex flex-wrap gap-1.5">
+                  <UBadge
+                    v-for="cidr in allowedCidrs"
+                    :key="cidr"
+                    color="neutral"
+                    variant="subtle"
+                    class="font-mono"
+                  >
+                    {{ cidr }}
+                    <button
+                      type="button"
+                      class="ml-1.5 text-muted hover:text-default"
+                      @click="removeCidr(cidr)"
+                    >
+                      <UIcon name="lucide:x" class="size-3" />
+                    </button>
+                  </UBadge>
+                </div>
+              </UFormField>
             </div>
-          </div>
-        </UCard>
-      </template>
-    </UPopover>
-  </div>
+          </template>
+        </UCollapsible>
+
+        <UAlert
+          v-if="!selectedTeamIds.length && !selectedProjectIds.length && !selectedEnvironmentIds.length && !allowedCidrs.length"
+          icon="lucide:info"
+          color="neutral"
+          variant="soft"
+          title="Unscoped token"
+          description="This token will be able to access every team, project, and environment you have access to. Add restrictions for tighter blast radius."
+        />
+      </div>
+
+      <div v-else class="flex flex-col gap-3">
+        <UAlert
+          icon="lucide:shield-alert"
+          color="warning"
+          variant="soft"
+          title="Save this token now"
+          description="This is the only time the secret will be shown. Store it in a safe place."
+        />
+        <div class="flex items-center gap-2 rounded-md border border-default bg-muted/40 p-3 font-mono text-xs break-all">
+          {{ createdToken.token }}
+        </div>
+      </div>
+    </template>
+
+    <template #footer>
+      <div class="flex w-full items-center justify-end gap-2">
+        <template v-if="!createdToken">
+          <UButton variant="ghost" label="Cancel" @click="open = false" />
+          <UButton
+            :loading
+            :disabled="!tokenName.trim() || !permissions.length"
+            label="Create token"
+            @click="createToken"
+          />
+        </template>
+        <template v-else>
+          <UButton variant="ghost" label="Done" @click="dismissCreated" />
+          <UButton icon="lucide:copy" label="Copy" @click="copyToken" />
+        </template>
+      </div>
+    </template>
+  </UModal>
 </template>
diff --git a/apps/shelve/app/components/token/Scopes.vue b/apps/shelve/app/components/token/Scopes.vue
new file mode 100644
index 00000000..a7107712
--- /dev/null
+++ b/apps/shelve/app/components/token/Scopes.vue
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import type { Token } from '@types'
+
+const props = defineProps<{
+  token: Token
+}>()
+
+const scopeChips = computed(() => {
+  const chips: { label: string; icon: string }[] = []
+  const s = props.token.scopes
+  if (s.teamIds?.length) chips.push({ label: `${s.teamIds.length} team${s.teamIds.length === 1 ? '' : 's'}`, icon: 'lucide:users' })
+  if (s.projectIds?.length) chips.push({ label: `${s.projectIds.length} project${s.projectIds.length === 1 ? '' : 's'}`, icon: 'lucide:folder' })
+  if (s.environmentIds?.length) chips.push({ label: `${s.environmentIds.length} env${s.environmentIds.length === 1 ? '' : 's'}`, icon: 'lucide:layers' })
+  if (props.token.allowedCidrs?.length) chips.push({ label: `${props.token.allowedCidrs.length} CIDR${props.token.allowedCidrs.length === 1 ? '' : 's'}`, icon: 'lucide:shield' })
+  return chips
+})
+
+const tooltip = computed(() => {
+  const s = props.token.scopes
+  const lines: string[] = []
+  if (s.teamIds?.length) lines.push(`Teams: ${s.teamIds.join(', ')}`)
+  if (s.projectIds?.length) lines.push(`Projects: ${s.projectIds.join(', ')}`)
+  if (s.environmentIds?.length) lines.push(`Environments: ${s.environmentIds.join(', ')}`)
+  if (props.token.allowedCidrs?.length) lines.push(`Allowed CIDRs: ${props.token.allowedCidrs.join(', ')}`)
+  return lines.join('\n')
+})
+</script>
+
+<template>
+  <div class="flex flex-wrap items-center gap-1">
+    <UBadge
+      v-for="permission in token.scopes.permissions"
+      :key="permission"
+      size="sm"
+      :color="permission === 'write' ? 'warning' : 'neutral'"
+      variant="subtle"
+    >
+      {{ permission }}
+    </UBadge>
+    <UTooltip v-if="scopeChips.length" :text="tooltip" :delay-duration="50">
+      <div class="flex flex-wrap items-center gap-1">
+        <UBadge
+          v-for="chip in scopeChips"
+          :key="chip.label"
+          size="sm"
+          color="info"
+          variant="subtle"
+          :icon="chip.icon"
+        >
+          {{ chip.label }}
+        </UBadge>
+      </div>
+    </UTooltip>
+    <UBadge v-else size="sm" color="neutral" variant="outline" class="text-muted">
+      unscoped
+    </UBadge>
+  </div>
+</template>
diff --git a/apps/shelve/app/pages/[teamSlug]/team/audit-logs.vue b/apps/shelve/app/pages/[teamSlug]/team/audit-logs.vue
index 44b5d2f2..a81d2870 100644
--- a/apps/shelve/app/pages/[teamSlug]/team/audit-logs.vue
+++ b/apps/shelve/app/pages/[teamSlug]/team/audit-logs.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { TableColumn } from '@nuxt/ui'
-import type { AuditLog } from '@types'
+import type { AuditLog, AuditActorType } from '@types'
+import { parseUserAgent } from '~/utils/userAgent'
 
 const route = useRoute()
 const teamSlug = computed(() => route.params.teamSlug as string)
@@ -17,7 +18,8 @@ const columns: TableColumn<AuditLog>[] = [
   { accessorKey: 'action', header: 'Action' },
   { accessorKey: 'resourceType', header: 'Resource' },
   { accessorKey: 'ip', header: 'IP' },
-  { accessorKey: 'userAgent', header: 'User Agent' },
+  { accessorKey: 'userAgent', header: 'Client' },
+  { accessorKey: 'metadata', header: '' },
 ]
 
 async function fetchLogs(reset = false) {
@@ -45,6 +47,41 @@ watch(filterAction, () => {
   fetchLogs(true)
 })
 
+const actorMeta: Record<AuditActorType, { color: 'warning' | 'neutral' | 'info'; icon: string }> = {
+  token: { color: 'warning', icon: 'lucide:key-round' },
+  user: { color: 'neutral', icon: 'lucide:user-round' },
+  system: { color: 'info', icon: 'lucide:cpu' },
+}
+
+type ActionColor = 'success' | 'error' | 'warning' | 'info' | 'neutral'
+
+function actionColor(action: string): ActionColor {
+  if (action.endsWith('.create') || action.endsWith('.invite')) return 'success'
+  if (action.endsWith('.delete') || action.endsWith('.remove')) return 'error'
+  if (action.endsWith('.update') || action.startsWith('token.')) return 'warning'
+  if (action.startsWith('auth.')) return 'info'
+  return 'neutral'
+}
+
+const resourceIcons: Record<string, string> = {
+  variable: 'lucide:variable',
+  variables: 'lucide:variable',
+  environment: 'lucide:layers',
+  project: 'lucide:folder',
+  team: 'lucide:users',
+  token: 'lucide:key-round',
+  user: 'lucide:user-round',
+}
+
+function resourceIcon(type: string | null) {
+  if (!type) return 'lucide:circle-dashed'
+  return resourceIcons[type.toLowerCase()] ?? 'lucide:circle'
+}
+
+function hasMetadata(log: AuditLog) {
+  return log.metadata && Object.keys(log.metadata).length > 0
+}
+
 fetchLogs(true)
 
 useSeoMeta({ title: 'Audit logs' })
@@ -60,34 +97,119 @@ useSeoMeta({ title: 'Audit logs' })
       :data="logs"
       :loading
       :ui="{
-        base: 'table-fixed border-separate border-spacing-0',
+        base: 'w-full border-separate border-spacing-0',
         thead: '[&>tr]:bg-elevated/50 [&>tr]:after:content-none',
         tbody: '[&>tr]:last:[&>td]:border-b-0',
-        th: 'first:rounded-l-lg last:rounded-r-lg border-y border-default first:border-l last:border-r',
-        td: 'border-b border-default',
+        th: 'first:rounded-l-lg last:rounded-r-lg border-y border-default first:border-l last:border-r text-xs font-medium uppercase tracking-wide text-muted',
+        td: 'border-b border-default py-2.5 align-middle',
       }"
     >
       <template #createdAt-cell="{ row }">
         <DatePopover :date="row.original.createdAt" label="When" />
       </template>
+
       <template #actorType-cell="{ row }">
-        <UBadge :color="row.original.actorType === 'token' ? 'warning' : 'neutral'" variant="subtle">
+        <UBadge
+          :color="actorMeta[row.original.actorType as AuditActorType]?.color ?? 'neutral'"
+          variant="subtle"
+          size="sm"
+          :icon="actorMeta[row.original.actorType as AuditActorType]?.icon"
+          class="font-medium"
+        >
           {{ row.original.actorType }}
         </UBadge>
       </template>
+
       <template #action-cell="{ row }">
-        <span class="font-mono text-sm">{{ row.original.action }}</span>
+        <UBadge
+          :color="actionColor(row.original.action)"
+          variant="soft"
+          size="sm"
+          class="font-mono text-xs"
+        >
+          {{ row.original.action }}
+        </UBadge>
+      </template>
+
+      <template #resourceType-cell="{ row }">
+        <div v-if="row.original.resourceType" class="flex items-center gap-1.5 text-sm">
+          <UIcon :name="resourceIcon(row.original.resourceType)" class="size-4 text-muted" />
+          <span>{{ row.original.resourceType }}</span>
+          <span v-if="row.original.resourceId" class="text-xs text-muted font-mono">
+            #{{ row.original.resourceId }}
+          </span>
+        </div>
+        <span v-else class="text-sm text-muted">—</span>
       </template>
+
+      <template #ip-cell="{ row }">
+        <span v-if="row.original.ip" class="font-mono text-xs text-muted bg-elevated/40 rounded px-1.5 py-0.5">
+          {{ row.original.ip }}
+        </span>
+        <span v-else class="text-sm text-muted">—</span>
+      </template>
+
       <template #userAgent-cell="{ row }">
-        <span class="truncate text-xs text-muted">{{ row.original.userAgent || '—' }}</span>
+        <UTooltip
+          v-if="row.original.userAgent"
+          :text="row.original.userAgent"
+          :delay-duration="100"
+          :content="{ side: 'top', align: 'start' }"
+        >
+          <span class="inline-flex items-center gap-1.5 text-sm text-muted">
+            <UIcon :name="parseUserAgent(row.original.userAgent)?.icon ?? 'lucide:globe'" class="size-3.5" />
+            <span class="truncate max-w-40">{{ parseUserAgent(row.original.userAgent)?.label ?? row.original.userAgent }}</span>
+          </span>
+        </UTooltip>
+        <span v-else class="text-sm text-muted">—</span>
+      </template>
+
+      <template #metadata-cell="{ row }">
+        <UPopover v-if="hasMetadata(row.original)" arrow :content="{ side: 'left' }">
+          <UButton
+            icon="lucide:braces"
+            color="neutral"
+            variant="ghost"
+            size="xs"
+            aria-label="View metadata"
+          />
+          <template #content>
+            <div class="max-w-sm p-3">
+              <p class="mb-2 text-xs font-medium uppercase tracking-wide text-muted">
+                Metadata
+              </p>
+              <pre class="max-h-72 overflow-auto rounded-md bg-elevated/40 p-2 text-xs font-mono whitespace-pre-wrap break-all">{{ JSON.stringify(row.original.metadata, null, 2) }}</pre>
+            </div>
+          </template>
+        </UPopover>
+      </template>
+
+      <template #empty>
+        <div class="flex flex-col items-center justify-center gap-2 py-12 text-center">
+          <UIcon name="lucide:scroll-text" class="size-8 text-muted" />
+          <p class="text-sm font-medium">
+            No audit logs yet
+          </p>
+          <p class="text-xs text-muted">
+            {{ filterAction ? 'Try clearing the filter.' : 'Sensitive actions will appear here as they happen.' }}
+          </p>
+        </div>
       </template>
     </UTable>
 
-    <template #actions>
-      <UInput v-model="filterAction" size="sm" placeholder="Filter by action (e.g. token.create)" />
-      <UButton v-if="hasMore" size="sm" :loading variant="subtle" @click="fetchLogs(false)">
+    <div v-if="hasMore" class="mt-4 flex justify-center">
+      <UButton size="sm" :loading variant="subtle" @click="fetchLogs(false)">
         Load more
       </UButton>
+    </div>
+
+    <template #actions>
+      <UInput
+        v-model="filterAction"
+        size="sm"
+        icon="lucide:filter"
+        placeholder="Filter by action (e.g. token.create)"
+      />
     </template>
   </PageSection>
 </template>
diff --git a/apps/shelve/app/pages/user/tokens.vue b/apps/shelve/app/pages/user/tokens.vue
index 5f596d6e..dcb8e21f 100644
--- a/apps/shelve/app/pages/user/tokens.vue
+++ b/apps/shelve/app/pages/user/tokens.vue
@@ -123,25 +123,7 @@ useSeoMeta({
         <TokenToggle :prefix="row.original.prefix" />
       </template>
       <template #scopes-cell="{ row }">
-        <div class="flex flex-wrap gap-1">
-          <UBadge
-            v-for="permission in row.original.scopes.permissions"
-            :key="permission"
-            size="sm"
-            :color="permission === 'write' ? 'warning' : 'neutral'"
-            variant="subtle"
-          >
-            {{ permission }}
-          </UBadge>
-          <UBadge
-            v-if="row.original.scopes.teamIds?.length || row.original.scopes.projectIds?.length || row.original.scopes.environmentIds?.length"
-            size="sm"
-            color="info"
-            variant="subtle"
-          >
-            scoped
-          </UBadge>
-        </div>
+        <TokenScopes :token="row.original" />
       </template>
       <template #createdAt-cell="{ row }">
         <DatePopover :date="row.original.createdAt" label="Created At" />
@@ -173,7 +155,7 @@ useSeoMeta({
     </UTable>
 
     <template #actions>
-      <TokenCreate v-model:search="search" @create="fetchTokens" />
+      <TokenCreate @create="fetchTokens" />
       <UInput v-model="search" size="sm" placeholder="Search tokens" />
     </template>
   </PageSection>
diff --git a/apps/shelve/app/utils/userAgent.ts b/apps/shelve/app/utils/userAgent.ts
new file mode 100644
index 00000000..37d0a3cf
--- /dev/null
+++ b/apps/shelve/app/utils/userAgent.ts
@@ -0,0 +1,71 @@
+export type ParsedUserAgent = {
+  label: string
+  icon: string
+}
+
+const KNOWN_CLIENTS: Array<{ pattern: RegExp; label: (m: RegExpMatchArray) => string; icon: string }> = [
+  { pattern: /shelve-cli\/([\d.]+|unknown)/i, label: m => `Shelve CLI ${m[1]}`, icon: 'lucide:terminal' },
+  { pattern: /^node$/i, label: () => 'Node.js', icon: 'lucide:hexagon' },
+  { pattern: /node\/?(v?\d+(?:\.\d+)*)?/i, label: m => (m[1] ? `Node.js ${m[1]}` : 'Node.js'), icon: 'lucide:hexagon' },
+  { pattern: /curl\/([\d.]+)/i, label: m => `curl ${m[1]}`, icon: 'lucide:terminal' },
+  { pattern: /wget\/([\d.]+)/i, label: m => `wget ${m[1]}`, icon: 'lucide:terminal' },
+  { pattern: /postman/i, label: () => 'Postman', icon: 'lucide:send' },
+  { pattern: /insomnia/i, label: () => 'Insomnia', icon: 'lucide:send' },
+  { pattern: /github-actions/i, label: () => 'GitHub Actions', icon: 'lucide:github' },
+]
+
+const BROWSERS: Array<{ pattern: RegExp; name: string }> = [
+  { pattern: /Edg\/([\d.]+)/, name: 'Edge' },
+  { pattern: /OPR\/([\d.]+)/, name: 'Opera' },
+  { pattern: /Firefox\/([\d.]+)/, name: 'Firefox' },
+  { pattern: /Chrome\/([\d.]+)/, name: 'Chrome' },
+  { pattern: /Version\/([\d.]+).*Safari/, name: 'Safari' },
+]
+
+const OS_PATTERNS: Array<{ pattern: RegExp; name: string }> = [
+  { pattern: /Mac OS X ([\d_.]+)/, name: 'macOS' },
+  { pattern: /Windows NT ([\d.]+)/, name: 'Windows' },
+  { pattern: /Android ([\d.]+)/, name: 'Android' },
+  { pattern: /iPhone OS ([\d_]+)/, name: 'iOS' },
+  { pattern: /iPad/, name: 'iPadOS' },
+  { pattern: /Linux/, name: 'Linux' },
+]
+
+export function parseUserAgent(raw: string | null | undefined): ParsedUserAgent | null {
+  if (!raw) return null
+  const ua = raw.trim()
+  if (!ua) return null
+
+  for (const client of KNOWN_CLIENTS) {
+    const match = ua.match(client.pattern)
+    if (match) return { label: client.label(match), icon: client.icon }
+  }
+
+  let browser: string | null = null
+  for (const b of BROWSERS) {
+    const match = ua.match(b.pattern)
+    if (match) {
+      const version = match[1]?.split('.')[0]
+      browser = version ? `${b.name} ${version}` : b.name
+      break
+    }
+  }
+
+  let os: string | null = null
+  for (const o of OS_PATTERNS) {
+    if (o.pattern.test(ua)) {
+      os = o.name
+      break
+    }
+  }
+
+  if (browser || os) {
+    return {
+      label: [browser, os].filter(Boolean).join(' · '),
+      icon: 'lucide:globe',
+    }
+  }
+
+  const head = ua.split(/[\s/]/)[0] ?? ua
+  return { label: head.length > 24 ? `${head.slice(0, 24)}…` : head, icon: 'lucide:terminal' }
+}
diff --git a/packages/types/src/Token.ts b/packages/types/src/Token.ts
index afdcbe56..d16af689 100644
--- a/packages/types/src/Token.ts
+++ b/packages/types/src/Token.ts
@@ -14,6 +14,7 @@ export type Token = {
   name: string;
   prefix: string;
   scopes: TokenScopes;
+  allowedCidrs: string[];
   expiresAt: Date | null;
   lastUsedAt: Date | null;
   lastUsedIp: string | null;