Admin app: guard rails extended, consistent styling, also share styling with main app.

frontend/src/admin/AdminApp.vue

@@ -54,7 +54,9 @@ const permissionSummary = computed(() => {
   const summary = {}
   for (const o of orgs.value) {
     const orgBase = { uuid: o.uuid, display_name: o.display_name }
-    // Org-level permissions (direct)
+    const orgPerms = new Set(o.permissions || [])
+    
+    // Org-level permissions (direct) - only count if org can grant them
     for (const pid of o.permissions || []) {
       if (!summary[pid]) summary[pid] = { orgs: [], orgSet: new Set(), userCount: 0 }
       if (!summary[pid].orgSet.has(o.uuid)) {
@@ -62,9 +64,13 @@ const permissionSummary = computed(() => {
         summary[pid].orgSet.add(o.uuid)
       }
     }
-    // Role-based permissions (inheritance)
+    
+    // Role-based permissions (inheritance) - only count if org can grant them
     for (const r of o.roles) {
       for (const pid of r.permissions) {
+        // Only count if the org can grant this permission
+        if (!orgPerms.has(pid)) continue
+        
         if (!summary[pid]) summary[pid] = { orgs: [], orgSet: new Set(), userCount: 0 }
         if (!summary[pid].orgSet.has(o.uuid)) {
           summary[pid].orgs.push(orgBase)
@@ -164,6 +170,7 @@ async function load() {
       if (!window.location.hash || window.location.hash === '#overview') {
         currentOrgId.value = orgs.value[0].uuid
         window.location.hash = `#org/${currentOrgId.value}`
+        authStore.showMessage(`Navigating to ${orgs.value[0].display_name} Administration`, 'info', 3000)
       } else {
         parseHash()
       }
@@ -178,14 +185,16 @@ async function load() {
 // Org actions
 function createOrg() { openDialog('org-create', {}) }
 
-function updateOrg(org) { openDialog('org-update', { org }) }
+function updateOrg(org) { openDialog('org-update', { org, name: org.display_name }) }
+
+function editUserName(user) { openDialog('user-update-name', { user, name: user.display_name }) }
 
 function deleteOrg(org) {
   if (!info.value?.is_global_admin) { authStore.showMessage('Global admin only'); return }
   openDialog('confirm', { message: `Delete organization ${org.display_name}?`, action: async () => {
     const res = await fetch(`/auth/admin/orgs/${org.uuid}`, { method: 'DELETE' })
     const data = await res.json(); if (data.detail) throw new Error(data.detail)
-    await loadOrgs()
+    await Promise.all([loadOrgs(), loadPermissions()])
   } })
 }
 
@@ -231,7 +240,7 @@ async function removeOrgPermission() { /* obsolete */ }
 // Role actions
 function createRole(org) { openDialog('role-create', { org }) }
 
-function updateRole(role) { openDialog('role-update', { role }) }
+function updateRole(role) { openDialog('role-update', { role, name: role.display_name }) }
 
 function deleteRole(role) {
   openDialog('confirm', { message: `Delete role ${role.display_name}?`, action: async () => {
@@ -241,6 +250,31 @@ function deleteRole(role) {
   } })
 }
 
+async function toggleRolePermission(role, pid, checked) {
+  // Calculate new permissions array
+  const newPermissions = checked 
+    ? [...role.permissions, pid] 
+    : role.permissions.filter(p => p !== pid)
+  
+  // Optimistic update
+  const prevPermissions = [...role.permissions]
+  role.permissions = newPermissions
+  
+  try {
+    const res = await fetch(`/auth/admin/orgs/${role.org_uuid}/roles/${role.uuid}`, {
+      method: 'PUT',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ display_name: role.display_name, permissions: newPermissions })
+    })
+    const data = await res.json()
+    if (data.detail) throw new Error(data.detail)
+    await loadOrgs()
+  } catch (e) {
+    authStore.showMessage(e.message || 'Failed to update role permission')
+    role.permissions = prevPermissions // revert
+  }
+}
+
 // Permission actions
 function updatePermission(p) { openDialog('perm-display', { permission: p }) }
 
@@ -288,9 +322,9 @@ const selectedUser = computed(() => {
 })
 
 const pageHeading = computed(() => {
-  if (selectedUser.value) return 'Organization Admin'
-  if (selectedOrg.value) return 'Organization Admin'
-  return (authStore.settings?.rp_name || 'Passkey') + ' Admin'
+  if (selectedUser.value) return 'Admin: User'
+  if (selectedOrg.value) return 'Admin: Org'
+  return (authStore.settings?.rp_name || 'Master') + ' Admin'
 })
 
 // Breadcrumb entries for admin app.
@@ -401,14 +435,16 @@ async function submitDialog() {
       const d = await res.json(); if (d.detail) throw new Error(d.detail); await loadOrgs()
     } else if (t === 'role-update') {
       const { role } = dialog.value.data; const name = dialog.value.data.name?.trim(); if (!name) throw new Error('Name required')
-      const permsCsv = dialog.value.data.perms || ''
-      const perms = permsCsv.split(',').map(s=>s.trim()).filter(Boolean)
-  const res = await fetch(`/auth/admin/orgs/${role.org_uuid}/roles/${role.uuid}`, { method: 'PUT', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ display_name: name, permissions: perms }) })
+      const res = await fetch(`/auth/admin/orgs/${role.org_uuid}/roles/${role.uuid}`, { method: 'PUT', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ display_name: name, permissions: role.permissions }) })
       const d = await res.json(); if (d.detail) throw new Error(d.detail); await loadOrgs()
     } else if (t === 'user-create') {
       const { org, role } = dialog.value.data; const name = dialog.value.data.name?.trim(); if (!name) throw new Error('Name required')
       const res = await fetch(`/auth/admin/orgs/${org.uuid}/users`, { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ display_name: name, role: role.display_name }) })
       const d = await res.json(); if (d.detail) throw new Error(d.detail); await loadOrgs()
+    } else if (t === 'user-update-name') {
+      const { user } = dialog.value.data; const name = dialog.value.data.name?.trim(); if (!name) throw new Error('Name required')
+      const res = await fetch(`/auth/admin/orgs/${user.org_uuid}/users/${user.uuid}/display-name`, { method: 'PUT', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ display_name: name }) })
+      const d = await res.json(); if (d.detail) throw new Error(d.detail); await onUserNameSaved()
     } else if (t === 'perm-display') {
       const { permission } = dialog.value.data
       const newId = dialog.value.data.id?.trim()
@@ -431,10 +467,10 @@ async function submitDialog() {
       await loadPermissions()
     } else if (t === 'perm-create') {
       const id = dialog.value.data.id?.trim(); if (!id) throw new Error('ID required')
-      const name = dialog.value.data.name?.trim(); if (!name) throw new Error('Display name required')
-      const res = await fetch('/auth/admin/permissions', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ id, display_name: name }) })
+      const display_name = dialog.value.data.display_name?.trim(); if (!display_name) throw new Error('Display name required')
+      const res = await fetch('/auth/admin/permissions', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ id, display_name }) })
       const data = await res.json(); if (data.detail) throw new Error(data.detail)
-      await loadPermissions(); dialog.value.data.id = ''; dialog.value.data.name = ''
+      await loadPermissions(); dialog.value.data.display_name = ''; dialog.value.data.id = ''
     } else if (t === 'confirm') {
       const action = dialog.value.data.action; if (action) await action()
     }
@@ -454,9 +490,6 @@ async function submitDialog() {
           <header class="view-header">
             <h1>{{ pageHeading }}</h1>
             <Breadcrumbs :entries="breadcrumbEntries" />
-            <p class="view-lede" v-if="info?.authenticated">
-              Manage organizations, roles, permissions, and passkeys for your relying party.
-            </p>
           </header>
 
           <section class="section-block admin-section">
@@ -498,6 +531,7 @@ async function submitDialog() {
                     @go-overview="goOverview"
                     @open-org="openOrg"
                     @on-user-name-saved="onUserNameSaved"
+                    @edit-user-name="editUserName"
                     @close-reg-modal="showRegModal = false"
                   />
                   <AdminOrgDetail

frontend/src/admin/AdminDialogs.vue

@@ -1,43 +1,76 @@
 <script setup>
+import { ref, watch, nextTick } from 'vue'
+import Modal from '@/components/Modal.vue'
+import NameEditForm from '@/components/NameEditForm.vue'
+
 const props = defineProps({
   dialog: Object,
   PERMISSION_ID_PATTERN: String
 })
 
 const emit = defineEmits(['submitDialog', 'closeDialog'])
+
+const nameInput = ref(null)
+const displayNameInput = ref(null)
+
+const NAME_EDIT_TYPES = new Set(['org-update', 'role-update', 'user-update-name'])
+
+watch(() => props.dialog.type, (newType) => {
+  if (newType === 'org-create') {
+    nextTick(() => {
+      nameInput.value?.focus()
+    })
+  } else if (newType === 'perm-display' || newType === 'perm-create') {
+    nextTick(() => {
+      displayNameInput.value?.focus()
+      if (newType === 'perm-display') {
+        displayNameInput.value?.select()
+      }
+    })
+  }
+})
 </script>
 
 <template>
-  <div v-if="dialog.type" class="modal-overlay" @keydown.esc.prevent.stop="$emit('closeDialog')" tabindex="-1">
-    <div class="modal" role="dialog" aria-modal="true">
+  <Modal v-if="dialog.type" @close="$emit('closeDialog')">
       <h3 class="modal-title">
         <template v-if="dialog.type==='org-create'">Create Organization</template>
         <template v-else-if="dialog.type==='org-update'">Rename Organization</template>
         <template v-else-if="dialog.type==='role-create'">Create Role</template>
         <template v-else-if="dialog.type==='role-update'">Edit Role</template>
         <template v-else-if="dialog.type==='user-create'">Add User To Role</template>
-        <template v-else-if="dialog.type==='perm-create'">Create Permission</template>
-        <template v-else-if="dialog.type==='perm-display'">Edit Permission Display</template>
+        <template v-else-if="dialog.type==='user-update-name'">Edit User Name</template>
+        <template v-else-if="dialog.type==='perm-create' || dialog.type==='perm-display'">{{ dialog.type === 'perm-create' ? 'Create Permission' : 'Edit Permission Display' }}</template>
         <template v-else-if="dialog.type==='confirm'">Confirm</template>
       </h3>
       <form @submit.prevent="$emit('submitDialog')" class="modal-form">
-        <template v-if="dialog.type==='org-create' || dialog.type==='org-update'">
+        <template v-if="dialog.type==='org-create'">
           <label>Name
-            <input v-model="dialog.data.name" :placeholder="dialog.type==='org-update'? dialog.data.org.display_name : 'Organization name'" required />
+            <input ref="nameInput" v-model="dialog.data.name" required />
           </label>
         </template>
+        <template v-else-if="dialog.type==='org-update'">
+          <NameEditForm
+            label="Organization Name"
+            v-model="dialog.data.name"
+            :busy="dialog.busy"
+            :error="dialog.error"
+            @cancel="$emit('closeDialog')"
+          />
+        </template>
         <template v-else-if="dialog.type==='role-create'">
           <label>Role Name
             <input v-model="dialog.data.name" placeholder="Role name" required />
           </label>
         </template>
         <template v-else-if="dialog.type==='role-update'">
-          <label>Role Name
-            <input v-model="dialog.data.name" :placeholder="dialog.data.role.display_name" required />
-          </label>
-          <label>Permissions (comma separated)
-            <textarea v-model="dialog.data.perms" rows="2" placeholder="perm:a, perm:b"></textarea>
-          </label>
+          <NameEditForm
+            label="Role Name"
+            v-model="dialog.data.name"
+            :busy="dialog.busy"
+            :error="dialog.error"
+            @cancel="$emit('closeDialog')"
+          />
         </template>
         <template v-else-if="dialog.type==='user-create'">
           <p class="small muted">Role: {{ dialog.data.role.display_name }}</p>
@@ -45,105 +78,50 @@ const emit = defineEmits(['submitDialog', 'closeDialog'])
             <input v-model="dialog.data.name" placeholder="User display name" required />
           </label>
         </template>
-        <template v-else-if="dialog.type==='perm-create'">
-          <label>Permission ID
-            <input v-model="dialog.data.id" placeholder="permission id" required :pattern="PERMISSION_ID_PATTERN" title="Allowed: A-Za-z0-9:._~-" />
-          </label>
-          <label>Display Name
-            <input v-model="dialog.data.name" placeholder="display name" required />
-          </label>
+        <template v-else-if="dialog.type==='user-update-name'">
+          <NameEditForm
+            label="Display Name"
+            v-model="dialog.data.name"
+            :busy="dialog.busy"
+            :error="dialog.error"
+            @cancel="$emit('closeDialog')"
+          />
         </template>
-        <template v-else-if="dialog.type==='perm-display'">
-          <label>Permission ID
-            <input v-model="dialog.data.id" :placeholder="dialog.data.permission.id" required :pattern="PERMISSION_ID_PATTERN" title="Allowed: A-Za-z0-9:._~-" />
-          </label>
+        <template v-else-if="dialog.type==='perm-create' || dialog.type==='perm-display'">
           <label>Display Name
-            <input v-model="dialog.data.display_name" :placeholder="dialog.data.permission.display_name" required />
+            <input ref="displayNameInput" v-model="dialog.data.display_name" required />
           </label>
+          <label>Permission ID
+            <input v-model="dialog.data.id" :placeholder="dialog.type === 'perm-create' ? 'yourapp:login' : dialog.data.permission.id" required :pattern="PERMISSION_ID_PATTERN" title="Allowed: A-Za-z0-9:._~-" />
+          </label>
+          <p class="small muted">The permission ID is used for permission checks in the application. Changing it may break deployed applications that reference this permission.</p>
         </template>
         <template v-else-if="dialog.type==='confirm'">
           <p>{{ dialog.data.message }}</p>
         </template>
-        <div v-if="dialog.error" class="error small">{{ dialog.error }}</div>
-        <div class="modal-actions">
-          <button type="submit" :disabled="dialog.busy">{{ dialog.type==='confirm' ? 'OK' : 'Save' }}</button>
-          <button type="button" @click="$emit('closeDialog')" :disabled="dialog.busy">Cancel</button>
+        <div v-if="dialog.error && !NAME_EDIT_TYPES.has(dialog.type)" class="error small">{{ dialog.error }}</div>
+        <div v-if="!NAME_EDIT_TYPES.has(dialog.type)" class="modal-actions">
+          <button
+            type="button"
+            class="btn-secondary"
+            @click="$emit('closeDialog')"
+            :disabled="dialog.busy"
+          >
+            Cancel
+          </button>
+          <button
+            type="submit"
+            class="btn-primary"
+            :disabled="dialog.busy"
+          >
+            {{ dialog.type==='confirm' ? 'OK' : 'Save' }}
+          </button>
         </div>
       </form>
-    </div>
-  </div>
+  </Modal>
 </template>
 
 <style scoped>
-.modal-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
-  backdrop-filter: blur(.1rem);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-}
-
-.modal {
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-xl);
-  padding: var(--space-lg);
-  max-width: 500px;
-  width: 90%;
-  max-height: 90vh;
-  overflow-y: auto;
-}
-
-.modal-title {
-  margin: 0 0 var(--space-md) 0;
-  font-size: 1.25rem;
-  font-weight: 600;
-  color: var(--color-heading);
-}
-
-.modal-form {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-md);
-}
-
-.modal-form label {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-xs);
-  font-weight: 500;
-}
-
-.modal-form input,
-.modal-form textarea {
-  padding: var(--space-sm);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  background: var(--color-surface);
-  color: var(--color-text);
-}
-
-.modal-form input:focus,
-.modal-form textarea:focus {
-  outline: none;
-  border-color: var(--color-accent);
-  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
-}
-
-.modal-actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: var(--space-sm);
-  margin-top: var(--space-lg);
-}
-
 .error { color: var(--color-danger-text); }
 .small { font-size: 0.9rem; }
 .muted { color: var(--color-text-muted); }

frontend/src/admin/AdminOrgDetail.vue

@@ -8,6 +8,17 @@ const props = defineProps({
 
 const emit = defineEmits(['updateOrg', 'createRole', 'updateRole', 'deleteRole', 'createUserInRole', 'openUser', 'toggleRolePermission', 'onRoleDragOver', 'onRoleDrop', 'onUserDragStart'])
 
+const sortedRoles = computed(() => {
+  return [...props.selectedOrg.roles].sort((a, b) => {
+    const nameA = a.display_name.toLowerCase()
+    const nameB = b.display_name.toLowerCase()
+    if (nameA !== nameB) {
+      return nameA.localeCompare(nameB)
+    }
+    return a.uuid.localeCompare(b.uuid)
+  })
+})
+
 function permissionDisplayName(id) {
   return props.permissions.find(p => p.id === id)?.display_name || id
 }
@@ -18,22 +29,20 @@ function toggleRolePermission(role, pid, checked) {
 </script>
 
 <template>
-  <div class="card surface">
-    <h2 class="org-title" :title="selectedOrg.uuid">
-      <span class="org-name">{{ selectedOrg.display_name }}</span>
-      <button @click="$emit('updateOrg', selectedOrg)" class="icon-btn" aria-label="Rename organization" title="Rename organization">✏️</button>
-    </h2>
-    <div class="org-actions"></div>
+  <h2 class="org-title" :title="selectedOrg.uuid">
+    <span class="org-name">{{ selectedOrg.display_name }}</span>
+    <button @click="$emit('updateOrg', selectedOrg)" class="icon-btn" aria-label="Rename organization" title="Rename organization">✏️</button>
+  </h2>
 
     <div class="matrix-wrapper">
       <div class="matrix-scroll">
         <div
           class="perm-matrix-grid"
-          :style="{ gridTemplateColumns: 'minmax(180px, 1fr) ' + selectedOrg.roles.map(()=> '2.2rem').join(' ') + ' 2.2rem' }"
+          :style="{ gridTemplateColumns: 'minmax(180px, 1fr) ' + sortedRoles.map(()=> '2.2rem').join(' ') + ' 2.2rem' }"
         >
           <div class="grid-head perm-head">Permission</div>
           <div
-            v-for="r in selectedOrg.roles"
+            v-for="r in sortedRoles"
             :key="'head-' + r.uuid"
             class="grid-head role-head"
             :title="r.display_name"
@@ -45,7 +54,7 @@ function toggleRolePermission(role, pid, checked) {
           <template v-for="pid in selectedOrg.permissions" :key="pid">
             <div class="perm-name" :title="pid">{{ permissionDisplayName(pid) }}</div>
             <div
-              v-for="r in selectedOrg.roles"
+              v-for="r in sortedRoles"
               :key="r.uuid + '-' + pid"
               class="matrix-cell"
             >
@@ -63,7 +72,7 @@ function toggleRolePermission(role, pid, checked) {
     </div>
     <div class="roles-grid">
       <div
-        v-for="r in selectedOrg.roles"
+        v-for="r in sortedRoles"
         :key="r.uuid"
         class="role-column"
         @dragover="$emit('onRoleDragOver', $event)"
@@ -81,7 +90,14 @@ function toggleRolePermission(role, pid, checked) {
         <template v-if="r.users.length > 0">
           <ul class="user-list">
             <li
-              v-for="u in r.users"
+              v-for="u in r.users.slice().sort((a, b) => {
+                const nameA = a.display_name.toLowerCase()
+                const nameB = b.display_name.toLowerCase()
+                if (nameA !== nameB) {
+                  return nameA.localeCompare(nameB)
+                }
+                return a.uuid.localeCompare(b.uuid)
+              })"
               :key="u.uuid"
               class="user-chip"
               draggable="true"
@@ -100,7 +116,6 @@ function toggleRolePermission(role, pid, checked) {
         </div>
       </div>
     </div>
-  </div>
 </template>
 
 <style scoped>

frontend/src/admin/AdminOverview.vue

@@ -10,17 +10,28 @@ const props = defineProps({
 
 const emit = defineEmits(['createOrg', 'openOrg', 'updateOrg', 'deleteOrg', 'toggleOrgPermission', 'openDialog', 'deletePermission', 'renamePermissionDisplay'])
 
-const sortedOrgs = computed(() => [...props.orgs].sort((a,b)=> a.display_name.localeCompare(b.display_name)))
+const sortedOrgs = computed(() => [...props.orgs].sort((a,b)=> {
+  const nameCompare = a.display_name.localeCompare(b.display_name)
+  return nameCompare !== 0 ? nameCompare : a.uuid.localeCompare(b.uuid)
+}))
 const sortedPermissions = computed(() => [...props.permissions].sort((a,b)=> a.id.localeCompare(b.id)))
 
 function permissionDisplayName(id) {
   return props.permissions.find(p => p.id === id)?.display_name || id
 }
+
+function getRoleNames(org) {
+  return org.roles
+    .slice()
+    .sort((a, b) => a.display_name.localeCompare(b.display_name))
+    .map(r => r.display_name)
+    .join(', ')
+}
 </script>
 
 <template>
   <div class="permissions-section">
-    <h2>Organizations</h2>
+    <h2>{{ info.is_global_admin ? 'Organizations' : 'Your Organizations' }}</h2>
     <div class="actions">
       <button v-if="info.is_global_admin" @click="$emit('createOrg')">+ Create Org</button>
     </div>
@@ -34,14 +45,14 @@ function permissionDisplayName(id) {
         </tr>
       </thead>
       <tbody>
-        <tr v-for="o in orgs" :key="o.uuid">
+        <tr v-for="o in sortedOrgs" :key="o.uuid">
           <td>
             <a href="#org/{{o.uuid}}" @click.prevent="$emit('openOrg', o)">{{ o.display_name }}</a>
-            <button v-if="info.is_global_admin" @click="$emit('updateOrg', o)" class="icon-btn edit-org-btn" aria-label="Rename organization" title="Rename organization">✏️</button>
+            <button v-if="info.is_global_admin || info.is_org_admin" @click="$emit('updateOrg', o)" class="icon-btn edit-org-btn" aria-label="Rename organization" title="Rename organization">✏️</button>
           </td>
-          <td>{{ o.roles.length }}</td>
-          <td>{{ o.roles.reduce((acc,r)=>acc + r.users.length,0) }}</td>
-          <td v-if="info.is_global_admin">
+          <td class="role-names">{{ getRoleNames(o) }}</td>
+          <td class="center">{{ o.roles.reduce((acc,r)=>acc + r.users.length,0) }}</td>
+          <td v-if="info.is_global_admin" class="center">
             <button @click="$emit('deleteOrg', o)" class="icon-btn delete-icon" aria-label="Delete organization" title="Delete organization">❌</button>
           </td>
         </tr>
@@ -49,7 +60,7 @@ function permissionDisplayName(id) {
     </table>
   </div>
 
-  <div class="permissions-section">
+  <div v-if="info.is_global_admin" class="permissions-section">
     <h2>Permissions</h2>
     <div class="matrix-wrapper">
       <div class="matrix-scroll">
@@ -88,7 +99,7 @@ function permissionDisplayName(id) {
       <p class="matrix-hint muted">Toggle which permissions each organization can grant to its members.</p>
     </div>
     <div class="actions">
-      <button v-if="info.is_global_admin" @click="$emit('openDialog', 'perm-create', {})">+ Create Permission</button>
+      <button v-if="info.is_global_admin" @click="$emit('openDialog', 'perm-create', { display_name: '', id: '' })">+ Create Permission</button>
     </div>
     <table class="org-table">
         <thead>
@@ -107,7 +118,6 @@ function permissionDisplayName(id) {
               </div>
               <div class="perm-id-info">
                 <span class="id-text">{{ p.id }}</span>
-                <button @click="$emit('renamePermissionDisplay', p)" class="icon-btn edit-id-btn" aria-label="Edit id" title="Edit id">🆔</button>
               </div>
             </td>
             <td class="perm-members center">{{ permissionSummary[p.id]?.userCount || 0 }}</td>
@@ -127,6 +137,8 @@ function permissionDisplayName(id) {
 .actions button { width: auto; }
 .org-table a { text-decoration: none; color: var(--color-link); }
 .org-table a:hover { text-decoration: underline; }
+.org-table .center { width: 6rem; min-width: 6rem; }
+.org-table .role-names { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .perm-name-cell { display: flex; flex-direction: column; gap: 0.3rem; }
 .perm-title { font-weight: 600; color: var(--color-heading); }
 .perm-id-info { font-size: 0.8rem; color: var(--color-text-muted); }

frontend/src/admin/AdminUserDetail.vue

@@ -3,6 +3,7 @@ import { ref } from 'vue'
 import UserBasicInfo from '@/components/UserBasicInfo.vue'
 import CredentialList from '@/components/CredentialList.vue'
 import RegistrationLinkModal from '@/components/RegistrationLinkModal.vue'
+import { useAuthStore } from '@/stores/auth'
 
 const props = defineProps({
   selectedUser: Object,
@@ -12,17 +13,35 @@ const props = defineProps({
   showRegModal: Boolean
 })
 
-const emit = defineEmits(['generateUserRegistrationLink', 'goOverview', 'openOrg', 'onUserNameSaved', 'closeRegModal'])
+const emit = defineEmits(['generateUserRegistrationLink', 'goOverview', 'openOrg', 'onUserNameSaved', 'closeRegModal', 'editUserName'])
 
-const showRegModal = ref(false)
+const authStore = useAuthStore()
 
 function onLinkCopied() {
-  // This could emit an event or show a message
+  authStore.showMessage('Link copied to clipboard!')
 }
+
+function handleEditName() {
+  emit('editUserName', props.selectedUser)
+}
+
+function handleDelete(credential) {
+  fetch(`/auth/admin/orgs/${props.selectedUser.org_uuid}/users/${props.selectedUser.uuid}/credentials/${credential.credential_uuid}`, { method: 'DELETE' })
+    .then(res => res.json())
+    .then(data => {
+      if (data.status === 'ok') {
+        emit('onUserNameSaved') // Reuse to refresh user detail
+      } else {
+        console.error('Failed to delete credential', data)
+      }
+    })
+    .catch(err => console.error('Delete credential error', err))
+}
+
 </script>
 
 <template>
-  <div class="card surface user-detail">
+  <div class="user-detail">
     <UserBasicInfo
       v-if="userDetail && !userDetail.error"
       :name="userDetail.display_name || selectedUser.display_name"
@@ -34,15 +53,15 @@ function onLinkCopied() {
       :role-name="userDetail.role"
       :update-endpoint="`/auth/admin/orgs/${selectedUser.org_uuid}/users/${selectedUser.uuid}/display-name`"
       @saved="$emit('onUserNameSaved')"
+      @edit-name="handleEditName"
     />
     <div v-else-if="userDetail?.error" class="error small">{{ userDetail.error }}</div>
     <template v-if="userDetail && !userDetail.error">
       <h3 class="cred-title">Registered Passkeys</h3>
-      <CredentialList :credentials="userDetail.credentials" :aaguid-info="userDetail.aaguid_info" />
+      <CredentialList :credentials="userDetail.credentials" :aaguid-info="userDetail.aaguid_info" :allow-delete="true" @delete="handleDelete" />
     </template>
     <div class="actions">
       <button @click="$emit('generateUserRegistrationLink', selectedUser)">Generate Registration Token</button>
-      <button @click="$emit('goOverview')" class="icon-btn" title="Overview">🏠</button>
       <button v-if="selectedOrg" @click="$emit('openOrg', selectedOrg)" class="icon-btn" title="Back to Org">↩️</button>
     </div>
     <p class="matrix-hint muted">Use the token dialog to register a new credential for the member.</p>
@@ -57,7 +76,6 @@ function onLinkCopied() {
 </template>
 
 <style scoped>
-.card.surface { padding: var(--space-lg); }
 .user-detail { display: flex; flex-direction: column; gap: var(--space-lg); }
 .cred-title { font-size: 1.25rem; font-weight: 600; color: var(--color-heading); margin-bottom: var(--space-md); }
 .actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }