From f1ba0d2156a9d160602ff0296ef0665cf2ee86e9 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 11 Aug 2026 13:26:17 +0000
Subject: [PATCH 1/5] fix(webapp): make Esc close consistently across dialogs,
 sheets and panels

- Vercel onboarding modal no longer renders a close button and Esc hint in
  the marketplace flow, where dismissal is intentionally blocked
- The authenticator app setup dialog can be dismissed with Esc or the close
  button; the recovery codes step stays deliberately non-dismissible
- The dashboard chat panel closes with Esc, using the same shortcut button
  the other detail panels use
- Every sheet gets the Esc hint from a shared close button in SheetContent
  instead of opting in via SheetTitle
- Panel close shortcuts fire while a form field is focused
- A shortcut is ignored while its button sits behind an open overlay, so one
  Esc no longer closes both a dialog and the panel behind it

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .server-changes/esc-to-close-fixes.md         |  6 ++++
 .../dashboard-agent/DashboardAgentHeader.tsx  | 11 ++++++-
 .../errors/ConfigureErrorAlerts.tsx           |  9 ------
 .../integrations/VercelOnboardingModal.tsx    | 12 ++++++--
 .../app/components/logs/LogDetailView.tsx     |  4 +--
 .../app/components/primitives/Buttons.tsx     |  2 ++
 .../app/components/primitives/SheetV3.tsx     | 24 ++++++++++-----
 apps/webapp/app/hooks/useShortcutKeys.tsx     | 29 +++++++++++++++++--
 .../route.tsx                                 |  2 +-
 .../route.tsx                                 |  2 +-
 .../route.tsx                                 |  2 +-
 .../route.tsx                                 |  2 ++
 .../route.tsx                                 |  2 +-
 .../route.tsx                                 |  2 +-
 .../route.tsx                                 |  2 +-
 .../route.tsx                                 |  2 +-
 .../MfaSetupDialog.tsx                        |  6 ++--
 .../route.tsx                                 |  4 +--
 ...ectParam.env.$envParam.runs.bulkaction.tsx |  2 +-
 .../route.tsx                                 |  2 +-
 20 files changed, 89 insertions(+), 38 deletions(-)
 create mode 100644 .server-changes/esc-to-close-fixes.md

diff --git a/.server-changes/esc-to-close-fixes.md b/.server-changes/esc-to-close-fixes.md
new file mode 100644
index 00000000000..34f526cd773
--- /dev/null
+++ b/.server-changes/esc-to-close-fixes.md
@@ -0,0 +1,6 @@
+---
+area: webapp
+type: fix
+---
+
+Esc now closes the chat panel, the authenticator app setup dialog, and detail panels while you're typing in one of their fields, and every side sheet shows its Esc shortcut. Closing a dialog with Esc no longer also closes the panel behind it, and the Vercel setup modal no longer shows a close button it ignores.
diff --git a/apps/webapp/app/components/dashboard-agent/DashboardAgentHeader.tsx b/apps/webapp/app/components/dashboard-agent/DashboardAgentHeader.tsx
index 11d486bc1d3..6ff03fb3320 100644
--- a/apps/webapp/app/components/dashboard-agent/DashboardAgentHeader.tsx
+++ b/apps/webapp/app/components/dashboard-agent/DashboardAgentHeader.tsx
@@ -1,4 +1,5 @@
 import { ClockIcon, PencilSquareIcon, XMarkIcon } from "@heroicons/react/20/solid";
+import { Button } from "~/components/primitives/Buttons";
 import { cn } from "~/utils/cn";
 
 export function DashboardAgentHeader({
@@ -23,7 +24,15 @@ export function DashboardAgentHeader({
           onClick={onToggleHistory}
           active={view === "history"}
         />
-        <IconButton label="Close" icon={XMarkIcon} onClick={onClose} />
+        <Button
+          onClick={onClose}
+          variant="minimal/small"
+          TrailingIcon={XMarkIcon}
+          shortcut={{ key: "esc", enabledOnInputElements: true }}
+          shortcutPosition="before-trailing-icon"
+          className="pl-1"
+          aria-label="Close"
+        />
       </div>
     </div>
   );
diff --git a/apps/webapp/app/components/errors/ConfigureErrorAlerts.tsx b/apps/webapp/app/components/errors/ConfigureErrorAlerts.tsx
index b126e77b34b..4d09bf3333e 100644
--- a/apps/webapp/app/components/errors/ConfigureErrorAlerts.tsx
+++ b/apps/webapp/app/components/errors/ConfigureErrorAlerts.tsx
@@ -7,7 +7,6 @@ import { useFetcher, useNavigate } from "@remix-run/react";
 import { SlackIcon } from "@trigger.dev/companyicons";
 import { Fragment, useEffect, useRef, useState } from "react";
 import { z } from "zod";
-import { ExitIcon } from "~/assets/icons/ExitIcon";
 import { InlineCode } from "~/components/code/InlineCode";
 import { Button, LinkButton } from "~/components/primitives/Buttons";
 import { Callout, variantClasses } from "~/components/primitives/Callout";
@@ -120,14 +119,6 @@ export function ConfigureErrorAlerts({
         <Header2 className="flex items-center gap-2">
           <BellAlertIcon className="size-5 text-alerts" /> Configure alerts
         </Header2>
-        <LinkButton
-          to={closeHref}
-          variant="minimal/small"
-          TrailingIcon={ExitIcon}
-          shortcut={{ key: "esc" }}
-          shortcutPosition="before-trailing-icon"
-          className="pl-1"
-        />
       </div>
 
       <fetcher.Form method="post" action={formAction} {...getFormProps(form)} className="contents">
diff --git a/apps/webapp/app/components/integrations/VercelOnboardingModal.tsx b/apps/webapp/app/components/integrations/VercelOnboardingModal.tsx
index bda62a1b32f..530304391e0 100644
--- a/apps/webapp/app/components/integrations/VercelOnboardingModal.tsx
+++ b/apps/webapp/app/components/integrations/VercelOnboardingModal.tsx
@@ -747,7 +747,11 @@ export function VercelOnboardingModal({
           }
         }}
       >
-        <DialogContent className="max-w-lg" onInteractOutside={(e) => e.preventDefault()}>
+        <DialogContent
+          className="max-w-lg"
+          onInteractOutside={(e) => e.preventDefault()}
+          showCloseButton={!fromMarketplaceContext}
+        >
           <DialogHeader>
             <div className="flex items-center gap-2">
               <VercelLogo className="size-5" />
@@ -787,7 +791,11 @@ export function VercelOnboardingModal({
         }
       }}
     >
-      <DialogContent className="max-w-lg" onInteractOutside={(e) => e.preventDefault()}>
+      <DialogContent
+        className="max-w-lg"
+        onInteractOutside={(e) => e.preventDefault()}
+        showCloseButton={!fromMarketplaceContext}
+      >
         <DialogHeader>
           <div className="flex items-center gap-2">
             <VercelLogo className="size-5" />
diff --git a/apps/webapp/app/components/logs/LogDetailView.tsx b/apps/webapp/app/components/logs/LogDetailView.tsx
index c0f52b76a46..8e6d5d09303 100644
--- a/apps/webapp/app/components/logs/LogDetailView.tsx
+++ b/apps/webapp/app/components/logs/LogDetailView.tsx
@@ -117,7 +117,7 @@ export function LogDetailView({ logId, initialLog, onClose, searchTerm }: LogDet
             onClick={onClose}
             variant="minimal/small"
             TrailingIcon={ExitIcon}
-            shortcut={{ key: "esc" }}
+            shortcut={{ key: "esc", enabledOnInputElements: true }}
             shortcutPosition="before-trailing-icon"
             className="pl-1"
           />
@@ -138,7 +138,7 @@ export function LogDetailView({ logId, initialLog, onClose, searchTerm }: LogDet
           onClick={onClose}
           variant="minimal/small"
           TrailingIcon={ExitIcon}
-          shortcut={{ key: "esc" }}
+          shortcut={{ key: "esc", enabledOnInputElements: true }}
           shortcutPosition="before-trailing-icon"
           className="pl-1"
         />
diff --git a/apps/webapp/app/components/primitives/Buttons.tsx b/apps/webapp/app/components/primitives/Buttons.tsx
index 78b201b90e0..4a19157d2eb 100644
--- a/apps/webapp/app/components/primitives/Buttons.tsx
+++ b/apps/webapp/app/components/primitives/Buttons.tsx
@@ -397,6 +397,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonPropsType>(
         }
       },
       disabled: isDisabled || !props.shortcut,
+      elementRef: innerRef,
     });
 
     const buttonElement = (
@@ -467,6 +468,7 @@ export const LinkButton = ({
       }
     },
     disabled: disabled || !props.shortcut,
+    elementRef: innerRef,
   });
 
   if (disabled) {
diff --git a/apps/webapp/app/components/primitives/SheetV3.tsx b/apps/webapp/app/components/primitives/SheetV3.tsx
index 922f28d5baf..d24cdcdf5a5 100644
--- a/apps/webapp/app/components/primitives/SheetV3.tsx
+++ b/apps/webapp/app/components/primitives/SheetV3.tsx
@@ -50,15 +50,28 @@ const sheetVariants = cva(
 interface SheetContentProps
   extends
     React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
-    VariantProps<typeof sheetVariants> {}
+    VariantProps<typeof sheetVariants> {
+  showCloseButton?: boolean;
+}
 
 const SheetContent = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Content>,
   SheetContentProps
->(({ side = "right", className, children, ...props }, ref) => (
+>(({ side = "right", className, children, showCloseButton = true, ...props }, ref) => (
   <SheetPortal>
     <SheetOverlay />
     <SheetPrimitive.Content ref={ref} className={cn(sheetVariants({ side }), className)} {...props}>
+      {showCloseButton && (
+        // Zero-height sticky wrapper so the button stays pinned to the top right
+        // even when the sheet itself is the scrolling element.
+        <div className="sticky top-0 z-10 h-0">
+          <SheetPrimitive.Close className="absolute right-2 top-2 flex items-center gap-1 rounded-sm p-1 pl-0 transition hover:bg-background-hover focus-visible:focus-custom disabled:pointer-events-none">
+            <ShortcutKey shortcut={{ key: "esc" }} variant="small" />
+            <XMarkIcon className="size-4 text-text-dimmed" />
+            <span className="sr-only">Close</span>
+          </SheetPrimitive.Close>
+        </div>
+      )}
       {children}
     </SheetPrimitive.Content>
   </SheetPortal>
@@ -85,17 +98,12 @@ const SheetTitle = React.forwardRef<
   <SheetPrimitive.Title
     ref={ref}
     className={cn(
-      "sticky top-0 flex items-center justify-between border-b border-grid-bright bg-background-dimmed pb-1.5 pl-3 pr-1.5 pt-2",
+      "sticky top-0 flex items-center justify-between border-b border-grid-bright bg-background-dimmed pb-1.5 pl-3 pr-12 pt-2",
       className
     )}
     {...props}
   >
     {children}
-    <SheetPrimitive.Close className="flex items-center gap-1 rounded-sm p-1 pl-0 transition hover:bg-background-hover focus-visible:focus-custom disabled:pointer-events-none">
-      <ShortcutKey shortcut={{ key: "esc" }} variant="small" />
-      <XMarkIcon className="size-4 text-text-dimmed" />
-      <span className="sr-only">Close</span>
-    </SheetPrimitive.Close>
   </SheetPrimitive.Title>
 ));
 SheetTitle.displayName = SheetPrimitive.Title.displayName;
diff --git a/apps/webapp/app/hooks/useShortcutKeys.tsx b/apps/webapp/app/hooks/useShortcutKeys.tsx
index 319a91cad84..ba4552221c8 100644
--- a/apps/webapp/app/hooks/useShortcutKeys.tsx
+++ b/apps/webapp/app/hooks/useShortcutKeys.tsx
@@ -1,3 +1,4 @@
+import { type RefObject } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
 import { useOperatingSystem } from "~/components/primitives/OperatingSystemProvider";
 import { useShortcuts } from "~/components/primitives/ShortcutsProvider";
@@ -23,13 +24,34 @@ type useShortcutKeysProps = {
   action: (event: KeyboardEvent) => void;
   disabled?: boolean;
   enabledOnInputElements?: boolean;
+  /**
+   * The element this shortcut belongs to. When set, the shortcut is ignored while
+   * the element sits behind an open overlay, so one Escape can't close both a
+   * dialog and the panel behind it.
+   */
+  elementRef?: RefObject<HTMLElement | null>;
 };
 
+/** Layered surfaces that own the keyboard while they're open. */
+const OVERLAY_ROLES = '[role="dialog"],[role="alertdialog"],[role="listbox"],[role="menu"]';
+
+function isBlockedByOverlay(event: KeyboardEvent, element: HTMLElement | null) {
+  // Radix marks everything outside an open modal `aria-hidden`, which covers
+  // modals that don't move focus into themselves.
+  if (element?.closest('[aria-hidden="true"]')) return true;
+
+  const target = event.target instanceof Element ? event.target : null;
+  const overlay = target?.closest(OVERLAY_ROLES);
+
+  return !!overlay && (!element || !overlay.contains(element));
+}
+
 export function useShortcutKeys({
   shortcut,
   action,
   disabled = false,
   enabledOnInputElements,
+  elementRef,
 }: useShortcutKeysProps) {
   const { platform } = useOperatingSystem();
   const { areShortcutsEnabled } = useShortcuts();
@@ -44,9 +66,10 @@ export function useShortcutKeys({
   useHotkeys(
     keys,
     (event) => {
-      if (!event.repeat) {
-        action(event);
-      }
+      if (event.repeat) return;
+      if (elementRef && isBlockedByOverlay(event, elementRef.current)) return;
+
+      action(event);
     },
     {
       enabled: isEnabled,
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam._index/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam._index/route.tsx
index e8e4463ef02..1676d683598 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam._index/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam._index/route.tsx
@@ -844,7 +844,7 @@ function NewTaskPromptsPanel({ onClose }: { onClose: () => void }) {
           onClick={onClose}
           variant="minimal/small"
           TrailingIcon={ExitIcon}
-          shortcut={{ key: "esc" }}
+          shortcut={{ key: "esc", enabledOnInputElements: true }}
           shortcutPosition="before-trailing-icon"
           className="pl-1"
         />
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.batches.$batchParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.batches.$batchParam/route.tsx
index 756b4cfcce4..4439e9676bf 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.batches.$batchParam/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.batches.$batchParam/route.tsx
@@ -96,7 +96,7 @@ export default function Page() {
           to={v3BatchesPath(organization, project, environment)}
           variant="minimal/small"
           TrailingIcon={ExitIcon}
-          shortcut={{ key: "esc" }}
+          shortcut={{ key: "esc", enabledOnInputElements: true }}
           shortcutPosition="before-trailing-icon"
           className="pl-1"
         />
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.bulk-actions.$bulkActionParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.bulk-actions.$bulkActionParam/route.tsx
index 2a4816e5a65..649d5c38ee6 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.bulk-actions.$bulkActionParam/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.bulk-actions.$bulkActionParam/route.tsx
@@ -183,7 +183,7 @@ export default function Page() {
           to={v3BulkActionsPath(organization, project, environment)}
           variant="minimal/small"
           TrailingIcon={ExitIcon}
-          shortcut={{ key: "esc" }}
+          shortcut={{ key: "esc", enabledOnInputElements: true }}
           shortcutPosition="before-trailing-icon"
           className="pl-1"
         />
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.dashboards.custom.$dashboardId/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.dashboards.custom.$dashboardId/route.tsx
index 0a1b448564f..f65507e8dfa 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.dashboards.custom.$dashboardId/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.dashboards.custom.$dashboardId/route.tsx
@@ -569,6 +569,8 @@ export default function Page() {
         <SheetContent
           side="right"
           className="w-[90vw] max-w-none rounded-l-lg border-l border-grid-dimmed p-0 sm:max-w-none"
+          // The editor's own nav bar already has an Esc-labelled Cancel button there.
+          showCloseButton={false}
         >
           {editorProps && (
             <QueryEditor
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.deployments.$deploymentParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.deployments.$deploymentParam/route.tsx
index 73e1752715b..f938515e060 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.deployments.$deploymentParam/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.deployments.$deploymentParam/route.tsx
@@ -340,7 +340,7 @@ export default function Page() {
           }`}
           variant="minimal/small"
           TrailingIcon={ExitIcon}
-          shortcut={{ key: "esc" }}
+          shortcut={{ key: "esc", enabledOnInputElements: true }}
           shortcutPosition="before-trailing-icon"
           className="pl-1"
         />
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.models._index/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.models._index/route.tsx
index 24f08ee6954..3b52f18211b 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.models._index/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.models._index/route.tsx
@@ -890,7 +890,7 @@ function ModelDetailPanel({
           onClick={onClose}
           variant="minimal/small"
           TrailingIcon={ExitIcon}
-          shortcut={{ key: "esc" }}
+          shortcut={{ key: "esc", enabledOnInputElements: true }}
           shortcutPosition="before-trailing-icon"
           className="pl-1"
         />
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.schedules.$scheduleParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.schedules.$scheduleParam/route.tsx
index 529bec93aed..ff98e9e932e 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.schedules.$scheduleParam/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.schedules.$scheduleParam/route.tsx
@@ -208,7 +208,7 @@ export default function Page() {
           to={`${v3EnvironmentPath(organization, project, environment)}${location.search}`}
           variant="minimal/small"
           TrailingIcon={ExitIcon}
-          shortcut={{ key: "esc" }}
+          shortcut={{ key: "esc", enabledOnInputElements: true }}
           shortcutPosition="before-trailing-icon"
           className="pl-1"
         />
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.waitpoints.tokens.$waitpointParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.waitpoints.tokens.$waitpointParam/route.tsx
index 879e815567a..7aa262bfd82 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.waitpoints.tokens.$waitpointParam/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.waitpoints.tokens.$waitpointParam/route.tsx
@@ -115,7 +115,7 @@ export default function Page() {
           to={`${v3WaitpointTokensPath(organization, project, environment)}${location.search}`}
           variant="minimal/small"
           TrailingIcon={ExitIcon}
-          shortcut={{ key: "esc" }}
+          shortcut={{ key: "esc", enabledOnInputElements: true }}
           shortcutPosition="before-trailing-icon"
           className="pl-1"
         />
diff --git a/apps/webapp/app/routes/resources.account.mfa.setup/MfaSetupDialog.tsx b/apps/webapp/app/routes/resources.account.mfa.setup/MfaSetupDialog.tsx
index 3f5bb9ff367..56e6b4de3ea 100644
--- a/apps/webapp/app/routes/resources.account.mfa.setup/MfaSetupDialog.tsx
+++ b/apps/webapp/app/routes/resources.account.mfa.setup/MfaSetupDialog.tsx
@@ -75,6 +75,8 @@ export function MfaSetupDialog({
 
   // Show recovery codes if they exist
   if (recoveryCodes && recoveryCodes.length > 0) {
+    // Deliberately not dismissible: MFA is already enabled at this point and the
+    // codes are shown once, so the only way out is confirming they're saved.
     return (
       <Dialog open={isOpen}>
         <DialogContent showCloseButton={false}>
@@ -136,8 +138,8 @@ export function MfaSetupDialog({
   if (!setupData) return null;
 
   return (
-    <Dialog open={isOpen}>
-      <DialogContent showCloseButton={false}>
+    <Dialog open={isOpen} onOpenChange={handleCancel}>
+      <DialogContent>
         <DialogHeader>
           <DialogTitle>Enable authenticator app</DialogTitle>
         </DialogHeader>
diff --git a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.spans.$spanParam/route.tsx b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.spans.$spanParam/route.tsx
index ed3e50f27a1..3c28c742887 100644
--- a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.spans.$spanParam/route.tsx
+++ b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.spans.$spanParam/route.tsx
@@ -333,7 +333,7 @@ function SpanBody({
               onClick={closePanel}
               variant="minimal/small"
               TrailingIcon={ExitIcon}
-              shortcut={{ key: "esc" }}
+              shortcut={{ key: "esc", enabledOnInputElements: true }}
               shortcutPosition="before-trailing-icon"
               className="pl-1"
             />
@@ -445,7 +445,7 @@ function RunBody({
             onClick={closePanel}
             variant="minimal/small"
             TrailingIcon={ExitIcon}
-            shortcut={{ key: "esc" }}
+            shortcut={{ key: "esc", enabledOnInputElements: true }}
             shortcutPosition="before-trailing-icon"
             className="pl-1"
           />
diff --git a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.bulkaction.tsx b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.bulkaction.tsx
index 5bef068b994..be8ad9afcaa 100644
--- a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.bulkaction.tsx
+++ b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.bulkaction.tsx
@@ -315,7 +315,7 @@ export function CreateBulkActionInspector({
             variant="minimal/small"
             onClick={() => del([...RUNS_BULK_INSPECTOR_UI_SEARCH_PARAMS])}
             TrailingIcon={ExitIcon}
-            shortcut={{ key: "esc" }}
+            shortcut={{ key: "esc", enabledOnInputElements: true }}
             shortcutPosition="before-trailing-icon"
             className="pl-1"
           />
diff --git a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.schedules.new/route.tsx b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.schedules.new/route.tsx
index 61ce814dbd5..f7130d2e728 100644
--- a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.schedules.new/route.tsx
+++ b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.schedules.new/route.tsx
@@ -231,7 +231,7 @@ export function UpsertScheduleForm({
       {...getFormProps(form)}
       className="grid h-full max-h-full grid-rows-[2.5rem_1fr_auto] overflow-hidden bg-background-bright"
     >
-      <div className="mx-3 flex min-w-0 items-center justify-between gap-2 overflow-hidden border-b border-grid-dimmed">
+      <div className="mx-3 flex min-w-0 items-center justify-between gap-2 overflow-hidden border-b border-grid-dimmed pr-10">
         <Header2 className="truncate">
           {schedule?.friendlyId
             ? "Edit schedule"

From 44973d12e3b90c3d514ed947b7d4632c5a4f47ba Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 11 Aug 2026 13:47:00 +0000
Subject: [PATCH 2/5] fix(webapp): address review on Esc-to-close changes

- MFA setup: only Escape and the close button cancel the pending TOTP
  secret; outside clicks are prevented and onOpenChange guards on `open`.
- Make Esc-from-input a per-panel decision: drop it on the panels that
  host an editor or a form (waitpoint token, span, bulk-action inspector)
  and blur instead of closing when the agent composer holds a draft.
- Scope the overlay guard to Escape shortcuts so it no longer changes
  behaviour for every Button/LinkButton shortcut app-wide.
- Reserve room for the sheet's floating close button in the alerts and
  schedule inspector headers, and drop a vestigial `justify-between`.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .server-changes/esc-to-close-fixes.md           |  2 +-
 .../dashboard-agent/DashboardAgentComposer.tsx  |  5 +++++
 .../components/errors/ConfigureErrorAlerts.tsx  |  2 +-
 .../app/components/primitives/SheetV3.tsx       |  2 +-
 .../components/schedules/ScheduleInspector.tsx  | 10 ++++++++--
 apps/webapp/app/hooks/useShortcutKeys.tsx       | 17 +++++++++++++----
 .../route.tsx                                   |  2 +-
 .../MfaSetupDialog.tsx                          |  4 ++--
 .../route.tsx                                   |  2 +-
 ...ojectParam.env.$envParam.runs.bulkaction.tsx |  2 +-
 .../route.tsx                                   |  2 +-
 11 files changed, 35 insertions(+), 15 deletions(-)

diff --git a/.server-changes/esc-to-close-fixes.md b/.server-changes/esc-to-close-fixes.md
index 34f526cd773..ad1d89967da 100644
--- a/.server-changes/esc-to-close-fixes.md
+++ b/.server-changes/esc-to-close-fixes.md
@@ -3,4 +3,4 @@ area: webapp
 type: fix
 ---
 
-Esc now closes the chat panel, the authenticator app setup dialog, and detail panels while you're typing in one of their fields, and every side sheet shows its Esc shortcut. Closing a dialog with Esc no longer also closes the panel behind it, and the Vercel setup modal no longer shows a close button it ignores.
+Esc now closes the authenticator app setup window, the chat panel, and detail panels while you're typing in one of their fields. Panels that hold an editor or a form you're filling in keep what you've typed instead of closing, and clicking outside the authenticator app setup window no longer cancels the setup. Every side sheet now shows its Esc shortcut, closing a dialog with Esc no longer also closes the panel behind it, and the Vercel setup modal no longer shows a close button it ignores.
diff --git a/apps/webapp/app/components/dashboard-agent/DashboardAgentComposer.tsx b/apps/webapp/app/components/dashboard-agent/DashboardAgentComposer.tsx
index 308a87ebab1..8e198b37295 100644
--- a/apps/webapp/app/components/dashboard-agent/DashboardAgentComposer.tsx
+++ b/apps/webapp/app/components/dashboard-agent/DashboardAgentComposer.tsx
@@ -31,6 +31,11 @@ export function DashboardAgentComposer({
                 e.preventDefault();
                 onSubmit();
               }
+              // Keep an unsent message: Esc blurs first, so only a second Esc closes the panel.
+              if (e.key === "Escape" && value.trim().length > 0) {
+                e.stopPropagation();
+                e.currentTarget.blur();
+              }
             }}
             placeholder="Type a message…"
             className={cn(
diff --git a/apps/webapp/app/components/errors/ConfigureErrorAlerts.tsx b/apps/webapp/app/components/errors/ConfigureErrorAlerts.tsx
index 4d09bf3333e..1b4c370ca83 100644
--- a/apps/webapp/app/components/errors/ConfigureErrorAlerts.tsx
+++ b/apps/webapp/app/components/errors/ConfigureErrorAlerts.tsx
@@ -115,7 +115,7 @@ export function ConfigureErrorAlerts({
 
   return (
     <div className="grid h-full grid-rows-[auto_1fr_auto] overflow-hidden">
-      <div className="flex items-center justify-between border-b border-grid-bright px-3 py-2">
+      <div className="flex items-center border-b border-grid-bright py-2 pl-3 pr-16">
         <Header2 className="flex items-center gap-2">
           <BellAlertIcon className="size-5 text-alerts" /> Configure alerts
         </Header2>
diff --git a/apps/webapp/app/components/primitives/SheetV3.tsx b/apps/webapp/app/components/primitives/SheetV3.tsx
index d24cdcdf5a5..9c64a706942 100644
--- a/apps/webapp/app/components/primitives/SheetV3.tsx
+++ b/apps/webapp/app/components/primitives/SheetV3.tsx
@@ -98,7 +98,7 @@ const SheetTitle = React.forwardRef<
   <SheetPrimitive.Title
     ref={ref}
     className={cn(
-      "sticky top-0 flex items-center justify-between border-b border-grid-bright bg-background-dimmed pb-1.5 pl-3 pr-12 pt-2",
+      "sticky top-0 flex items-center justify-between border-b border-grid-bright bg-background-dimmed pb-1.5 pl-3 pr-16 pt-2",
       className
     )}
     {...props}
diff --git a/apps/webapp/app/components/schedules/ScheduleInspector.tsx b/apps/webapp/app/components/schedules/ScheduleInspector.tsx
index 1d0de51dc94..86da01fa691 100644
--- a/apps/webapp/app/components/schedules/ScheduleInspector.tsx
+++ b/apps/webapp/app/components/schedules/ScheduleInspector.tsx
@@ -107,8 +107,14 @@ export function ScheduleInspector({
         isImperative ? "grid-rows-[2.5rem_1fr_auto]" : "grid-rows-[2.5rem_1fr]"
       )}
     >
-      <div className="mx-3 flex items-center justify-between gap-2 border-b border-grid-dimmed">
-        <Header2 className="whitespace-nowrap">{schedule.friendlyId}</Header2>
+      <div
+        className={cn(
+          "mx-3 flex items-center justify-between gap-2 border-b border-grid-dimmed",
+          // Without header actions the sheet's own floating close button sits here.
+          !headerActions && "pr-14"
+        )}
+      >
+        <Header2 className="truncate">{schedule.friendlyId}</Header2>
         {headerActions}
       </div>
       <div className="overflow-y-scroll scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
diff --git a/apps/webapp/app/hooks/useShortcutKeys.tsx b/apps/webapp/app/hooks/useShortcutKeys.tsx
index ba4552221c8..2f1ec4a51fe 100644
--- a/apps/webapp/app/hooks/useShortcutKeys.tsx
+++ b/apps/webapp/app/hooks/useShortcutKeys.tsx
@@ -25,9 +25,9 @@ type useShortcutKeysProps = {
   disabled?: boolean;
   enabledOnInputElements?: boolean;
   /**
-   * The element this shortcut belongs to. When set, the shortcut is ignored while
-   * the element sits behind an open overlay, so one Escape can't close both a
-   * dialog and the panel behind it.
+   * The element this shortcut belongs to. When set, an Escape shortcut is ignored
+   * while the element sits behind an open overlay, so one Escape can't close both
+   * a dialog and the panel behind it. Other shortcuts are unaffected.
    */
   elementRef?: RefObject<HTMLElement | null>;
 };
@@ -35,6 +35,12 @@ type useShortcutKeysProps = {
 /** Layered surfaces that own the keyboard while they're open. */
 const OVERLAY_ROLES = '[role="dialog"],[role="alertdialog"],[role="listbox"],[role="menu"]';
 
+const ESCAPE_KEYS = ["esc", "escape"];
+
+function isEscapeShortcut(shortcut: Shortcut | undefined) {
+  return !!shortcut && ESCAPE_KEYS.includes(shortcut.key.toLowerCase());
+}
+
 function isBlockedByOverlay(event: KeyboardEvent, element: HTMLElement | null) {
   // Radix marks everything outside an open modal `aria-hidden`, which covers
   // modals that don't move focus into themselves.
@@ -62,12 +68,15 @@ export function useShortcutKeys({
   const keys = createKeysFromShortcut(relevantShortcut);
 
   const isEnabled = !disabled && areShortcutsEnabled && relevantShortcut?.enabled !== false;
+  const guardAgainstOverlays = isEscapeShortcut(relevantShortcut);
 
   useHotkeys(
     keys,
     (event) => {
       if (event.repeat) return;
-      if (elementRef && isBlockedByOverlay(event, elementRef.current)) return;
+      if (guardAgainstOverlays && elementRef && isBlockedByOverlay(event, elementRef.current)) {
+        return;
+      }
 
       action(event);
     },
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.waitpoints.tokens.$waitpointParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.waitpoints.tokens.$waitpointParam/route.tsx
index 7aa262bfd82..879e815567a 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.waitpoints.tokens.$waitpointParam/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.waitpoints.tokens.$waitpointParam/route.tsx
@@ -115,7 +115,7 @@ export default function Page() {
           to={`${v3WaitpointTokensPath(organization, project, environment)}${location.search}`}
           variant="minimal/small"
           TrailingIcon={ExitIcon}
-          shortcut={{ key: "esc", enabledOnInputElements: true }}
+          shortcut={{ key: "esc" }}
           shortcutPosition="before-trailing-icon"
           className="pl-1"
         />
diff --git a/apps/webapp/app/routes/resources.account.mfa.setup/MfaSetupDialog.tsx b/apps/webapp/app/routes/resources.account.mfa.setup/MfaSetupDialog.tsx
index 56e6b4de3ea..d40e394f8fa 100644
--- a/apps/webapp/app/routes/resources.account.mfa.setup/MfaSetupDialog.tsx
+++ b/apps/webapp/app/routes/resources.account.mfa.setup/MfaSetupDialog.tsx
@@ -138,8 +138,8 @@ export function MfaSetupDialog({
   if (!setupData) return null;
 
   return (
-    <Dialog open={isOpen} onOpenChange={handleCancel}>
-      <DialogContent>
+    <Dialog open={isOpen} onOpenChange={(open) => !open && handleCancel()}>
+      <DialogContent onInteractOutside={(e) => e.preventDefault()}>
         <DialogHeader>
           <DialogTitle>Enable authenticator app</DialogTitle>
         </DialogHeader>
diff --git a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.spans.$spanParam/route.tsx b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.spans.$spanParam/route.tsx
index 3c28c742887..09011d8c32b 100644
--- a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.spans.$spanParam/route.tsx
+++ b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.spans.$spanParam/route.tsx
@@ -333,7 +333,7 @@ function SpanBody({
               onClick={closePanel}
               variant="minimal/small"
               TrailingIcon={ExitIcon}
-              shortcut={{ key: "esc", enabledOnInputElements: true }}
+              shortcut={{ key: "esc" }}
               shortcutPosition="before-trailing-icon"
               className="pl-1"
             />
diff --git a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.bulkaction.tsx b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.bulkaction.tsx
index be8ad9afcaa..5bef068b994 100644
--- a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.bulkaction.tsx
+++ b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.bulkaction.tsx
@@ -315,7 +315,7 @@ export function CreateBulkActionInspector({
             variant="minimal/small"
             onClick={() => del([...RUNS_BULK_INSPECTOR_UI_SEARCH_PARAMS])}
             TrailingIcon={ExitIcon}
-            shortcut={{ key: "esc", enabledOnInputElements: true }}
+            shortcut={{ key: "esc" }}
             shortcutPosition="before-trailing-icon"
             className="pl-1"
           />
diff --git a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.schedules.new/route.tsx b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.schedules.new/route.tsx
index f7130d2e728..9df9265158c 100644
--- a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.schedules.new/route.tsx
+++ b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.schedules.new/route.tsx
@@ -231,7 +231,7 @@ export function UpsertScheduleForm({
       {...getFormProps(form)}
       className="grid h-full max-h-full grid-rows-[2.5rem_1fr_auto] overflow-hidden bg-background-bright"
     >
-      <div className="mx-3 flex min-w-0 items-center justify-between gap-2 overflow-hidden border-b border-grid-dimmed pr-10">
+      <div className="mx-3 flex min-w-0 items-center justify-between gap-2 overflow-hidden border-b border-grid-dimmed pr-14">
         <Header2 className="truncate">
           {schedule?.friendlyId
             ? "Edit schedule"

From 4f7113613714757cf0e86244cf3dbd9dd9afde62 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 11 Aug 2026 14:41:50 +0000
Subject: [PATCH 3/5] fix(webapp): stop Esc in a text field from closing panels

The Esc close shortcuts are registered on `document`, so
`enabledOnInputElements: true` made them fire from every input on the page,
not just fields inside the panel. Typing in a page-level search box or the
chat composer and pressing Esc closed the panel behind it.

The composer and SearchInput tried to guard against this with
`stopPropagation` on the React `onKeyDown`, which cannot work: the app
hydrates into `document`, so React's delegated listener and the hotkey
listener are siblings on the same node and only
`stopImmediatePropagation` would stop the other one.

Drop the flag from the nine Esc close shortcuts instead, so the focused
field handles Esc itself: it clears a search box or leaves the composer with
the draft intact, and a second Esc closes the panel.

Verified in a browser against the seeded References org: Esc from a
page-level search box or a composer with a draft no longer closes the chat
panel, a second Esc does, and Esc still closes dialogs, sheets, detail
panels, and closes only an open dropdown when one is layered over a panel.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .server-changes/esc-to-close-fixes.md                       | 2 +-
 .../components/dashboard-agent/DashboardAgentComposer.tsx   | 6 +++---
 .../app/components/dashboard-agent/DashboardAgentHeader.tsx | 2 +-
 apps/webapp/app/components/logs/LogDetailView.tsx           | 4 ++--
 apps/webapp/app/components/primitives/SearchInput.tsx       | 1 -
 apps/webapp/app/hooks/useShortcutKeys.tsx                   | 5 +++++
 .../route.tsx                                               | 2 +-
 .../route.tsx                                               | 2 +-
 .../route.tsx                                               | 2 +-
 .../route.tsx                                               | 2 +-
 .../route.tsx                                               | 2 +-
 .../route.tsx                                               | 2 +-
 .../route.tsx                                               | 2 +-
 13 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/.server-changes/esc-to-close-fixes.md b/.server-changes/esc-to-close-fixes.md
index ad1d89967da..89bc36db9c2 100644
--- a/.server-changes/esc-to-close-fixes.md
+++ b/.server-changes/esc-to-close-fixes.md
@@ -3,4 +3,4 @@ area: webapp
 type: fix
 ---
 
-Esc now closes the authenticator app setup window, the chat panel, and detail panels while you're typing in one of their fields. Panels that hold an editor or a form you're filling in keep what you've typed instead of closing, and clicking outside the authenticator app setup window no longer cancels the setup. Every side sheet now shows its Esc shortcut, closing a dialog with Esc no longer also closes the panel behind it, and the Vercel setup modal no longer shows a close button it ignores.
+Esc now closes the authenticator app setup window, the chat panel and detail panels, and clicking outside the authenticator app setup window no longer cancels the setup. While you're typing in a field, Esc leaves that field first — clearing a search box, or keeping an unsent message — so a second Esc closes the panel and a stray Esc no longer discards what you typed or shuts a panel you were working in. Every side sheet now shows its Esc shortcut, closing a dialog with Esc no longer also closes the panel behind it, and the Vercel setup modal no longer shows a close button it ignores.
diff --git a/apps/webapp/app/components/dashboard-agent/DashboardAgentComposer.tsx b/apps/webapp/app/components/dashboard-agent/DashboardAgentComposer.tsx
index 8e198b37295..32f56c11a27 100644
--- a/apps/webapp/app/components/dashboard-agent/DashboardAgentComposer.tsx
+++ b/apps/webapp/app/components/dashboard-agent/DashboardAgentComposer.tsx
@@ -31,9 +31,9 @@ export function DashboardAgentComposer({
                 e.preventDefault();
                 onSubmit();
               }
-              // Keep an unsent message: Esc blurs first, so only a second Esc closes the panel.
-              if (e.key === "Escape" && value.trim().length > 0) {
-                e.stopPropagation();
+              // Esc leaves the composer, so a second Esc closes the panel and an
+              // unsent message survives the first one.
+              if (e.key === "Escape") {
                 e.currentTarget.blur();
               }
             }}
diff --git a/apps/webapp/app/components/dashboard-agent/DashboardAgentHeader.tsx b/apps/webapp/app/components/dashboard-agent/DashboardAgentHeader.tsx
index 6ff03fb3320..fb125aedd7a 100644
--- a/apps/webapp/app/components/dashboard-agent/DashboardAgentHeader.tsx
+++ b/apps/webapp/app/components/dashboard-agent/DashboardAgentHeader.tsx
@@ -28,7 +28,7 @@ export function DashboardAgentHeader({
           onClick={onClose}
           variant="minimal/small"
           TrailingIcon={XMarkIcon}
-          shortcut={{ key: "esc", enabledOnInputElements: true }}
+          shortcut={{ key: "esc" }}
           shortcutPosition="before-trailing-icon"
           className="pl-1"
           aria-label="Close"
diff --git a/apps/webapp/app/components/logs/LogDetailView.tsx b/apps/webapp/app/components/logs/LogDetailView.tsx
index 8e6d5d09303..c0f52b76a46 100644
--- a/apps/webapp/app/components/logs/LogDetailView.tsx
+++ b/apps/webapp/app/components/logs/LogDetailView.tsx
@@ -117,7 +117,7 @@ export function LogDetailView({ logId, initialLog, onClose, searchTerm }: LogDet
             onClick={onClose}
             variant="minimal/small"
             TrailingIcon={ExitIcon}
-            shortcut={{ key: "esc", enabledOnInputElements: true }}
+            shortcut={{ key: "esc" }}
             shortcutPosition="before-trailing-icon"
             className="pl-1"
           />
@@ -138,7 +138,7 @@ export function LogDetailView({ logId, initialLog, onClose, searchTerm }: LogDet
           onClick={onClose}
           variant="minimal/small"
           TrailingIcon={ExitIcon}
-          shortcut={{ key: "esc", enabledOnInputElements: true }}
+          shortcut={{ key: "esc" }}
           shortcutPosition="before-trailing-icon"
           className="pl-1"
         />
diff --git a/apps/webapp/app/components/primitives/SearchInput.tsx b/apps/webapp/app/components/primitives/SearchInput.tsx
index 0c46a3d0286..520fa1c6b33 100644
--- a/apps/webapp/app/components/primitives/SearchInput.tsx
+++ b/apps/webapp/app/components/primitives/SearchInput.tsx
@@ -127,7 +127,6 @@ export function SearchInput({
             }
             if (e.key === "Escape") {
               if (text.length > 0) {
-                e.stopPropagation();
                 handleClear();
               } else {
                 e.currentTarget.blur();
diff --git a/apps/webapp/app/hooks/useShortcutKeys.tsx b/apps/webapp/app/hooks/useShortcutKeys.tsx
index 2f1ec4a51fe..d94db224f3d 100644
--- a/apps/webapp/app/hooks/useShortcutKeys.tsx
+++ b/apps/webapp/app/hooks/useShortcutKeys.tsx
@@ -23,6 +23,11 @@ type useShortcutKeysProps = {
   shortcut: ShortcutDefinition | undefined;
   action: (event: KeyboardEvent) => void;
   disabled?: boolean;
+  /**
+   * Shortcuts are registered on `document`, so this fires the shortcut from every
+   * input on the page, not just the ones near it. Don't set it on an Escape
+   * close shortcut: let the focused field handle Escape and close on the second press.
+   */
   enabledOnInputElements?: boolean;
   /**
    * The element this shortcut belongs to. When set, an Escape shortcut is ignored
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam._index/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam._index/route.tsx
index 1676d683598..e8e4463ef02 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam._index/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam._index/route.tsx
@@ -844,7 +844,7 @@ function NewTaskPromptsPanel({ onClose }: { onClose: () => void }) {
           onClick={onClose}
           variant="minimal/small"
           TrailingIcon={ExitIcon}
-          shortcut={{ key: "esc", enabledOnInputElements: true }}
+          shortcut={{ key: "esc" }}
           shortcutPosition="before-trailing-icon"
           className="pl-1"
         />
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.batches.$batchParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.batches.$batchParam/route.tsx
index 4439e9676bf..756b4cfcce4 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.batches.$batchParam/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.batches.$batchParam/route.tsx
@@ -96,7 +96,7 @@ export default function Page() {
           to={v3BatchesPath(organization, project, environment)}
           variant="minimal/small"
           TrailingIcon={ExitIcon}
-          shortcut={{ key: "esc", enabledOnInputElements: true }}
+          shortcut={{ key: "esc" }}
           shortcutPosition="before-trailing-icon"
           className="pl-1"
         />
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.bulk-actions.$bulkActionParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.bulk-actions.$bulkActionParam/route.tsx
index 649d5c38ee6..2a4816e5a65 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.bulk-actions.$bulkActionParam/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.bulk-actions.$bulkActionParam/route.tsx
@@ -183,7 +183,7 @@ export default function Page() {
           to={v3BulkActionsPath(organization, project, environment)}
           variant="minimal/small"
           TrailingIcon={ExitIcon}
-          shortcut={{ key: "esc", enabledOnInputElements: true }}
+          shortcut={{ key: "esc" }}
           shortcutPosition="before-trailing-icon"
           className="pl-1"
         />
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.deployments.$deploymentParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.deployments.$deploymentParam/route.tsx
index f938515e060..73e1752715b 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.deployments.$deploymentParam/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.deployments.$deploymentParam/route.tsx
@@ -340,7 +340,7 @@ export default function Page() {
           }`}
           variant="minimal/small"
           TrailingIcon={ExitIcon}
-          shortcut={{ key: "esc", enabledOnInputElements: true }}
+          shortcut={{ key: "esc" }}
           shortcutPosition="before-trailing-icon"
           className="pl-1"
         />
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.models._index/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.models._index/route.tsx
index 3b52f18211b..24f08ee6954 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.models._index/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.models._index/route.tsx
@@ -890,7 +890,7 @@ function ModelDetailPanel({
           onClick={onClose}
           variant="minimal/small"
           TrailingIcon={ExitIcon}
-          shortcut={{ key: "esc", enabledOnInputElements: true }}
+          shortcut={{ key: "esc" }}
           shortcutPosition="before-trailing-icon"
           className="pl-1"
         />
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.schedules.$scheduleParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.schedules.$scheduleParam/route.tsx
index ff98e9e932e..529bec93aed 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.schedules.$scheduleParam/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.schedules.$scheduleParam/route.tsx
@@ -208,7 +208,7 @@ export default function Page() {
           to={`${v3EnvironmentPath(organization, project, environment)}${location.search}`}
           variant="minimal/small"
           TrailingIcon={ExitIcon}
-          shortcut={{ key: "esc", enabledOnInputElements: true }}
+          shortcut={{ key: "esc" }}
           shortcutPosition="before-trailing-icon"
           className="pl-1"
         />
diff --git a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.spans.$spanParam/route.tsx b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.spans.$spanParam/route.tsx
index 09011d8c32b..ed3e50f27a1 100644
--- a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.spans.$spanParam/route.tsx
+++ b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.spans.$spanParam/route.tsx
@@ -445,7 +445,7 @@ function RunBody({
             onClick={closePanel}
             variant="minimal/small"
             TrailingIcon={ExitIcon}
-            shortcut={{ key: "esc", enabledOnInputElements: true }}
+            shortcut={{ key: "esc" }}
             shortcutPosition="before-trailing-icon"
             className="pl-1"
           />

From e2a727da5ac5f7ee797eb88aafd73e21eac20990 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 11 Aug 2026 15:03:39 +0000
Subject: [PATCH 4/5] docs(webapp): trim the Esc release note to what actually
 ships

The note claimed Esc closes detail panels and works while typing in one of
their fields. Neither ships: sheets already closed on Esc before this branch,
and the panel close shortcuts stay disabled inside inputs. It also claimed
outside clicks no longer cancel the authenticator setup, which they never did.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .server-changes/esc-to-close-fixes.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.server-changes/esc-to-close-fixes.md b/.server-changes/esc-to-close-fixes.md
index 89bc36db9c2..70e464ba106 100644
--- a/.server-changes/esc-to-close-fixes.md
+++ b/.server-changes/esc-to-close-fixes.md
@@ -3,4 +3,4 @@ area: webapp
 type: fix
 ---
 
-Esc now closes the authenticator app setup window, the chat panel and detail panels, and clicking outside the authenticator app setup window no longer cancels the setup. While you're typing in a field, Esc leaves that field first — clearing a search box, or keeping an unsent message — so a second Esc closes the panel and a stray Esc no longer discards what you typed or shuts a panel you were working in. Every side sheet now shows its Esc shortcut, closing a dialog with Esc no longer also closes the panel behind it, and the Vercel setup modal no longer shows a close button it ignores.
+Esc now closes the authenticator app setup window and the chat panel, and side sheets now show a close button with their Esc shortcut. Esc in the chat panel's message box just leaves the box, so an unsent message survives and a second Esc closes the panel. Closing a dialog with Esc no longer also closes the panel behind it, and the Vercel setup modal no longer shows a close button that does nothing.

From e83beb4d091bdeb91bb067f137ca2f510a285428 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 11 Aug 2026 15:19:44 +0000
Subject: [PATCH 5/5] fix(webapp): reserve sheet close-button space only inside
 a sheet

UpsertScheduleForm and ScheduleInspector each render both inside a sheet
and as a standalone page. Reserving room for the sheet's floating close
button unconditionally left an empty gap on the standalone edit route.

SheetContent now publishes whether it rendered the button via context and
the headers that sit under it read that, which also replaces the "has
header actions" stand-in for "am I in a sheet".

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../app/components/primitives/SheetV3.tsx     | 44 +++++++++++++------
 .../schedules/ScheduleInspector.tsx           |  5 ++-
 .../route.tsx                                 |  9 +++-
 3 files changed, 42 insertions(+), 16 deletions(-)

diff --git a/apps/webapp/app/components/primitives/SheetV3.tsx b/apps/webapp/app/components/primitives/SheetV3.tsx
index 9c64a706942..a9a71b8fde5 100644
--- a/apps/webapp/app/components/primitives/SheetV3.tsx
+++ b/apps/webapp/app/components/primitives/SheetV3.tsx
@@ -54,6 +54,17 @@ interface SheetContentProps
   showCloseButton?: boolean;
 }
 
+const SheetCloseButtonContext = React.createContext(false);
+
+/**
+ * True when an enclosing sheet renders its own floating close button, so a header
+ * rendered inside it has to leave room for it. False outside a sheet, which is why
+ * components used both in a sheet and as a full page can rely on it.
+ */
+export function useSheetHasCloseButton() {
+  return React.useContext(SheetCloseButtonContext);
+}
+
 const SheetContent = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Content>,
   SheetContentProps
@@ -72,7 +83,9 @@ const SheetContent = React.forwardRef<
           </SheetPrimitive.Close>
         </div>
       )}
-      {children}
+      <SheetCloseButtonContext.Provider value={showCloseButton}>
+        {children}
+      </SheetCloseButtonContext.Provider>
     </SheetPrimitive.Content>
   </SheetPortal>
 ));
@@ -94,18 +107,23 @@ SheetFooter.displayName = "SheetFooter";
 const SheetTitle = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Title>,
   React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
->(({ className, children, ...props }, ref) => (
-  <SheetPrimitive.Title
-    ref={ref}
-    className={cn(
-      "sticky top-0 flex items-center justify-between border-b border-grid-bright bg-background-dimmed pb-1.5 pl-3 pr-16 pt-2",
-      className
-    )}
-    {...props}
-  >
-    {children}
-  </SheetPrimitive.Title>
-));
+>(({ className, children, ...props }, ref) => {
+  const hasCloseButton = useSheetHasCloseButton();
+
+  return (
+    <SheetPrimitive.Title
+      ref={ref}
+      className={cn(
+        "sticky top-0 flex items-center justify-between border-b border-grid-bright bg-background-dimmed pb-1.5 pl-3 pt-2",
+        hasCloseButton ? "pr-16" : "pr-1.5",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </SheetPrimitive.Title>
+  );
+});
 SheetTitle.displayName = SheetPrimitive.Title.displayName;
 
 const SheetDescription = React.forwardRef<
diff --git a/apps/webapp/app/components/schedules/ScheduleInspector.tsx b/apps/webapp/app/components/schedules/ScheduleInspector.tsx
index 86da01fa691..dafb5bfbc19 100644
--- a/apps/webapp/app/components/schedules/ScheduleInspector.tsx
+++ b/apps/webapp/app/components/schedules/ScheduleInspector.tsx
@@ -23,6 +23,7 @@ import { Header2, Header3 } from "~/components/primitives/Headers";
 import { InfoPanel } from "~/components/primitives/InfoPanel";
 import { Paragraph } from "~/components/primitives/Paragraph";
 import * as Property from "~/components/primitives/PropertyTable";
+import { useSheetHasCloseButton } from "~/components/primitives/SheetV3";
 import {
   Table,
   TableBlankRow,
@@ -96,6 +97,7 @@ export function ScheduleInspector({
   const organization = useOrganization();
   const project = useProject();
   const environment = useEnvironment();
+  const hasSheetCloseButton = useSheetHasCloseButton();
 
   const isUtc = schedule.timezone === "UTC";
   const isImperative = schedule.type === "IMPERATIVE";
@@ -110,8 +112,7 @@ export function ScheduleInspector({
       <div
         className={cn(
           "mx-3 flex items-center justify-between gap-2 border-b border-grid-dimmed",
-          // Without header actions the sheet's own floating close button sits here.
-          !headerActions && "pr-14"
+          hasSheetCloseButton && "pr-14"
         )}
       >
         <Header2 className="truncate">{schedule.friendlyId}</Header2>
diff --git a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.schedules.new/route.tsx b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.schedules.new/route.tsx
index 9df9265158c..afd04d46fc9 100644
--- a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.schedules.new/route.tsx
+++ b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.schedules.new/route.tsx
@@ -40,6 +40,7 @@ import {
   TableRow,
 } from "~/components/primitives/Table";
 import { TextLink } from "~/components/primitives/TextLink";
+import { useSheetHasCloseButton } from "~/components/primitives/SheetV3";
 import { TimezoneList } from "~/components/scheduled/timezones";
 import { prisma } from "~/db.server";
 import { useEnvironment } from "~/hooks/useEnvironment";
@@ -156,6 +157,7 @@ export function UpsertScheduleForm({
   /** Submits via this fetcher with `_format=json` so the host can toast/close itself. */
   submitFetcher?: FetcherWithComponents<unknown>;
 }) {
+  const hasSheetCloseButton = useSheetHasCloseButton();
   const actionData = useActionData();
   // Only feed conform-shaped data (`status`) to `useForm` — `{ ok, message }`
   // envelopes lack it and crash conform.
@@ -231,7 +233,12 @@ export function UpsertScheduleForm({
       {...getFormProps(form)}
       className="grid h-full max-h-full grid-rows-[2.5rem_1fr_auto] overflow-hidden bg-background-bright"
     >
-      <div className="mx-3 flex min-w-0 items-center justify-between gap-2 overflow-hidden border-b border-grid-dimmed pr-14">
+      <div
+        className={cn(
+          "mx-3 flex min-w-0 items-center justify-between gap-2 overflow-hidden border-b border-grid-dimmed",
+          hasSheetCloseButton && "pr-14"
+        )}
+      >
         <Header2 className="truncate">
           {schedule?.friendlyId
             ? "Edit schedule"