Separate login and display identities

src/lib/components/AppShell.svelte

@@ -4,7 +4,7 @@
 	import type { Snippet } from 'svelte';
 
 	let { user, isacAccess, children }: {
-		user: { username: string; role: string } | null;
+		user: { username: string; displayName: string; role: string } | null;
 		isacAccess: boolean;
 		children: Snippet;
 	} = $props();
@@ -33,7 +33,7 @@
 	</nav>
 	{#if user}
 		<div class="account">
-			<a href="/account"><small><i></i> AGENT ONLINE</small>{user.username}</a>
+			<a href="/account"><small><i></i> AGENT ONLINE</small>{user.displayName}</a>
 			<PendingForm action="/sign-in?/logout">{#snippet children(pending)}<button aria-busy={pending}>SIGN OUT →</button>{/snippet}</PendingForm>
 		</div>
 	{:else}