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>

docs/superpowers/plans/2026-03-18-admin-redesign.md

@@ -0,0 +1,950 @@
+# Admin Redesign Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Overhaul admin section UX/UI to match the design language of the rest of the application, fix critical bugs, and improve usability.
+
+**Architecture:** Mostly file edits — replacing custom implementations with design system composites (DataTable, Tabs), fixing tokens, reworking the user creation flow with provider awareness, and adding toast feedback + accessibility.
+
+**Tech Stack:** React 18, TypeScript, CSS Modules, Vitest + RTL
+
+**Spec:** `docs/superpowers/specs/2026-03-18-admin-redesign.md`
+
+---
+
+## File Map
+
+### Modified files
+```
+src/pages/Admin/Admin.tsx                    — Replace custom nav with Tabs, import Tabs
+src/pages/Admin/Admin.module.css             — Remove nav styles, fix padding
+src/pages/Admin/AuditLog/AuditLog.tsx        — Rewrite to use DataTable
+src/pages/Admin/AuditLog/AuditLog.module.css — Replace with card + filter styles only
+src/pages/Admin/AuditLog/auditMocks.ts       — Change id to string
+src/pages/Admin/OidcConfig/OidcConfig.tsx    — Remove h2 title, add toolbar
+src/pages/Admin/OidcConfig/OidcConfig.module.css — Remove header styles, center form
+src/pages/Admin/UserManagement/UserManagement.tsx — Replace inline style
+src/pages/Admin/UserManagement/UserManagement.module.css — Fix tokens, radii, shadow, add tabContent + empty/security styles
+src/pages/Admin/UserManagement/UsersTab.tsx  — Rework create form, add security section, toasts, accessibility, confirmations
+src/pages/Admin/UserManagement/GroupsTab.tsx — Add toasts, accessibility, confirmations, empty state
+src/pages/Admin/UserManagement/RolesTab.tsx  — Replace emoji, add toasts, accessibility, empty state
+src/pages/Admin/UserManagement/rbacMocks.ts  — No changes needed (provider field already exists)
+```
+
+---
+
+### Task 1: Fix critical token bug + visual polish
+
+**Files:**
+- Modify: `src/pages/Admin/Admin.module.css`
+- Modify: `src/pages/Admin/UserManagement/UserManagement.module.css`
+
+- [ ] **Step 1: Fix `--bg-base` token in Admin.module.css**
+
+In `Admin.module.css`, replace `var(--bg-base)` with `var(--bg-surface)` on line 6.
+
+Also fix the content padding on line 35: change `padding: 20px` to `padding: 20px 24px 40px`.
+
+- [ ] **Step 2: Fix `--bg-base` token and visual polish in UserManagement.module.css**
+
+Replace both `var(--bg-base)` occurrences (lines 12, 19) with `var(--bg-surface)`.
+
+Change `border-radius: var(--radius-md)` to `var(--radius-lg)` on `.splitPane` (line 7), `.listPane` (line 15), and `.detailPane` (line 22).
+
+Add `box-shadow: var(--shadow-card)` to `.splitPane`.
+
+Add these new classes at the end of the file:
+
+```css
+.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;
+}
+```
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add src/pages/Admin/Admin.module.css src/pages/Admin/UserManagement/UserManagement.module.css
+git commit -m "fix: replace nonexistent --bg-base token with --bg-surface, fix radii and padding"
+```
+
+---
+
+### Task 2: Replace admin nav with Tabs composite
+
+**Files:**
+- Modify: `src/pages/Admin/Admin.tsx`
+- Modify: `src/pages/Admin/Admin.module.css`
+
+- [ ] **Step 1: Rewrite Admin.tsx**
+
+Replace the entire file with:
+
+```tsx
+import { useNavigate, useLocation } from 'react-router-dom'
+import { AppShell } from '../../design-system/layout/AppShell/AppShell'
+import { Sidebar } from '../../design-system/layout/Sidebar/Sidebar'
+import { TopBar } from '../../design-system/layout/TopBar/TopBar'
+import { Tabs } from '../../design-system/composites/Tabs/Tabs'
+import { SIDEBAR_APPS } from '../../mocks/sidebar'
+import styles from './Admin.module.css'
+import type { ReactNode } from 'react'
+
+const ADMIN_TABS = [
+  { label: 'User Management', value: '/admin/rbac' },
+  { label: 'Audit Log', value: '/admin/audit' },
+  { label: 'OIDC', value: '/admin/oidc' },
+]
+
+interface AdminLayoutProps {
+  title: string
+  children: ReactNode
+}
+
+export function AdminLayout({ title, children }: AdminLayoutProps) {
+  const navigate = useNavigate()
+  const location = useLocation()
+
+  return (
+    <AppShell sidebar={<Sidebar apps={SIDEBAR_APPS} />}>
+      <TopBar
+        breadcrumb={[
+          { label: 'Admin', href: '/admin' },
+          { label: title },
+        ]}
+        environment="PRODUCTION"
+        user={{ name: 'hendrik' }}
+      />
+      <Tabs
+        tabs={ADMIN_TABS}
+        active={location.pathname}
+        onChange={(path) => navigate(path)}
+      />
+      <div className={styles.adminContent}>
+        {children}
+      </div>
+    </AppShell>
+  )
+}
+```
+
+- [ ] **Step 2: Clean up Admin.module.css**
+
+Remove `.adminNav`, `.adminTab`, `.adminTab:hover`, `.adminTabActive` styles entirely. Keep only `.adminContent`.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add src/pages/Admin/Admin.tsx src/pages/Admin/Admin.module.css
+git commit -m "refactor: replace custom admin nav with Tabs composite"
+```
+
+---
+
+### Task 3: Fix AuditLog mock data + migrate to DataTable
+
+**Files:**
+- Modify: `src/pages/Admin/AuditLog/auditMocks.ts`
+- Modify: `src/pages/Admin/AuditLog/AuditLog.tsx`
+- Modify: `src/pages/Admin/AuditLog/AuditLog.module.css`
+
+- [ ] **Step 1: Change AuditEvent id to string in auditMocks.ts**
+
+Change `id: number` to `id: string` in the `AuditEvent` interface.
+
+Change all mock IDs from numbers to strings: `id: 1` → `id: 'audit-1'`, `id: 2` → `id: 'audit-2'`, etc. through all 25 events.
+
+- [ ] **Step 2: Rewrite AuditLog.tsx to use DataTable**
+
+Replace the entire file with:
+
+```tsx
+import { useState, useMemo } from 'react'
+import { AdminLayout } from '../Admin'
+import { Badge } from '../../../design-system/primitives/Badge/Badge'
+import { DateRangePicker } from '../../../design-system/primitives/DateRangePicker/DateRangePicker'
+import { Input } from '../../../design-system/primitives/Input/Input'
+import { Select } from '../../../design-system/primitives/Select/Select'
+import { MonoText } from '../../../design-system/primitives/MonoText/MonoText'
+import { CodeBlock } from '../../../design-system/primitives/CodeBlock/CodeBlock'
+import { DataTable } from '../../../design-system/composites/DataTable/DataTable'
+import type { Column } from '../../../design-system/composites/DataTable/types'
+import type { DateRange } from '../../../design-system/utils/timePresets'
+import { AUDIT_EVENTS, type AuditEvent } from './auditMocks'
+import styles from './AuditLog.module.css'
+
+const CATEGORIES = [
+  { value: '', label: 'All categories' },
+  { value: 'INFRA', label: 'INFRA' },
+  { value: 'AUTH', label: 'AUTH' },
+  { value: 'USER_MGMT', label: 'USER_MGMT' },
+  { value: 'CONFIG', label: 'CONFIG' },
+]
+
+function formatTimestamp(iso: string): string {
+  return new Date(iso).toLocaleString('en-GB', {
+    year: 'numeric', month: '2-digit', day: '2-digit',
+    hour: '2-digit', minute: '2-digit', second: '2-digit',
+    hour12: false,
+  })
+}
+
+const COLUMNS: Column<AuditEvent>[] = [
+  {
+    key: 'timestamp', header: 'Timestamp', width: '170px', sortable: true,
+    render: (_, row) => <MonoText size="xs">{formatTimestamp(row.timestamp)}</MonoText>,
+  },
+  {
+    key: 'username', header: 'User', sortable: true,
+    render: (_, row) => <span style={{ fontWeight: 500 }}>{row.username}</span>,
+  },
+  {
+    key: 'category', header: 'Category', width: '110px', sortable: true,
+    render: (_, row) => <Badge label={row.category} color="auto" />,
+  },
+  { key: 'action', header: 'Action' },
+  {
+    key: 'target', header: 'Target',
+    render: (_, row) => <span className={styles.target}>{row.target}</span>,
+  },
+  {
+    key: 'result', header: 'Result', width: '90px', sortable: true,
+    render: (_, row) => (
+      <Badge label={row.result} color={row.result === 'SUCCESS' ? 'success' : 'error'} />
+    ),
+  },
+]
+
+const now = Date.now()
+const INITIAL_RANGE: DateRange = {
+  from: new Date(now - 7 * 24 * 3600_000).toISOString().slice(0, 16),
+  to: new Date(now).toISOString().slice(0, 16),
+}
+
+export function AuditLog() {
+  const [dateRange, setDateRange] = useState<DateRange>(INITIAL_RANGE)
+  const [userFilter, setUserFilter] = useState('')
+  const [categoryFilter, setCategoryFilter] = useState('')
+  const [searchFilter, setSearchFilter] = useState('')
+
+  const filtered = useMemo(() => {
+    const from = new Date(dateRange.from).getTime()
+    const to = new Date(dateRange.to).getTime()
+    return AUDIT_EVENTS.filter((e) => {
+      const ts = new Date(e.timestamp).getTime()
+      if (ts < from || ts > to) return false
+      if (userFilter && !e.username.toLowerCase().includes(userFilter.toLowerCase())) return false
+      if (categoryFilter && e.category !== categoryFilter) return false
+      if (searchFilter) {
+        const q = searchFilter.toLowerCase()
+        if (!e.action.toLowerCase().includes(q) && !e.target.toLowerCase().includes(q)) return false
+      }
+      return true
+    })
+  }, [dateRange, userFilter, categoryFilter, searchFilter])
+
+  return (
+    <AdminLayout title="Audit Log">
+      <div className={styles.filters}>
+        <DateRangePicker
+          value={dateRange}
+          onChange={setDateRange}
+        />
+        <Input
+          placeholder="Filter by user..."
+          value={userFilter}
+          onChange={(e) => setUserFilter(e.target.value)}
+          onClear={() => setUserFilter('')}
+          className={styles.filterInput}
+        />
+        <Select
+          options={CATEGORIES}
+          value={categoryFilter}
+          onChange={(e) => setCategoryFilter(e.target.value)}
+          className={styles.filterSelect}
+        />
+        <Input
+          placeholder="Search action or target..."
+          value={searchFilter}
+          onChange={(e) => setSearchFilter(e.target.value)}
+          onClear={() => setSearchFilter('')}
+          className={styles.filterInput}
+        />
+      </div>
+
+      <div className={styles.tableSection}>
+        <div className={styles.tableHeader}>
+          <span className={styles.tableTitle}>Audit Log</span>
+          <div className={styles.tableRight}>
+            <span className={styles.tableMeta}>
+              {filtered.length} events
+            </span>
+            <Badge label="LIVE" color="success" />
+          </div>
+        </div>
+        <DataTable
+          columns={COLUMNS}
+          data={filtered}
+          sortable
+          flush
+          pageSize={10}
+          rowAccent={(row) => row.result === 'FAILURE' ? 'error' : undefined}
+          expandedContent={(row) => (
+            <div className={styles.expandedDetail}>
+              <div className={styles.detailGrid}>
+                <div className={styles.detailField}>
+                  <span className={styles.detailLabel}>IP Address</span>
+                  <MonoText size="xs">{row.ipAddress}</MonoText>
+                </div>
+                <div className={styles.detailField}>
+                  <span className={styles.detailLabel}>User Agent</span>
+                  <span className={styles.detailValue}>{row.userAgent}</span>
+                </div>
+              </div>
+              <div className={styles.detailField}>
+                <span className={styles.detailLabel}>Detail</span>
+                <CodeBlock content={JSON.stringify(row.detail, null, 2)} language="json" />
+              </div>
+            </div>
+          )}
+        />
+      </div>
+    </AdminLayout>
+  )
+}
+```
+
+- [ ] **Step 3: Rewrite AuditLog.module.css**
+
+Replace the entire file with:
+
+```css
+.filters {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+  margin-bottom: 16px;
+}
+
+.filterInput {
+  width: 200px;
+}
+
+.filterSelect {
+  width: 160px;
+}
+
+.tableSection {
+  background: var(--bg-surface);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-card);
+  overflow: hidden;
+}
+
+.tableHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.tableTitle {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.tableRight {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.tableMeta {
+  font-size: 11px;
+  color: var(--text-muted);
+}
+
+.target {
+  display: inline-block;
+  max-width: 220px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.expandedDetail {
+  padding: 4px 0;
+}
+
+.detailGrid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.detailField {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.detailLabel {
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.8px;
+  color: var(--text-muted);
+  font-family: var(--font-body);
+}
+
+.detailValue {
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+```
+
+- [ ] **Step 4: Verify build**
+
+Run: `npx vite build 2>&1 | tail -5`
+Expected: Build succeeds
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add src/pages/Admin/AuditLog/
+git commit -m "refactor: migrate AuditLog to DataTable with card wrapper"
+```
+
+---
+
+### Task 4: Remove duplicate titles from OidcConfig
+
+**Files:**
+- Modify: `src/pages/Admin/OidcConfig/OidcConfig.tsx`
+- Modify: `src/pages/Admin/OidcConfig/OidcConfig.module.css`
+
+- [ ] **Step 1: Replace h2 header with toolbar in OidcConfig.tsx**
+
+Replace the `.header` div (lines 74-84) with a compact toolbar:
+
+```tsx
+<div className={styles.toolbar}>
+  <Button size="sm" variant="secondary" onClick={handleTest} disabled={!form.issuerUri}>
+    Test Connection
+  </Button>
+  <Button size="sm" variant="primary" onClick={handleSave}>
+    Save
+  </Button>
+</div>
+```
+
+- [ ] **Step 2: Update OidcConfig.module.css**
+
+Remove `.header`, `.title`, `.headerActions`. Add:
+
+```css
+.toolbar {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+  margin-bottom: 20px;
+}
+```
+
+Also add `margin: 0 auto` to the `.page` class to center the form.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add src/pages/Admin/OidcConfig/
+git commit -m "refactor: remove duplicate title from OIDC page, center form"
+```
+
+---
+
+### Task 5: Replace inline style + fix UserManagement
+
+**Files:**
+- Modify: `src/pages/Admin/UserManagement/UserManagement.tsx`
+
+- [ ] **Step 1: Replace inline style with CSS class**
+
+Change line 20 from `<div style={{ marginTop: 16 }}>` to `<div className={styles.tabContent}>`.
+
+Add the `styles` import if not already present (it already imports from `./UserManagement.module.css` — wait, it doesn't currently. Add:
+```tsx
+import styles from './UserManagement.module.css'
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add src/pages/Admin/UserManagement/UserManagement.tsx
+git commit -m "refactor: replace inline style with CSS module class"
+```
+
+---
+
+### Task 6: Add toasts to all RBAC tabs
+
+**Files:**
+- Modify: `src/pages/Admin/UserManagement/UsersTab.tsx`
+- Modify: `src/pages/Admin/UserManagement/GroupsTab.tsx`
+- Modify: `src/pages/Admin/UserManagement/RolesTab.tsx`
+
+- [ ] **Step 1: Add useToast to UsersTab**
+
+Add import: `import { useToast } from '../../../design-system/composites/Toast/Toast'`
+
+Add `const { toast } = useToast()` at the top of the `UsersTab` function body.
+
+Add toast calls:
+- After `setSelectedId(newUser.id)` in `handleCreate`: `toast({ title: 'User created', description: newUser.displayName, variant: 'success' })`
+- After `setDeleteTarget(null)` in `handleDelete`: `toast({ title: 'User deleted', description: deleteTarget.username, variant: 'warning' })`
+
+- [ ] **Step 2: Add useToast to GroupsTab**
+
+Same pattern. Add toast calls:
+- After create: `toast({ title: 'Group created', description: newGroup.name, variant: 'success' })`
+- After delete: `toast({ title: 'Group deleted', description: deleteTarget.name, variant: 'warning' })`
+
+- [ ] **Step 3: Add useToast to RolesTab**
+
+Same pattern. Add toast calls:
+- After create: `toast({ title: 'Role created', description: newRole.name, variant: 'success' })`
+- After delete: `toast({ title: 'Role deleted', description: deleteTarget.name, variant: 'warning' })`
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add src/pages/Admin/UserManagement/UsersTab.tsx src/pages/Admin/UserManagement/GroupsTab.tsx src/pages/Admin/UserManagement/RolesTab.tsx
+git commit -m "feat: add toast notifications to all RBAC mutations"
+```
+
+---
+
+### Task 7: Rework user creation form + password management
+
+**Files:**
+- Modify: `src/pages/Admin/UserManagement/UsersTab.tsx`
+
+This is the largest single task. It covers spec items 3.2 (provider-aware create form), 3.3 (password management in detail pane), and 3.6 (remove unused password field).
+
+- [ ] **Step 1: Rework the create form section**
+
+Replace the create form state variables (lines 23-26):
+```tsx
+const [newUsername, setNewUsername] = useState('')
+const [newDisplay, setNewDisplay] = useState('')
+const [newEmail, setNewEmail] = useState('')
+const [newPassword, setNewPassword] = useState('')
+```
+with:
+```tsx
+const [newUsername, setNewUsername] = useState('')
+const [newDisplay, setNewDisplay] = useState('')
+const [newEmail, setNewEmail] = useState('')
+const [newPassword, setNewPassword] = useState('')
+const [newProvider, setNewProvider] = useState<'local' | 'oidc'>('local')
+```
+
+Add imports for RadioGroup, RadioItem, and InfoCallout:
+```tsx
+import { RadioGroup, RadioItem } from '../../../design-system/primitives/Radio/Radio'
+import { InfoCallout } from '../../../design-system/primitives/InfoCallout/InfoCallout'
+```
+
+Update `handleCreate` to use the provider selection and validate password for local:
+```tsx
+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: newProvider,
+    createdAt: new Date().toISOString(),
+    directRoles: [],
+    directGroups: [],
+  }
+  setUsers((prev) => [...prev, newUser])
+  setCreating(false)
+  setNewUsername(''); setNewDisplay(''); setNewEmail(''); setNewPassword(''); setNewProvider('local')
+  setSelectedId(newUser.id)
+  toast({ title: 'User created', description: newUser.displayName, variant: 'success' })
+}
+```
+
+Replace the create form JSX (lines 100-114) with:
+```tsx
+{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>
+    <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() || (newProvider === 'local' && !newPassword.trim())}
+      >
+        Create
+      </Button>
+    </div>
+  </div>
+)}
+```
+
+- [ ] **Step 2: Add Security section to detail pane**
+
+Add password reset state at the top of the component:
+```tsx
+const [resettingPassword, setResettingPassword] = useState(false)
+const [newPw, setNewPw] = useState('')
+```
+
+Add the Security section after the metadata grid (after the `</div>` closing the `.metaGrid`), before the "Group membership" SectionHeader:
+
+```tsx
+<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>
+```
+
+- [ ] **Step 3: Verify build**
+
+Run: `npx vite build 2>&1 | tail -5`
+Expected: Build succeeds
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add src/pages/Admin/UserManagement/UsersTab.tsx
+git commit -m "feat: rework user creation with provider selection, add password management"
+```
+
+---
+
+### Task 8: Keyboard accessibility for entity lists
+
+**Files:**
+- Modify: `src/pages/Admin/UserManagement/UsersTab.tsx`
+- Modify: `src/pages/Admin/UserManagement/GroupsTab.tsx`
+- Modify: `src/pages/Admin/UserManagement/RolesTab.tsx`
+
+- [ ] **Step 1: Add keyboard support to UsersTab entity list**
+
+On the `.entityList` wrapper div, add:
+```tsx
+<div className={styles.entityList} role="listbox" aria-label="Users">
+```
+
+On each `.entityItem` div, add `role`, `tabIndex`, `aria-selected`, and `onKeyDown`:
+```tsx
+<div
+  key={user.id}
+  className={`${styles.entityItem} ${selectedId === user.id ? styles.entityItemSelected : ''}`}
+  onClick={() => setSelectedId(user.id)}
+  role="option"
+  tabIndex={0}
+  aria-selected={selectedId === user.id}
+  onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); setSelectedId(user.id) } }}
+>
+```
+
+Add empty-search state after the list map:
+```tsx
+{filtered.length === 0 && (
+  <div className={styles.emptySearch}>No users match your search</div>
+)}
+```
+
+- [ ] **Step 2: Add keyboard support to GroupsTab entity list**
+
+Same pattern — add `role="listbox"` to container, `role="option"` + `tabIndex={0}` + `aria-selected` + `onKeyDown` to items, and empty-search state.
+
+- [ ] **Step 3: Add keyboard support to RolesTab entity list**
+
+Same pattern. Also replace the lock emoji on line 113:
+```tsx
+{role.system && <span title="System role"> 🔒</span>}
+```
+with:
+```tsx
+{role.system && <Badge label="system" color="auto" variant="outlined" className={styles.providerBadge} />}
+```
+
+Add empty-search state.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add src/pages/Admin/UserManagement/UsersTab.tsx src/pages/Admin/UserManagement/GroupsTab.tsx src/pages/Admin/UserManagement/RolesTab.tsx
+git commit -m "feat: add keyboard accessibility and empty states to entity lists"
+```
+
+---
+
+### Task 9: Add confirmation for cascading removals
+
+**Files:**
+- Modify: `src/pages/Admin/UserManagement/UsersTab.tsx`
+- Modify: `src/pages/Admin/UserManagement/GroupsTab.tsx`
+
+- [ ] **Step 1: Add group removal confirmation in UsersTab**
+
+Add state for tracking the removal target:
+```tsx
+const [removeGroupTarget, setRemoveGroupTarget] = useState<string | null>(null)
+```
+
+Replace the direct `onRemove` on group Tags (in the "Group membership" section) with:
+```tsx
+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' })
+  }
+}}
+```
+
+Add an AlertDialog (import from composites) for the confirmation:
+```tsx
+<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"
+/>
+```
+
+Add import: `import { AlertDialog } from '../../../design-system/composites/AlertDialog/AlertDialog'`
+
+- [ ] **Step 2: Add role removal confirmation in GroupsTab**
+
+Add state:
+```tsx
+const [removeRoleTarget, setRemoveRoleTarget] = useState<string | null>(null)
+```
+
+Replace direct `onRemove` on role Tags with:
+```tsx
+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' })
+  }
+}}
+```
+
+Add AlertDialog:
+```tsx
+<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"
+/>
+```
+
+Add import: `import { AlertDialog } from '../../../design-system/composites/AlertDialog/AlertDialog'`
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add src/pages/Admin/UserManagement/UsersTab.tsx src/pages/Admin/UserManagement/GroupsTab.tsx
+git commit -m "feat: add confirmation dialogs for cascading removals"
+```
+
+---
+
+### Task 10: Add duplicate name validation to create forms
+
+**Files:**
+- Modify: `src/pages/Admin/UserManagement/UsersTab.tsx`
+- Modify: `src/pages/Admin/UserManagement/GroupsTab.tsx`
+- Modify: `src/pages/Admin/UserManagement/RolesTab.tsx`
+
+- [ ] **Step 1: Add duplicate check in UsersTab**
+
+Add a computed `duplicateUsername`:
+```tsx
+const duplicateUsername = newUsername.trim() && users.some((u) => u.username.toLowerCase() === newUsername.trim().toLowerCase())
+```
+
+Update the Create button `disabled` to include `|| duplicateUsername`.
+
+Show error text below the username Input when duplicate:
+```tsx
+{duplicateUsername && <span style={{ color: 'var(--error)', fontSize: 11 }}>Username already exists</span>}
+```
+
+- [ ] **Step 2: Add duplicate check in GroupsTab**
+
+Similar pattern with `duplicateGroupName` check. Disable Create button when duplicate.
+
+- [ ] **Step 3: Add duplicate check in RolesTab**
+
+Similar pattern with `duplicateRoleName` check (compare uppercase). Disable Create button when duplicate.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add src/pages/Admin/UserManagement/UsersTab.tsx src/pages/Admin/UserManagement/GroupsTab.tsx src/pages/Admin/UserManagement/RolesTab.tsx
+git commit -m "feat: add duplicate name validation to create forms"
+```
+
+---
+
+### Task 11: Final verification
+
+- [ ] **Step 1: Run full test suite**
+
+Run: `npx vitest run`
+Expected: All tests pass
+
+- [ ] **Step 2: Build the project**
+
+Run: `npx vite build`
+Expected: Build succeeds
+
+- [ ] **Step 3: Fix any issues**
+
+If build fails, fix TypeScript errors. Common issues:
+- Import path typos
+- Missing props on components
+- InfoCallout `variant` prop — check the actual prop name (may be `color` instead)
+
+- [ ] **Step 4: Commit fixes if needed**
+
+```bash
+git add -A
+git commit -m "fix: resolve build issues from admin redesign"
+```

docs/superpowers/specs/2026-03-18-admin-redesign.md

@@ -0,0 +1,207 @@
+# Admin Section Redesign Spec
+
+**Date:** 2026-03-18
+**Scope:** UX/UI consistency overhaul of AuditLog, OidcConfig, UserManagement admin pages
+
+## Overview
+
+Three expert reviews identified critical bugs, consistency gaps, and usability issues in the admin section. This spec covers all changes organized by priority tier.
+
+---
+
+## Tier 1: Critical Bugs
+
+### 1.1 Replace nonexistent `--bg-base` token
+
+`--bg-base` is referenced 3 times but does not exist in `tokens.css`. Dark mode is broken.
+
+**Files:**
+- `Admin.module.css` line 6: `.adminNav`
+- `UserManagement.module.css` lines 13, 19: `.listPane`, `.detailPane`
+
+**Fix:** Replace all `var(--bg-base)` with `var(--bg-surface)`.
+
+### 1.2 Change AuditEvent `id` to string
+
+`DataTable` requires `T extends { id: string }`. Current `AuditEvent.id` is `number`.
+
+**Files:**
+- `auditMocks.ts`: change `id: number` to `id: string`, update all IDs to `'audit-1'`, `'audit-2'`, etc.
+- `AuditLog.tsx`: update `expandedId` state from `number | null` to `string | null`
+
+---
+
+## Tier 2: High-Impact Consistency
+
+### 2.1 Replace admin nav with Tabs composite
+
+The hand-rolled admin nav in `Admin.tsx` lacks ARIA roles and has subtle color differences from the Tabs composite.
+
+**Fix:** Replace the custom `<nav>` block with:
+```tsx
+<Tabs
+  tabs={[
+    { label: 'User Management', value: '/admin/rbac' },
+    { label: 'Audit Log', value: '/admin/audit' },
+    { label: 'OIDC', value: '/admin/oidc' },
+  ]}
+  active={location.pathname}
+  onChange={(path) => navigate(path)}
+/>
+```
+
+Delete `.adminNav`, `.adminTab`, `.adminTabActive` from `Admin.module.css`.
+
+### 2.2 Remove duplicate page titles
+
+Breadcrumb + active tab + h2 heading all show the same label. Remove the h2.
+
+**Files:**
+- `AuditLog.tsx`: remove the `.header` div with `<h2>Audit Log</h2>`. Move the event count badge into a toolbar row.
+- `OidcConfig.tsx`: remove the `.header` div with `<h2>`. Keep Save/Test buttons in a compact toolbar row below the tabs.
+
+Delete `.header`, `.title` CSS from both `AuditLog.module.css` and `OidcConfig.module.css`.
+
+### 2.3 Migrate AuditLog to DataTable
+
+Replace the hand-built `<table>` with the DataTable composite.
+
+**Column definitions:**
+- Timestamp: render with `MonoText`, width `'170px'`
+- User: render with bold text
+- Category: render with `Badge color="auto"`
+- Action: plain text
+- Target: render with ellipsis style
+- Result: render with `Badge color={row.result === 'SUCCESS' ? 'success' : 'error'}`
+
+**Features to enable:**
+- `sortable` on Timestamp, User, Category, Result columns
+- `rowAccent={(row) => row.result === 'FAILURE' ? 'error' : undefined}` — red left-border on failures
+- `expandedContent={(row) => <detail block with IP, user agent, CodeBlock>}`
+- `pageSize={10}`
+- `flush` prop (table sits inside a card wrapper)
+
+**Card wrapper:** Wrap DataTable in a section with `background: var(--bg-surface)`, `border: 1px solid var(--border-subtle)`, `border-radius: var(--radius-lg)`, `box-shadow: var(--shadow-card)`. Add a header row with title + event count badge, matching Dashboard's `.tableSection` pattern.
+
+**Delete from AuditLog.module.css:** `.tableWrap`, `.table`, `.th`, `.row`, `.td`, `.userCell`, `.target`, `.empty`, `.detailRow`, `.detailCell`, `.detailGrid`, `.detailField`, `.detailLabel`, `.detailValue`, `.detailJson`. Also remove the separate `Pagination` import — DataTable handles pagination internally.
+
+### 2.4 Fix content padding
+
+`Admin.module.css` `.adminContent`: change `padding: 20px` to `padding: 20px 24px 40px`.
+
+### 2.5 Center OIDC form
+
+`OidcConfig.module.css` `.page`: add `margin: 0 auto` to center the 640px max-width form.
+
+### 2.6 Replace inline style
+
+`UserManagement.tsx` line 20: replace `style={{ marginTop: 16 }}` with a CSS class `.tabContent { margin-top: 16px; }` in `UserManagement.module.css`.
+
+---
+
+## Tier 3: Usability Improvements
+
+### 3.1 Add toast notifications to RBAC mutations
+
+Import `useToast` into `UsersTab.tsx`, `GroupsTab.tsx`, `RolesTab.tsx`. Fire toasts on:
+- Create user/group/role: `variant: 'success'`
+- Delete user/group/role: `variant: 'warning'`
+- Role assigned/removed: `variant: 'success'`
+- Group added/removed: `variant: 'success'`
+
+### 3.2 Rework user creation form
+
+Replace the flat inline form with a provider-aware two-step form.
+
+**Form structure:**
+1. **Provider selection** — RadioGroup with "Local" and "OIDC" options. Default: "Local".
+2. **Fields (always shown):** Username (required), Display name (optional), Email (optional)
+3. **Fields (Local only):** Password (required)
+4. **OIDC info callout:** When OIDC selected, show an InfoCallout: "OIDC users authenticate via the configured identity provider. Pre-register to assign roles/groups before their first login."
+
+**Components used:** RadioGroup + RadioItem (existing primitive), Input, InfoCallout (existing primitive), Button.
+
+**Create handler:** Set `provider` based on RadioGroup selection. Only validate password when provider is 'local'.
+
+The form should use the existing inline pattern (appears at the top of the list pane), but use a proper card-like treatment (the existing `.createForm` background is fine).
+
+### 3.3 Add password management to user detail pane
+
+Add a "Security" section (using `SectionHeader`) in the user detail pane, below the metadata grid.
+
+**For local users:**
+- Show "Password: ••••••••" with a "Reset password" Button
+- Clicking "Reset password" reveals an inline form: Input (type=password, placeholder "New password") + Cancel/Set buttons
+- Setting fires a success toast: "Password updated"
+
+**For OIDC users:**
+- Show "Authentication: OIDC ({provider})"
+- Show InfoCallout: "Password managed by the identity provider."
+- No password reset option
+
+### 3.4 Add ConfirmDialog to cascading removals
+
+When removing a group from a user (which may strip inherited roles), show a confirmation dialog if the group grants roles.
+
+When removing a role from a group (which affects all members), show a confirmation dialog.
+
+Direct role removal from a user does not need confirmation (low risk).
+
+### 3.5 Make entity list items keyboard accessible
+
+Add to each `.entityItem` div:
+- `role="option"`
+- `tabIndex={0}`
+- `aria-selected={selectedId === item.id}`
+- `onKeyDown`: Enter/Space to select, ArrowUp/ArrowDown to navigate
+
+Add `role="listbox"` and `aria-label` to each `.entityList` container.
+
+### 3.6 Add expand/collapse affordance to AuditLog
+
+After DataTable migration (2.3), add a first column with a chevron indicator (`>` / `v`) that rotates when the row is expanded. Width: `'40px'`. This makes the expandable row pattern discoverable.
+
+### 3.7 Add duplicate name validation
+
+Before creating, check for existing names:
+- Users: `users.some(u => u.username === newUsername.trim())`
+- Groups: `groups.some(g => g.name.toLowerCase() === newName.trim().toLowerCase())`
+- Roles: `roles.some(r => r.name === newName.trim().toUpperCase())`
+
+Show inline error using state + red text below the name field. Disable Create button.
+
+### 3.8 Partial FilterBar migration for AuditLog
+
+After DataTable migration, use FilterBar for search + category filters:
+- Search input maps to FilterBar's built-in search
+- Categories (INFRA, AUTH, USER_MGMT, CONFIG) become FilterPill toggles
+- Keep DateRangePicker and user filter Input alongside FilterBar in a row
+
+### 3.9 Add empty-search states to entity lists
+
+When search returns no results in Users/Groups/Roles lists, show centered muted text: "No users match your search" (etc.) inside the `.entityList` area.
+
+---
+
+## Tier 4: Polish
+
+### 4.1 Replace lock emoji with Badge
+
+`RolesTab.tsx`: replace `🔒` with `<Badge label="system" color="auto" variant="outlined" />`.
+
+### 4.2 Fix split-pane border radius
+
+`UserManagement.module.css`: change `border-radius: var(--radius-md)` to `var(--radius-lg)` on `.splitPane`, `.listPane`, `.detailPane`.
+
+### 4.3 Add shadow to split-pane
+
+`UserManagement.module.css`: add `box-shadow: var(--shadow-card)` to `.splitPane`.
+
+---
+
+## Out of Scope
+
+- Replacing split-pane with DataTable+DetailPanel (not appropriate for dense editing)
+- EventFeed as alternative audit view (future enhancement)
+- Tabs inside user detail pane (not needed until more sections are added)
+- FilterBar extension to support DateRangePicker slots (separate design system ticket)

src/design-system/primitives/Badge/Badge.module.css

@@ -20,7 +20,6 @@
 }
 
 .dashed {
-  background: transparent !important;
   border-style: dashed;
 }
 

src/pages/Admin/Admin.module.css

@@ -1,36 +1,5 @@
-.adminNav {
-  display: flex;
-  gap: 0;
-  border-bottom: 1px solid var(--border-subtle);
-  padding: 0 20px;
-  background: var(--bg-base);
-}
-
-.adminTab {
-  padding: 10px 16px;
-  border: none;
-  background: none;
-  color: var(--text-secondary);
-  font-family: var(--font-body);
-  font-size: 13px;
-  font-weight: 500;
-  cursor: pointer;
-  border-bottom: 2px solid transparent;
-  margin-bottom: -1px;
-  transition: color 0.15s, border-color 0.15s;
-}
-
-.adminTab:hover {
-  color: var(--text-primary);
-}
-
-.adminTabActive {
-  color: var(--amber);
-  border-bottom-color: var(--amber);
-}
-
 .adminContent {
   flex: 1;
   overflow-y: auto;
-  padding: 20px;
+  padding: 20px 24px 40px;
 }

src/pages/Admin/Admin.tsx

@@ -2,14 +2,15 @@ import { useNavigate, useLocation } from 'react-router-dom'
 import { AppShell } from '../../design-system/layout/AppShell/AppShell'
 import { Sidebar } from '../../design-system/layout/Sidebar/Sidebar'
 import { TopBar } from '../../design-system/layout/TopBar/TopBar'
+import { Tabs } from '../../design-system/composites/Tabs/Tabs'
 import { SIDEBAR_APPS } from '../../mocks/sidebar'
 import styles from './Admin.module.css'
 import type { ReactNode } from 'react'
 
 const ADMIN_TABS = [
-  { label: 'User Management', path: '/admin/rbac' },
-  { label: 'Audit Log', path: '/admin/audit' },
-  { label: 'OIDC', path: '/admin/oidc' },
+  { label: 'User Management', value: '/admin/rbac' },
+  { label: 'Audit Log', value: '/admin/audit' },
+  { label: 'OIDC', value: '/admin/oidc' },
 ]
 
 interface AdminLayoutProps {
@@ -31,18 +32,11 @@ export function AdminLayout({ title, children }: AdminLayoutProps) {
         environment="PRODUCTION"
         user={{ name: 'hendrik' }}
       />
-      <nav className={styles.adminNav} aria-label="Admin sections">
-        {ADMIN_TABS.map((tab) => (
-          <button
-            key={tab.path}
-            className={`${styles.adminTab} ${location.pathname === tab.path ? styles.adminTabActive : ''}`}
-            onClick={() => navigate(tab.path)}
-            type="button"
-          >
-            {tab.label}
-          </button>
-        ))}
-      </nav>
+      <Tabs
+        tabs={ADMIN_TABS}
+        active={location.pathname}
+        onChange={(path) => navigate(path)}
+      />
       <div className={styles.adminContent}>
         {children}
       </div>

src/pages/Admin/AuditLog/AuditLog.module.css

@@ -1,18 +1,3 @@
-.header {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  margin-bottom: 16px;
-}
-
-.title {
-  font-size: 18px;
-  font-weight: 600;
-  color: var(--text-primary);
-  margin: 0;
-  font-family: var(--font-body);
-}
-
 .filters {
   display: flex;
   gap: 10px;
@@ -28,52 +13,37 @@
   width: 160px;
 }
 
-.tableWrap {
-  overflow-x: auto;
+.tableSection {
+  background: var(--bg-surface);
   border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-card);
+  overflow: hidden;
 }
 
-.table {
-  width: 100%;
-  border-collapse: collapse;
-  font-family: var(--font-body);
-  font-size: 12px;
+.tableHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border-subtle);
 }
 
-.th {
-  text-align: left;
-  padding: 10px 12px;
+.tableTitle {
+  font-size: 13px;
   font-weight: 600;
-  font-size: 11px;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  color: var(--text-muted);
-  background: var(--bg-raised);
-  border-bottom: 1px solid var(--border-subtle);
-  position: sticky;
-  top: 0;
-  z-index: 1;
-}
-
-.row {
-  cursor: pointer;
-  transition: background 0.1s;
-}
-
-.row:hover {
-  background: var(--bg-hover);
-}
-
-.td {
-  padding: 8px 12px;
-  border-bottom: 1px solid var(--border-subtle);
   color: var(--text-primary);
-  vertical-align: middle;
 }
 
-.userCell {
-  font-weight: 500;
+.tableRight {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.tableMeta {
+  font-size: 11px;
+  color: var(--text-muted);
 }
 
 .target {
@@ -84,19 +54,8 @@
   white-space: nowrap;
 }
 
-.empty {
-  padding: 32px;
-  text-align: center;
-  color: var(--text-faint);
-}
-
-.detailRow {
-  background: var(--bg-raised);
-}
-
-.detailCell {
-  padding: 16px 20px;
-  border-bottom: 1px solid var(--border-subtle);
+.expandedDetail {
+  padding: 4px 0;
 }
 
 .detailGrid {
@@ -113,10 +72,10 @@
 }
 
 .detailLabel {
-  font-size: 11px;
+  font-size: 10px;
   font-weight: 600;
   text-transform: uppercase;
-  letter-spacing: 0.04em;
+  letter-spacing: 0.8px;
   color: var(--text-muted);
   font-family: var(--font-body);
 }
@@ -125,15 +84,3 @@
   font-size: 12px;
   color: var(--text-secondary);
 }
-
-.detailJson {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.pagination {
-  display: flex;
-  justify-content: center;
-  margin-top: 16px;
-}

src/pages/Admin/AuditLog/AuditLog.tsx

@@ -6,7 +6,8 @@ import { Input } from '../../../design-system/primitives/Input/Input'
 import { Select } from '../../../design-system/primitives/Select/Select'
 import { MonoText } from '../../../design-system/primitives/MonoText/MonoText'
 import { CodeBlock } from '../../../design-system/primitives/CodeBlock/CodeBlock'
-import { Pagination } from '../../../design-system/primitives/Pagination/Pagination'
+import { DataTable } from '../../../design-system/composites/DataTable/DataTable'
+import type { Column } from '../../../design-system/composites/DataTable/types'
 import type { DateRange } from '../../../design-system/utils/timePresets'
 import { AUDIT_EVENTS, type AuditEvent } from './auditMocks'
 import styles from './AuditLog.module.css'
@@ -19,8 +20,6 @@ const CATEGORIES = [
   { value: 'CONFIG', label: 'CONFIG' },
 ]
 
-const PAGE_SIZE = 10
-
 function formatTimestamp(iso: string): string {
   return new Date(iso).toLocaleString('en-GB', {
     year: 'numeric', month: '2-digit', day: '2-digit',
@@ -29,6 +28,32 @@ function formatTimestamp(iso: string): string {
   })
 }
 
+const COLUMNS: Column<AuditEvent>[] = [
+  {
+    key: 'timestamp', header: 'Timestamp', width: '170px', sortable: true,
+    render: (_, row) => <MonoText size="xs">{formatTimestamp(row.timestamp)}</MonoText>,
+  },
+  {
+    key: 'username', header: 'User', sortable: true,
+    render: (_, row) => <span style={{ fontWeight: 500 }}>{row.username}</span>,
+  },
+  {
+    key: 'category', header: 'Category', width: '110px', sortable: true,
+    render: (_, row) => <Badge label={row.category} color="auto" />,
+  },
+  { key: 'action', header: 'Action' },
+  {
+    key: 'target', header: 'Target',
+    render: (_, row) => <span className={styles.target}>{row.target}</span>,
+  },
+  {
+    key: 'result', header: 'Result', width: '90px', sortable: true,
+    render: (_, row) => (
+      <Badge label={row.result} color={row.result === 'SUCCESS' ? 'success' : 'error'} />
+    ),
+  },
+]
+
 const now = Date.now()
 const INITIAL_RANGE: DateRange = {
   from: new Date(now - 7 * 24 * 3600_000).toISOString().slice(0, 16),
@@ -40,8 +65,6 @@ export function AuditLog() {
   const [userFilter, setUserFilter] = useState('')
   const [categoryFilter, setCategoryFilter] = useState('')
   const [searchFilter, setSearchFilter] = useState('')
-  const [page, setPage] = useState(1)
-  const [expandedId, setExpandedId] = useState<number | null>(null)
 
   const filtered = useMemo(() => {
     const from = new Date(dateRange.from).getTime()
@@ -59,128 +82,72 @@ export function AuditLog() {
     })
   }, [dateRange, userFilter, categoryFilter, searchFilter])
 
-  const totalPages = Math.max(1, Math.ceil(filtered.length / PAGE_SIZE))
-  const pageEvents = filtered.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE)
-
   return (
     <AdminLayout title="Audit Log">
-      <div className={styles.header}>
-        <h2 className={styles.title}>Audit Log</h2>
-        <Badge label={`${filtered.length} events`} color="primary" />
-      </div>
-
       <div className={styles.filters}>
         <DateRangePicker
           value={dateRange}
-          onChange={(r) => { setDateRange(r); setPage(1) }}
+          onChange={setDateRange}
         />
         <Input
           placeholder="Filter by user..."
           value={userFilter}
-          onChange={(e) => { setUserFilter(e.target.value); setPage(1) }}
-          onClear={() => { setUserFilter(''); setPage(1) }}
+          onChange={(e) => setUserFilter(e.target.value)}
+          onClear={() => setUserFilter('')}
           className={styles.filterInput}
         />
         <Select
           options={CATEGORIES}
           value={categoryFilter}
-          onChange={(e) => { setCategoryFilter(e.target.value); setPage(1) }}
+          onChange={(e) => setCategoryFilter(e.target.value)}
           className={styles.filterSelect}
         />
         <Input
           placeholder="Search action or target..."
           value={searchFilter}
-          onChange={(e) => { setSearchFilter(e.target.value); setPage(1) }}
-          onClear={() => { setSearchFilter(''); setPage(1) }}
+          onChange={(e) => setSearchFilter(e.target.value)}
+          onClear={() => setSearchFilter('')}
           className={styles.filterInput}
         />
       </div>
 
-      <div className={styles.tableWrap}>
-        <table className={styles.table}>
-          <thead>
-            <tr>
-              <th className={styles.th} style={{ width: 170 }}>Timestamp</th>
-              <th className={styles.th}>User</th>
-              <th className={styles.th} style={{ width: 100 }}>Category</th>
-              <th className={styles.th}>Action</th>
-              <th className={styles.th}>Target</th>
-              <th className={styles.th} style={{ width: 80 }}>Result</th>
-            </tr>
-          </thead>
-          <tbody>
-            {pageEvents.map((event) => (
-              <EventRow
-                key={event.id}
-                event={event}
-                expanded={expandedId === event.id}
-                onToggle={() => setExpandedId(expandedId === event.id ? null : event.id)}
-              />
-            ))}
-            {pageEvents.length === 0 && (
-              <tr>
-                <td colSpan={6} className={styles.empty}>No events match the current filters.</td>
-              </tr>
-            )}
-          </tbody>
-        </table>
-      </div>
-
-      {totalPages > 1 && (
-        <div className={styles.pagination}>
-          <Pagination
-            page={page}
-            totalPages={totalPages}
-            onPageChange={setPage}
-          />
+      <div className={styles.tableSection}>
+        <div className={styles.tableHeader}>
+          <span className={styles.tableTitle}>Audit Log</span>
+          <div className={styles.tableRight}>
+            <span className={styles.tableMeta}>
+              {filtered.length} events
+            </span>
+            <Badge label="LIVE" color="success" />
+          </div>
         </div>
-      )}
+        <DataTable
+          columns={COLUMNS}
+          data={filtered}
+          sortable
+          flush
+          pageSize={10}
+          rowAccent={(row) => row.result === 'FAILURE' ? 'error' : undefined}
+          expandedContent={(row) => (
+            <div className={styles.expandedDetail}>
+              <div className={styles.detailGrid}>
+                <div className={styles.detailField}>
+                  <span className={styles.detailLabel}>IP Address</span>
+                  <MonoText size="xs">{row.ipAddress}</MonoText>
+                </div>
+                <div className={styles.detailField}>
+                  <span className={styles.detailLabel}>User Agent</span>
+                  <span className={styles.detailValue}>{row.userAgent}</span>
+                </div>
+              </div>
+              <div className={styles.detailField}>
+                <span className={styles.detailLabel}>Detail</span>
+                <CodeBlock content={JSON.stringify(row.detail, null, 2)} language="json" />
+              </div>
+            </div>
+          )}
+        />
+      </div>
     </AdminLayout>
   )
 }
-
-function EventRow({ event, expanded, onToggle }: { event: AuditEvent; expanded: boolean; onToggle: () => void }) {
-  return (
-    <>
-      <tr className={styles.row} onClick={onToggle}>
-        <td className={styles.td}>
-          <MonoText size="xs">{formatTimestamp(event.timestamp)}</MonoText>
-        </td>
-        <td className={`${styles.td} ${styles.userCell}`}>{event.username}</td>
-        <td className={styles.td}>
-          <Badge label={event.category} color="auto" />
-        </td>
-        <td className={styles.td}>{event.action}</td>
-        <td className={styles.td}>
-          <span className={styles.target}>{event.target}</span>
-        </td>
-        <td className={styles.td}>
-          <Badge
-            label={event.result}
-            color={event.result === 'SUCCESS' ? 'success' : 'error'}
-          />
-        </td>
-      </tr>
-      {expanded && (
-        <tr className={styles.detailRow}>
-          <td colSpan={6} className={styles.detailCell}>
-            <div className={styles.detailGrid}>
-              <div className={styles.detailField}>
-                <span className={styles.detailLabel}>IP Address</span>
-                <MonoText size="xs">{event.ipAddress}</MonoText>
-              </div>
-              <div className={styles.detailField}>
-                <span className={styles.detailLabel}>User Agent</span>
-                <span className={styles.detailValue}>{event.userAgent}</span>
-              </div>
-            </div>
-            <div className={styles.detailJson}>
-              <span className={styles.detailLabel}>Detail</span>
-              <CodeBlock content={JSON.stringify(event.detail, null, 2)} language="json" />
-            </div>
-          </td>
-        </tr>
-      )}
-    </>
-  )
-}

src/pages/Admin/AuditLog/auditMocks.ts

@@ -1,5 +1,5 @@
 export interface AuditEvent {
-  id: number
+  id: string
   timestamp: string
   username: string
   category: 'INFRA' | 'AUTH' | 'USER_MGMT' | 'CONFIG'
@@ -17,175 +17,175 @@ const day = 24 * hour
 
 export const AUDIT_EVENTS: AuditEvent[] = [
   {
-    id: 1, timestamp: new Date(now - 0.5 * hour).toISOString(),
+    id: 'audit-1', timestamp: new Date(now - 0.5 * hour).toISOString(),
     username: 'hendrik', category: 'USER_MGMT', action: 'CREATE_USER',
     target: 'users/alice', result: 'SUCCESS',
     detail: { displayName: 'Alice Johnson', roles: ['VIEWER'] },
     ipAddress: '10.0.1.42', userAgent: 'Mozilla/5.0 Chrome/125',
   },
   {
-    id: 2, timestamp: new Date(now - 1.2 * hour).toISOString(),
+    id: 'audit-2', timestamp: new Date(now - 1.2 * hour).toISOString(),
     username: 'system', category: 'INFRA', action: 'POOL_RESIZE',
     target: 'db/primary', result: 'SUCCESS',
     detail: { oldSize: 10, newSize: 20, reason: 'auto-scale' },
     ipAddress: '10.0.0.1', userAgent: 'cameleer-scheduler/1.0',
   },
   {
-    id: 3, timestamp: new Date(now - 2 * hour).toISOString(),
+    id: 'audit-3', timestamp: new Date(now - 2 * hour).toISOString(),
     username: 'alice', category: 'AUTH', action: 'LOGIN',
     target: 'sessions/abc123', result: 'SUCCESS',
     detail: { method: 'OIDC', provider: 'keycloak' },
     ipAddress: '192.168.1.100', userAgent: 'Mozilla/5.0 Firefox/126',
   },
   {
-    id: 4, timestamp: new Date(now - 2.5 * hour).toISOString(),
+    id: 'audit-4', timestamp: new Date(now - 2.5 * hour).toISOString(),
     username: 'unknown', category: 'AUTH', action: 'LOGIN',
     target: 'sessions', result: 'FAILURE',
     detail: { method: 'local', reason: 'invalid_credentials' },
     ipAddress: '203.0.113.50', userAgent: 'curl/8.1',
   },
   {
-    id: 5, timestamp: new Date(now - 3 * hour).toISOString(),
+    id: 'audit-5', timestamp: new Date(now - 3 * hour).toISOString(),
     username: 'hendrik', category: 'CONFIG', action: 'UPDATE_THRESHOLD',
     target: 'thresholds/pool-connections', result: 'SUCCESS',
     detail: { field: 'maxConnections', oldValue: 50, newValue: 100 },
     ipAddress: '10.0.1.42', userAgent: 'Mozilla/5.0 Chrome/125',
   },
   {
-    id: 6, timestamp: new Date(now - 4 * hour).toISOString(),
+    id: 'audit-6', timestamp: new Date(now - 4 * hour).toISOString(),
     username: 'hendrik', category: 'USER_MGMT', action: 'ASSIGN_ROLE',
     target: 'users/bob', result: 'SUCCESS',
     detail: { role: 'EDITOR', method: 'direct' },
     ipAddress: '10.0.1.42', userAgent: 'Mozilla/5.0 Chrome/125',
   },
   {
-    id: 7, timestamp: new Date(now - 5 * hour).toISOString(),
+    id: 'audit-7', timestamp: new Date(now - 5 * hour).toISOString(),
     username: 'system', category: 'INFRA', action: 'INDEX_REBUILD',
     target: 'opensearch/exchanges', result: 'SUCCESS',
     detail: { documents: 15420, duration: '12.3s' },
     ipAddress: '10.0.0.1', userAgent: 'cameleer-scheduler/1.0',
   },
   {
-    id: 8, timestamp: new Date(now - 6 * hour).toISOString(),
+    id: 'audit-8', timestamp: new Date(now - 6 * hour).toISOString(),
     username: 'bob', category: 'AUTH', action: 'LOGIN',
     target: 'sessions/def456', result: 'SUCCESS',
     detail: { method: 'local' },
     ipAddress: '10.0.2.15', userAgent: 'Mozilla/5.0 Safari/17',
   },
   {
-    id: 9, timestamp: new Date(now - 8 * hour).toISOString(),
+    id: 'audit-9', timestamp: new Date(now - 8 * hour).toISOString(),
     username: 'hendrik', category: 'USER_MGMT', action: 'CREATE_GROUP',
     target: 'groups/developers', result: 'SUCCESS',
     detail: { parent: null },
     ipAddress: '10.0.1.42', userAgent: 'Mozilla/5.0 Chrome/125',
   },
   {
-    id: 10, timestamp: new Date(now - 10 * hour).toISOString(),
+    id: 'audit-10', timestamp: new Date(now - 10 * hour).toISOString(),
     username: 'system', category: 'INFRA', action: 'BACKUP',
     target: 'db/primary', result: 'SUCCESS',
     detail: { sizeBytes: 524288000, duration: '45s' },
     ipAddress: '10.0.0.1', userAgent: 'cameleer-scheduler/1.0',
   },
   {
-    id: 11, timestamp: new Date(now - 12 * hour).toISOString(),
+    id: 'audit-11', timestamp: new Date(now - 12 * hour).toISOString(),
     username: 'hendrik', category: 'CONFIG', action: 'UPDATE_OIDC',
     target: 'config/oidc', result: 'SUCCESS',
     detail: { field: 'autoSignup', oldValue: false, newValue: true },
     ipAddress: '10.0.1.42', userAgent: 'Mozilla/5.0 Chrome/125',
   },
   {
-    id: 12, timestamp: new Date(now - 1 * day).toISOString(),
+    id: 'audit-12', timestamp: new Date(now - 1 * day).toISOString(),
     username: 'alice', category: 'AUTH', action: 'LOGOUT',
     target: 'sessions/abc123', result: 'SUCCESS',
     detail: { reason: 'user_initiated' },
     ipAddress: '192.168.1.100', userAgent: 'Mozilla/5.0 Firefox/126',
   },
   {
-    id: 13, timestamp: new Date(now - 1 * day - 2 * hour).toISOString(),
+    id: 'audit-13', timestamp: new Date(now - 1 * day - 2 * hour).toISOString(),
     username: 'hendrik', category: 'USER_MGMT', action: 'DELETE_USER',
     target: 'users/temp-user', result: 'SUCCESS',
     detail: { reason: 'cleanup' },
     ipAddress: '10.0.1.42', userAgent: 'Mozilla/5.0 Chrome/125',
   },
   {
-    id: 14, timestamp: new Date(now - 1 * day - 4 * hour).toISOString(),
+    id: 'audit-14', timestamp: new Date(now - 1 * day - 4 * hour).toISOString(),
     username: 'system', category: 'INFRA', action: 'POOL_RESIZE',
     target: 'db/primary', result: 'FAILURE',
     detail: { oldSize: 20, newSize: 50, error: 'max_connections_exceeded' },
     ipAddress: '10.0.0.1', userAgent: 'cameleer-scheduler/1.0',
   },
   {
-    id: 15, timestamp: new Date(now - 1 * day - 6 * hour).toISOString(),
+    id: 'audit-15', timestamp: new Date(now - 1 * day - 6 * hour).toISOString(),
     username: 'hendrik', category: 'USER_MGMT', action: 'UPDATE_GROUP',
     target: 'groups/admins', result: 'SUCCESS',
     detail: { addedMembers: ['alice'], removedMembers: [] },
     ipAddress: '10.0.1.42', userAgent: 'Mozilla/5.0 Chrome/125',
   },
   {
-    id: 16, timestamp: new Date(now - 2 * day).toISOString(),
+    id: 'audit-16', timestamp: new Date(now - 2 * day).toISOString(),
     username: 'bob', category: 'AUTH', action: 'PASSWORD_CHANGE',
     target: 'users/bob', result: 'SUCCESS',
     detail: { method: 'self_service' },
     ipAddress: '10.0.2.15', userAgent: 'Mozilla/5.0 Safari/17',
   },
   {
-    id: 17, timestamp: new Date(now - 2 * day - 3 * hour).toISOString(),
+    id: 'audit-17', timestamp: new Date(now - 2 * day - 3 * hour).toISOString(),
     username: 'system', category: 'INFRA', action: 'VACUUM',
     target: 'db/primary/exchanges', result: 'SUCCESS',
     detail: { reclaimedBytes: 1048576, duration: '3.2s' },
     ipAddress: '10.0.0.1', userAgent: 'cameleer-scheduler/1.0',
   },
   {
-    id: 18, timestamp: new Date(now - 2 * day - 5 * hour).toISOString(),
+    id: 'audit-18', timestamp: new Date(now - 2 * day - 5 * hour).toISOString(),
     username: 'hendrik', category: 'CONFIG', action: 'UPDATE_THRESHOLD',
     target: 'thresholds/latency-p99', result: 'SUCCESS',
     detail: { field: 'warningMs', oldValue: 500, newValue: 300 },
     ipAddress: '10.0.1.42', userAgent: 'Mozilla/5.0 Chrome/125',
   },
   {
-    id: 19, timestamp: new Date(now - 3 * day).toISOString(),
+    id: 'audit-19', timestamp: new Date(now - 3 * day).toISOString(),
     username: 'attacker', category: 'AUTH', action: 'LOGIN',
     target: 'sessions', result: 'FAILURE',
     detail: { method: 'local', reason: 'account_locked', attempts: 5 },
     ipAddress: '198.51.100.23', userAgent: 'python-requests/2.31',
   },
   {
-    id: 20, timestamp: new Date(now - 3 * day - 2 * hour).toISOString(),
+    id: 'audit-20', timestamp: new Date(now - 3 * day - 2 * hour).toISOString(),
     username: 'hendrik', category: 'USER_MGMT', action: 'ASSIGN_ROLE',
     target: 'groups/developers', result: 'SUCCESS',
     detail: { role: 'EDITOR', method: 'group_assignment' },
     ipAddress: '10.0.1.42', userAgent: 'Mozilla/5.0 Chrome/125',
   },
   {
-    id: 21, timestamp: new Date(now - 4 * day).toISOString(),
+    id: 'audit-21', timestamp: new Date(now - 4 * day).toISOString(),
     username: 'system', category: 'INFRA', action: 'BACKUP',
     target: 'db/primary', result: 'FAILURE',
     detail: { error: 'disk_full', sizeBytes: 0 },
     ipAddress: '10.0.0.1', userAgent: 'cameleer-scheduler/1.0',
   },
   {
-    id: 22, timestamp: new Date(now - 4 * day - 1 * hour).toISOString(),
+    id: 'audit-22', timestamp: new Date(now - 4 * day - 1 * hour).toISOString(),
     username: 'alice', category: 'CONFIG', action: 'VIEW_CONFIG',
     target: 'config/oidc', result: 'SUCCESS',
     detail: { section: 'provider_settings' },
     ipAddress: '192.168.1.100', userAgent: 'Mozilla/5.0 Firefox/126',
   },
   {
-    id: 23, timestamp: new Date(now - 5 * day).toISOString(),
+    id: 'audit-23', timestamp: new Date(now - 5 * day).toISOString(),
     username: 'hendrik', category: 'USER_MGMT', action: 'CREATE_ROLE',
     target: 'roles/OPERATOR', result: 'SUCCESS',
     detail: { scope: 'custom', description: 'Pipeline operator' },
     ipAddress: '10.0.1.42', userAgent: 'Mozilla/5.0 Chrome/125',
   },
   {
-    id: 24, timestamp: new Date(now - 5 * day - 3 * hour).toISOString(),
+    id: 'audit-24', timestamp: new Date(now - 5 * day - 3 * hour).toISOString(),
     username: 'system', category: 'INFRA', action: 'INDEX_REBUILD',
     target: 'opensearch/agents', result: 'SUCCESS',
     detail: { documents: 230, duration: '1.1s' },
     ipAddress: '10.0.0.1', userAgent: 'cameleer-scheduler/1.0',
   },
   {
-    id: 25, timestamp: new Date(now - 6 * day).toISOString(),
+    id: 'audit-25', timestamp: new Date(now - 6 * day).toISOString(),
     username: 'hendrik', category: 'USER_MGMT', action: 'CREATE_USER',
     target: 'users/bob', result: 'SUCCESS',
     detail: { displayName: 'Bob Smith', roles: ['VIEWER'] },

src/pages/Admin/OidcConfig/OidcConfig.module.css

@@ -1,25 +1,13 @@
 .page {
   max-width: 640px;
+  margin: 0 auto;
 }
 
-.header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 20px;
-}
-
-.title {
-  font-size: 18px;
-  font-weight: 600;
-  color: var(--text-primary);
-  margin: 0;
-  font-family: var(--font-body);
-}
-
-.headerActions {
+.toolbar {
   display: flex;
   gap: 8px;
+  justify-content: flex-end;
+  margin-bottom: 20px;
 }
 
 .section {

src/pages/Admin/OidcConfig/OidcConfig.tsx

@@ -71,16 +71,13 @@ export function OidcConfig() {
   return (
     <AdminLayout title="OIDC Configuration">
       <div className={styles.page}>
-        <div className={styles.header}>
-          <h2 className={styles.title}>OIDC Configuration</h2>
-          <div className={styles.headerActions}>
-            <Button size="sm" variant="secondary" onClick={handleTest} disabled={!form.issuerUri}>
-              Test Connection
-            </Button>
-            <Button size="sm" variant="primary" onClick={handleSave}>
-              Save
-            </Button>
-          </div>
+        <div className={styles.toolbar}>
+          <Button size="sm" variant="secondary" onClick={handleTest} disabled={!form.issuerUri}>
+            Test Connection
+          </Button>
+          <Button size="sm" variant="primary" onClick={handleSave}>
+            Save
+          </Button>
         </div>
 
         <section className={styles.section}>

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"
+      />
     </>
   )
 }