feat(webapp): enforce RBAC permissions on run, prompt, member, and billing routes

.server-changes/rbac-permission-enforcement.md

@@ -0,0 +1,6 @@
+---
+area: webapp
+type: feature
+---
+
+Enforce role-based permissions across the dashboard and API. Roles without access to a resource (environment variables, API keys, deployments, integrations, members, billing) can no longer read or change it, and gated pages now show a permission-denied panel instead of redirecting away.

.server-changes/rbac-route-permission-enforcement.md

@@ -0,0 +1,6 @@
+---
+area: webapp
+type: feature
+---
+
+Enforce role-based permissions on the dashboard routes for cancelling and replaying runs, managing prompt versions, inviting and managing organisation members, and managing billing, disabling the matching controls with a tooltip when your role lacks permission. Behaviour is unchanged in the default configuration, where permissions stay permissive.

apps/webapp/app/components/ErrorDisplay.tsx

@@ -1,9 +1,11 @@
 import { HomeIcon } from "@heroicons/react/20/solid";
 import { isRouteErrorResponse, useRouteError } from "@remix-run/react";
 import { friendlyErrorDisplay } from "~/utils/httpErrors";
+import { permissionDeniedMessage } from "~/utils/permissionDenied";
 import { LinkButton } from "./primitives/Buttons";
 import { Header1 } from "./primitives/Headers";
 import { Paragraph } from "./primitives/Paragraph";
+import { PermissionDenied } from "./PermissionDenied";
 import { TriggerRotatingLogo } from "./TriggerRotatingLogo";
 import { type ReactNode } from "react";
 
@@ -17,6 +19,21 @@ type ErrorDisplayOptions = {
 export function RouteErrorDisplay(options?: ErrorDisplayOptions) {
   const error = useRouteError();
 
+  // A failed `authorization` check (or `throwPermissionDenied`) throws a 403
+  // that bubbles to the nearest route ErrorBoundary. Every layout boundary
+  // renders through here, so handling it once means a gated route only has to
+  // declare `authorization` to get the permission panel: no per-route boundary.
+  const permission = isRouteErrorResponse(error) ? permissionDeniedMessage(error.data) : null;
+  if (permission) {
+    return (
+      <div className="flex min-h-screen w-full items-center justify-center p-4">
+        <div className="w-full max-w-md">
+          <PermissionDenied message={permission} />
+        </div>
+      </div>
+    );
+  }
+
   return (
     <>
       {isRouteErrorResponse(error) ? (

apps/webapp/app/components/PermissionDenied.tsx

@@ -0,0 +1,27 @@
+import { NoSymbolIcon } from "@heroicons/react/20/solid";
+import React from "react";
+import { useOptionalOrganization } from "~/hooks/useOrganizations";
+import { organizationRolesPath } from "~/utils/pathBuilder";
+import { LinkButton } from "./primitives/Buttons";
+import { InfoPanel } from "./primitives/InfoPanel";
+
+export function PermissionDenied({ message }: { message: React.ReactNode }) {
+  const organization = useOptionalOrganization();
+
+  return (
+    <InfoPanel
+      icon={NoSymbolIcon}
+      iconClassName="text-text-dimmed"
+      title="Permission denied"
+      accessory={
+        organization ? (
+          <LinkButton to={organizationRolesPath(organization)} variant="secondary/small">
+            View roles
+          </LinkButton>
+        ) : undefined
+      }
+    >
+      {message}
+    </InfoPanel>
+  );
+}

apps/webapp/app/components/primitives/PermissionButton.tsx

@@ -0,0 +1,36 @@
+import { forwardRef, type ReactNode } from "react";
+import { Button } from "./Buttons";
+
+export const DEFAULT_NO_PERMISSION_TOOLTIP = "You don't have permission to do this";
+
+type PermissionButtonProps = React.ComponentProps<typeof Button> & {
+  /** Server-computed flag (see `checkPermissions`). When false the button is disabled with a tooltip. */
+  hasPermission: boolean;
+  noPermissionTooltip?: ReactNode;
+};
+
+/**
+ * A `Button` that disables itself and shows an explanatory tooltip when the
+ * user lacks permission. Display only — the server route builder's
+ * `authorization` block is the real gate. `Button` already renders its
+ * `tooltip` while disabled (it wraps the disabled button in a hoverable span),
+ * so we reuse that path.
+ */
+export const PermissionButton = forwardRef<HTMLButtonElement, PermissionButtonProps>(
+  ({ hasPermission, noPermissionTooltip, disabled, tooltip, ...props }, ref) => {
+    if (hasPermission) {
+      return <Button ref={ref} disabled={disabled} tooltip={tooltip} {...props} />;
+    }
+
+    return (
+      <Button
+        ref={ref}
+        {...props}
+        disabled
+        tooltip={noPermissionTooltip ?? DEFAULT_NO_PERMISSION_TOOLTIP}
+      />
+    );
+  }
+);
+
+PermissionButton.displayName = "PermissionButton";

apps/webapp/app/components/primitives/PermissionLink.tsx

@@ -0,0 +1,43 @@
+import { type ReactNode } from "react";
+import { cn } from "~/utils/cn";
+import { ButtonContent, type ButtonContentPropsType, LinkButton } from "./Buttons";
+import { SimpleTooltip } from "./Tooltip";
+import { DEFAULT_NO_PERMISSION_TOOLTIP } from "./PermissionButton";
+
+type PermissionLinkProps = React.ComponentProps<typeof LinkButton> & {
+  /** Server-computed flag (see `checkPermissions`). When false the link is disabled with a tooltip. */
+  hasPermission: boolean;
+  noPermissionTooltip?: ReactNode;
+};
+
+/**
+ * A `LinkButton` that disables itself and shows an explanatory tooltip when the
+ * user lacks permission. Display only — the server route builder's
+ * `authorization` block is the real gate. Unlike `Button`, `LinkButton` has no
+ * tooltip support and renders a `pointer-events-none` element when disabled
+ * (which can't be hovered), so the denied state renders a `SimpleTooltip`
+ * around a non-interactive `ButtonContent` instead — the same pattern the team
+ * settings page uses for its gated controls.
+ */
+export function PermissionLink({
+  hasPermission,
+  noPermissionTooltip,
+  ...props
+}: PermissionLinkProps) {
+  if (hasPermission) {
+    return <LinkButton {...props} />;
+  }
+
+  return (
+    <SimpleTooltip
+      button={
+        <ButtonContent
+          {...(props as ButtonContentPropsType)}
+          className={cn(props.className, "cursor-not-allowed opacity-50")}
+        />
+      }
+      content={noPermissionTooltip ?? DEFAULT_NO_PERMISSION_TOOLTIP}
+      disableHoverableContent
+    />
+  );
+}

apps/webapp/app/components/runs/v3/TaskRunsTable.tsx

@@ -79,6 +79,14 @@ type RunsTableProps = {
   showTopBorder?: boolean;
   stickyHeader?: boolean;
   childrenStatusesBasePath?: string;
+  /**
+   * Display-only write:runs flags from the caller's loader. Default true so
+   * callers that don't pass them (and OSS, where the ability is permissive)
+   * keep the controls enabled. The cancel/replay action routes enforce
+   * write:runs regardless.
+   */
+  canCancelRuns?: boolean;
+  canReplayRuns?: boolean;
 };
 
 export function TaskRunsTable({
@@ -95,6 +103,8 @@ export function TaskRunsTable({
   showTopBorder = true,
   stickyHeader = false,
   childrenStatusesBasePath,
+  canCancelRuns = true,
+  canReplayRuns = true,
 }: RunsTableProps) {
   const regions = useRegions();
   const regionByMasterQueue = new Map(regions.map((r) => [r.masterQueue, r] as const));
@@ -512,7 +522,12 @@ export function TaskRunsTable({
                     {run.tags.map((tag) => <RunTag key={tag} tag={tag} />) || "–"}
                   </div>
                 </TableCell>
-                <RunActionsCell run={run} path={path} />
+                <RunActionsCell
+                  run={run}
+                  path={path}
+                  canCancelRuns={canCancelRuns}
+                  canReplayRuns={canReplayRuns}
+                />
               </TableRow>
             );
           })
@@ -530,7 +545,17 @@ export function TaskRunsTable({
   );
 }
 
-function RunActionsCell({ run, path }: { run: NextRunListItem; path: string }) {
+function RunActionsCell({
+  run,
+  path,
+  canCancelRuns,
+  canReplayRuns,
+}: {
+  run: NextRunListItem;
+  path: string;
+  canCancelRuns: boolean;
+  canReplayRuns: boolean;
+}) {
   const location = useLocation();
 
   if (!run.isCancellable && !run.isReplayable) return <TableCell to={path}>{""}</TableCell>;
@@ -546,57 +571,85 @@ function RunActionsCell({ run, path }: { run: NextRunListItem; path: string }) {
             leadingIconClassName="text-blue-500"
             title="View run"
           />
-          {run.isCancellable && (
-            <Dialog>
-              <DialogTrigger
-                asChild
-                className="size-6 rounded-sm p-1 text-text-dimmed transition hover:bg-charcoal-700 hover:text-text-bright"
-              >
-                <Button
-                  variant="small-menu-item"
-                  LeadingIcon={NoSymbolIcon}
-                  leadingIconClassName="text-error"
-                  fullWidth
-                  textAlignLeft
-                  className="w-full px-1.5 py-[0.9rem]"
+          {run.isCancellable &&
+            (canCancelRuns ? (
+              <Dialog>
+                <DialogTrigger
+                  asChild
+                  className="size-6 rounded-sm p-1 text-text-dimmed transition hover:bg-charcoal-700 hover:text-text-bright"
                 >
-                  Cancel run
-                </Button>
-              </DialogTrigger>
-              <CancelRunDialog
-                runFriendlyId={run.friendlyId}
-                redirectPath={`${location.pathname}${location.search}`}
-              />
-            </Dialog>
-          )}
-          {run.isReplayable && (
-            <Dialog>
-              <DialogTrigger
-                asChild
-                className="h-6 w-6 rounded-sm p-1 text-text-dimmed transition hover:bg-charcoal-700 hover:text-text-bright"
+                  <Button
+                    variant="small-menu-item"
+                    LeadingIcon={NoSymbolIcon}
+                    leadingIconClassName="text-error"
+                    fullWidth
+                    textAlignLeft
+                    className="w-full px-1.5 py-[0.9rem]"
+                  >
+                    Cancel run
+                  </Button>
+                </DialogTrigger>
+                <CancelRunDialog
+                  runFriendlyId={run.friendlyId}
+                  redirectPath={`${location.pathname}${location.search}`}
+                />
+              </Dialog>
+            ) : (
+              <Button
+                variant="small-menu-item"
+                LeadingIcon={NoSymbolIcon}
+                leadingIconClassName="text-error"
+                fullWidth
+                textAlignLeft
+                className="w-full px-1.5 py-[0.9rem]"
+                disabled
+                tooltip="You don't have permission to cancel runs"
               >
-                <Button
-                  variant="small-menu-item"
-                  LeadingIcon={ArrowPathIcon}
-                  leadingIconClassName="text-success"
-                  fullWidth
-                  textAlignLeft
-                  className="w-full px-1.5 py-[0.9rem]"
+                Cancel run
+              </Button>
+            ))}
+          {run.isReplayable &&
+            (canReplayRuns ? (
+              <Dialog>
+                <DialogTrigger
+                  asChild
+                  className="h-6 w-6 rounded-sm p-1 text-text-dimmed transition hover:bg-charcoal-700 hover:text-text-bright"
                 >
-                  Replay run…
-                </Button>
-              </DialogTrigger>
-              <ReplayRunDialog
-                runFriendlyId={run.friendlyId}
-                failedRedirect={`${location.pathname}${location.search}`}
-              />
-            </Dialog>
-          )}
+                  <Button
+                    variant="small-menu-item"
+                    LeadingIcon={ArrowPathIcon}
+                    leadingIconClassName="text-success"
+                    fullWidth
+                    textAlignLeft
+                    className="w-full px-1.5 py-[0.9rem]"
+                  >
+                    Replay run…
+                  </Button>
+                </DialogTrigger>
+                <ReplayRunDialog
+                  runFriendlyId={run.friendlyId}
+                  failedRedirect={`${location.pathname}${location.search}`}
+                />
+              </Dialog>
+            ) : (
+              <Button
+                variant="small-menu-item"
+                LeadingIcon={ArrowPathIcon}
+                leadingIconClassName="text-success"
+                fullWidth
+                textAlignLeft
+                className="w-full px-1.5 py-[0.9rem]"
+                disabled
+                tooltip="You don't have permission to replay runs"
+              >
+                Replay run…
+              </Button>
+            ))}
         </>
       }
       hiddenButtons={
         <>
-          {run.isCancellable && (
+          {run.isCancellable && canCancelRuns && (
             <SimpleTooltip
               button={
                 <Dialog>
@@ -617,10 +670,10 @@ function RunActionsCell({ run, path }: { run: NextRunListItem; path: string }) {
               disableHoverableContent
             />
           )}
-          {run.isCancellable && run.isReplayable && (
+          {run.isCancellable && canCancelRuns && run.isReplayable && canReplayRuns && (
             <div className="mx-0.5 h-6 w-px bg-grid-dimmed" />
           )}
-          {run.isReplayable && (
+          {run.isReplayable && canReplayRuns && (
             <SimpleTooltip
               button={
                 <Dialog>