feat(webapp): impersonation consent page and a view-as-user toggle

Opening a `/@/orgs/<slug>/…` link from outside the dashboard (address bar,
bookmark, a link shared elsewhere) used to bounce back to /admin, because
starting impersonation requires a same-origin navigation. Keep that requirement
for the state change, but render a consent interstitial instead of blocking: the
page names the organization and destination, and its "Impersonate" button posts
back from our own page, so the same-origin check still holds. In-app admin links
are unchanged and still impersonate in one click.

Also add a display-only "View as user" toggle for impersonation sessions. It
lives on the impersonation cookie, so it disappears when impersonation is
cleared, and it hides admin-only UI both client-side (via useHasAdminAccess) and
in the loaders that compute what to show. It never touches authorization. The
escape hatches — the impersonation border, "Stop impersonating", the global
shortcut and the toggle itself — stay visible while it's on.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01G5rpYGm4SVqxSNXx6sXtpu

Author: claude

.server-changes/impersonation-consent-and-view-as-user.md

@@ -0,0 +1,6 @@
+---
+area: webapp
+type: improvement
+---
+
+Admins opening an impersonation link from outside the dashboard now get a confirmation page naming the organization and destination instead of being bounced back, and while impersonating they can switch to "View as user" to see the dashboard without any admin-only UI.

apps/webapp/app/components/navigation/SideMenu.tsx

@@ -4,7 +4,14 @@ import {
   ExclamationTriangleIcon,
 } from "@heroicons/react/24/outline";
 import { EllipsisHorizontalIcon } from "@heroicons/react/20/solid";
-import { useFetcher, useNavigation, useRevalidator, useSubmit } from "@remix-run/react";
+import {
+  Form,
+  useFetcher,
+  useLocation,
+  useNavigation,
+  useRevalidator,
+  useSubmit,
+} from "@remix-run/react";
 import { LayoutGroup, motion } from "framer-motion";
 import {
   type CSSProperties,
@@ -33,6 +40,8 @@ import { DeploymentsIcon } from "~/assets/icons/DeploymentsIcon";
 import { DialIcon } from "~/assets/icons/DialIcon";
 import { DropdownIcon } from "~/assets/icons/DropdownIcon";
 import { BranchEnvironmentIconSmall } from "~/assets/icons/EnvironmentIcons";
+import { EyeClosedIcon } from "~/assets/icons/EyeClosedIcon";
+import { EyeOpenIcon } from "~/assets/icons/EyeOpenIcon";
 import { FolderClosedIcon } from "~/assets/icons/FolderClosedIcon";
 import { FolderOpenIcon } from "~/assets/icons/FolderOpenIcon";
 import { GlobeLinesIcon } from "~/assets/icons/GlobeLinesIcon";
@@ -69,7 +78,7 @@ import { type MatchedOrganization } from "~/hooks/useOrganizations";
 import { type MatchedProject } from "~/hooks/useProject";
 import { useShortcutKeys } from "~/hooks/useShortcutKeys";
 import { useShowSelfServe } from "~/hooks/useShowSelfServe";
-import { useHasAdminAccess } from "~/hooks/useUser";
+import { useHasAdminAccess, useIsViewingAsUser } from "~/hooks/useUser";
 import { type UserWithDashboardPreferences } from "~/models/user.server";
 import {
   useCurrentPlan,
@@ -785,7 +794,7 @@ export function SideMenu({
   // user's saved order/hidden preferences are applied at render below.
   const staticSections: SideMenuSectionConfig[] = [];
 
-  if (user.admin || user.isImpersonating || featureFlags.hasAiAccess) {
+  if (isAdmin || featureFlags.hasAiAccess) {
     staticSections.push({
       id: "ai",
       title: "AI",
@@ -813,12 +822,12 @@ export function SideMenu({
     });
   }
 
-  if (user.admin || user.isImpersonating || featureFlags.hasQueryAccess) {
+  if (isAdmin || featureFlags.hasQueryAccess) {
     staticSections.push({
       id: "metrics",
       title: "Observability",
       items: [
-        ...(user.admin || user.isImpersonating || featureFlags.hasLogsPageAccess
+        ...(isAdmin || featureFlags.hasLogsPageAccess
           ? [
               {
                 id: "logs",
@@ -1832,24 +1841,29 @@ function AccountMenuItems({
 
   return (
     <>
-      {isAdmin && (
+      {/* "Stop impersonating" and the view-as-user toggle key off raw impersonation, not `isAdmin`:
+          with "view as user" on, `isAdmin` is false and these are the only ways back out. */}
+      {(isImpersonating || isAdmin) && (
         <div className="flex flex-col gap-1 border-b border-grid-bright p-1">
           {isImpersonating ? (
-            <PopoverMenuItem
-              title={
-                <div className="flex w-full items-center justify-between">
-                  <span className={IMPERSONATION_ACCENT.text}>Stop impersonating</span>
-                  <ShortcutKey
-                    shortcut={{ modifiers: ["mod", "alt"], key: "a" }}
-                    variant="medium/bright"
-                  />
-                </div>
-              }
-              icon={UserCrossIcon}
-              onClick={stopImpersonating}
-              leadingIconClassName={cn(SIDE_MENU_POPOVER_ITEM_ICON, IMPERSONATION_ACCENT.text)}
-              className={SIDE_MENU_POPOVER_ITEM_LABEL}
-            />
+            <>
+              <PopoverMenuItem
+                title={
+                  <div className="flex w-full items-center justify-between">
+                    <span className={IMPERSONATION_ACCENT.text}>Stop impersonating</span>
+                    <ShortcutKey
+                      shortcut={{ modifiers: ["mod", "alt"], key: "a" }}
+                      variant="medium/bright"
+                    />
+                  </div>
+                }
+                icon={UserCrossIcon}
+                onClick={stopImpersonating}
+                leadingIconClassName={cn(SIDE_MENU_POPOVER_ITEM_ICON, IMPERSONATION_ACCENT.text)}
+                className={SIDE_MENU_POPOVER_ITEM_LABEL}
+              />
+              <ViewAsUserMenuItem />
+            </>
           ) : (
             <PopoverMenuItem
               to={adminPath()}
@@ -1906,6 +1920,30 @@ function AccountMenuItems({
   );
 }
 
+/**
+ * Toggles the display-only "view as user" mode for the current impersonation session, so an admin
+ * can see the dashboard the way the impersonated user sees it. `reloadDocument` forces a full
+ * navigation, so every loader re-runs under the updated cookie instead of reusing cached data.
+ */
+function ViewAsUserMenuItem() {
+  const isViewingAsUser = useIsViewingAsUser();
+  const location = useLocation();
+
+  return (
+    <Form method="post" action="/resources/impersonation/view-as" reloadDocument>
+      <input type="hidden" name="viewAsUser" value={isViewingAsUser ? "false" : "true"} />
+      <input type="hidden" name="redirectTo" value={`${location.pathname}${location.search}`} />
+      <PopoverMenuItem
+        type="submit"
+        title={isViewingAsUser ? "Show admin UI" : "View as user"}
+        icon={isViewingAsUser ? EyeClosedIcon : EyeOpenIcon}
+        leadingIconClassName={cn(SIDE_MENU_POPOVER_ITEM_ICON, IMPERSONATION_ACCENT.text)}
+        className={SIDE_MENU_POPOVER_ITEM_LABEL}
+      />
+    </Form>
+  );
+}
+
 function AccountMenu({ isAdmin, isImpersonating }: { isAdmin: boolean; isImpersonating: boolean }) {
   const [isOpen, setIsOpen] = useState(false);
   const navigation = useNavigation();

apps/webapp/app/hooks/useUser.ts

@@ -30,9 +30,23 @@ export function useUserChanged(callback: (user: User | undefined) => void) {
   useChanged(useOptionalUser, callback);
 }
 
+/**
+ * Whether the admin has switched to "view as user" for the current
+ * impersonation session. Display only — see `hasAdminDisplayAccess`.
+ */
+export function useIsViewingAsUser(matches?: UIMatch[]): boolean {
+  const routeMatch = useTypedMatchesData<typeof loader>({
+    id: "root",
+    matches,
+  });
+
+  return routeMatch?.isViewingAsUser === true;
+}
+
 export function useHasAdminAccess(matches?: UIMatch[]): boolean {
   const user = useOptionalUser(matches);
   const isImpersonating = useIsImpersonating(matches);
+  const isViewingAsUser = useIsViewingAsUser(matches);
 
-  return Boolean(user?.admin) || isImpersonating;
+  return (Boolean(user?.admin) || isImpersonating) && !isViewingAsUser;
 }

apps/webapp/app/models/admin.server.ts

@@ -1,5 +1,5 @@
 import { redirect } from "@remix-run/server-runtime";
-import { prisma } from "~/db.server";
+import { prisma, type PrismaClientOrTransaction } from "~/db.server";
 import { logger } from "~/services/logger.server";
 import type { SearchParams } from "~/routes/admin._index";
 import {
@@ -213,7 +213,8 @@ export async function redirectWithImpersonation(
   request: Request,
   userId: string,
   path: string,
-  currentUser?: { id: string; admin: boolean }
+  currentUser?: { id: string; admin: boolean },
+  prismaClient: PrismaClientOrTransaction = prisma
 ) {
   const user = currentUser ?? (await requireUser(request));
   if (!user.admin) {
@@ -224,7 +225,7 @@ export async function redirectWithImpersonation(
   const ipAddress = extractClientIp(xff);
 
   try {
-    await prisma.impersonationAuditLog.create({
+    await prismaClient.impersonationAuditLog.create({
       data: {
         action: "START",
         adminId: user.id,

apps/webapp/app/root.tsx

@@ -19,6 +19,7 @@ import { TimezoneSetter } from "./components/TimezoneSetter";
 import { env } from "./env.server";
 import { featuresForRequest } from "./features.server";
 import { usePostHog } from "./hooks/usePostHog";
+import { getViewingAsUser } from "./services/impersonation.server";
 import { getUser } from "./services/session.server";
 import { getTimezonePreference } from "./services/preferences/uiPreferences.server";
 import { appEnvTitleTag } from "./utils";
@@ -70,13 +71,18 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
   };
 
   const user = await getUser(request);
+  // Display-only: while impersonating, an admin can ask to see the dashboard
+  // the way the impersonated user sees it. Exposed from root so every route can
+  // read it.
+  const isViewingAsUser = await getViewingAsUser(request);
 
   const headers = new Headers();
   headers.append("Set-Cookie", await commitSession(session));
 
   return typedjson(
     {
       user,
+      isViewingAsUser,
       toastMessage,
       posthogProjectKey,
       posthogUiHost,