Merge branch 'main' into run-store-write-adapter

Author: d-cs

.server-changes/llm-spend-currency-label.md

@@ -0,0 +1,6 @@
+---
+area: webapp
+type: improvement
+---
+
+Add a currency unit to the agent dashboard "LLM spend" chart label, so it now reads "LLM spend ($)".

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

@@ -0,0 +1,6 @@
+---
+area: webapp
+type: feature
+---
+
+Enforce role-based permissions across the dashboard and API. New permission boundaries cover: runs (cancel, replay, bulk actions), deployments (rollback, promote, cancel), prompt versions, organization members (invite, resend, revoke), billing and seat purchases, integrations (GitHub and Vercel), and environment variables and API keys (restricted by environment tier). Roles without access can no longer read or change these, gated controls are disabled with a tooltip, and gated pages show a permission-denied panel instead of redirecting away. Behaviour is unchanged in the default configuration, where permissions stay permissive.

.server-changes/sso.md

@@ -0,0 +1,6 @@
+---
+area: webapp
+type: feature
+---
+
+SAML/OIDC single sign-on: SSO login with optional per-domain enforcement, JIT provisioning, and periodic re-validation against the IdP.

.server-changes/task-type-filter-segmented-control.md

@@ -0,0 +1,6 @@
+---
+area: webapp
+type: improvement
+---
+
+Replace the Task type filter on the Tasks page with a segmented control: "All" plus icon-only Agent, Standard, and Scheduled segments (each with a tooltip showing its label and number-key shortcut). Filtering is now single-select (one task type at a time) instead of multi-select. Shortcut keys 0–3 select each segment.

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/navigation/OrganizationSettingsSideMenu.tsx

@@ -1,10 +1,9 @@
-import { ArrowLeftIcon } from "@heroicons/react/24/solid";
+import { ArrowLeftIcon, LinkIcon } from "@heroicons/react/24/solid";
 import { BellIcon } from "~/assets/icons/BellIcon";
 import { CreditCardIcon } from "~/assets/icons/CreditCardIcon";
 import { PadlockIcon } from "~/assets/icons/PadlockIcon";
 import { UsageIcon } from "~/assets/icons/UsageIcon";
 import { RolesIcon } from "~/assets/icons/RolesIcon";
-import { ShieldLockIcon } from "~/assets/icons/ShieldLockIcon";
 import { SlackIcon } from "~/assets/icons/SlackIcon";
 import { SlidersIcon } from "~/assets/icons/SlidersIcon";
 import { UserGroupIcon } from "~/assets/icons/UserGroupIcon";
@@ -17,6 +16,7 @@ import {
   organizationRolesPath,
   organizationSettingsPath,
   organizationSlackIntegrationPath,
+  organizationSsoPath,
   organizationTeamPath,
   organizationVercelIntegrationPath,
   rootPath,
@@ -48,10 +48,12 @@ export function OrganizationSettingsSideMenu({
   organization,
   buildInfo,
   isUsingPlugin,
+  isSsoUsingPlugin,
 }: {
   organization: MatchedOrganization;
   buildInfo: BuildInfo;
   isUsingPlugin: boolean;
+  isSsoUsingPlugin: boolean;
 }) {
   const { isManagedCloud } = useFeatures();
   const featureFlags = useFeatureFlags();
@@ -128,7 +130,7 @@ export function OrganizationSettingsSideMenu({
           {featureFlags.hasPrivateConnections && (
             <SideMenuItem
               name="Private Connections"
-              icon={PadlockIcon}
+              icon={LinkIcon}
               activeIconColor="text-text-bright"
               inactiveIconColor="text-text-dimmed"
               to={v3PrivateConnectionsPath(organization)}
@@ -145,6 +147,21 @@ export function OrganizationSettingsSideMenu({
               data-action="roles"
             />
           )}
+          {isManagedCloud && isSsoUsingPlugin && (
+            <SideMenuItem
+              name="SSO"
+              icon={PadlockIcon}
+              activeIconColor="text-text-bright"
+              inactiveIconColor="text-text-dimmed"
+              to={organizationSsoPath(organization)}
+              data-action="sso"
+              badge={
+                currentPlan?.v3Subscription?.plan?.code === "enterprise" ? undefined : (
+                  <Badge variant="extra-small">Enterprise</Badge>
+                )
+              }
+            />
+          )}
           <SideMenuItem
             name="Settings"
             icon={SlidersIcon}

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
+    />
+  );
+}