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>

Author: claude

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

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(

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>

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}

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

apps/webapp/app/hooks/useShortcutKeys.tsx

@@ -25,16 +25,22 @@ 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>;
 };
 
 /** 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);
     },

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

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>

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

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