fix(webapp): drop the impersonation accent in view-as-user mode, keep capability gates raw

The yellow side-menu border is the loudest tell that you are not the user,
so "view as user" now hides it too — the point of the mode is a dashboard
that looks exactly like the user's. The ways out stay on raw impersonation:
"Stop impersonating" and the toggle itself in the account menu, the
Cmd+Opt+A shortcut, and the routes that clear the impersonation cookie.
The write suppressions (side-menu preferences, favorites) also stay raw —
they keep an admin from writing into the impersonated account and are not
display chrome.

Two more review findings, same area:

- The already-impersonating branch of the impersonation deep link kept only
  the pathname, so an admin who was already impersonating and opened a
  run link lost the ?span= selection and the follow-up GET built its
  destination and post-back paths from an empty search. Keep the search.

- hasAdminDisplayAccess is display-only, but it had reached two gates that
  decide what a request may do: the default-region service call and the
  query page's EXPLAIN flag. With the toggle on, an admin's own form
  submissions were rejected. Both are back on raw
  user.admin || user.isImpersonating, and the helper now states the rule:
  the toggle changes what is shown, never what is permitted. Every loader
  and rendering site stays on the helper.

Co-Authored-By: Claude <noreply@anthropic.com>

Author: claude

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

@@ -3,4 +3,4 @@ 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.
+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 exactly as that user sees it, with the admin-only UI and the impersonation highlight both hidden. Stopping impersonation is still one click away in the account menu.

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

@@ -398,6 +398,7 @@ export function SideMenu({
   const { isConnected } = useDevPresence();
   const isFreeUser = currentPlan?.v3Subscription?.isPaying === false;
   const isAdmin = useHasAdminAccess();
+  const isViewingAsUser = useIsViewingAsUser();
   const { isManagedCloud } = useFeatures();
   const featureFlags = useFeatureFlags();
   const incidentStatus = useIncidentStatus();
@@ -1057,7 +1058,13 @@ export function SideMenu({
       style={initialStyleRef.current}
       className={cn(
         "relative h-full border-r bg-background-bright",
-        user.isImpersonating ? IMPERSONATION_ACCENT.border : "border-grid-bright"
+        // The accent is the loudest "you are not this user" tell, so "view as user" drops it too —
+        // the point of the mode is a dashboard that looks exactly like the user's. The account
+        // menu's "Stop impersonating" and the toggle itself stay on raw impersonation, so there is
+        // still a way back out (as does the ⌘⌥A shortcut in <GlobalShortcuts>).
+        user.isImpersonating && !isViewingAsUser
+          ? IMPERSONATION_ACCENT.border
+          : "border-grid-bright"
       )}
     >
       <ResizeHandle

apps/webapp/app/routes/_app.@.orgs.$organizationSlug.$.tsx

@@ -33,7 +33,10 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
   // shape.
   if (user.isImpersonating) {
     const url = new URL(request.url);
-    throw await clearImpersonation(request, url.pathname);
+    // Keep the search: `/@/runs/<id>` links redirect here carrying `?span=<spanId>`, and the
+    // follow-up GET builds the destination and post-back paths from it. Dropping it would land the
+    // admin on the run with no span selected.
+    throw await clearImpersonation(request, `${url.pathname}${url.search}`);
   }
 
   // Only admins can impersonate

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx

@@ -175,9 +175,10 @@ export const action = async ({ request, params }: ActionFunctionArgs) => {
   }
 
   const { query, scope, explain: explainParam, period, from, to } = parsed.data;
-  // Only allow explain for admins/impersonating users
-  const isAdmin = hasAdminDisplayAccess(user);
-  const explain = explainParam === "true" && isAdmin;
+  // Only allow explain for admins/impersonating users. Raw impersonation, not
+  // `hasAdminDisplayAccess`: this decides what the request may run, and "view as user" only changes
+  // what is shown — the loader is what hides the EXPLAIN control.
+  const explain = explainParam === "true" && (user.admin || user.isImpersonating);
 
   try {
     const queryResult = await executeQuery({

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.regions/route.tsx

@@ -54,7 +54,6 @@ import { redirectWithErrorMessage, redirectWithSuccessMessage } from "~/models/m
 import { resolveOrgIdFromSlug } from "~/models/organization.server";
 import { findProjectBySlug } from "~/models/project.server";
 import { type Region, RegionsPresenter } from "~/presenters/v3/RegionsPresenter.server";
-import { getViewingAsUser } from "~/services/impersonation.server";
 import { hasAdminDisplayAccess, requireUser } from "~/services/session.server";
 import { dashboardAction } from "~/services/routeBuilders/dashboardBuilder";
 import {
@@ -136,10 +135,10 @@ export const action = dashboardAction(
       service.call({
         projectId: project.id,
         regionId: parsedFormData.data.regionId,
-        isAdmin: hasAdminDisplayAccess({
-          ...user,
-          isViewingAsUser: await getViewingAsUser(request),
-        }),
+        // Raw impersonation, not `hasAdminDisplayAccess`: this decides whether a restricted or
+        // hidden region may be set as the default, which is a capability. "View as user" only
+        // changes what is shown.
+        isAdmin: user.admin || user.isImpersonating,
       })
     );
 

apps/webapp/app/services/session.server.ts

@@ -160,6 +160,12 @@ export async function requireUser(request: Request) {
  * Display only. The "view as user" toggle is cosmetic and must never widen or
  * narrow a real security boundary — authorization stays on `user.admin`, the
  * route builder's `authorization` block and the per-feature access checks.
+ *
+ * The rule: the toggle changes what is *shown*, never what is *permitted*. So
+ * call this from loaders and rendering only. Anything deciding what a request
+ * may do — an action, a service call that enforces something — stays on raw
+ * `user.admin || user.isImpersonating`, or the admin's own form submissions
+ * start failing the moment they flip the toggle on.
  */
 export function hasAdminDisplayAccess(user: {
   admin: boolean;