@vertesia/ui 1.5.0-dev.20260905.011013Z → 1.5.0-dev.20260910.052912Z

package/src/features/facets/utils/VInteractionFacet.tsx

@@ -1,11 +1,13 @@
-import { type FacetBucket, InteractionStatus } from '@vertesia/common';
+import type { FacetBucket } from '@vertesia/common';
 import { Badge, type FilterGroup } from '@vertesia/ui/core';
+import {
+    type InteractionDisplayRef,
+    InteractionStatusBadge,
+    resolveInteractionName,
+    splitInteractionType,
+} from '../../utils/interaction.js';
 
-export interface EnrichedFacetBucket extends FacetBucket {
-    name?: string;
-    status?: string;
-    version?: number;
-}
+export interface EnrichedFacetBucket extends FacetBucket, InteractionDisplayRef {}
 
 interface InteractionFacetProps {
     buckets: EnrichedFacetBucket[];
@@ -13,6 +15,11 @@ interface InteractionFacetProps {
     placeholder?: string;
 }
 
+/** The name this facet displays for a bucket — the same one the runs table shows for the run. */
+function bucketName(bucket: EnrichedFacetBucket | undefined, interactionId: string): string {
+    return resolveInteractionName(bucket, interactionId) ?? interactionId;
+}
+
 export function VInteractionFacet({ buckets, name, placeholder }: InteractionFacetProps): FilterGroup {
     const options = buckets.map((bucket) => ({
         label: `(${bucket.count})`,
@@ -26,38 +33,20 @@ export function VInteractionFacet({ buckets, name, placeholder }: InteractionFac
         type: 'select',
         labelRenderer: (interactionId: string) => {
             const bucket = buckets.find((b) => b._id === interactionId);
-            const displayName = bucket?.name || interactionId;
-
-            // Determine badge variant based on status
-            let badgeVariant: 'success' | 'info' | 'destructive' | 'default' = 'success';
-            if (bucket?.status) {
-                switch (bucket.status) {
-                    case InteractionStatus.published:
-                        badgeVariant = 'success';
-                        break;
-                    case InteractionStatus.archived:
-                        badgeVariant = 'destructive';
-                        break;
-                    case InteractionStatus.code:
-                        badgeVariant = 'info';
-                        break;
-                }
-            }
-
-            const badgeText =
-                bucket?.version && bucket?.status
-                    ? `v${bucket.version} ${bucket.status !== InteractionStatus.unknown ? bucket.status : ''}`
-                    : bucket?.status || (bucket?.version ? `v${bucket.version}` : '');
+            // Same split as the runs table: the `sys`/`app`/`tmp` namespace becomes its own badge
+            // instead of staying glued to the name.
+            const { type, label } = splitInteractionType(bucketName(bucket, interactionId));
 
             return (
                 <div className="w-full flex items-center justify-between">
                     <div className="flex flex-row flex-wrap items-center gap-2 min-w-0 flex-1">
-                        <span className="text-sm truncate">{displayName}</span>
-                        {badgeText && (
-                            <Badge variant={badgeVariant} className="text-xs w-fit">
-                                {badgeText}
+                        <span className="text-sm truncate">{label}</span>
+                        {type && (
+                            <Badge variant="secondary" className="text-xs w-fit">
+                                {type}
                             </Badge>
                         )}
+                        {bucket && <InteractionStatusBadge interaction={bucket} className="text-xs w-fit" />}
                     </div>
                     {(bucket?.count ?? 0) > 0 && <span className="ms-2 text-xs shrink-0">({bucket?.count})</span>}
                 </div>
@@ -65,8 +54,7 @@ export function VInteractionFacet({ buckets, name, placeholder }: InteractionFac
         },
         filterBy: (optionValue: string, searchText: string) => {
             const bucket = buckets.find((b) => b._id === optionValue);
-            const searchName = bucket?.name || optionValue;
-            return searchName.toLowerCase().includes(searchText.toLowerCase());
+            return bucketName(bucket, optionValue).toLowerCase().includes(searchText.toLowerCase());
         },
     };
 

package/src/features/facets/utils/VUserFacet.tsx

@@ -36,7 +36,7 @@ export function createUserFilterGroup({ buckets, name, placeholder }: UserFacetP
                     <div className="flex-1 min-w-0 flex items-center truncate">
                         <UserInfo userRef={userRef} showTitle={true} size="sm" />
                     </div>
-                    <span className="text-muted-foreground flex-shrink-0">({bucket?.count || 0})</span>
+                    <span className="text-muted flex-shrink-0">({bucket?.count || 0})</span>
                 </div>
             );
         },

package/src/features/layout/GenericPageNavHeader.tsx

@@ -148,6 +148,9 @@ export function GenericPageNavHeader({
     };
 
     const breadcrumbItems = buildBreadcrumbItems();
+    // The description tooltip trails the last element of the header: the breadcrumbs when there
+    // are any, otherwise the title.
+    const showDescriptionWithTitle = !!title && breadcrumbItems.length === 0;
 
     return (
         <div className={clsx('pb-0 ps-4 pe-2 py-2 flex flex-col', className)}>
@@ -161,7 +164,7 @@ export function GenericPageNavHeader({
                                 maxItems={4}
                             />
                         )}
-                        {description && (
+                        {description && !showDescriptionWithTitle && (
                             <VTooltip description={description}>
                                 <Info className="size-4 text-muted ms-4" />
                             </VTooltip>
@@ -170,6 +173,11 @@ export function GenericPageNavHeader({
                     {title && (
                         <div className="flex gap-2 items-center">
                             <h1 className="text-xl font-semibold break-all">{title}</h1>
+                            {description && showDescriptionWithTitle && (
+                                <VTooltip description={description}>
+                                    <Info className="size-4 text-muted" />
+                                </VTooltip>
+                            )}
                         </div>
                     )}
                 </div>

package/src/features/layout/NotFoundView.tsx

@@ -4,7 +4,7 @@ export function NotFoundView() {
     const { t } = useUITranslation();
     return (
         <div className="text-center pt-32">
-            <h1 className="text-3xl font-bold text-red-500">404</h1>
+            <h1 className="text-3xl font-bold text-destructive">404</h1>
             <p className="text-2xl">{t('layout.pageNotFound')}</p>
         </div>
     );

package/src/features/magic-pdf/AnnotatedImageSlider.tsx

@@ -326,9 +326,7 @@ function ImageTypeButton({ type, currentType, onClick, icon, tooltip }: ImageTyp
             aria-pressed={isSelected}
             className={clsx(
                 'p-1 rounded cursor-pointer transition-colors',
-                isSelected
-                    ? 'text-primary bg-primary/10'
-                    : 'text-muted-foreground hover:text-foreground hover:bg-muted',
+                isSelected ? 'text-primary bg-primary/10' : 'text-muted hover:text-foreground hover:bg-muted',
             )}
             onClick={onClick}
         >
@@ -355,25 +353,21 @@ function ZoomControls({ zoom, onZoomIn, onZoomOut, onFitToView, canZoomIn, canZo
                 variant="unstyled"
                 className={clsx(
                     'p-1 rounded cursor-pointer transition-colors',
-                    canZoomOut
-                        ? 'text-muted-foreground hover:text-foreground hover:bg-muted'
-                        : 'text-muted-foreground/40 cursor-not-allowed',
+                    canZoomOut ? 'text-muted hover:text-foreground hover:bg-muted' : 'text-muted/40 cursor-not-allowed',
                 )}
                 onClick={onZoomOut}
                 disabled={!canZoomOut}
             >
                 <Minus className="size-4" />
             </Button>
-            <span className="text-xs text-muted-foreground min-w-[32px] text-center">{zoom}%</span>
+            <span className="text-xs text-muted min-w-[32px] text-center">{zoom}%</span>
             <Button
                 title={t('pdf.zoomIn')}
                 tooltipPlacement="bottom"
                 variant="unstyled"
                 className={clsx(
                     'p-1 rounded cursor-pointer transition-colors',
-                    canZoomIn
-                        ? 'text-muted-foreground hover:text-foreground hover:bg-muted'
-                        : 'text-muted-foreground/40 cursor-not-allowed',
+                    canZoomIn ? 'text-muted hover:text-foreground hover:bg-muted' : 'text-muted/40 cursor-not-allowed',
                 )}
                 onClick={onZoomIn}
                 disabled={!canZoomIn}
@@ -386,9 +380,7 @@ function ZoomControls({ zoom, onZoomIn, onZoomOut, onFitToView, canZoomIn, canZo
                 variant="unstyled"
                 className={clsx(
                     'p-1 rounded cursor-pointer transition-colors',
-                    zoom !== DEFAULT_ZOOM
-                        ? 'text-muted-foreground hover:text-foreground hover:bg-muted'
-                        : 'text-muted-foreground/40',
+                    zoom !== DEFAULT_ZOOM ? 'text-muted hover:text-foreground hover:bg-muted' : 'text-muted/40',
                 )}
                 onClick={onFitToView}
             >
@@ -431,10 +423,10 @@ function PageThumbnail({ pageNumber, currentPage, aspectRatio, zoom, url, onSele
                 {url ? (
                     <img src={url} alt={`Page ${pageNumber}`} className="w-full" />
                 ) : (
-                    <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
+                    <Loader2 className="w-6 h-6 animate-spin text-muted" />
                 )}
             </Button>
-            <Center className="text-sm text-muted-foreground pt-1 font-semibold">{pageNumber}</Center>
+            <Center className="text-sm text-muted pt-1 font-semibold">{pageNumber}</Center>
         </div>
     );
 }
@@ -479,7 +471,7 @@ function PageNavigator({ currentPage, totalPages, onChange }: PageNavigatorProps
     };
 
     return (
-        <div className="flex items-center gap-1 text-xs text-muted-foreground">
+        <div className="flex items-center gap-1 text-xs text-muted">
             <span>{t('pdf.page')}</span>
             <input
                 ref={inputRef}

package/src/features/magic-pdf/ExtractedContentView.tsx

@@ -7,7 +7,7 @@ import type { ViewType } from './types';
 function LoadingSpinner({ className }: { className?: string }) {
     return (
         <div className={`flex items-center justify-center ${className || ''}`}>
-            <Loader2 className="w-6 h-6 animate-spin text-gray-400" />
+            <Loader2 className="w-6 h-6 animate-spin text-muted" />
         </div>
     );
 }
@@ -61,7 +61,7 @@ function JsonPageLayoutView({ pageNumber }: JsonPageLayoutViewProps) {
     }
 
     if (error) {
-        return <div className="px-4 py-2 text-red-500 text-sm">{error}</div>;
+        return <div className="px-4 py-2 text-destructive text-sm">{error}</div>;
     }
 
     return content ? <JSONCode className="w-full" data={content} /> : null;
@@ -96,13 +96,13 @@ function MarkdownPageView({ pageNumber }: MarkdownPageViewProps) {
         return (
             <div className="h-full flex flex-col items-center justify-center gap-2">
                 <LoadingSpinner />
-                <span className="text-sm text-muted-foreground">Loading...</span>
+                <span className="text-sm text-muted">Loading...</span>
             </div>
         );
     }
 
     if (error) {
-        return <div className="px-4 py-2 text-red-500 text-sm">{error}</div>;
+        return <div className="px-4 py-2 text-destructive text-sm">{error}</div>;
     }
 
     return (

package/src/features/magic-pdf/MagicPdfView.tsx

@@ -144,7 +144,7 @@ function MagicPdfViewImpl({ object, onClose }: _MagicPdfViewProps) {
                     <div className="flex items-center gap-x-2">
                         <DownloadPopover object={object} />
                     </div>
-                    <span className="text-xs text-muted-foreground">{t('pdf.pageOf', { pageNumber, totalPages })}</span>
+                    <span className="text-xs text-muted">{t('pdf.pageOf', { pageNumber, totalPages })}</span>
                     <div className="flex items-center gap-x-2">
                         {!!onClose && (
                             <Button variant="ghost" size="xs" onClick={onClose} title={t('pdf.close')}>

package/src/features/pdf-viewer/PdfPageRenderer.tsx

@@ -11,7 +11,7 @@ function LoadingSpinner({ className, size = 'md' }: { className?: string; size?:
     };
     return (
         <div className={`flex items-center justify-center ${className || ''}`}>
-            <Loader2 className={`${sizeClasses[size]} animate-spin text-muted-foreground`} />
+            <Loader2 className={`${sizeClasses[size]} animate-spin text-muted`} />
         </div>
     );
 }
@@ -327,7 +327,7 @@ function VirtualizedThumbnail({
             className="flex items-center justify-center bg-muted"
             style={{ height: placeholderHeight, width: width || '100%' }}
         >
-            <span className="text-muted-foreground text-xs">{pageNumber}</span>
+            <span className="text-muted text-xs">{pageNumber}</span>
         </div>
     );
 

package/src/features/pdf-viewer/PdfPageSlider.tsx

@@ -367,7 +367,7 @@ export function PdfPageSlider({
                             </Button>
                             <Center
                                 className={clsx(
-                                    'text-muted-foreground font-semibold',
+                                    'text-muted font-semibold',
                                     compact ? 'text-xs pt-0.5' : 'text-sm pt-1',
                                 )}
                             >
@@ -426,7 +426,7 @@ function PageNavigator({ currentPage, totalPages, onChange }: PageNavigatorProps
     };
 
     return (
-        <div className="flex items-center gap-1 text-xs text-muted-foreground">
+        <div className="flex items-center gap-1 text-xs text-muted">
             <span>{t('pdf.page')}</span>
             <input
                 ref={inputRef}
@@ -457,7 +457,7 @@ function ZoomControls({ zoom, onZoomIn, onZoomOut, onFitToView, canZoomIn, canZo
             <Button variant="ghost" size="xs" onClick={onZoomOut} isDisabled={!canZoomOut} title={t('pdf.zoomOut')}>
                 <Minus />
             </Button>
-            <span className="text-xs text-muted-foreground min-w-[32px] text-center">{zoom}%</span>
+            <span className="text-xs text-muted min-w-[32px] text-center">{zoom}%</span>
             <Button variant="ghost" size="xs" onClick={onZoomIn} isDisabled={!canZoomIn} title={t('pdf.zoomIn')}>
                 <Plus />
             </Button>
@@ -466,7 +466,7 @@ function ZoomControls({ zoom, onZoomIn, onZoomOut, onFitToView, canZoomIn, canZo
                 size="xs"
                 onClick={onFitToView}
                 title={t('pdf.fitToWidth')}
-                className={zoom === DEFAULT_ZOOM ? 'text-muted-foreground/40' : undefined}
+                className={zoom === DEFAULT_ZOOM ? 'text-muted/40' : undefined}
             >
                 <Maximize />
             </Button>

package/src/features/pdf-viewer/SimplePdfViewer.tsx

@@ -135,7 +135,7 @@ export function SimplePdfViewer({ object, url, source, className }: SimplePdfVie
                         title={t('pdf.fullscreen')}
                         tooltipPlacement="bottom"
                         variant="unstyled"
-                        className="p-1 rounded cursor-pointer transition-colors text-muted-foreground hover:text-foreground hover:bg-muted"
+                        className="p-1 rounded cursor-pointer transition-colors text-muted hover:text-foreground hover:bg-muted"
                         onClick={() => setIsFullscreen(true)}
                     >
                         <Maximize2 className="size-4" />

package/src/features/permissions/UserPermissionsProvider.test.tsx

@@ -0,0 +1,172 @@
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import { VertesiaClient } from '@vertesia/client';
+import type { AuthTokenPayload, SystemRoleDefinition } from '@vertesia/common';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { UserPermissionProvider } from './UserPermissionsProvider';
+
+const session = {
+    client: new VertesiaClient({ serverUrl: 'https://studio.example.test', storeUrl: 'https://store.example.test' }),
+    authToken: { sub: 'user-a', account_roles: [] } as unknown as AuthTokenPayload,
+    signOut: vi.fn(),
+};
+vi.mock('@vertesia/ui/session', () => ({ useUserSession: () => session }));
+
+function renderProvider() {
+    return render(
+        <UserPermissionProvider>
+            <div>Protected workspace</div>
+        </UserPermissionProvider>,
+    );
+}
+
+async function advance(ms: number) {
+    await act(async () => {
+        await vi.advanceTimersByTimeAsync(ms);
+    });
+}
+
+describe('role mapping recovery', () => {
+    beforeEach(() => {
+        vi.useFakeTimers();
+        vi.spyOn(Math, 'random').mockReturnValue(1);
+        session.authToken = { sub: 'user-a', account_roles: [] } as unknown as AuthTokenPayload;
+        session.signOut.mockClear();
+    });
+    afterEach(() => {
+        vi.useRealTimers();
+        vi.restoreAllMocks();
+    });
+
+    it.each([0, 502, 503, 504])(
+        'recovers automatically from status %s without rendering protected content early',
+        async (status) => {
+            const fetch = vi
+                .spyOn(session.client.iam.roles, 'listSystem')
+                .mockRejectedValueOnce(Object.assign(new Error('JWKSTimeout'), { status }))
+                .mockResolvedValue([]);
+            renderProvider();
+            expect(screen.queryByText('Protected workspace')).toBeNull();
+            await advance(0);
+            expect(screen.getByRole('status').textContent).toContain('automatically');
+            expect(screen.queryByText('JWKSTimeout')).toBeNull();
+            await advance(1_000);
+            expect(screen.getByText('Protected workspace')).toBeTruthy();
+            expect(fetch).toHaveBeenCalledTimes(2);
+            expect(screen.queryByRole('alert')).toBeNull();
+        },
+    );
+
+    it('stops after one minute and lets a manual retry recover without navigating', async () => {
+        const fetch = vi
+            .spyOn(session.client.iam.roles, 'listSystem')
+            .mockRejectedValue(Object.assign(new Error('JWKSTimeout'), { status: 503 }));
+        const location = window.location.href;
+        renderProvider();
+        await advance(60_000);
+        expect(screen.getByRole('alert').textContent).toContain('couldn’t connect');
+        const calls = fetch.mock.calls.length;
+        await advance(60_000);
+        expect(fetch).toHaveBeenCalledTimes(calls);
+        fetch.mockResolvedValue([]);
+        fireEvent.click(screen.getByRole('button', { name: 'Try again' }));
+        await advance(0);
+        expect(screen.getByText('Protected workspace')).toBeTruthy();
+        expect(window.location.href).toBe(location);
+    });
+
+    it('does not restart recovery when authentication re-decodes the same JWT', async () => {
+        const fetch = vi.spyOn(session.client.iam.roles, 'listSystem').mockImplementation(async () => {
+            session.authToken = { ...session.authToken };
+            throw Object.assign(new Error('Unavailable'), { status: 503 });
+        });
+        renderProvider();
+        await advance(60_000);
+        expect(screen.getByRole('button', { name: 'Try again' })).toBeTruthy();
+        const calls = fetch.mock.calls.length;
+        await advance(10_000);
+        expect(fetch).toHaveBeenCalledTimes(calls);
+        fetch.mockImplementation(async () => {
+            session.authToken = { ...session.authToken };
+            return [];
+        });
+        fireEvent.click(screen.getByRole('button', { name: 'Try again' }));
+        await advance(0);
+        expect(screen.getByText('Protected workspace')).toBeTruthy();
+        expect(fetch).toHaveBeenCalledTimes(calls + 1);
+    });
+
+    it('bounds a hung request and ignores its late success', async () => {
+        let resolve!: (roles: SystemRoleDefinition[]) => void;
+        const fetch = vi.spyOn(session.client.iam.roles, 'listSystem').mockImplementation(
+            () =>
+                new Promise((done) => {
+                    resolve = done;
+                }),
+        );
+        renderProvider();
+        await advance(60_000);
+        expect(fetch.mock.calls[0][0]?.signal?.aborted).toBe(true);
+        await act(async () => resolve([]));
+        expect(screen.queryByText('Protected workspace')).toBeNull();
+        expect(screen.getByRole('button', { name: 'Try again' })).toBeTruthy();
+    });
+
+    it.each([401, 403, 400, 500])('does not automatically retry status %s', async (status) => {
+        const fetch = vi
+            .spyOn(session.client.iam.roles, 'listSystem')
+            .mockRejectedValue(Object.assign(new Error('Request failed'), { status }));
+        renderProvider();
+        await advance(60_000);
+        expect(fetch).toHaveBeenCalledTimes(1);
+        expect(screen.queryByText('Protected workspace')).toBeNull();
+        if (status === 401 || status === 403) {
+            fireEvent.click(screen.getByRole('button', { name: 'Use a different account' }));
+            expect(session.signOut).toHaveBeenCalledOnce();
+        }
+    });
+
+    it('cancels retries on unmount', async () => {
+        const fetch = vi
+            .spyOn(session.client.iam.roles, 'listSystem')
+            .mockRejectedValue(Object.assign(new Error('Unavailable'), { status: 503 }));
+        const view = renderProvider();
+        await advance(0);
+        view.unmount();
+        await advance(60_000);
+        expect(fetch).toHaveBeenCalledTimes(1);
+        expect(fetch.mock.calls[0][0]?.signal?.aborted).toBe(true);
+    });
+
+    it('ignores the previous session’s pending response after a token change', async () => {
+        let resolveOld!: (roles: SystemRoleDefinition[]) => void;
+        const fetch = vi
+            .spyOn(session.client.iam.roles, 'listSystem')
+            .mockImplementationOnce(
+                () =>
+                    new Promise((done) => {
+                        resolveOld = done;
+                    }),
+            )
+            .mockRejectedValue(Object.assign(new Error('Forbidden'), { status: 403 }));
+        const view = renderProvider();
+        session.authToken = { sub: 'user-b', account_roles: [] } as unknown as AuthTokenPayload;
+        view.rerender(
+            <UserPermissionProvider>
+                <div>Protected workspace</div>
+            </UserPermissionProvider>,
+        );
+        await advance(0);
+        await act(async () => resolveOld([]));
+        expect(fetch.mock.calls[0][0]?.signal?.aborted).toBe(true);
+        expect(screen.queryByText('Protected workspace')).toBeNull();
+        expect(screen.getByRole('alert').textContent).toContain('Access Denied');
+    });
+
+    it('uses permissions embedded in the token without fetching mappings', () => {
+        session.authToken = { ...session.authToken, permissions: [] };
+        const fetch = vi.spyOn(session.client.iam.roles, 'listSystem');
+        renderProvider();
+        expect(screen.getByText('Protected workspace')).toBeTruthy();
+        expect(fetch).not.toHaveBeenCalled();
+    });
+});

package/src/features/permissions/UserPermissionsProvider.tsx

@@ -1,9 +1,10 @@
 import { type AuthTokenPayload, type Permission, PrincipalType, type SystemRoleDefinition } from '@vertesia/common';
-import { ErrorBox, errorMessage, useFetch } from '@vertesia/ui/core';
+import { Button, errorMessage, Spinner } from '@vertesia/ui/core';
 import { useUITranslation } from '@vertesia/ui/i18n';
 import { useUserSession } from '@vertesia/ui/session';
 import { createContext, useContext, useMemo } from 'react';
 import { isAnyOf } from './helpers';
+import { roleMappingsErrorStatus, useRoleMappings } from './useRoleMappings';
 
 type ListRolesResponse = SystemRoleDefinition[];
 
@@ -68,35 +69,81 @@ export function useUserPermissions() {
 
 interface UserPermissionProviderProps {
     children: React.ReactNode;
+    loadingIcon?: React.ReactNode;
 }
-export function UserPermissionProvider({ children }: UserPermissionProviderProps) {
+export function UserPermissionProvider({ children, loadingIcon }: UserPermissionProviderProps) {
     const { t } = useUITranslation();
     const session = useUserSession();
     const authToken = session.authToken;
-    const shouldFetchRoleMappings = Boolean(authToken && !authToken.permissions);
-    const { data, error, isLoading } = useFetch<ListRolesResponse | undefined>(() => {
-        if (shouldFetchRoleMappings) {
-            return session.client.iam.roles.listSystem();
-        }
-        return Promise.resolve(undefined);
-    }, [session.client, authToken, shouldFetchRoleMappings]);
+    const { state, retry } = useRoleMappings(session.client, authToken);
 
     const perms = useMemo(() => {
-        if (authToken) {
-            if (authToken.permissions || !shouldFetchRoleMappings) {
-                return new UserPermissions(authToken);
-            }
-            if (data && !isLoading) {
-                return new UserPermissions(authToken, data);
-            }
-        } else {
-            return undefined;
+        if (!authToken) return undefined;
+        if (authToken.permissions) {
+            return new UserPermissions(authToken);
+        }
+        if (state.status === 'ready') {
+            return new UserPermissions(authToken, state.roles);
         }
         return undefined;
-    }, [authToken, data, isLoading, shouldFetchRoleMappings]);
+    }, [authToken, state]);
 
-    if (error) {
-        return <ErrorBox title={t('store.failedToFetchRoleMappings')}>{errorMessage(error)}</ErrorBox>;
+    if (authToken && !perms) {
+        const failed = state.status === 'error';
+        const status = failed ? roleMappingsErrorStatus(state.error) : undefined;
+        const needsSignIn = status === 401;
+        const denied = status === 403;
+        const title = needsSignIn
+            ? t('auth.recovery.credential.title')
+            : denied
+              ? t('shell.accessDenied')
+              : failed
+                ? t('permissions.connectionFailed')
+                : t('permissions.connecting');
+        return (
+            <div className="flex min-h-dvh items-center justify-center bg-background px-6 text-foreground">
+                <div className="w-full max-w-md space-y-6 text-center">
+                    <div aria-hidden="true" className="flex justify-center">
+                        {loadingIcon || (!failed && <Spinner size="2xl" className="text-primary" />)}
+                    </div>
+                    <div
+                        role={failed ? 'alert' : 'status'}
+                        aria-live={failed ? 'assertive' : 'polite'}
+                        className="space-y-2"
+                    >
+                        <h1 className="text-xl font-semibold">{title}</h1>
+                        <p className="text-muted">
+                            {needsSignIn
+                                ? t('auth.recovery.credential.body')
+                                : denied
+                                  ? t('permissions.accessDenied')
+                                  : failed
+                                    ? t('permissions.tryAgainLater')
+                                    : state.status === 'retrying'
+                                      ? t('permissions.retrying')
+                                      : t('permissions.loadingPermissions')}
+                        </p>
+                    </div>
+                    {failed && (
+                        <>
+                            <Button variant="outline" onClick={needsSignIn || denied ? () => session.signOut() : retry}>
+                                {needsSignIn || denied
+                                    ? t('auth.recovery.useDifferentAccount')
+                                    : t('auth.recovery.tryAgain')}
+                            </Button>
+                            {state.error != null && (
+                                <details className="text-start text-sm text-muted">
+                                    <summary className="cursor-pointer">{t('auth.recovery.technicalDetails')}</summary>
+                                    <pre className="mt-2 max-h-48 overflow-auto whitespace-pre-wrap wrap-break-word">
+                                        {errorMessage(state.error)}
+                                    </pre>
+                                </details>
+                            )}
+                        </>
+                    )}
+                </div>
+            </div>
+        );
     }
 
     return perms && <UserPermissionsContext.Provider value={perms}>{children}</UserPermissionsContext.Provider>;