Improve ISAC libraries, roles, and public profiles

src/routes/isac/community/+page.server.ts

@@ -9,6 +9,7 @@ import { getPagination, getRegistrySearch, getRegistrySort } from '$lib/server/p
 import { error, fail } from '@sveltejs/kit';
 import { randomUUID } from 'node:crypto';
 import type { Actions, PageServerLoad } from './$types';
+import { agentProfileHref } from '$lib/agents';
 
 const COMMENT_PERMISSION = 'community.comments.moderate';
 const PROFILE_PERMISSION = 'community.profiles.moderate';
@@ -27,9 +28,12 @@ const requiredReason = (value: FormDataEntryValue | null) => {
 	return reason.length >= 3 ? reason : null;
 };
 
-const targetHref = (targetType: string, targetId: unknown, slug: unknown) =>
+const targetHref = (targetType: string, targetId: unknown, slug: unknown, publicSlug?: unknown) =>
 	targetType === 'profile'
-		? `/agents/${encodeURIComponent(String(targetId))}#profile-comments`
+		? agentProfileHref({
+			id: String(targetId),
+			publicSlug: typeof publicSlug === 'string' ? publicSlug : null
+		}, 'profile-comments')
 		: `/builds/${encodeURIComponent(String(slug ?? ''))}#comments`;
 
 const parseAuditSnapshot = (value: unknown) => {
@@ -77,15 +81,21 @@ const queueTargetHref = (
 	contentId: unknown,
 	targetType: unknown,
 	targetId: unknown,
-	slug: unknown
+	slug: unknown,
+	publicSlug?: unknown
 ) => {
-	if (contentType === 'profile_bio') return `/agents/${encodeURIComponent(String(contentId))}`;
+	if (contentType === 'profile_bio') {
+		return agentProfileHref({
+			id: String(contentId),
+			publicSlug: typeof publicSlug === 'string' ? publicSlug : null
+		});
+	}
 	if (contentType === 'guide') {
 		return slug
 			? `/builds/${encodeURIComponent(String(slug))}`
 			: `/builds/${encodeURIComponent(String(contentId))}`;
 	}
-	return targetHref(String(targetType), targetId, slug);
+	return targetHref(String(targetType), targetId, slug, publicSlug);
 };
 
 const queueActionFailure = (status: number, message: string) => fail(status, {
@@ -235,6 +245,7 @@ export const load: PageServerLoad = async ({ cookies, url }) => {
 		const scanQueue = `SELECT
 				scan.id AS queue_id,'scan' AS item_source,scan.content_type,scan.content_id,
 				scan.author_id,COALESCE(author_profile.display_name,author.username,'Deleted Agent') AS display_name,
+				author_profile.public_slug AS author_public_slug,
 				author_avatar.source AS avatar_source,author_avatar.value AS avatar_value,
 				author_avatar.updated_at AS avatar_updated_at,
 				COALESCE(revision.body_markdown,comments.body_markdown,target_build.guide_body,'') AS body_markdown,
@@ -249,7 +260,7 @@ export const load: PageServerLoad = async ({ cookies, url }) => {
 						THEN COALESCE(target_build.title,'Build guide')
 					ELSE COALESCE(target_build.title,target_profile.display_name,target_user.username,'Community content')
 				END AS target_title,
-				target_build.slug
+				target_build.slug,COALESCE(target_profile.public_slug,author_profile.public_slug) AS target_public_slug
 			FROM content_moderation_scans scan
 			LEFT JOIN content_moderation_reviews review ON review.scan_id=scan.id
 			LEFT JOIN moderated_content_revisions revision ON revision.id=scan.revision_id
@@ -271,6 +282,7 @@ export const load: PageServerLoad = async ({ cookies, url }) => {
 				report.id AS queue_id,'report' AS item_source,report.content_type,report.content_id,
 				COALESCE(comments.author_id,profile.user_id,target_build.owner_id) AS author_id,
 				COALESCE(author_profile.display_name,author.username,'Deleted Agent') AS display_name,
+				author_profile.public_slug AS author_public_slug,
 				author_avatar.source AS avatar_source,author_avatar.value AS avatar_value,
 				author_avatar.updated_at AS avatar_updated_at,
 				COALESCE(comments.body_markdown,profile.bio_markdown,target_build.guide_body,'') AS body_markdown,
@@ -287,7 +299,7 @@ export const load: PageServerLoad = async ({ cookies, url }) => {
 						THEN COALESCE(target_build.title,'Build guide')
 					ELSE COALESCE(target_build.title,target_profile.display_name,target_user.username,'Community content')
 				END AS target_title,
-				target_build.slug
+				target_build.slug,COALESCE(target_profile.public_slug,profile.public_slug) AS target_public_slug
 			FROM user_content_reports report
 			LEFT JOIN comments ON report.content_type='comment' AND comments.id=report.content_id
 			LEFT JOIN comment_threads thread ON thread.id=comments.thread_id
@@ -387,11 +399,13 @@ export const load: PageServerLoad = async ({ cookies, url }) => {
 						row.content_id,
 						row.target_type,
 						row.target_id,
-						row.slug
+						row.slug,
+						row.target_public_slug
 					),
 					author: {
 						id: String(row.author_id ?? ''),
 						displayName: String(row.display_name),
+						publicSlug: row.author_public_slug ? String(row.author_public_slug) : null,
 						avatarUrl: avatarUrl(
 							row.avatar_source,
 							row.avatar_value,
@@ -458,6 +472,7 @@ export const load: PageServerLoad = async ({ cookies, url }) => {
 		const rows = await (await database.prepare(`SELECT comments.id,comments.body_markdown,comments.status,
 				comments.created_at,comments.updated_at,comments.removal_reason,
 				comments.author_id,COALESCE(profile.display_name,users.username,'Deleted Agent') AS display_name,
+				profile.public_slug AS author_public_slug,target_profile.public_slug AS target_public_slug,
 				avatar.source AS avatar_source,avatar.value AS avatar_value,avatar.updated_at AS avatar_updated_at,
 				thread.target_type,thread.target_id,builds.slug,
 				COALESCE(builds.title,target_profile.display_name,target_user.username,'Community content') AS target_title
@@ -477,10 +492,11 @@ export const load: PageServerLoad = async ({ cookies, url }) => {
 				moderationReason: row.removal_reason ? String(row.removal_reason) : null,
 				targetType: String(row.target_type),
 				targetTitle: String(row.target_title),
-				targetHref: targetHref(String(row.target_type), row.target_id, row.slug),
+				targetHref: targetHref(String(row.target_type), row.target_id, row.slug, row.target_public_slug),
 				author: {
 					id: String(row.author_id),
 					displayName: String(row.display_name),
+					publicSlug: row.author_public_slug ? String(row.author_public_slug) : null,
 					avatarUrl: avatarUrl(row.avatar_source, row.avatar_value, String(row.author_id), row.avatar_updated_at)
 				}
 			})),
@@ -521,7 +537,7 @@ export const load: PageServerLoad = async ({ cookies, url }) => {
 		LEFT JOIN profile_moderation moderation ON moderation.user_id=profile.user_id
 		${where}`)).get(...args))?.count ?? 0);
 	const pagination = getPagination(url, total);
-	const rows = await (await database.prepare(`SELECT profile.user_id,profile.bio_markdown,profile.is_public,
+	const rows = await (await database.prepare(`SELECT profile.user_id,profile.public_slug,profile.bio_markdown,profile.is_public,
 			profile.updated_at,COALESCE(profile.display_name,users.username) AS display_name,
 			avatar.source AS avatar_source,avatar.value AS avatar_value,avatar.updated_at AS avatar_updated_at,
 			moderation.reason AS moderation_reason
@@ -545,6 +561,7 @@ export const load: PageServerLoad = async ({ cookies, url }) => {
 			agent: {
 				id: String(row.user_id),
 				displayName: String(row.display_name),
+				publicSlug: row.public_slug ? String(row.public_slug) : null,
 				avatarUrl: avatarUrl(row.avatar_source, row.avatar_value, String(row.user_id), row.avatar_updated_at)
 			}
 		})),

src/routes/isac/community/+page.svelte

@@ -5,7 +5,9 @@
 	import PendingForm from '$lib/components/PendingForm.svelte';
 	import RegistryPagination from '$lib/components/RegistryPagination.svelte';
 
-	type AgentSummary = { id: string; displayName: string; avatarUrl: string };
+	import { agentProfileHref } from '$lib/agents';
+
+	type AgentSummary = { id: string; displayName: string; publicSlug?: string | null; avatarUrl: string };
 	type CommunityComment = {
 		id: string;
 		bodyHtml: string;
@@ -279,7 +281,7 @@
 					<a href={item.targetHref}>{item.targetTitle} →</a>
 				</div>
 			{:else}
-				<div class="community-target"><span>PUBLIC PROFILE BIO</span><a href={`/agents/${encodeURIComponent(item.agent.id)}`}>VIEW AGENT PROFILE →</a></div>
+				<div class="community-target"><span>PUBLIC PROFILE BIO</span><a href={agentProfileHref(item.agent)}>VIEW AGENT PROFILE →</a></div>
 			{/if}
 			<div class="community-markdown-preview">
 				<MarkdownContent html={item.bodyHtml} compact emptyMessage={isComment(item) ? 'Comment body unavailable.' : 'No bio content.'}/>

src/routes/isac/images/+page.server.ts

@@ -6,7 +6,9 @@ import { getDatabase } from '$lib/server/database';
 import { recordIsacAudit } from '$lib/server/audit';
 import {
 	MANAGED_IMAGE_CATEGORIES,
+	ManagedImageDeletionError,
 	ManagedImageValidationError,
+	deleteManagedImage,
 	managedImageUrl,
 	processManagedImage,
 	saveManagedImageFile
@@ -124,5 +126,25 @@ export const actions: Actions = {
 			if (String(error).includes('UNIQUE')) return fail(409, { imageError: 'An image already uses that name.' });
 			throw error;
 		}
+	},
+	delete: async ({ cookies, request }) => {
+		const operator = await requirePermission(await getSessionUser(cookies), 'images.manage');
+		const id = String((await request.formData()).get('id') ?? '');
+		const database = await getDatabase();
+		let deleted;
+		try {
+			deleted = await deleteManagedImage(database, id);
+		} catch (error) {
+			if (error instanceof ManagedImageDeletionError) return fail(409, { imageError: error.message });
+			throw error;
+		}
+		if (!deleted) return fail(404, { imageError: 'Image not found.' });
+		await recordIsacAudit({
+			actorId: operator.id, category: 'system_configuration',
+			action: 'image.deleted', entityId: id,
+			before: { libraryImage: deleted.image, sourceIcon: deleted.sourceIcon },
+			after: { libraryImage: null, sourceIcon: null }
+		});
+		return { imageDeleted: true, resultToken: randomUUID() };
 	}
 };

src/routes/isac/images/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { tick } from 'svelte';
 	import PendingForm from '$lib/components/PendingForm.svelte';
 	import ImageUploadInput from '$lib/components/ImageUploadInput.svelte';
 	import RegistryPagination from '$lib/components/RegistryPagination.svelte';
@@ -8,16 +9,35 @@
 	let isIcon = $state(true);
 	let resetToken = $state(0);
 	let consumedToken = $state<string | null>(null);
+	let deletionTarget = $state<any>(null);
+	let deletionTrigger = $state<HTMLButtonElement | null>(null);
+	let deletionCancel = $state<HTMLButtonElement | null>(null);
 	const size = (bytes: unknown) => {
 		const value = Number(bytes ?? 0);
 		return value < 1024 * 1024 ? `${(value / 1024).toFixed(0)} KiB` : `${(value / 1024 / 1024).toFixed(1)} MiB`;
 	};
 	const sourceLabel = (value: unknown) => String(value ?? '').replaceAll('_', ' ').toLocaleUpperCase();
+	const openDeletion = async (image: any, trigger: HTMLButtonElement) => {
+		deletionTarget = image;
+		deletionTrigger = trigger;
+		await tick();
+		deletionCancel?.focus();
+	};
+	const closeDeletion = async () => {
+		const trigger = deletionTrigger;
+		deletionTarget = null;
+		deletionTrigger = null;
+		await tick();
+		trigger?.focus();
+	};
 	$effect(() => {
-		if (form?.imageSaved && form?.resultToken && form.resultToken !== consumedToken) {
+		if (form?.resultToken && form.resultToken !== consumedToken) {
 			consumedToken = form.resultToken;
-			if (form.editorMode === 'edit') editing = null;
-			else {
+			if (form.imageDeleted) {
+				deletionTarget = null;
+				deletionTrigger = null;
+			} else if (form.imageSaved && form.editorMode === 'edit') editing = null;
+			else if (form.imageSaved) {
 				adding = true;
 				isIcon = true;
 				resetToken += 1;
@@ -26,6 +46,8 @@
 	});
 </script>
 
+<svelte:window onkeydown={(event) => { if (event.key === 'Escape' && deletionTarget) void closeDeletion(); }}/>
+
 <svelte:head><title>Image library — ISAC</title></svelte:head>
 <div class="module-toolbar">
 	<div><p class="eyebrow">SYSTEM CONFIGURATION</p><h2>IMAGE LIBRARY</h2><p>Process, classify, and locate reusable SHD.build visual assets.</p></div>
@@ -81,15 +103,36 @@
 <section class="image-library-grid" aria-label="Managed image library">
 	{#each data.images as image}
 		<article class:icon={image.is_icon}>
-			<div class="image-library-preview"><img src={image.url} alt="Preview of {image.name}"/></div>
+			<div class="image-library-preview"><img src={image.url} alt="Preview of {image.name}" loading="lazy" decoding="async"/></div>
 			<header>
-				<div><strong>{image.name}</strong><span>{image.category}{image.source_entity_type ? ` · ${sourceLabel(image.source_entity_type)}` : ''}</span></div>
-				<b>{image.source_entity_type ? 'ASSIGNED ICON' : image.is_icon ? 'ICON' : 'IMAGE'}</b>
+				<div><strong title={image.name}>{image.name}</strong><span>{image.category}{image.source_entity_type ? ` · ${sourceLabel(image.source_entity_type)}` : ''}</span></div>
+				<b class:assigned={image.source_entity_type}>{image.source_entity_type ? 'ASSIGNED' : image.is_icon ? 'ICON' : 'IMAGE'}</b>
 			</header>
 			<div class="image-library-tags">{#each image.tags as tag}<span>{tag}</span>{/each}{#if !image.tags.length}<small>NO TAGS</small>{/if}</div>
-			<footer><span>{image.width} × {image.height} · {size(image.byte_size)}</span><button class="table-action" type="button" onclick={() => { editing = image; adding = false; }}>EDIT →</button></footer>
+			<footer class="image-library-facts">
+				<span>{image.width} × {image.height} · {size(image.byte_size)}</span>
+				<span>{image.source_entity_type ? `LINKED · ${sourceLabel(image.source_entity_type)}` : 'LIBRARY UPLOAD'}</span>
+			</footer>
+			<div class="image-library-actions" aria-label={`Actions for ${image.name}`}>
+				<a class="table-action" href={image.url} download={`${image.name}.webp`}>DOWNLOAD</a>
+				<button class="table-action edit" type="button" onclick={() => { editing = image; adding = false; }}>EDIT</button>
+				<button class="table-action destructive" type="button" aria-haspopup="dialog" onclick={(event) => void openDeletion(image, event.currentTarget)}>DELETE</button>
+			</div>
 		</article>
 	{:else}
 		<div class="image-library-empty"><strong>NO MATCHING ASSETS</strong><span>Upload the first image or revise the registry search.</span></div>
 	{/each}
 </section>
+
+{#if deletionTarget}
+	<div class="isac-modal-backdrop" role="presentation" onclick={(event) => { if (event.target === event.currentTarget) void closeDeletion(); }}>
+		<div class="isac-confirm-modal image-library-delete-dialog" role="dialog" aria-modal="true" aria-labelledby="image-delete-title" aria-describedby="image-delete-description">
+			<div class="editor-title"><div><p class="eyebrow">PERMANENT ASSET REMOVAL</p><h3 id="image-delete-title">DELETE {deletionTarget.name.toLocaleUpperCase()}?</h3></div><button type="button" aria-label="Cancel image deletion" onclick={() => void closeDeletion()}>×</button></div>
+			<div class="image-library-delete-summary">
+				<div class="image-library-delete-preview"><img src={deletionTarget.url} alt=""/></div>
+				<div id="image-delete-description"><b>{deletionTarget.source_entity_type ? `ASSIGNED TO ${sourceLabel(deletionTarget.source_entity_type)}` : 'LIBRARY UPLOAD'}</b><p>{deletionTarget.source_entity_type ? `ISAC will clear the icon from its ${sourceLabel(deletionTarget.source_entity_type)} record, then permanently delete the shared image file.` : 'ISAC will permanently delete the stored image file.'}</p><small>This action cannot be undone.</small></div>
+			</div>
+			<div class="image-library-delete-actions"><button class="secondary" type="button" bind:this={deletionCancel} onclick={() => void closeDeletion()}>CANCEL</button><PendingForm action="?/delete" successMessage="Image deleted."><input type="hidden" name="id" value={deletionTarget.id}/><button class="danger">CONFIRM DELETE</button></PendingForm></div>
+		</div>
+	</div>
+{/if}

src/routes/isac/roles/+page.server.ts

@@ -8,6 +8,17 @@ import type { Actions, PageServerLoad } from './$types';
 import { recordIsacAudit } from '$lib/server/audit';
 
 const filters = ['isac', 'data', 'users', 'audit', 'system'];
+const seededRoleIds = new Set([
+	'role-data-editor',
+	'role-user-operator',
+	'role-access-manager',
+	'role-admin',
+	'role-moderator',
+	'role-data-viewer',
+	'role-data-contributor',
+	'role-data-approver',
+	'role-auditor'
+]);
 
 export const load: PageServerLoad = async ({ cookies, url }) => {
 	const operator = await requirePermission(await getSessionUser(cookies), 'users.roles');
@@ -68,7 +79,11 @@ export const load: PageServerLoad = async ({ cookies, url }) => {
 		roles: roles.map((role) => ({
 			...role,
 			permissionIds: links.filter((link) => link.role_id === role.id).map((link) => String(link.permission_id)),
-			protected: role.id === 'role-admin'
+			systemRole: seededRoleIds.has(String(role.id)),
+			protected: role.id === 'role-admin',
+			canEdit: role.id !== 'role-admin' || canManageSystemAdmin,
+			canDelete: role.id !== 'role-admin'
+				&& (canManageSystemAdmin || !seededRoleIds.has(String(role.id)))
 		})),
 		permissions,
 		summary,
@@ -95,7 +110,9 @@ export const actions: Actions = {
 		const database = await getDatabase();
 		const existing = id ? await (await database.prepare('SELECT id,name,description FROM roles WHERE id=?')).get(id) : null;
 		if (id && !existing) return fail(404, { roleError: 'Role not found.' });
-		if (id === 'role-admin') return fail(403, { roleError: 'The built-in Admin role is protected and cannot be modified.' });
+		if (id === 'role-admin' && !canManageSystemAdmin) {
+			return fail(403, { roleError: 'Only a full administrator can modify the core Admin role.' });
+		}
 		if (await (await database.prepare('SELECT id FROM roles WHERE name=? COLLATE NOCASE AND id<>?')).get(name, id || 'new')) {
 			return fail(409, { roleError: 'A role with that name already exists.' });
 		}
@@ -119,5 +136,79 @@ export const actions: Actions = {
 			after: { name, description: description || null, permissions: validPermissions.map((row) => row.name) }
 		});
 		return { roleSaved: true, roleMode: id ? 'edit' : 'add', resultToken: randomUUID() };
+	},
+	delete: async ({ cookies, request }) => {
+		const operator = await requirePermission(await getSessionUser(cookies), 'users.roles');
+		const operatorPermissions = await getPermissions(operator);
+		const canManageSystemAdmin = operatorPermissions.includes('*');
+		const form = await request.formData();
+		const id = String(form.get('id') ?? '').trim();
+		const confirmation = String(form.get('confirmation') ?? '').normalize('NFKC').trim();
+		if (!id) return fail(400, { roleDeleteError: 'Choose a role to delete.' });
+		if (id === 'role-admin') {
+			return fail(403, { roleDeleteError: 'The core Admin role cannot be deleted.' });
+		}
+		if (seededRoleIds.has(id) && !canManageSystemAdmin) {
+			return fail(403, { roleDeleteError: 'Only a full administrator can delete a seeded system role.' });
+		}
+		const database = await getDatabase();
+		const role = await (await database.prepare(
+			'SELECT id,name,description FROM roles WHERE id=?'
+		)).get(id);
+		if (!role) return fail(404, { roleDeleteError: 'Role not found.' });
+		if (confirmation !== String(role.name)) {
+			return fail(400, { roleDeleteError: 'Enter the exact role name to confirm deletion.' });
+		}
+		const [permissions, assignedUsers] = await Promise.all([
+			(await database.prepare(`SELECT permissions.name FROM role_permissions
+				JOIN permissions ON permissions.id=role_permissions.permission_id
+				WHERE role_permissions.role_id=? ORDER BY permissions.name COLLATE NOCASE`)).all(id),
+			(await database.prepare(`SELECT users.id,
+					COALESCE(user_profiles.display_name,users.username) AS display_name
+				FROM user_roles JOIN users ON users.id=user_roles.user_id
+				LEFT JOIN user_profiles ON user_profiles.user_id=users.id
+				WHERE user_roles.role_id=?
+				ORDER BY display_name COLLATE NOCASE,users.id`)).all(id)
+		]);
+		await database.exec('BEGIN IMMEDIATE');
+		try {
+			if (seededRoleIds.has(id)) {
+				await (await database.prepare(`INSERT INTO deleted_roles(role_id,deleted_at,deleted_by)
+					VALUES(?,?,?)
+					ON CONFLICT(role_id) DO UPDATE SET
+						deleted_at=excluded.deleted_at,
+						deleted_by=excluded.deleted_by`))
+					.run(id, new Date().toISOString(), operator.id);
+			}
+			await (await database.prepare('DELETE FROM user_roles WHERE role_id=?')).run(id);
+			await (await database.prepare('DELETE FROM role_permissions WHERE role_id=?')).run(id);
+			const deleted = await (await database.prepare('DELETE FROM roles WHERE id=?')).run(id);
+			if (!deleted.changes) throw new Error('The role changed before it could be deleted.');
+			await recordIsacAudit({
+				actorId: operator.id,
+				category: 'role_management',
+				action: 'role.deleted',
+				entityId: id,
+				before: {
+					name: String(role.name),
+					description: role.description ? String(role.description) : null,
+					permissions: permissions.map((row) => String(row.name)),
+					assignedUsers: assignedUsers.map((row) => ({
+						id: String(row.id),
+						displayName: String(row.display_name)
+					}))
+				},
+				after: {
+					deleted: true,
+					systemRole: seededRoleIds.has(id),
+					removedAssignmentCount: assignedUsers.length
+				}
+			});
+			await database.exec('COMMIT');
+		} catch (error) {
+			await database.exec('ROLLBACK');
+			throw error;
+		}
+		return { roleDeleted: true, resultToken: randomUUID() };
 	}
 };

src/routes/isac/roles/+page.svelte

@@ -7,12 +7,18 @@
 
 	let { data, form } = $props();
 	let editing = $state<any>(null);
+	let deleting = $state<any>(null);
 	let handledResultToken = $state('');
 	const blank = () => ({ id: '', name: '', description: '', permissionIds: [] });
 	const permissionName = (id: string) => data.permissions.find((permission) => permission.id === id)?.name ?? id;
 	$effect(() => {
-		if (!form?.roleSaved || !form.resultToken || form.resultToken === handledResultToken) return;
+		if ((!form?.roleSaved && !form?.roleDeleted) || !form.resultToken || form.resultToken === handledResultToken) return;
 		handledResultToken = form.resultToken;
+		if (form.roleDeleted) {
+			deleting = null;
+			editing = null;
+			return;
+		}
 		editing = form.roleMode === 'add' ? blank() : null;
 	});
 </script>
@@ -54,7 +60,37 @@
 <div class="dashboard-table">
 	<div class="dashboard-row role-row table-heading"><SortableColumnHeader label="ROLE" column="name" sort={data.sort}/><SortableColumnHeader label="ASSIGNED USERS" column="users" sort={data.sort} defaultDirection="desc"/><SortableColumnHeader label="DISCRETE PERMISSIONS" column="permissions" sort={data.sort} defaultDirection="desc"/><SortableColumnHeader label="STATE" column="state" sort={data.sort}/><span></span></div>
 	{#each data.roles as role}
-		<div class="dashboard-row role-row" class:registry-row-editing={editing?.id === role.id}><div><strong>{role.name}</strong><small>{role.description ?? 'NO DESCRIPTION'}</small></div><span>{role.user_count} USER{Number(role.user_count) === 1 ? '' : 'S'}</span><div class="role-permission-summary">{#each role.permissionIds as permissionId}<b>{permissionName(permissionId)}</b>{:else}<small>NO PERMISSIONS</small>{/each}</div><span class:configured={!role.protected}>{role.protected ? 'SYSTEM PROTECTED' : 'EDITABLE'}</span>{#if role.protected}<span></span>{:else}<button aria-expanded={editing?.id === role.id} aria-controls={`role-editor-${role.id}`} onclick={() => editing = {...role, permissionIds:[...role.permissionIds]}}>EDIT</button>{/if}</div>
+		<div class="dashboard-row role-row" class:registry-row-editing={editing?.id === role.id}><div><strong>{role.name}</strong><small>{role.description ?? 'NO DESCRIPTION'}</small></div><span>{role.user_count} USER{Number(role.user_count) === 1 ? '' : 'S'}</span><div class="role-permission-summary">{#each role.permissionIds as permissionId}<b>{permissionName(permissionId)}</b>{:else}<small>NO PERMISSIONS</small>{/each}</div><span class:configured={!role.protected}>{role.protected ? 'CORE ROLE' : role.systemRole ? 'SYSTEM ROLE' : 'CUSTOM ROLE'}</span>{#if !role.canEdit && !role.canDelete}<span></span>{:else}<div class="role-row-actions">{#if role.canEdit}<button aria-expanded={editing?.id === role.id} aria-controls={`role-editor-${role.id}`} onclick={() => editing = {...role, permissionIds:[...role.permissionIds]}}>EDIT</button>{/if}{#if role.canDelete}<button class="table-action destructive" type="button" aria-haspopup="dialog" onclick={() => deleting = role}>DELETE</button>{/if}</div>{/if}</div>
 		{#if editing?.id === role.id}<RegistryInlineEditor id={`role-editor-${role.id}`} label={`Edit ${role.name} role`}>{@render roleEditor()}</RegistryInlineEditor>{/if}
 	{:else}<div class="empty-dashboard"><strong>NO ROLES MATCH THIS FILTER</strong><span>Select another access domain or create a role.</span></div>{/each}
 </div>
+
+{#if deleting}
+	<div class="isac-modal-backdrop" role="presentation">
+		<div class="isac-confirm-modal role-delete-dialog" role="dialog" aria-modal="true" aria-labelledby="role-delete-title">
+			<div class="editor-title"><div><p class="eyebrow">DESTRUCTIVE ACCESS CHANGE</p><h3 id="role-delete-title">DELETE {deleting.name}?</h3></div><button type="button" aria-label="Close role deletion confirmation" onclick={() => deleting = null}>×</button></div>
+			<div class="role-delete-consequence">
+				<b>THIS CANNOT BE UNDONE</b>
+				<p>{Number(deleting.user_count) === 0 ? 'No agents are assigned to this role.' : `${deleting.user_count} agent${Number(deleting.user_count) === 1 ? '' : 's'} will immediately lose this role and its permissions.`}</p>
+			</div>
+			<PendingForm action="?/delete">
+				<input type="hidden" name="id" value={deleting.id}/>
+				<label class="field">TYPE “{deleting.name}” TO CONFIRM<input name="confirmation" required autocomplete="off"/></label>
+				{#if form?.roleDeleteError}<p class="error">{form.roleDeleteError}</p>{/if}
+				<div class="form-actions"><button type="button" class="secondary" onclick={() => deleting = null}>CANCEL</button><button class="danger">DELETE ROLE</button></div>
+			</PendingForm>
+		</div>
+	</div>
+{/if}
+
+<style>
+	.role-row-actions{display:flex;align-items:center;justify-content:flex-end;gap:18px}
+	.role-delete-dialog{width:min(620px,calc(100vw - 28px))}
+	.role-delete-consequence{display:grid;gap:5px;padding:14px;border-bottom:1px solid var(--shd-border)}
+	.role-delete-consequence b{color:var(--shd-danger);font-size:var(--shd-type-telemetry);letter-spacing:.8px}
+	.role-delete-consequence p{margin:0;color:var(--shd-text-muted);line-height:1.45}
+	.role-delete-dialog :global(form){display:grid;gap:10px;padding:14px}
+	.role-delete-dialog :global(.field){margin:0}
+	.role-delete-dialog :global(.form-actions){padding-top:4px}
+	@media(max-width:650px){.role-row-actions{align-items:stretch;flex-direction:column;gap:7px}.role-row-actions button{min-height:44px}.role-delete-dialog :global(.form-actions){display:grid;grid-template-columns:1fr 1fr}}
+</style>

src/routes/isac/users/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import RegistryPagination from '$lib/components/RegistryPagination.svelte';
 	import KpiFilters from '$lib/components/KpiFilters.svelte';
+	import RoleBadgeList from '$lib/components/RoleBadgeList.svelte';
 	import SortableColumnHeader from '$lib/components/SortableColumnHeader.svelte';
 	let { data } = $props();
 	const date = (value: unknown) => value ? new Intl.DateTimeFormat(undefined, { dateStyle: 'medium', timeStyle: 'short' }).format(new Date(String(value))) : 'NEVER';
@@ -11,6 +12,6 @@
 <RegistryPagination pagination={data.pagination} search={data.query} searchPlaceholder="SEARCH DISPLAY OR LOGIN NAME"/>
 <div class="dashboard-table">
 	<div class="dashboard-row user-row table-heading"><SortableColumnHeader label="USER" column="user" sort={data.sort}/><SortableColumnHeader label="ACCESS" column="access" sort={data.sort}/><SortableColumnHeader label="ROLES" column="roles" sort={data.sort}/><SortableColumnHeader label="LAST LOGIN" column="lastLogin" sort={data.sort} defaultDirection="desc"/><SortableColumnHeader label="LAST ACTIVE" column="lastActive" sort={data.sort} defaultDirection="desc"/><SortableColumnHeader label="CONTENT" column="content" sort={data.sort} defaultDirection="desc"/><span></span></div>
-	{#each data.users as user}<div class="dashboard-row user-row mobile-detail-row"><div><strong>{user.display_name}</strong><small>LOGIN: {user.username ?? 'NOT CONFIGURED'}</small></div><span class:restricted={user.accessState !== 'ACTIVE'}>{user.accessState}{user.inactive && user.accessState === 'ACTIVE' ? ' · INACTIVE' : ''}</span><div class="role-summary">{#each String(user.assigned_roles ?? user.role ?? 'User').split(' · ') as role}<b>{role.toUpperCase()}</b>{/each}</div><span><small>{user.last_login_provider?.toUpperCase() ?? 'NONE'}</small>{date(user.last_login_at)}</span><span>{date(user.last_active_at)}</span><span>{user.build_count} BUILDS · {user.comment_count} COMMENTS</span><a class="row-action" href={`/isac/users/${user.id}`}>VIEW</a><a class="mobile-row-open" href={`/isac/users/${user.id}`} aria-label={`View agent ${user.display_name}`}></a></div>
+	{#each data.users as user}<div class="dashboard-row user-row mobile-detail-row"><div><strong>{user.display_name}</strong><small>LOGIN: {user.username ?? 'NOT CONFIGURED'}</small></div><span class:restricted={user.accessState !== 'ACTIVE'}>{user.accessState}{user.inactive && user.accessState === 'ACTIVE' ? ' · INACTIVE' : ''}</span><RoleBadgeList roles={String(user.assigned_roles ?? user.role ?? 'User').split(' · ')} label={`Assigned roles for ${user.display_name}`} compact/><span><small>{user.last_login_provider?.toUpperCase() ?? 'NONE'}</small>{date(user.last_login_at)}</span><span>{date(user.last_active_at)}</span><span>{user.build_count} BUILDS · {user.comment_count} COMMENTS</span><a class="row-action" href={`/isac/users/${user.id}`}>VIEW</a><a class="mobile-row-open" href={`/isac/users/${user.id}`} aria-label={`View agent ${user.display_name}`}></a></div>
 	{:else}<div class="empty-dashboard"><strong>NO USERS FOUND</strong><span>Adjust the username search and try again.</span></div>{/each}
 </div>