Display active identity in application shell

AGENTS.md

@@ -251,6 +251,9 @@ Do not bypass type errors using assertions simply to make the compiler pass.
 
 Prefer inference when the resulting type remains clear.
 
+In object type and interface declarations, list required properties before
+optional properties.
+
 Avoid duplicating types that can safely be inferred from Zod schemas or other
 authoritative definitions.
 

apps/web/src/features/auth/current-user.query.ts

@@ -11,24 +11,36 @@ export const currentUserQueryOptions = queryOptions({
   retry: false,
 });
 
-export type AuthenticationStatus =
-  'loading' | 'anonymous' | 'authenticated' | 'error';
-
 export function useCurrentUser() {
   const query = useQuery(currentUserQueryOptions);
-  let authenticationStatus: AuthenticationStatus = 'anonymous';
 
   if (query.isPending) {
-    authenticationStatus = 'loading';
-  } else if (query.isError) {
-    authenticationStatus = 'error';
-  } else if (query.data.user) {
-    authenticationStatus = 'authenticated';
+    return {
+      ...query,
+      authenticationStatus: 'loading' as const,
+      user: null,
+    };
+  }
+
+  if (query.isError) {
+    return {
+      ...query,
+      authenticationStatus: 'error' as const,
+      user: null,
+    };
+  }
+
+  if (!query.data.user) {
+    return {
+      ...query,
+      authenticationStatus: 'anonymous' as const,
+      user: null,
+    };
   }
 
   return {
     ...query,
-    authenticationStatus,
-    user: query.data?.user ?? null,
+    authenticationStatus: 'authenticated' as const,
+    user: query.data.user,
   };
 }

apps/web/src/features/dashboard/application-shell.test.tsx

@@ -24,6 +24,8 @@ describe('application shell', () => {
     );
 
     expect(screen.getByRole('heading', { name: 'Dashboard' })).toBeVisible();
+    expect(screen.getAllByText('Guest')).toHaveLength(2);
+    expect(screen.getAllByText('Progress is temporary')).toHaveLength(2);
 
     const navigationRegions = screen.getAllByRole('navigation', {
       name: /primary navigation/i,

apps/web/src/features/dashboard/application-shell.tsx

@@ -4,13 +4,15 @@ import {
   History,
   LayoutDashboard,
   Settings,
+  UserRound,
   type LucideIcon,
 } from 'lucide-react';
 import { Link } from '@tanstack/react-router';
 import type { ReactNode } from 'react';
 
 import wordmarkUrl from '../../assets/goforlift-wordmark.png';
 import { cn } from '../../lib/utils';
+import type { ApplicationIdentity } from './dashboard-access-boundary';
 
 const navigationItems = [
   { href: '/dashboard', icon: LayoutDashboard, label: 'Dashboard' },
@@ -21,9 +23,13 @@ const navigationItems = [
 
 type ApplicationShellProps = {
   children: ReactNode;
+  identity: ApplicationIdentity;
 };
 
-export function ApplicationShell({ children }: ApplicationShellProps) {
+export function ApplicationShell({
+  children,
+  identity,
+}: ApplicationShellProps) {
   return (
     <div
       className={cn(
@@ -34,6 +40,7 @@ export function ApplicationShell({ children }: ApplicationShellProps) {
       <aside className="hidden border-r bg-surface lg:flex lg:min-h-screen lg:flex-col">
         <Brand className="px-7 py-8" />
         <Navigation className="flex-1 space-y-1 px-4" />
+        <IdentitySummary className="border-t px-5 py-5" identity={identity} />
       </aside>
 
       <div className="min-w-0">
@@ -45,6 +52,11 @@ export function ApplicationShell({ children }: ApplicationShellProps) {
           )}
         >
           <Brand />
+          <IdentitySummary
+            className="ml-auto max-w-[180px]"
+            compact
+            identity={identity}
+          />
         </header>
         <main
           className={cn(
@@ -69,6 +81,55 @@ export function ApplicationShell({ children }: ApplicationShellProps) {
   );
 }
 
+type IdentitySummaryProps = {
+  identity: ApplicationIdentity;
+  className?: string;
+  compact?: boolean;
+};
+
+function IdentitySummary({
+  className,
+  compact = false,
+  identity,
+}: IdentitySummaryProps) {
+  const isGuest = identity.kind === 'guest';
+  const label = isGuest
+    ? 'Guest'
+    : (identity.user.displayName ?? identity.user.email);
+  const detail = isGuest ? 'Progress is temporary' : identity.user.email;
+  const avatarUrl = isGuest ? null : identity.user.avatarUrl;
+
+  return (
+    <section
+      aria-label="Current identity"
+      className={cn('flex min-w-0 items-center gap-3', className)}
+    >
+      {avatarUrl ? (
+        <img
+          alt=""
+          className="size-9 shrink-0 rounded-full object-cover"
+          src={avatarUrl}
+        />
+      ) : (
+        <span className="grid size-9 shrink-0 place-items-center rounded-full bg-accent">
+          <UserRound aria-hidden="true" className="size-5" />
+        </span>
+      )}
+      <div className="min-w-0">
+        <p className="truncate text-sm font-medium">{label}</p>
+        <p
+          className={cn(
+            'truncate text-xs text-muted-foreground',
+            compact && 'hidden sm:block',
+          )}
+        >
+          {detail}
+        </p>
+      </div>
+    </section>
+  );
+}
+
 function Brand({ className }: { className?: string }) {
   return (
     <Link

apps/web/src/features/dashboard/dashboard-access-boundary.test.tsx

@@ -13,9 +13,12 @@ import { afterEach, describe, expect, it, vi } from 'vitest';
 
 import { createPublicUser } from '../../test/fixtures/public-user.fixture';
 import { startGuestSession } from '../auth/guest-session';
+import { ApplicationShell } from './application-shell';
 import { DashboardAccessBoundary } from './dashboard-access-boundary';
 
-const publicUser = createPublicUser();
+const publicUser = createPublicUser({
+  avatarUrl: 'https://images.example.com/avatar.png',
+});
 
 afterEach(() => {
   cleanup();
@@ -34,6 +37,17 @@ describe('dashboard access boundary', () => {
     expect(
       await screen.findByRole('heading', { name: 'Dashboard' }),
     ).toBeVisible();
+    expect(screen.getAllByText('Go For Lifter')).toHaveLength(2);
+    expect(screen.getAllByText('lifter@example.com')).toHaveLength(2);
+
+    for (const identity of screen.getAllByRole('region', {
+      name: 'Current identity',
+    })) {
+      expect(identity.querySelector('img')).toHaveAttribute(
+        'src',
+        publicUser.avatarUrl,
+      );
+    }
   });
 
   it('allows an active guest without waiting for the API', async () => {
@@ -47,6 +61,8 @@ describe('dashboard access boundary', () => {
     expect(
       await screen.findByRole('heading', { name: 'Dashboard' }),
     ).toBeVisible();
+    expect(screen.getAllByText('Guest')).toHaveLength(2);
+    expect(screen.getAllByText('Progress is temporary')).toHaveLength(2);
   });
 
   it('redirects an anonymous visitor to the welcome page', async () => {
@@ -97,7 +113,11 @@ function renderDashboard() {
     path: '/dashboard',
     component: () => (
       <DashboardAccessBoundary>
-        <h1>Dashboard</h1>
+        {(identity) => (
+          <ApplicationShell identity={identity}>
+            <h1>Dashboard</h1>
+          </ApplicationShell>
+        )}
       </DashboardAccessBoundary>
     ),
   });

apps/web/src/features/dashboard/dashboard-access-boundary.tsx

@@ -1,13 +1,17 @@
 // Allows authenticated and guest visitors into application routes while handling unresolved access.
+import type { PublicUser } from '@goforlift/contracts';
 import { Navigate } from '@tanstack/react-router';
 import type { ReactNode } from 'react';
 
 import { Button } from '../../components/ui/button';
 import { useCurrentUser } from '../auth/current-user.query';
 import { isGuestSession } from '../auth/guest-session';
 
+export type ApplicationIdentity =
+  { kind: 'guest' } | { kind: 'user'; user: PublicUser };
+
 type DashboardAccessBoundaryProps = {
-  children: ReactNode;
+  children: (identity: ApplicationIdentity) => ReactNode;
 };
 
 export function DashboardAccessBoundary({
@@ -16,7 +20,7 @@ export function DashboardAccessBoundary({
   const currentUser = useCurrentUser();
 
   if (isGuestSession()) {
-    return children;
+    return children({ kind: 'guest' });
   }
 
   if (currentUser.authenticationStatus === 'loading') {
@@ -37,7 +41,7 @@ export function DashboardAccessBoundary({
     return <Navigate replace to="/" />;
   }
 
-  return children;
+  return children({ kind: 'user', user: currentUser.user });
 }
 
 function AccessStatus({

apps/web/src/routes/_app.tsx

@@ -11,9 +11,11 @@ export const Route = createFileRoute('/_app')({
 function ProtectedApplicationLayout() {
   return (
     <DashboardAccessBoundary>
-      <ApplicationShell>
-        <Outlet />
-      </ApplicationShell>
+      {(identity) => (
+        <ApplicationShell identity={identity}>
+          <Outlet />
+        </ApplicationShell>
+      )}
     </DashboardAccessBoundary>
   );
 }