@vertesia/ui 1.2.0 → 1.4.0-dev.20260615.042549Z

package/src/features/user/UserInfo.test.tsx

@@ -0,0 +1,88 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { I18nProvider } from '../../i18n/index.js';
+import { UserInfo } from './UserInfo';
+
+const { retrieveApiKey, retrieveGroup, retrieveUser } = vi.hoisted(() => ({
+    retrieveApiKey: vi.fn(),
+    retrieveGroup: vi.fn(),
+    retrieveUser: vi.fn(),
+}));
+
+vi.mock('@vertesia/ui/session', () => ({
+    useUserSession: () => ({
+        client: {
+            apikeys: {
+                retrieve: retrieveApiKey,
+            },
+            iam: {
+                groups: {
+                    retrieve: retrieveGroup,
+                },
+            },
+            users: {
+                retrieve: retrieveUser,
+            },
+        },
+    }),
+}));
+
+describe('UserInfo', () => {
+    beforeEach(() => {
+        vi.clearAllMocks();
+    });
+
+    it('renders a missing API key as an unknown principal and caches the 404', async () => {
+        const error = Object.assign(new Error('Not Found'), { status: 404 });
+        retrieveApiKey.mockRejectedValueOnce(error);
+
+        render(
+            <I18nProvider lng="en">
+                <UserInfo userRef="apikey:missing-key-for-test" showTitle />
+                <UserInfo userRef="apikey:missing-key-for-test" showTitle />
+            </I18nProvider>,
+        );
+
+        await waitFor(() => {
+            expect(screen.getAllByText('Unknown User')).toHaveLength(2);
+        });
+        expect(screen.queryByText('Failed to fetch the apikey')).toBeNull();
+        expect(retrieveApiKey).toHaveBeenCalledTimes(1);
+    });
+
+    it('renders a missing user as an unknown principal and caches the 404', async () => {
+        const error = Object.assign(new Error('Not Found'), { status: 404 });
+        retrieveUser.mockRejectedValueOnce(error);
+
+        render(
+            <I18nProvider lng="en">
+                <UserInfo userRef="user:missing-user-for-test" showTitle />
+                <UserInfo userRef="user:missing-user-for-test" showTitle />
+            </I18nProvider>,
+        );
+
+        await waitFor(() => {
+            expect(screen.getAllByText('Unknown User')).toHaveLength(2);
+        });
+        expect(screen.queryByText('Failed to fetch user')).toBeNull();
+        expect(retrieveUser).toHaveBeenCalledTimes(1);
+    });
+
+    it('renders a missing group as an unknown principal and caches the 404', async () => {
+        const error = Object.assign(new Error('Not Found'), { status: 404 });
+        retrieveGroup.mockRejectedValueOnce(error);
+
+        render(
+            <I18nProvider lng="en">
+                <UserInfo userRef="group:missing-group-for-test" showTitle />
+                <UserInfo userRef="group:missing-group-for-test" showTitle />
+            </I18nProvider>,
+        );
+
+        await waitFor(() => {
+            expect(screen.getAllByText('Unknown User')).toHaveLength(2);
+        });
+        expect(screen.queryByText('Failed to fetch group')).toBeNull();
+        expect(retrieveGroup).toHaveBeenCalledTimes(1);
+    });
+});

package/src/features/user/UserInfo.tsx

@@ -1,19 +1,25 @@
-import { ApiKey, PrincipalType, User, UserGroup } from "@vertesia/common";
-import { Avatar, Popover, PopoverContent, PopoverTrigger, Table, useFetch } from "@vertesia/ui/core";
-import { useUserSession } from "@vertesia/ui/session";
-import { Users, Users2 } from "lucide-react";
-import { ReactNode } from "react";
-import { useUITranslation } from '../../i18n/index.js';
+import { type ApiKey, PrincipalType, type User, type UserGroup } from '@vertesia/common';
+import { Avatar, errorMessage, Popover, PopoverContent, PopoverTrigger, Table, useFetch } from '@vertesia/ui/core';
+import { useUITranslation } from '@vertesia/ui/i18n';
+import { useUserSession } from '@vertesia/ui/session';
+import { Users, Users2 } from 'lucide-react';
+import type { ReactNode } from 'react';
 
 const USER_CACHE: Record<string, Promise<User>> = {};
 const GROUP_CACHE: Record<string, Promise<UserGroup>> = {};
 const APIKEY_CACHE: Record<string, Promise<ApiKey>> = {};
 
+function isNotFoundError(error: unknown) {
+    return typeof error === 'object' && error !== null && 'status' in error && error.status === 404;
+}
+
 function cachedFetch<T>(cache: Record<string, Promise<T>>, key: string, fetcher: () => Promise<T>): Promise<T> {
     let entry = cache[key];
     if (!entry) {
         entry = fetcher().catch((err) => {
-            delete cache[key]; // evict on failure so retries work
+            if (!isNotFoundError(err)) {
+                delete cache[key]; // evict transient failures so retries work
+            }
             throw err;
         });
         cache[key] = entry;
@@ -29,7 +35,10 @@ function cachedFetch<T>(cache: Record<string, Promise<T>>, key: string, fetcher:
 export function useFetchUserInfo(userId: string) {
     const { client } = useUserSession();
 
-    return useFetch(() => cachedFetch(USER_CACHE, userId, () => client.users.retrieve(userId)), [userId]);
+    return useFetch(() => cachedFetch(USER_CACHE, userId, () => client.users.retrieve(userId)), {
+        deps: [userId],
+        condition: () => !!userId,
+    });
 }
 
 /**
@@ -39,7 +48,10 @@ export function useFetchUserInfo(userId: string) {
 export function useFetchGroupInfo(groupId: string) {
     const { client } = useUserSession();
 
-    return useFetch(() => cachedFetch(GROUP_CACHE, groupId, () => client.iam.groups.retrieve(groupId)), [groupId]);
+    return useFetch(() => cachedFetch(GROUP_CACHE, groupId, () => client.iam.groups.retrieve(groupId)), {
+        deps: [groupId],
+        condition: () => !!groupId,
+    });
 }
 
 /**
@@ -49,11 +61,14 @@ export function useFetchGroupInfo(groupId: string) {
 export function useFetchApiKeyInfo(keyId: string) {
     const { client } = useUserSession();
 
-    return useFetch(() => cachedFetch(APIKEY_CACHE, keyId, () => client.apikeys.retrieve(keyId)), [keyId]);
+    return useFetch(() => cachedFetch(APIKEY_CACHE, keyId, () => client.apikeys.retrieve(keyId)), {
+        deps: [keyId],
+        condition: () => !!keyId,
+    });
 }
 
 function AvatarPlaceholder() {
-    return <div className='size-8' />
+    return <div className="size-8" />;
 }
 
 interface InfoProps {
@@ -61,67 +76,76 @@ interface InfoProps {
     size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 }
 
-function SystemAvatar({ showTitle = false, size = "md" }: InfoProps) {
+function SystemAvatar({ showTitle = false, size = 'md' }: InfoProps) {
     const { t } = useUITranslation();
     return (
         <UserPopoverPanel title={t('user.systemUser')} description={t('user.systemUserDescription')}>
             <div className="flex gap-2 items-center">
                 <Avatar src="/icon.svg" size={size} />
-                {showTitle && <div className="text-sm font-semibold pl-2">{t('user.systemUser')}</div>}
+                {showTitle && <div className="text-sm font-semibold ps-2">{t('user.systemUser')}</div>}
             </div>
         </UserPopoverPanel>
-    )
+    );
 }
 
-function ProjectMembersAvatar({ showTitle = false, size = "md" }: InfoProps) {
+function ProjectMembersAvatar({ showTitle = false, size = 'md' }: InfoProps) {
     const { t } = useUITranslation();
     return (
         <UserPopoverPanel title={t('user.allProjectMembers')} description={t('user.allProjectMembersDescription')}>
             <div className="flex gap-2 items-center">
                 <Users2 className="size-4" size={size} />
-                {showTitle && <div className="text-sm font-semibold pl-2">{t('user.allProjectMembers')}</div>}
+                {showTitle && <div className="text-sm font-semibold ps-2">{t('user.allProjectMembers')}</div>}
             </div>
         </UserPopoverPanel>
-    )
+    );
 }
 interface ServiceInfoProps extends InfoProps {
     accountId: string;
 }
-function ServiceAccountAvatar({ accountId, showTitle = false, size = "md" }: ServiceInfoProps) {
+function ServiceAccountAvatar({ accountId, showTitle = false, size = 'md' }: ServiceInfoProps) {
     const { t } = useUITranslation();
     const _type = accountId.split(':')[0];
     const _accountId = accountId.split(':')[1];
     const description = (
         <>
             <div>{t('user.serviceAccountDescription')}</div>
-            <div className="text-muted text-sm"><span className="font-semibold">Type:</span> {_type}</div>
-            <div className="text-muted text-sm"><span className="font-semibold">ID:</span> {_accountId}</div>
+            <div className="text-muted text-sm">
+                <span className="font-semibold">Type:</span> {_type}
+            </div>
+            <div className="text-muted text-sm">
+                <span className="font-semibold">ID:</span> {_accountId}
+            </div>
         </>
-    )
+    );
 
     return (
         <UserPopoverPanel title={t('user.serviceAccount')} description={description}>
             <div className="flex flex-row items-center gap-2">
                 <Avatar src="/cloud.svg" name="SA" color="bg-amber-500" className="px-[5px] text-white" size={size} />
-                {showTitle && <div className="text-sm font-semibold pl-2 truncate">{t('user.serviceAccount')} : ~{_accountId.slice(-6)}</div>}
+                {showTitle && (
+                    <div className="text-sm font-semibold ps-2 truncate">
+                        {t('user.serviceAccount')} : ~{_accountId.slice(-6)}
+                    </div>
+                )}
             </div>
         </UserPopoverPanel>
     );
 }
 
-
 interface EmailAgentAvatarProps extends InfoProps {
     email: string;
 }
-function EmailAgentAvatar({ email, showTitle = false, size = "md" }: EmailAgentAvatarProps) {
+function EmailAgentAvatar({ email, showTitle = false, size = 'md' }: EmailAgentAvatarProps) {
     const { t } = useUITranslation();
 
     const description = (
         <>
             <div>{t('user.serviceAccountDescription')}</div>
-            <div className="text-muted text-sm"><span className="font-semibold">Email:</span> {email}</div>
+            <div className="text-muted text-sm">
+                <span className="font-semibold">Email:</span> {email}
+            </div>
         </>
-    )
+    );
     return (
         <UserPopoverPanel title={'Email Agent'} description={description}>
             <div className="flex items-center gap-2">
@@ -132,11 +156,7 @@ function EmailAgentAvatar({ email, showTitle = false, size = "md" }: EmailAgentA
                         className="px-[5px] text-white border-2 border-white dark:border-gray-800"
                         size={size}
                     />
-                    <Avatar
-                        name={email}
-                        size={size}
-                        className="border-2 border-white dark:border-gray-800"
-                    />
+                    <Avatar name={email} size={size} className="border-2 border-white dark:border-gray-800" />
                 </div>
                 {showTitle && (
                     <div className="text-sm font-semibold truncate">
@@ -149,12 +169,19 @@ function EmailAgentAvatar({ email, showTitle = false, size = "md" }: EmailAgentA
 }
 
 interface AgentAvatarProps extends InfoProps {
-    agentId: string;  // Format: accountId:projectId:timestamp
+    agentId: string; // Format: accountId:projectId:timestamp
     onBehalfOfType?: string;
     onBehalfOfId?: string;
     isScheduleAgent?: boolean;
 }
-function AgentAvatar({ agentId, onBehalfOfType, onBehalfOfId, showTitle = false, size = "md", isScheduleAgent = false }: AgentAvatarProps) {
+function AgentAvatar({
+    agentId,
+    onBehalfOfType,
+    onBehalfOfId,
+    showTitle = false,
+    size = 'md',
+    isScheduleAgent = false,
+}: AgentAvatarProps) {
     const { t } = useUITranslation();
     // Fetch user info - must call hooks unconditionally per React rules
     const shouldFetchUser = onBehalfOfType === 'user' && onBehalfOfId;
@@ -169,29 +196,29 @@ function AgentAvatar({ agentId, onBehalfOfType, onBehalfOfId, showTitle = false,
 
     // Determine title and description
     const shortenedAgentId = agentId.slice(-6);
-    const title = user ? t('user.agentOnBehalfOf') : apiKey ? t('user.agentOnBehalfOfApiKey') : t('user.serviceAccount') + `~${shortenedAgentId}`;
+    const title = user
+        ? t('user.agentOnBehalfOf')
+        : apiKey
+          ? t('user.agentOnBehalfOfApiKey')
+          : `${t('user.serviceAccount')}~${shortenedAgentId}`;
     const _title = isScheduleAgent ? t('user.schedule', { title }) : title;
 
     const description = (
         <div className="space-y-2">
             {user && (
-                <>
-                    <div className="flex items-center gap-2">
-                        <Avatar src={user.picture} name={user.name} size="sm" />
-                        <div>
-                            <div className="font-medium">{user.name || user.email}</div>
-                            {user.email && user.name && <div className="text-xs text-muted">{user.email}</div>}
-                        </div>
+                <div className="flex items-center gap-2">
+                    <Avatar src={user.picture} name={user.name} size="sm" />
+                    <div>
+                        <div className="font-medium">{user.name || user.email}</div>
+                        {user.email && user.name && <div className="text-xs text-muted">{user.email}</div>}
                     </div>
-                </>
+                </div>
             )}
             {apiKey && (
-                <>
-                    <div>
-                        <div className="font-medium">{apiKey.name}</div>
-                        <div className="text-xs text-muted-foreground">Key ID: {apiKey.id}</div>
-                    </div>
-                </>
+                <div>
+                    <div className="font-medium">{apiKey.name}</div>
+                    <div className="text-xs text-muted-foreground">Key ID: {apiKey.id}</div>
+                </div>
             )}
             {!user && !apiKey && (
                 <>
@@ -243,11 +270,30 @@ function AgentAvatar({ agentId, onBehalfOfType, onBehalfOfId, showTitle = false,
 
 interface ErrorInfoProps extends InfoProps {
     title?: string;
-    error: Error | string;
+    error: unknown;
 }
-function ErrorAvatar({ title = "Error", error, showTitle = false, size = "md" }: ErrorInfoProps) {
+function ErrorAvatar({ title = 'Error', error, showTitle = false, size = 'md' }: ErrorInfoProps) {
+    return (
+        <UnknownAvatar
+            title={title}
+            message={errorMessage(error)}
+            color="bg-red-500"
+            showTitle={showTitle}
+            size={size}
+        />
+    );
+}
+
+function MissingPrincipalAvatar({ showTitle = false, size = 'md', color }: InfoProps & { color?: string }) {
+    const { t } = useUITranslation();
     return (
-        <UnknownAvatar title={title} message={typeof error === 'string' ? error : error.message} color="bg-red-500" showTitle={showTitle} size={size} />
+        <UnknownAvatar
+            title={t('user.unknownUser')}
+            message={t('user.unknownUserDescription')}
+            color={color}
+            showTitle={showTitle}
+            size={size}
+        />
     );
 }
 
@@ -265,10 +311,17 @@ interface UserInfoProps extends InfoProps {
      */
     userRef: string | undefined;
 }
-export function UserInfo({ userRef, showTitle = false, size = "md" }: UserInfoProps) {
+export function UserInfo({ userRef, showTitle = false, size = 'md' }: UserInfoProps) {
     const { t } = useUITranslation();
     if (!userRef) {
-        return <UnknownAvatar title={t('user.unknownUser')} message={t('user.unknownUserDescription')} showTitle={showTitle} size={size} />
+        return (
+            <UnknownAvatar
+                title={t('user.unknownUser')}
+                message={t('user.unknownUserDescription')}
+                showTitle={showTitle}
+                size={size}
+            />
+        );
     }
 
     const parts = userRef.split(':');
@@ -276,16 +329,16 @@ export function UserInfo({ userRef, showTitle = false, size = "md" }: UserInfoPr
 
     switch (type) {
         case PrincipalType.User:
-            return <UserAvatar userId={parts[1]} showTitle={showTitle} size={size} />
+            return <UserAvatar userId={parts[1]} showTitle={showTitle} size={size} />;
 
         case PrincipalType.Group:
-            return <GroupAvatar userId={parts[1]} showTitle={showTitle} size={size} />
+            return <GroupAvatar userId={parts[1]} showTitle={showTitle} size={size} />;
 
-        case "system":
-            return <SystemAvatar showTitle={showTitle} size={size} />
+        case 'system':
+            return <SystemAvatar showTitle={showTitle} size={size} />;
 
         case PrincipalType.ServiceAccount:
-            return <ServiceAccountAvatar accountId={parts.slice(1).join(':')} showTitle={showTitle} size={size} />
+            return <ServiceAccountAvatar accountId={parts.slice(1).join(':')} showTitle={showTitle} size={size} />;
 
         case PrincipalType.Agent: {
             // Parse agent format: agent:accountId:projectId:timestamp[:on_behalf_type:on_behalf_id]
@@ -312,13 +365,15 @@ export function UserInfo({ userRef, showTitle = false, size = "md" }: UserInfoPr
                 onBehalfOfId = parts[5];
             }
 
-            return <AgentAvatar
-                agentId={agentId}
-                onBehalfOfType={onBehalfOfType}
-                onBehalfOfId={onBehalfOfId}
-                showTitle={showTitle}
-                size={size}
-            />
+            return (
+                <AgentAvatar
+                    agentId={agentId}
+                    onBehalfOfType={onBehalfOfType}
+                    onBehalfOfId={onBehalfOfId}
+                    showTitle={showTitle}
+                    size={size}
+                />
+            );
         }
 
         case PrincipalType.Schedule: {
@@ -328,36 +383,43 @@ export function UserInfo({ userRef, showTitle = false, size = "md" }: UserInfoPr
             const onBehalfOfType = parts[6]; // e.g. "user"
             const onBehalfOfId = parts[7]; // e.g. userId
 
-            return <AgentAvatar
-                agentId={agentId}
-                onBehalfOfType={onBehalfOfType}
-                onBehalfOfId={onBehalfOfId}
-                showTitle={showTitle}
-                size={size}
-                isScheduleAgent={true}
-            />
+            return (
+                <AgentAvatar
+                    agentId={agentId}
+                    onBehalfOfType={onBehalfOfType}
+                    onBehalfOfId={onBehalfOfId}
+                    showTitle={showTitle}
+                    size={size}
+                    isScheduleAgent={true}
+                />
+            );
         }
 
-        case "email": {
+        case 'email': {
             // format: email:userEmail
-            return <EmailAgentAvatar email={parts[1]} showTitle={showTitle} size={size} />
-
+            return <EmailAgentAvatar email={parts[1]} showTitle={showTitle} size={size} />;
         }
 
-
         case PrincipalType.ApiKey:
-            return <ApiKeyAvatar keyId={parts[1]} size={size} showTitle={showTitle} />
+            return <ApiKeyAvatar keyId={parts[1]} size={size} showTitle={showTitle} />;
 
-        case "project":
+        case 'project':
             // Only the wildcard "project:*" is a valid synthetic principal (all project members).
             // Any other project:<...> shape falls through to the error default.
-            if (parts[1] === "*") {
-                return <ProjectMembersAvatar showTitle={showTitle} size={size} />
+            if (parts[1] === '*') {
+                return <ProjectMembersAvatar showTitle={showTitle} size={size} />;
             }
             break;
 
         default:
-            return <ErrorAvatar title={t('user.unknownUser')} error={`Invalid user ref type: ${type}`} showTitle={showTitle} size={size} />
+            return (
+                <ErrorAvatar
+                    title={t('user.unknownUser')}
+                    error={`Invalid user ref type: ${type}`}
+                    showTitle={showTitle}
+                    size={size}
+                />
+            );
     }
 }
 
@@ -366,30 +428,33 @@ interface UnknownAvatarProps extends InfoProps {
     message: ReactNode;
     color?: string;
 }
-function UnknownAvatar({ title, message, color, size = "md", showTitle = false }: UnknownAvatarProps) {
+function UnknownAvatar({ title, message, color, size = 'md', showTitle = false }: UnknownAvatarProps) {
     return (
         <UserPopoverPanel title={title} description={message}>
             <div className="flex flex-row items-center gap-2">
                 <Avatar color={color} size={size} />
-                {showTitle && <div className="text-sm font-semibold pl-1">{title}</div>}
+                {showTitle && <div className="text-sm font-semibold ps-1">{title}</div>}
             </div>
         </UserPopoverPanel>
-    )
+    );
 }
 
 interface GroupAvatarProps extends InfoProps {
     userId: string;
 }
-function GroupAvatar({ userId, showTitle = false, size = "md" }: GroupAvatarProps) {
+function GroupAvatar({ userId, showTitle = false, size = 'md' }: GroupAvatarProps) {
     const { t } = useUITranslation();
     const { data: group, error } = useFetchGroupInfo(userId);
 
     if (error) {
-        return <ErrorAvatar title={t('user.failedToFetchGroup')} error={error} showTitle={showTitle} size={size} />
+        if (isNotFoundError(error)) {
+            return <MissingPrincipalAvatar showTitle={showTitle} size={size} color="bg-indigo-500" />;
+        }
+        return <ErrorAvatar title={t('user.failedToFetchGroup')} error={error} showTitle={showTitle} size={size} />;
     }
 
     if (!group) {
-        return <AvatarPlaceholder />
+        return <AvatarPlaceholder />;
     }
 
     const description = (
@@ -398,70 +463,87 @@ function GroupAvatar({ userId, showTitle = false, size = "md" }: GroupAvatarProp
             <div className="text-xs text-muted-foreground">{t('user.groupId', { id: group.id })}</div>
             {group.tags && group.tags.length > 0 && (
                 <div className="flex flex-wrap gap-1">
-                    {group.tags.map(tag => (
-                        <span key={tag} className="px-1.5 py-0.5 bg-muted rounded text-xs">{tag}</span>
+                    {group.tags.map((tag) => (
+                        <span key={tag} className="px-1.5 py-0.5 bg-muted rounded text-xs">
+                            {tag}
+                        </span>
                     ))}
                 </div>
             )}
         </div>
-    )
+    );
 
     return (
         <UserPopoverPanel title={group.name || t('user.unnamedGroup')} description={description}>
             <div className="flex flex-row items-center gap-2">
                 <Users className="size-6 text-indigo-500" size={size} />
-                {showTitle && <div className="text-sm font-semibold pl-2">{group.name || t('user.unnamedGroup')}</div>}
+                {showTitle && <div className="text-sm font-semibold ps-2">{group.name || t('user.unnamedGroup')}</div>}
             </div>
         </UserPopoverPanel>
-    )
+    );
 }
 
 interface UserAvatarProps extends InfoProps {
     userId: string;
 }
-function UserAvatar({ userId, showTitle = false, size = "md" }: UserAvatarProps) {
+function UserAvatar({ userId, showTitle = false, size = 'md' }: UserAvatarProps) {
     const { t } = useUITranslation();
     const { data: user, error } = useFetchUserInfo(userId);
 
     if (error) {
-        return <ErrorAvatar title={t('user.failedToFetchUser')} error={error} showTitle={showTitle} size={size} />
+        if (isNotFoundError(error)) {
+            return <MissingPrincipalAvatar showTitle={showTitle} size={size} color="bg-indigo-500" />;
+        }
+        return <ErrorAvatar title={t('user.failedToFetchUser')} error={error} showTitle={showTitle} size={size} />;
     }
 
     if (!user) {
-        return <AvatarPlaceholder />
+        return <AvatarPlaceholder />;
     }
 
     const description = (
-        <div className="truncate" title={user.email}>{user.email}</div>
-    )
+        <div className="truncate" title={user.email}>
+            {user.email}
+        </div>
+    );
 
     return (
-        <UserPopoverPanel title={user.name || user.email || user.username || t('user.unknown')} description={description}>
+        <UserPopoverPanel
+            title={user.name || user.email || user.username || t('user.unknown')}
+            description={description}
+        >
             <div className="flex flex-row items-center gap-2">
                 <Avatar src={user.picture} name={user.name} color="bg-indigo-500" size={size} />
-                {showTitle && <div className="text-sm font-semibold pl-2">{user.name || user.email || user.username || t('user.unknown')}</div>}
+                {showTitle && (
+                    <div className="text-sm font-semibold ps-2">
+                        {user.name || user.email || user.username || t('user.unknown')}
+                    </div>
+                )}
             </div>
         </UserPopoverPanel>
-    )
+    );
 }
 
 interface ApiKeyAvatarProps extends InfoProps {
     keyId: string;
 }
-export function ApiKeyAvatar({ keyId, showTitle = false, size = "md" }: ApiKeyAvatarProps) {
+export function ApiKeyAvatar({ keyId, showTitle = false, size = 'md' }: ApiKeyAvatarProps) {
     const { t } = useUITranslation();
     const { data, error } = useFetchApiKeyInfo(keyId);
 
     if (error) {
-        return <ErrorAvatar title={t('user.failedToFetchApiKey')} error={error} showTitle={showTitle} size={size} />
+        if (isNotFoundError(error)) {
+            return <MissingPrincipalAvatar showTitle={showTitle} size={size} color="bg-pink-500" />;
+        }
+        return <ErrorAvatar title={t('user.failedToFetchApiKey')} error={error} showTitle={showTitle} size={size} />;
     }
 
     if (!data) {
-        return <AvatarPlaceholder />
+        return <AvatarPlaceholder />;
     }
 
     const title = t('user.privateKey');
-    const avatar = <Avatar name={"PK"} color="bg-pink-500" size={size} />;
+    const avatar = <Avatar name={'PK'} color="bg-pink-500" size={size} />;
     const description = (
         <Table className="dark:bg-gray-800 dark:text-gray-200 table-fixed w-full">
             <tr>
@@ -483,10 +565,14 @@ export function ApiKeyAvatar({ keyId, showTitle = false, size = "md" }: ApiKeyAv
         <UserPopoverPanel title={title} description={description}>
             <div className="flex flex-row items-center gap-2">
                 {avatar}
-                {showTitle && <div className="text-sm font-semibold">{data?.name || data?.account || data?.project.name || t('user.unknown')}</div>}
+                {showTitle && (
+                    <div className="text-sm font-semibold">
+                        {data?.name || data?.account || data?.project.name || t('user.unknown')}
+                    </div>
+                )}
             </div>
-        </UserPopoverPanel >
-    )
+        </UserPopoverPanel>
+    );
 }
 
 interface UserPopoverPanelProps {
@@ -502,10 +588,10 @@ function UserPopoverPanel({ title, description, children }: UserPopoverPanelProp
             </PopoverTrigger>
             <PopoverContent align="center" sideOffset={8} side="right">
                 <div className="flex flex-col gap-1 rounded-md shadow-md p-2">
-                    <div className='text-md font-semibold'>{title}</div>
+                    <div className="text-md font-semibold">{title}</div>
                     {description}
                 </div>
             </PopoverContent>
         </Popover>
-    )
+    );
 }