feat(admin): show recently impersonated users in admin panel

Author: TheodoreSpeaks

apps/sim/app/workspace/[workspaceId]/settings/components/admin/admin.tsx

@@ -10,10 +10,13 @@ import {
   adminParsers,
   adminUrlKeys,
 } from '@/app/workspace/[workspaceId]/settings/components/admin/search-params'
+import { useRecentImpersonations } from '@/app/workspace/[workspaceId]/settings/components/admin/use-recent-impersonations'
 import { SettingsEmptyState } from '@/app/workspace/[workspaceId]/settings/components/settings-empty-state'
 import { SettingsPanel } from '@/app/workspace/[workspaceId]/settings/components/settings-panel'
 import {
+  type AdminUser,
   useAdminUsers,
+  useAdminUsersByEmails,
   useBanUser,
   useImpersonateUser,
   useSetUserRole,
@@ -25,6 +28,16 @@ import { clearUserData } from '@/stores'
 
 const PAGE_SIZE = 20 as const
 
+const USER_TABLE_HEADER = (
+  <div className='flex items-center gap-3 border-[var(--border)] border-b px-3 py-2 text-[var(--text-tertiary)] text-caption'>
+    <span className='w-[170px]'>Name</span>
+    <span className='flex-1'>Email</span>
+    <span className='w-[60px]'>Role</span>
+    <span className='w-[55px]'>Status</span>
+    <span className='w-[200px] text-right'>Actions</span>
+  </div>
+)
+
 const MOTHERSHIP_ENV_OPTIONS: { value: MothershipEnvironment; label: string }[] = [
   { value: 'default', label: 'Default' },
   { value: 'dev', label: 'Dev' },
@@ -43,6 +56,8 @@ export function Admin() {
   const banUser = useBanUser()
   const unbanUser = useUnbanUser()
   const impersonateUser = useImpersonateUser()
+  const { recentEmails, recordImpersonation } = useRecentImpersonations()
+  const { data: recentUsers } = useAdminUsersByEmails(recentEmails)
 
   const [workflowId, setWorkflowId] = useState('')
   const [targetWorkspaceId, setTargetWorkspaceId] = useState('')
@@ -94,7 +109,7 @@ export function Admin() {
     }
   }
 
-  const handleImpersonate = (userId: string) => {
+  const handleImpersonate = (userId: string, email: string) => {
     setImpersonationGuardError(null)
     if (session?.user?.role !== 'admin') {
       setImpersonatingUserId(null)
@@ -111,6 +126,7 @@ export function Admin() {
           setImpersonatingUserId(null)
         },
         onSuccess: async () => {
+          recordImpersonation(email)
           await clearUserData()
           window.location.assign('/workspace')
         },
@@ -156,6 +172,125 @@ export function Admin() {
     impersonateUser.variables,
     impersonatingUserId,
   ])
+
+  const renderUserRow = (u: AdminUser) => (
+    <div
+      key={u.id}
+      className={cn(
+        'flex flex-col gap-2 px-3 py-2 text-small',
+        'border-[var(--border)] border-b last:border-b-0'
+      )}
+    >
+      <div className='flex items-center gap-3'>
+        <span className='w-[170px] truncate text-[var(--text-primary)]'>{u.name || '—'}</span>
+        <span className='flex-1 truncate text-[var(--text-secondary)]'>{u.email}</span>
+        <span className='w-[60px]'>
+          <Badge variant={u.role === 'admin' ? 'blue' : 'gray'}>{u.role || 'user'}</Badge>
+        </span>
+        <span className='w-[55px]'>
+          {u.banned ? <Badge variant='red'>Banned</Badge> : <Badge variant='green'>Active</Badge>}
+        </span>
+        <span className='flex w-[200px] justify-end gap-1'>
+          {u.id !== session?.user?.id && (
+            <>
+              <Button
+                variant='active'
+                className='h-[28px] px-2 text-caption'
+                onClick={() => handleImpersonate(u.id, u.email)}
+                disabled={pendingUserIds.has(u.id)}
+              >
+                {impersonatingUserId === u.id ||
+                (impersonateUser.isPending &&
+                  (impersonateUser.variables as { userId?: string } | undefined)?.userId === u.id)
+                  ? 'Switching...'
+                  : 'Impersonate'}
+              </Button>
+              <Button
+                variant='active'
+                className='h-[28px] px-2 text-caption'
+                onClick={() => {
+                  setUserRole.reset()
+                  setUserRole.mutate({
+                    userId: u.id,
+                    role: u.role === 'admin' ? 'user' : 'admin',
+                  })
+                }}
+                disabled={pendingUserIds.has(u.id)}
+              >
+                {u.role === 'admin' ? 'Demote' : 'Promote'}
+              </Button>
+              {u.banned ? (
+                <Button
+                  variant='active'
+                  className='h-[28px] px-2 text-caption'
+                  onClick={() => {
+                    unbanUser.reset()
+                    unbanUser.mutate({ userId: u.id })
+                  }}
+                  disabled={pendingUserIds.has(u.id)}
+                >
+                  Unban
+                </Button>
+              ) : (
+                <Button
+                  variant='active'
+                  className={cn(
+                    'h-[28px] px-2 text-caption',
+                    banUserId === u.id ? 'text-[var(--text-primary)]' : 'text-[var(--text-error)]'
+                  )}
+                  onClick={() => {
+                    if (banUserId === u.id) {
+                      setBanUserId(null)
+                      setBanReason('')
+                    } else {
+                      setBanUserId(u.id)
+                      setBanReason('')
+                    }
+                  }}
+                  disabled={pendingUserIds.has(u.id)}
+                >
+                  {banUserId === u.id ? 'Cancel' : 'Ban'}
+                </Button>
+              )}
+            </>
+          )}
+        </span>
+      </div>
+      {banUserId === u.id && !u.banned && (
+        <div className='flex items-center gap-2 pl-[170px]'>
+          <ChipInput
+            value={banReason}
+            onChange={(e) => setBanReason(e.target.value)}
+            placeholder='Reason (optional)'
+            className='flex-1'
+          />
+          <Button
+            variant='primary'
+            className='h-[28px] px-3 text-caption'
+            onClick={() => {
+              banUser.reset()
+              banUser.mutate(
+                {
+                  userId: u.id,
+                  ...(banReason.trim() ? { banReason: banReason.trim() } : {}),
+                },
+                {
+                  onSuccess: () => {
+                    setBanUserId(null)
+                    setBanReason('')
+                  },
+                }
+              )
+            }}
+            disabled={pendingUserIds.has(u.id)}
+          >
+            Confirm Ban
+          </Button>
+        </div>
+      )}
+    </div>
+  )
+
   return (
     <SettingsPanel>
       <div className='flex flex-col gap-4'>
@@ -275,149 +410,16 @@ export function Admin() {
           </p>
         )}
 
-        {searchQuery.length > 0 && usersData && (
+        {searchQuery.length > 0 && usersData ? (
           <>
             <div className='flex flex-col gap-0.5'>
-              <div className='flex items-center gap-3 border-[var(--border-secondary)] border-b px-3 py-2 text-[var(--text-tertiary)] text-caption'>
-                <span className='w-[200px]'>Name</span>
-                <span className='flex-1'>Email</span>
-                <span className='w-[80px]'>Role</span>
-                <span className='w-[80px]'>Status</span>
-                <span className='w-[250px] text-right'>Actions</span>
-              </div>
+              {USER_TABLE_HEADER}
 
               {usersData.users.length === 0 && (
                 <SettingsEmptyState variant='inline'>No users found.</SettingsEmptyState>
               )}
 
-              {usersData.users.map((u) => (
-                <div
-                  key={u.id}
-                  className={cn(
-                    'flex flex-col gap-2 px-3 py-2 text-small',
-                    'border-[var(--border-secondary)] border-b last:border-b-0'
-                  )}
-                >
-                  <div className='flex items-center gap-3'>
-                    <span className='w-[200px] truncate text-[var(--text-primary)]'>
-                      {u.name || '—'}
-                    </span>
-                    <span className='flex-1 truncate text-[var(--text-secondary)]'>{u.email}</span>
-                    <span className='w-[80px]'>
-                      <Badge variant={u.role === 'admin' ? 'blue' : 'gray'}>
-                        {u.role || 'user'}
-                      </Badge>
-                    </span>
-                    <span className='w-[80px]'>
-                      {u.banned ? (
-                        <Badge variant='red'>Banned</Badge>
-                      ) : (
-                        <Badge variant='green'>Active</Badge>
-                      )}
-                    </span>
-                    <span className='flex w-[250px] justify-end gap-1'>
-                      {u.id !== session?.user?.id && (
-                        <>
-                          <Button
-                            variant='active'
-                            className='h-[28px] px-2 text-caption'
-                            onClick={() => handleImpersonate(u.id)}
-                            disabled={pendingUserIds.has(u.id)}
-                          >
-                            {impersonatingUserId === u.id ||
-                            (impersonateUser.isPending &&
-                              (impersonateUser.variables as { userId?: string } | undefined)
-                                ?.userId === u.id)
-                              ? 'Switching...'
-                              : 'Impersonate'}
-                          </Button>
-                          <Button
-                            variant='active'
-                            className='h-[28px] px-2 text-caption'
-                            onClick={() => {
-                              setUserRole.reset()
-                              setUserRole.mutate({
-                                userId: u.id,
-                                role: u.role === 'admin' ? 'user' : 'admin',
-                              })
-                            }}
-                            disabled={pendingUserIds.has(u.id)}
-                          >
-                            {u.role === 'admin' ? 'Demote' : 'Promote'}
-                          </Button>
-                          {u.banned ? (
-                            <Button
-                              variant='active'
-                              className='h-[28px] px-2 text-caption'
-                              onClick={() => {
-                                unbanUser.reset()
-                                unbanUser.mutate({ userId: u.id })
-                              }}
-                              disabled={pendingUserIds.has(u.id)}
-                            >
-                              Unban
-                            </Button>
-                          ) : (
-                            <Button
-                              variant='active'
-                              className={cn(
-                                'h-[28px] px-2 text-caption',
-                                banUserId === u.id
-                                  ? 'text-[var(--text-primary)]'
-                                  : 'text-[var(--text-error)]'
-                              )}
-                              onClick={() => {
-                                if (banUserId === u.id) {
-                                  setBanUserId(null)
-                                  setBanReason('')
-                                } else {
-                                  setBanUserId(u.id)
-                                  setBanReason('')
-                                }
-                              }}
-                              disabled={pendingUserIds.has(u.id)}
-                            >
-                              {banUserId === u.id ? 'Cancel' : 'Ban'}
-                            </Button>
-                          )}
-                        </>
-                      )}
-                    </span>
-                  </div>
-                  {banUserId === u.id && !u.banned && (
-                    <div className='flex items-center gap-2 pl-[200px]'>
-                      <ChipInput
-                        value={banReason}
-                        onChange={(e) => setBanReason(e.target.value)}
-                        placeholder='Reason (optional)'
-                        className='flex-1'
-                      />
-                      <Button
-                        variant='primary'
-                        className='h-[28px] px-3 text-caption'
-                        onClick={() => {
-                          banUser.reset()
-                          banUser.mutate(
-                            {
-                              userId: u.id,
-                              ...(banReason.trim() ? { banReason: banReason.trim() } : {}),
-                            },
-                            {
-                              onSuccess: () => {
-                                setBanUserId(null)
-                                setBanReason('')
-                              },
-                            }
-                          )
-                        }}
-                        disabled={pendingUserIds.has(u.id)}
-                      >
-                        Confirm Ban
-                      </Button>
-                    </div>
-                  )}
-                </div>
-              ))}
+              {usersData.users.map((u) => renderUserRow(u))}
             </div>
 
             {totalPages > 1 && (
@@ -450,6 +452,15 @@ export function Admin() {
               </div>
             )}
           </>
+        ) : (
+          searchQuery.length === 0 &&
+          recentUsers &&
+          recentUsers.length > 0 && (
+            <div className='flex flex-col gap-0.5'>
+              {USER_TABLE_HEADER}
+              {recentUsers.map((u) => renderUserRow(u))}
+            </div>
+          )
         )}
       </div>
     </SettingsPanel>

apps/sim/app/workspace/[workspaceId]/settings/components/admin/use-recent-impersonations.ts

@@ -0,0 +1,32 @@
+import { useCallback, useState } from 'react'
+
+/** Survives clearUserData via the keysToKeep allowlist in @/stores. */
+export const RECENT_IMPERSONATIONS_STORAGE_KEY = 'recent-impersonations'
+
+const MAX_RECENT = 5
+
+function readRecentEmails(): string[] {
+  try {
+    const parsed = JSON.parse(localStorage.getItem(RECENT_IMPERSONATIONS_STORAGE_KEY) ?? '[]')
+    if (!Array.isArray(parsed)) return []
+    return parsed.filter((e): e is string => typeof e === 'string').slice(0, MAX_RECENT)
+  } catch {
+    return []
+  }
+}
+
+/**
+ * Last {@link MAX_RECENT} emails the admin impersonated, most recent first,
+ * persisted in localStorage on this browser.
+ */
+export function useRecentImpersonations() {
+  const [recentEmails, setRecentEmails] = useState<string[]>(() => readRecentEmails())
+
+  const recordImpersonation = useCallback((email: string) => {
+    const next = [email, ...readRecentEmails().filter((e) => e !== email)].slice(0, MAX_RECENT)
+    localStorage.setItem(RECENT_IMPERSONATIONS_STORAGE_KEY, JSON.stringify(next))
+    setRecentEmails(next)
+  }, [])
+
+  return { recentEmails, recordImpersonation }
+}