Add guest profile exit menu

AGENTS.md

@@ -181,6 +181,15 @@ Do not put all application state into Zustand.
 Do not duplicate TanStack Query server state inside Zustand without a specific
 reason.
 
+### JSX Readability
+
+Keep JSX focused on describing the rendered UI. Move non-trivial conditions,
+calculations, and data transformations into clearly named values in the
+component body before the `return`. Simple conditions that remain immediately
+understandable may stay inline. Use blank lines to separate distinct groups of
+component logic, such as state, derived values, event handlers, and render
+conditions.
+
 
 ## UI Components
 

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

@@ -2,18 +2,20 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { RouterProvider } from '@tanstack/react-router';
 import { cleanup, render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { afterEach, describe, expect, it } from 'vitest';
 
 import { router } from '../../router';
-import { startGuestSession } from '../auth/guest-session';
+import { isGuestSession, startGuestSession } from '../auth/guest-session';
 
 afterEach(() => {
   cleanup();
   sessionStorage.clear();
 });
 
 describe('application shell', () => {
-  it('renders desktop and mobile navigation with the current page selected', async () => {
+  it('renders responsive navigation and exits guest mode', async () => {
+    const user = userEvent.setup();
     await router.navigate({ to: '/dashboard' });
     startGuestSession();
     const queryClient = new QueryClient();
@@ -25,7 +27,7 @@ describe('application shell', () => {
 
     expect(screen.getByRole('heading', { name: 'Dashboard' })).toBeVisible();
     expect(screen.getAllByText('Guest')).toHaveLength(2);
-    expect(screen.getAllByText('Progress is temporary')).toHaveLength(2);
+    expect(screen.getByText('Progress is temporary')).toBeVisible();
 
     const navigationRegions = screen.getAllByRole('navigation', {
       name: /primary navigation/i,
@@ -46,5 +48,25 @@ describe('application shell', () => {
         within(navigation).getByRole('link', { name: 'Settings' }),
       ).toHaveAttribute('href', '/settings');
     }
+
+    expect(isGuestSession()).toBe(true);
+    const profileMenus = screen.getAllByRole('button', {
+      name: 'Open profile menu',
+    });
+    expect(profileMenus).toHaveLength(2);
+    expect(
+      screen.queryByRole('menuitem', { name: 'Exit guest' }),
+    ).not.toBeInTheDocument();
+
+    await user.click(profileMenus[0]!);
+
+    const exitAction = screen.getByRole('menuitem', { name: 'Exit guest' });
+
+    await user.click(exitAction);
+
+    expect(isGuestSession()).toBe(false);
+    expect(
+      await screen.findByRole('heading', { name: 'Train with purpose.' }),
+    ).toBeVisible();
   });
 });

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

@@ -3,12 +3,13 @@ import {
   Dumbbell,
   History,
   LayoutDashboard,
+  LogOut,
   Settings,
   UserRound,
   type LucideIcon,
 } from 'lucide-react';
 import { Link } from '@tanstack/react-router';
-import type { ReactNode } from 'react';
+import { useState, type ReactNode } from 'react';
 
 import wordmarkUrl from '../../assets/goforlift-wordmark.png';
 import { cn } from '../../lib/utils';
@@ -24,11 +25,13 @@ const navigationItems = [
 type ApplicationShellProps = {
   children: ReactNode;
   identity: ApplicationIdentity;
+  onExitGuest?: () => void;
 };
 
 export function ApplicationShell({
   children,
   identity,
+  onExitGuest,
 }: ApplicationShellProps) {
   return (
     <div
@@ -40,7 +43,11 @@ export function ApplicationShell({
       <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} />
+        <IdentitySummary
+          className="border-t px-5 py-5"
+          identity={identity}
+          onExitGuest={onExitGuest}
+        />
       </aside>
 
       <div className="min-w-0">
@@ -56,6 +63,7 @@ export function ApplicationShell({
             className="ml-auto max-w-[180px]"
             compact
             identity={identity}
+            onExitGuest={onExitGuest}
           />
         </header>
         <main
@@ -85,47 +93,89 @@ type IdentitySummaryProps = {
   identity: ApplicationIdentity;
   className?: string;
   compact?: boolean;
+  onExitGuest?: () => void;
 };
 
 function IdentitySummary({
   className,
   compact = false,
   identity,
+  onExitGuest,
 }: IdentitySummaryProps) {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+
   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;
 
+  const shouldShowGuestMenu =
+    isMenuOpen && isGuest && onExitGuest !== undefined;
+
   return (
     <section
       aria-label="Current identity"
-      className={cn('flex min-w-0 items-center gap-3', className)}
+      className={cn('relative min-w-0', 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
+      <button
+        aria-expanded={isMenuOpen}
+        aria-haspopup="menu"
+        aria-label="Open profile menu"
+        className={cn(
+          'flex w-full min-w-0 items-center gap-3 rounded-md text-left',
+          'transition-colors hover:bg-accent',
+          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+          compact ? 'p-1' : 'p-2',
+        )}
+        onClick={() => setIsMenuOpen((isOpen) => !isOpen)}
+        type="button"
+      >
+        {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 flex-1 text-left">
+          <p className="truncate text-sm font-medium">{label}</p>
+          {!compact && (
+            <p className="text-xs text-muted-foreground">{detail}</p>
+          )}
+        </div>
+      </button>
+
+      {shouldShowGuestMenu && (
+        <div
           className={cn(
-            'truncate text-xs text-muted-foreground',
-            compact && 'hidden sm:block',
+            'absolute z-40 min-w-44 rounded-md border bg-surface p-1 shadow-lg',
+            compact
+              ? 'right-0 top-full mt-2'
+              : 'bottom-full left-0 mb-2 w-full',
           )}
+          role="menu"
         >
-          {detail}
-        </p>
-      </div>
+          <button
+            className={cn(
+              'flex w-full items-center gap-2 rounded px-3 py-2 text-sm text-primary',
+              'transition-colors hover:bg-accent',
+              'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+            )}
+            onClick={onExitGuest}
+            role="menuitem"
+            type="button"
+          >
+            <LogOut aria-hidden="true" className="size-4" />
+            <span>Exit guest</span>
+          </button>
+        </div>
+      )}
     </section>
   );
 }

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

@@ -38,7 +38,10 @@ describe('dashboard access boundary', () => {
       await screen.findByRole('heading', { name: 'Dashboard' }),
     ).toBeVisible();
     expect(screen.getAllByText('Go For Lifter')).toHaveLength(2);
-    expect(screen.getAllByText('lifter@example.com')).toHaveLength(2);
+    expect(screen.getByText('lifter@example.com')).toBeVisible();
+    expect(
+      screen.queryByRole('button', { name: 'Exit guest' }),
+    ).not.toBeInTheDocument();
 
     for (const identity of screen.getAllByRole('region', {
       name: 'Current identity',
@@ -62,7 +65,7 @@ describe('dashboard access boundary', () => {
       await screen.findByRole('heading', { name: 'Dashboard' }),
     ).toBeVisible();
     expect(screen.getAllByText('Guest')).toHaveLength(2);
-    expect(screen.getAllByText('Progress is temporary')).toHaveLength(2);
+    expect(screen.getByText('Progress is temporary')).toBeVisible();
   });
 
   it('redirects an anonymous visitor to the welcome page', async () => {

apps/web/src/routes/_app.tsx

@@ -1,6 +1,7 @@
 // Protects and frames every route inside the signed-in or guest application area.
-import { createFileRoute, Outlet } from '@tanstack/react-router';
+import { createFileRoute, Outlet, useNavigate } from '@tanstack/react-router';
 
+import { clearGuestSession } from '../features/auth/guest-session';
 import { ApplicationShell } from '../features/dashboard/application-shell';
 import { DashboardAccessBoundary } from '../features/dashboard/dashboard-access-boundary';
 
@@ -9,10 +10,20 @@ export const Route = createFileRoute('/_app')({
 });
 
 function ProtectedApplicationLayout() {
+  const navigate = useNavigate();
+
+  function exitGuest() {
+    clearGuestSession();
+    void navigate({ to: '/', replace: true });
+  }
+
   return (
     <DashboardAccessBoundary>
       {(identity) => (
-        <ApplicationShell identity={identity}>
+        <ApplicationShell
+          identity={identity}
+          onExitGuest={identity.kind === 'guest' ? exitGuest : undefined}
+        >
           <Outlet />
         </ApplicationShell>
       )}