feat(webapp): roles page full-height sticky table + current role + env chips

The roles comparison table now fills the remaining height with a sticky
header and scrolls internally. A line under the description states the
viewer's own role, and env-tier permission conditions render as environment
chips for the environments they apply to instead of raw text.

Author: matt-aitken

apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.roles/route.tsx

@@ -3,6 +3,7 @@ import { type MetaFunction } from "@remix-run/react";
 import { useState } from "react";
 import { type UseDataFunctionReturn, typedjson, useTypedLoaderData } from "remix-typedjson";
 import { z } from "zod";
+import { EnvironmentCombo } from "~/components/environments/EnvironmentLabel";
 import { Feedback } from "~/components/Feedback";
 import { PageBody, PageContainer } from "~/components/layout/AppLayout";
 import { Badge } from "~/components/primitives/Badge";
@@ -57,20 +58,21 @@ export const loader = dashboardLoader(
     },
     authorization: { action: "read", resource: { type: "members" } },
   },
-  async ({ context }) => {
+  async ({ context, user }) => {
     const orgId = context.organizationId;
     if (!orgId) {
       throw new Response("Not Found", { status: 404 });
     }
 
-    const [roles, assignableRoleIds, allPermissions, systemRoles, isUsingPlugin] =
+    const [roles, assignableRoleIds, allPermissions, systemRoles, isUsingPlugin, currentRole] =
       await Promise.all([
         rbac.allRoles(orgId),
         rbac.getAssignableRoleIds(orgId),
         rbac.allPermissions(orgId),
         rbac.systemRoles(orgId),
         // OSS self-host has no RBAC plugin.
         rbac.isUsingPlugin(),
+        rbac.getUserRole({ userId: user.id, organizationId: orgId }),
       ]);
 
     return typedjson({
@@ -79,6 +81,7 @@ export const loader = dashboardLoader(
       allPermissions,
       systemRoles,
       isUsingPlugin,
+      currentRoleName: currentRole?.name ?? null,
     });
   }
 );
@@ -92,7 +95,7 @@ type RolePermission = LoaderRole["permissions"][number];
 const FALLBACK_GROUP = "Other";
 
 export default function Page() {
-  const { roles, assignableRoleIds, allPermissions, systemRoles, isUsingPlugin } =
+  const { roles, assignableRoleIds, allPermissions, systemRoles, isUsingPlugin, currentRoleName } =
     useTypedLoaderData<typeof loader>();
   const organization = useOrganization();
   const showSelfServe = useShowSelfServe();
@@ -122,19 +125,24 @@ export default function Page() {
         {isUsingPlugin && showSelfServe ? <RequestCustomRoles /> : null}
       </NavBar>
       <PageBody scrollable={false}>
-        <div className="grid max-h-full min-h-full grid-rows-[auto_1fr]">
+        <div className="grid h-full max-h-full grid-rows-[auto_1fr] overflow-hidden">
           <div className="border-b border-grid-bright px-4 py-6">
             <Paragraph variant="small">
               Roles control what each team member can do in <strong>{organization.title}</strong>.
               Compare what each role grants below; assign a role to a team member from the{" "}
               <TextLink to={`/orgs/${organization.slug}/settings/team`}>Team page</TextLink>.
             </Paragraph>
+            {currentRoleName ? (
+              <Paragraph variant="small" className="mt-2">
+                Your role is <strong className="text-text-bright">{currentRoleName}</strong>.
+              </Paragraph>
+            ) : null}
           </div>
-          <div className="overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+          <div className="min-h-0 overflow-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
             {columns.length === 0 ? (
               <EmptyState isUsingPlugin={isUsingPlugin} showSelfServe={showSelfServe} />
             ) : (
-              <Table containerClassName="border-t-0">
+              <Table stickyHeader containerClassName="border-t-0">
                 <TableHeader>
                   <TableRow>
                     <TableHeaderCell>Permission</TableHeaderCell>
@@ -287,6 +295,18 @@ function RoleCell({
 
   const conditionalDeny = denied.find((p) => p.conditions);
   if (conditionalDeny?.conditions) {
+    const allowedEnvTypes = allowedEnvTypesFromDeny(conditionalDeny.conditions);
+    if (allowedEnvTypes) {
+      // Conditional grant: show the environments the permission is allowed in.
+      return (
+        <div className="flex flex-col items-start gap-1">
+          {allowedEnvTypes.map((type) => (
+            <EnvironmentCombo key={type} environment={{ type }} className="text-xs" />
+          ))}
+        </div>
+      );
+    }
+    // Conditions we can't map to environments fall back to a text label.
     return (
       <span className="text-xs text-text-dimmed">{conditionLabel(conditionalDeny.conditions)}</span>
     );
@@ -298,6 +318,30 @@ function RoleCell({
   );
 }
 
+const ENV_TYPES = ["DEVELOPMENT", "STAGING", "PREVIEW", "PRODUCTION"] as const;
+type EnvType = (typeof ENV_TYPES)[number];
+
+// A conditional `cannot` rule denies the permission where the resource matches
+// its condition, so the permission stays allowed everywhere else. Translate the
+// envType condition into the set of environments where it's still allowed, or
+// null when we can't interpret it (caller falls back to a text label).
+function allowedEnvTypesFromDeny(conditions: Record<string, unknown>): EnvType[] | null {
+  const envType = conditions.envType;
+  // Equality, e.g. { envType: "PRODUCTION" } → denied in prod, allowed elsewhere.
+  if (typeof envType === "string") {
+    return ENV_TYPES.includes(envType as EnvType)
+      ? ENV_TYPES.filter((t) => t !== envType)
+      : null;
+  }
+  // Negation, e.g. { envType: { $ne: "DEVELOPMENT" } } → denied everywhere except
+  // DEVELOPMENT, so allowed only in DEVELOPMENT.
+  if (envType && typeof envType === "object" && "$ne" in envType) {
+    const ne = (envType as { $ne: unknown }).$ne;
+    return typeof ne === "string" && ENV_TYPES.includes(ne as EnvType) ? [ne as EnvType] : null;
+  }
+  return null;
+}
+
 // Only `envType` is supported today.
 function conditionLabel(conditions: Record<string, unknown>): string {
   if (typeof conditions.envType === "string") {