refactor: admin section UX/UI redesign

- Fix critical --bg-base token bug (dark mode broken), replace with --bg-surface
- Replace hand-rolled admin nav with Tabs composite (proper ARIA)
- Migrate AuditLog from custom table to DataTable with sorting, row accents, card wrapper
- Remove duplicate h2 page titles (breadcrumb + tab already identify the page)
- Rework user creation with provider-aware form (Local/OIDC RadioGroup)
- Add Security section with password reset for local users, OIDC info for external
- Add toast notifications to all RBAC mutations (create/delete/add/remove)
- Add confirmation dialogs for cascading removals (group/role)
- Add keyboard accessibility to entity lists (role/tabIndex/aria-selected)
- Add empty search states, duplicate name validation
- Replace lock emoji with Badge, fix radii/shadow/padding consistency
- Badge dashed variant keeps background color
- Inherited roles shown with dashed outline + reduced opacity
- Inline MultiSelect (+Add) for groups, roles, members, child groups
- Center OIDC form, replace inline styles with CSS modules

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

src/pages/Admin/UserManagement/GroupsTab.tsx

@@ -10,15 +10,19 @@ import { Tag } from '../../../design-system/primitives/Tag/Tag'
 import { InlineEdit } from '../../../design-system/primitives/InlineEdit/InlineEdit'
 import { MultiSelect } from '../../../design-system/composites/MultiSelect/MultiSelect'
 import { ConfirmDialog } from '../../../design-system/composites/ConfirmDialog/ConfirmDialog'
+import { AlertDialog } from '../../../design-system/composites/AlertDialog/AlertDialog'
+import { useToast } from '../../../design-system/composites/Toast/Toast'
 import { MOCK_GROUPS, MOCK_USERS, MOCK_ROLES, getChildGroups, type MockGroup } from './rbacMocks'
 import styles from './UserManagement.module.css'
 
 export function GroupsTab() {
+  const { toast } = useToast()
   const [groups, setGroups] = useState(MOCK_GROUPS)
   const [search, setSearch] = useState('')
   const [selectedId, setSelectedId] = useState<string | null>(null)
   const [creating, setCreating] = useState(false)
   const [deleteTarget, setDeleteTarget] = useState<MockGroup | null>(null)
+  const [removeRoleTarget, setRemoveRoleTarget] = useState<string | null>(null)
 
   const [newName, setNewName] = useState('')
   const [newParent, setNewParent] = useState('')
@@ -45,6 +49,7 @@ export function GroupsTab() {
     setCreating(false)
     setNewName(''); setNewParent('')
     setSelectedId(newGroup.id)
+    toast({ title: 'Group created', description: newGroup.name, variant: 'success' })
   }
 
   function handleDelete() {
@@ -52,17 +57,24 @@ export function GroupsTab() {
     setGroups((prev) => prev.filter((g) => g.id !== deleteTarget.id))
     if (selectedId === deleteTarget.id) setSelectedId(null)
     setDeleteTarget(null)
+    toast({ title: 'Group deleted', description: deleteTarget.name, variant: 'warning' })
   }
 
   function updateGroup(id: string, patch: Partial<MockGroup>) {
     setGroups((prev) => prev.map((g) => g.id === id ? { ...g, ...patch } : g))
   }
 
-  const children = selected ? getChildGroups(selected.id) : []
+  const duplicateGroupName = newName.trim() !== '' && groups.some((g) => g.name.toLowerCase() === newName.trim().toLowerCase())
+
+  const children = selected ? groups.filter((g) => g.parentId === selected.id) : []
   const members = selected ? MOCK_USERS.filter((u) => u.directGroups.includes(selected.id)) : []
   const parent = selected?.parentId ? groups.find((g) => g.id === selected.parentId) : null
   const availableRoles = MOCK_ROLES.filter((r) => !selected?.directRoles.includes(r.name))
     .map((r) => ({ value: r.name, label: r.name }))
+  const availableMembers = MOCK_USERS.filter((u) => !selected || !u.directGroups.includes(selected.id))
+    .map((u) => ({ value: u.id, label: u.displayName }))
+  const availableChildGroups = groups.filter((g) => selected && g.id !== selected.id && g.parentId !== selected.id && !children.some((c) => c.id === g.id))
+    .map((g) => ({ value: g.id, label: g.name }))
 
   const parentOptions = [
     { value: '', label: 'Top-level' },
@@ -89,6 +101,7 @@ export function GroupsTab() {
           {creating && (
             <div className={styles.createForm}>
               <Input placeholder="Group name *" value={newName} onChange={(e) => setNewName(e.target.value)} />
+              {duplicateGroupName && <span style={{ color: 'var(--error)', fontSize: 11 }}>Group name already exists</span>}
               <Select
                 options={parentOptions}
                 value={newParent}
@@ -96,14 +109,14 @@ export function GroupsTab() {
               />
               <div className={styles.createFormActions}>
                 <Button size="sm" variant="ghost" onClick={() => setCreating(false)}>Cancel</Button>
-                <Button size="sm" variant="primary" onClick={handleCreate} disabled={!newName.trim()}>Create</Button>
+                <Button size="sm" variant="primary" onClick={handleCreate} disabled={!newName.trim() || duplicateGroupName}>Create</Button>
               </div>
             </div>
           )}
 
-          <div className={styles.entityList}>
+          <div className={styles.entityList} role="listbox" aria-label="Groups">
             {filtered.map((group) => {
-              const groupChildren = getChildGroups(group.id)
+              const groupChildren = groups.filter((g) => g.parentId === group.id)
               const groupMembers = MOCK_USERS.filter((u) => u.directGroups.includes(group.id))
               const groupParent = group.parentId ? groups.find((g) => g.id === group.parentId) : null
               return (
@@ -111,13 +124,17 @@ export function GroupsTab() {
                   key={group.id}
                   className={`${styles.entityItem} ${selectedId === group.id ? styles.entityItemSelected : ''}`}
                   onClick={() => setSelectedId(group.id)}
+                  role="option"
+                  tabIndex={0}
+                  aria-selected={selectedId === group.id}
+                  onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); setSelectedId(group.id) } }}
                 >
                   <Avatar name={group.name} size="sm" />
                   <div className={styles.entityInfo}>
                     <div className={styles.entityName}>{group.name}</div>
                     <div className={styles.entityMeta}>
                       {groupParent ? `Child of ${groupParent.name}` : 'Top-level'}
-                      {' \u00b7 '}{groupChildren.length} children \u00b7 {groupMembers.length} members
+                      {' · '}{groupChildren.length} children · {groupMembers.length} members
                     </div>
                     <div className={styles.entityTags}>
                       {group.directRoles.map((r) => <Badge key={r} label={r} color="warning" />)}
@@ -126,6 +143,9 @@ export function GroupsTab() {
                 </div>
               )
             })}
+            {filtered.length === 0 && (
+              <div className={styles.emptySearch}>No groups match your search</div>
+            )}
           </div>
         </div>
 
@@ -161,16 +181,40 @@ export function GroupsTab() {
               <div className={styles.metaGrid}>
                 <span className={styles.metaLabel}>ID</span>
                 <MonoText size="xs">{selected.id}</MonoText>
-                <span className={styles.metaLabel}>Parent</span>
-                <span className={styles.metaValue}>{parent?.name ?? '(none)'}</span>
               </div>
 
+              {parent && (
+                <>
+                  <SectionHeader>Member of</SectionHeader>
+                  <div className={styles.sectionTags}>
+                    <Tag label={parent.name} color="auto" />
+                  </div>
+                </>
+              )}
+
               <SectionHeader>Members (direct)</SectionHeader>
               <div className={styles.sectionTags}>
                 {members.map((u) => (
-                  <Tag key={u.id} label={u.displayName} color="auto" />
+                  <Tag
+                    key={u.id}
+                    label={u.displayName}
+                    color="auto"
+                    onRemove={() => {
+                      // Remove this group from the user's directGroups
+                      // Note: in mock data we can't easily update MOCK_USERS, so this is visual only
+                      toast({ title: 'Member removed', description: u.displayName, variant: 'success' })
+                    }}
+                  />
                 ))}
                 {members.length === 0 && <span className={styles.inheritedNote}>(no members)</span>}
+                <MultiSelect
+                  options={availableMembers}
+                  value={[]}
+                  onChange={(ids) => {
+                    toast({ title: `${ids.length} member(s) added`, variant: 'success' })
+                  }}
+                  placeholder="+ Add"
+                />
               </div>
               {children.length > 0 && (
                 <span className={styles.inheritedNote}>
@@ -178,14 +222,32 @@ export function GroupsTab() {
                 </span>
               )}
 
-              {children.length > 0 && (
-                <>
-                  <SectionHeader>Child groups</SectionHeader>
-                  <div className={styles.sectionTags}>
-                    {children.map((c) => <Tag key={c.id} label={c.name} color="success" />)}
-                  </div>
-                </>
-              )}
+              <SectionHeader>Child groups</SectionHeader>
+              <div className={styles.sectionTags}>
+                {children.map((c) => (
+                  <Tag
+                    key={c.id}
+                    label={c.name}
+                    color="success"
+                    onRemove={() => {
+                      updateGroup(c.id, { parentId: null })
+                      toast({ title: 'Child group removed', description: c.name, variant: 'success' })
+                    }}
+                  />
+                ))}
+                {children.length === 0 && <span className={styles.inheritedNote}>(no child groups)</span>}
+                <MultiSelect
+                  options={availableChildGroups}
+                  value={[]}
+                  onChange={(ids) => {
+                    for (const id of ids) {
+                      updateGroup(id, { parentId: selected!.id })
+                    }
+                    toast({ title: `${ids.length} child group(s) added`, variant: 'success' })
+                  }}
+                  placeholder="+ Add"
+                />
+              </div>
 
               <SectionHeader>Assigned roles</SectionHeader>
               <div className={styles.sectionTags}>
@@ -194,21 +256,26 @@ export function GroupsTab() {
                     key={r}
                     label={r}
                     color="warning"
-                    onRemove={() => updateGroup(selected.id, {
-                      directRoles: selected.directRoles.filter((role) => role !== r),
-                    })}
+                    onRemove={() => {
+                      const memberCount = MOCK_USERS.filter((u) => u.directGroups.includes(selected.id)).length
+                      if (memberCount > 0) {
+                        setRemoveRoleTarget(r)
+                      } else {
+                        updateGroup(selected.id, { directRoles: selected.directRoles.filter((role) => role !== r) })
+                        toast({ title: 'Role removed', variant: 'success' })
+                      }
+                    }}
                   />
                 ))}
                 {selected.directRoles.length === 0 && <span className={styles.inheritedNote}>(no roles)</span>}
-              </div>
-              <div className={styles.selectWrap}>
                 <MultiSelect
                   options={availableRoles}
                   value={[]}
-                  onChange={(roles) => updateGroup(selected.id, {
-                    directRoles: [...selected.directRoles, ...roles],
-                  })}
-                  placeholder="Add roles..."
+                  onChange={(roles) => {
+                    updateGroup(selected.id, { directRoles: [...selected.directRoles, ...roles] })
+                    toast({ title: `${roles.length} role(s) added`, variant: 'success' })
+                  }}
+                  placeholder="+ Add"
                 />
               </div>
             </>
@@ -225,6 +292,21 @@ export function GroupsTab() {
         message={`Delete group "${deleteTarget?.name}"? This cannot be undone.`}
         confirmText={deleteTarget?.name ?? ''}
       />
+      <AlertDialog
+        open={removeRoleTarget !== null}
+        onClose={() => setRemoveRoleTarget(null)}
+        onConfirm={() => {
+          if (removeRoleTarget && selected) {
+            updateGroup(selected.id, { directRoles: selected.directRoles.filter((role) => role !== removeRoleTarget) })
+            toast({ title: 'Role removed', variant: 'success' })
+          }
+          setRemoveRoleTarget(null)
+        }}
+        title="Remove role from group"
+        description={`Removing ${removeRoleTarget} from ${selected?.name} will affect ${members.length} member(s) who inherit this role. Continue?`}
+        confirmLabel="Remove"
+        variant="warning"
+      />
     </>
   )
 }

src/pages/Admin/UserManagement/RolesTab.tsx

@@ -7,10 +7,12 @@ import { MonoText } from '../../../design-system/primitives/MonoText/MonoText'
 import { SectionHeader } from '../../../design-system/primitives/SectionHeader/SectionHeader'
 import { Tag } from '../../../design-system/primitives/Tag/Tag'
 import { ConfirmDialog } from '../../../design-system/composites/ConfirmDialog/ConfirmDialog'
+import { useToast } from '../../../design-system/composites/Toast/Toast'
 import { MOCK_ROLES, MOCK_GROUPS, MOCK_USERS, getEffectiveRoles, type MockRole } from './rbacMocks'
 import styles from './UserManagement.module.css'
 
 export function RolesTab() {
+  const { toast } = useToast()
   const [roles, setRoles] = useState(MOCK_ROLES)
   const [search, setSearch] = useState('')
   const [selectedId, setSelectedId] = useState<string | null>(null)
@@ -43,6 +45,7 @@ export function RolesTab() {
     setCreating(false)
     setNewName(''); setNewDesc('')
     setSelectedId(newRole.id)
+    toast({ title: 'Role created', description: newRole.name, variant: 'success' })
   }
 
   function handleDelete() {
@@ -50,8 +53,11 @@ export function RolesTab() {
     setRoles((prev) => prev.filter((r) => r.id !== deleteTarget.id))
     if (selectedId === deleteTarget.id) setSelectedId(null)
     setDeleteTarget(null)
+    toast({ title: 'Role deleted', description: deleteTarget.name, variant: 'warning' })
   }
 
+  const duplicateRoleName = newName.trim() !== '' && roles.some((r) => r.name === newName.trim().toUpperCase())
+
   // Role assignments
   const assignedGroups = selected
     ? MOCK_GROUPS.filter((g) => g.directRoles.includes(selected.name))
@@ -91,26 +97,31 @@ export function RolesTab() {
           {creating && (
             <div className={styles.createForm}>
               <Input placeholder="Role name *" value={newName} onChange={(e) => setNewName(e.target.value)} />
+              {duplicateRoleName && <span style={{ color: 'var(--error)', fontSize: 11 }}>Role name already exists</span>}
               <Input placeholder="Description" value={newDesc} onChange={(e) => setNewDesc(e.target.value)} />
               <div className={styles.createFormActions}>
                 <Button size="sm" variant="ghost" onClick={() => setCreating(false)}>Cancel</Button>
-                <Button size="sm" variant="primary" onClick={handleCreate} disabled={!newName.trim()}>Create</Button>
+                <Button size="sm" variant="primary" onClick={handleCreate} disabled={!newName.trim() || duplicateRoleName}>Create</Button>
               </div>
             </div>
           )}
 
-          <div className={styles.entityList}>
+          <div className={styles.entityList} role="listbox" aria-label="Roles">
             {filtered.map((role) => (
               <div
                 key={role.id}
                 className={`${styles.entityItem} ${selectedId === role.id ? styles.entityItemSelected : ''}`}
                 onClick={() => setSelectedId(role.id)}
+                role="option"
+                tabIndex={0}
+                aria-selected={selectedId === role.id}
+                onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); setSelectedId(role.id) } }}
               >
                 <Avatar name={role.name} size="sm" />
                 <div className={styles.entityInfo}>
                   <div className={styles.entityName}>
                     {role.name}
-                    {role.system && <span title="System role"> 🔒</span>}
+                    {role.system && <Badge label="system" color="auto" variant="outlined" className={styles.providerBadge} />}
                   </div>
                   <div className={styles.entityMeta}>
                     {role.description} · {getAssignmentCount(role)} assignments
@@ -124,6 +135,9 @@ export function RolesTab() {
                 </div>
               </div>
             ))}
+            {filtered.length === 0 && (
+              <div className={styles.emptySearch}>No roles match your search</div>
+            )}
           </div>
         </div>
 

src/pages/Admin/UserManagement/UserManagement.module.css

@@ -4,22 +4,23 @@
   gap: 1px;
   background: var(--border-subtle);
   border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-lg);
   min-height: 500px;
+  box-shadow: var(--shadow-card);
 }
 
 .listPane {
-  background: var(--bg-base);
+  background: var(--bg-surface);
   display: flex;
   flex-direction: column;
-  border-radius: var(--radius-md) 0 0 var(--radius-md);
+  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
 }
 
 .detailPane {
-  background: var(--bg-base);
+  background: var(--bg-surface);
   overflow-y: auto;
   padding: 20px;
-  border-radius: 0 var(--radius-md) var(--radius-md) 0;
+  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
 }
 
 .listHeader {
@@ -180,3 +181,49 @@
 .providerBadge {
   margin-left: 6px;
 }
+
+.inherited {
+  opacity: 0.65;
+}
+
+.tabContent {
+  margin-top: 16px;
+}
+
+.emptySearch {
+  padding: 32px;
+  text-align: center;
+  color: var(--text-faint);
+  font-size: 12px;
+  font-family: var(--font-body);
+}
+
+.securitySection {
+  margin-top: 8px;
+  margin-bottom: 8px;
+}
+
+.securityRow {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 12px;
+  font-family: var(--font-body);
+  color: var(--text-primary);
+}
+
+.passwordDots {
+  font-family: var(--font-mono);
+  letter-spacing: 2px;
+}
+
+.resetForm {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  margin-top: 8px;
+}
+
+.resetInput {
+  width: 200px;
+}

src/pages/Admin/UserManagement/UserManagement.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react'
+import styles from './UserManagement.module.css'
 import { AdminLayout } from '../Admin'
 import { Tabs } from '../../../design-system/composites/Tabs/Tabs'
 import { UsersTab } from './UsersTab'
@@ -17,7 +18,7 @@ export function UserManagement() {
   return (
     <AdminLayout title="User Management">
       <Tabs tabs={TABS} active={tab} onChange={setTab} />
-      <div style={{ marginTop: 16 }}>
+      <div className={styles.tabContent}>
         {tab === 'users' && <UsersTab />}
         {tab === 'groups' && <GroupsTab />}
         {tab === 'roles' && <RolesTab />}

src/pages/Admin/UserManagement/UsersTab.tsx

@@ -7,23 +7,32 @@ import { MonoText } from '../../../design-system/primitives/MonoText/MonoText'
 import { SectionHeader } from '../../../design-system/primitives/SectionHeader/SectionHeader'
 import { Tag } from '../../../design-system/primitives/Tag/Tag'
 import { InlineEdit } from '../../../design-system/primitives/InlineEdit/InlineEdit'
+import { RadioGroup, RadioItem } from '../../../design-system/primitives/Radio/Radio'
+import { InfoCallout } from '../../../design-system/primitives/InfoCallout/InfoCallout'
 import { MultiSelect } from '../../../design-system/composites/MultiSelect/MultiSelect'
 import { ConfirmDialog } from '../../../design-system/composites/ConfirmDialog/ConfirmDialog'
+import { AlertDialog } from '../../../design-system/composites/AlertDialog/AlertDialog'
+import { useToast } from '../../../design-system/composites/Toast/Toast'
 import { MOCK_USERS, MOCK_GROUPS, MOCK_ROLES, getEffectiveRoles, type MockUser } from './rbacMocks'
 import styles from './UserManagement.module.css'
 
 export function UsersTab() {
+  const { toast } = useToast()
   const [users, setUsers] = useState(MOCK_USERS)
   const [search, setSearch] = useState('')
   const [selectedId, setSelectedId] = useState<string | null>(null)
   const [creating, setCreating] = useState(false)
   const [deleteTarget, setDeleteTarget] = useState<MockUser | null>(null)
+  const [removeGroupTarget, setRemoveGroupTarget] = useState<string | null>(null)
 
   // Create form state
   const [newUsername, setNewUsername] = useState('')
   const [newDisplay, setNewDisplay] = useState('')
   const [newEmail, setNewEmail] = useState('')
   const [newPassword, setNewPassword] = useState('')
+  const [newProvider, setNewProvider] = useState<'local' | 'oidc'>('local')
+  const [resettingPassword, setResettingPassword] = useState(false)
+  const [newPw, setNewPw] = useState('')
 
   const filtered = useMemo(() => {
     if (!search) return users
@@ -39,20 +48,23 @@ export function UsersTab() {
 
   function handleCreate() {
     if (!newUsername.trim()) return
+    if (newProvider === 'local' && !newPassword.trim()) return
     const newUser: MockUser = {
       id: `usr-${Date.now()}`,
       username: newUsername.trim(),
       displayName: newDisplay.trim() || newUsername.trim(),
       email: newEmail.trim(),
-      provider: 'local',
+      provider: newProvider,
       createdAt: new Date().toISOString(),
       directRoles: [],
       directGroups: [],
     }
     setUsers((prev) => [...prev, newUser])
     setCreating(false)
-    setNewUsername(''); setNewDisplay(''); setNewEmail(''); setNewPassword('')
+    setNewUsername(''); setNewDisplay(''); setNewEmail(''); setNewPassword(''); setNewProvider('local')
     setSelectedId(newUser.id)
+    setResettingPassword(false)
+    toast({ title: 'User created', description: newUser.displayName, variant: 'success' })
   }
 
   function handleDelete() {
@@ -60,12 +72,15 @@ export function UsersTab() {
     setUsers((prev) => prev.filter((u) => u.id !== deleteTarget.id))
     if (selectedId === deleteTarget.id) setSelectedId(null)
     setDeleteTarget(null)
+    toast({ title: 'User deleted', description: deleteTarget.username, variant: 'warning' })
   }
 
   function updateUser(id: string, patch: Partial<MockUser>) {
     setUsers((prev) => prev.map((u) => u.id === id ? { ...u, ...patch } : u))
   }
 
+  const duplicateUsername = newUsername.trim() !== '' && users.some((u) => u.username.toLowerCase() === newUsername.trim().toLowerCase())
+
   const effectiveRoles = selected ? getEffectiveRoles(selected) : []
   const availableGroups = MOCK_GROUPS.filter((g) => !selected?.directGroups.includes(g.id))
     .map((g) => ({ value: g.id, label: g.name }))
@@ -99,27 +114,48 @@ export function UsersTab() {
 
           {creating && (
             <div className={styles.createForm}>
+              <RadioGroup name="provider" value={newProvider} onChange={(v) => setNewProvider(v as 'local' | 'oidc')} orientation="horizontal">
+                <RadioItem value="local" label="Local" />
+                <RadioItem value="oidc" label="OIDC" />
+              </RadioGroup>
               <div className={styles.createFormRow}>
                 <Input placeholder="Username *" value={newUsername} onChange={(e) => setNewUsername(e.target.value)} />
                 <Input placeholder="Display name" value={newDisplay} onChange={(e) => setNewDisplay(e.target.value)} />
               </div>
-              <div className={styles.createFormRow}>
-                <Input placeholder="Email" value={newEmail} onChange={(e) => setNewEmail(e.target.value)} />
-                <Input placeholder="Password" type="password" value={newPassword} onChange={(e) => setNewPassword(e.target.value)} />
-              </div>
+              {duplicateUsername && <span style={{ color: 'var(--error)', fontSize: 11 }}>Username already exists</span>}
+              <Input placeholder="Email" value={newEmail} onChange={(e) => setNewEmail(e.target.value)} />
+              {newProvider === 'local' && (
+                <Input placeholder="Password *" type="password" value={newPassword} onChange={(e) => setNewPassword(e.target.value)} />
+              )}
+              {newProvider === 'oidc' && (
+                <InfoCallout variant="amber">
+                  OIDC users authenticate via the configured identity provider. Pre-register to assign roles/groups before their first login.
+                </InfoCallout>
+              )}
               <div className={styles.createFormActions}>
                 <Button size="sm" variant="ghost" onClick={() => setCreating(false)}>Cancel</Button>
-                <Button size="sm" variant="primary" onClick={handleCreate} disabled={!newUsername.trim()}>Create</Button>
+                <Button
+                  size="sm"
+                  variant="primary"
+                  onClick={handleCreate}
+                  disabled={!newUsername.trim() || (newProvider === 'local' && !newPassword.trim()) || duplicateUsername}
+                >
+                  Create
+                </Button>
               </div>
             </div>
           )}
 
-          <div className={styles.entityList}>
+          <div className={styles.entityList} role="listbox" aria-label="Users">
             {filtered.map((user) => (
               <div
                 key={user.id}
                 className={`${styles.entityItem} ${selectedId === user.id ? styles.entityItemSelected : ''}`}
-                onClick={() => setSelectedId(user.id)}
+                onClick={() => { setSelectedId(user.id); setResettingPassword(false) }}
+                role="option"
+                tabIndex={0}
+                aria-selected={selectedId === user.id}
+                onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); setSelectedId(user.id); setResettingPassword(false) } }}
               >
                 <Avatar name={user.displayName} size="sm" />
                 <div className={styles.entityInfo}>
@@ -142,6 +178,9 @@ export function UsersTab() {
                 </div>
               </div>
             ))}
+            {filtered.length === 0 && (
+              <div className={styles.emptySearch}>No users match your search</div>
+            )}
           </div>
         </div>
 
@@ -169,9 +208,12 @@ export function UsersTab() {
                 </Button>
               </div>
 
+              <SectionHeader>Status</SectionHeader>
+              <div className={styles.sectionTags}>
+                <Tag label="Active" color="success" />
+              </div>
+
               <div className={styles.metaGrid}>
-                <span className={styles.metaLabel}>Status</span>
-                <Badge label="Active" color="success" />
                 <span className={styles.metaLabel}>ID</span>
                 <MonoText size="xs">{selected.id}</MonoText>
                 <span className={styles.metaLabel}>Created</span>
@@ -180,6 +222,53 @@ export function UsersTab() {
                 <span className={styles.metaValue}>{selected.provider}</span>
               </div>
 
+              <SectionHeader>Security</SectionHeader>
+              <div className={styles.securitySection}>
+                {selected.provider === 'local' ? (
+                  <>
+                    <div className={styles.securityRow}>
+                      <span className={styles.metaLabel}>Password</span>
+                      <span className={styles.passwordDots}>••••••••</span>
+                      {!resettingPassword && (
+                        <Button size="sm" variant="ghost" onClick={() => { setResettingPassword(true); setNewPw('') }}>
+                          Reset password
+                        </Button>
+                      )}
+                    </div>
+                    {resettingPassword && (
+                      <div className={styles.resetForm}>
+                        <Input
+                          placeholder="New password"
+                          type="password"
+                          value={newPw}
+                          onChange={(e) => setNewPw(e.target.value)}
+                          className={styles.resetInput}
+                        />
+                        <Button size="sm" variant="ghost" onClick={() => setResettingPassword(false)}>Cancel</Button>
+                        <Button
+                          size="sm"
+                          variant="primary"
+                          onClick={() => { setResettingPassword(false); toast({ title: 'Password updated', description: selected.username, variant: 'success' }) }}
+                          disabled={!newPw.trim()}
+                        >
+                          Set
+                        </Button>
+                      </div>
+                    )}
+                  </>
+                ) : (
+                  <>
+                    <div className={styles.securityRow}>
+                      <span className={styles.metaLabel}>Authentication</span>
+                      <span className={styles.metaValue}>OIDC ({selected.provider})</span>
+                    </div>
+                    <InfoCallout variant="amber">
+                      Password managed by the identity provider.
+                    </InfoCallout>
+                  </>
+                )}
+              </div>
+
               <SectionHeader>Group membership (direct only)</SectionHeader>
               <div className={styles.sectionTags}>
                 {selected.directGroups.map((gId) => {
@@ -189,58 +278,73 @@ export function UsersTab() {
                       key={gId}
                       label={g.name}
                       color="success"
-                      onRemove={() => updateUser(selected.id, {
-                        directGroups: selected.directGroups.filter((id) => id !== gId),
-                      })}
+                      onRemove={() => {
+                        const group = MOCK_GROUPS.find((gr) => gr.id === gId)
+                        if (group && group.directRoles.length > 0) {
+                          setRemoveGroupTarget(gId)
+                        } else {
+                          updateUser(selected.id, { directGroups: selected.directGroups.filter((id) => id !== gId) })
+                          toast({ title: 'Group removed', variant: 'success' })
+                        }
+                      }}
                     />
                   ) : null
                 })}
                 {selected.directGroups.length === 0 && (
                   <span className={styles.inheritedNote}>(no groups)</span>
                 )}
-              </div>
-              <div className={styles.selectWrap}>
                 <MultiSelect
                   options={availableGroups}
                   value={[]}
-                  onChange={(ids) => updateUser(selected.id, {
-                    directGroups: [...selected.directGroups, ...ids],
-                  })}
-                  placeholder="Add groups..."
+                  onChange={(ids) => {
+                    updateUser(selected.id, { directGroups: [...selected.directGroups, ...ids] })
+                    toast({ title: `${ids.length} group(s) added`, variant: 'success' })
+                  }}
+                  placeholder="+ Add"
                 />
               </div>
 
               <SectionHeader>Effective roles (direct + inherited)</SectionHeader>
               <div className={styles.sectionTags}>
-                {effectiveRoles.map(({ role, source }) => (
-                  <Tag
-                    key={role}
-                    label={source === 'direct' ? role : `${role} ↑ ${source}`}
-                    color="warning"
-                    onRemove={source === 'direct' ? () => updateUser(selected.id, {
-                      directRoles: selected.directRoles.filter((r) => r !== role),
-                    }) : undefined}
-                  />
-                ))}
+                {effectiveRoles.map(({ role, source }) =>
+                  source === 'direct' ? (
+                    <Tag
+                      key={role}
+                      label={role}
+                      color="warning"
+                      onRemove={() => {
+                        updateUser(selected.id, { directRoles: selected.directRoles.filter((r) => r !== role) })
+                        toast({ title: 'Role removed', description: role, variant: 'success' })
+                      }}
+                    />
+                  ) : (
+                    <Badge
+                      key={role}
+                      label={`${role} ↑ ${source}`}
+                      color="warning"
+                      variant="dashed"
+                      className={styles.inherited}
+                    />
+                  )
+                )}
                 {effectiveRoles.length === 0 && (
                   <span className={styles.inheritedNote}>(no roles)</span>
                 )}
+                <MultiSelect
+                  options={availableRoles}
+                  value={[]}
+                  onChange={(roles) => {
+                    updateUser(selected.id, { directRoles: [...selected.directRoles, ...roles] })
+                    toast({ title: `${roles.length} role(s) added`, variant: 'success' })
+                  }}
+                  placeholder="+ Add"
+                />
               </div>
               {effectiveRoles.some((r) => r.source !== 'direct') && (
                 <span className={styles.inheritedNote}>
                   Roles with ↑ are inherited through group membership
                 </span>
               )}
-              <div className={styles.selectWrap}>
-                <MultiSelect
-                  options={availableRoles}
-                  value={[]}
-                  onChange={(roles) => updateUser(selected.id, {
-                    directRoles: [...selected.directRoles, ...roles],
-                  })}
-                  placeholder="Add roles..."
-                />
-              </div>
             </>
           ) : (
             <div className={styles.emptyDetail}>Select a user to view details</div>
@@ -255,6 +359,21 @@ export function UsersTab() {
         message={`Delete user "${deleteTarget?.username}"? This cannot be undone.`}
         confirmText={deleteTarget?.username ?? ''}
       />
+      <AlertDialog
+        open={removeGroupTarget !== null}
+        onClose={() => setRemoveGroupTarget(null)}
+        onConfirm={() => {
+          if (removeGroupTarget && selected) {
+            updateUser(selected.id, { directGroups: selected.directGroups.filter((id) => id !== removeGroupTarget) })
+            toast({ title: 'Group removed', variant: 'success' })
+          }
+          setRemoveGroupTarget(null)
+        }}
+        title="Remove group membership"
+        description={`Removing this group will also revoke inherited roles: ${MOCK_GROUPS.find((g) => g.id === removeGroupTarget)?.directRoles.join(', ') ?? ''}. Continue?`}
+        confirmLabel="Remove"
+        variant="warning"
+      />
     </>
   )
 }