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>

Author: claude

.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.

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>
   );

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">

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" />

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"
         />

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) {

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;

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,

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"
         />

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"
         />