chore: merge feat/agent-message-quota-tri-12863 (composer escape follow-up)

Author: kathiekiwi

apps/webapp/app/components/dashboard-agent/DashboardAgentComposer.tsx

@@ -2,7 +2,7 @@ import { ArrowUpIcon, StopIcon } from "@heroicons/react/20/solid";
 import { useEffect, useRef } from "react";
 import { Button } from "~/components/primitives/Buttons";
 import { cn } from "~/utils/cn";
-import { composerKeepsEscape } from "./composer-escape";
+import { composerEscapeAction } from "./composer-escape";
 import {
   MAX_MESSAGE_CHARS,
   MESSAGE_CHARS_WARN_AT,
@@ -38,6 +38,8 @@ export function DashboardAgentComposer({
   placeholderSuggestion?: string;
 }) {
   const ref = useRef<HTMLTextAreaElement>(null);
+  // Armed = the next Escape is taken by the draft guard; anything else re-arms it.
+  const escapeGuardArmed = useRef(true);
 
   useEffect(() => {
     const el = ref.current;
@@ -90,15 +92,35 @@ export function DashboardAgentComposer({
             value={value}
             // Clamped as well as `maxLength`, so a programmatic paste can't exceed the cap.
             maxLength={MAX_MESSAGE_CHARS}
-            onChange={(e) => onChange(e.target.value.slice(0, MAX_MESSAGE_CHARS))}
+            onChange={(e) => {
+              escapeGuardArmed.current = true;
+              onChange(e.target.value.slice(0, MAX_MESSAGE_CHARS));
+            }}
+            onBlur={() => {
+              escapeGuardArmed.current = true;
+            }}
             onKeyDown={(e) => {
+              if (e.key !== "Escape") {
+                escapeGuardArmed.current = true;
+              }
               if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
                 e.preventDefault();
                 onSubmit();
               }
-              // Keeping Escape from the panel's close handler, which skips a prevented event.
-              if (e.key === "Escape" && composerKeepsEscape(value)) {
+              // An Escape that cancels an IME composition is the user's, not the panel's: keep it
+              // from the close handler without spending the draft guard's one step.
+              if (e.key === "Escape" && e.nativeEvent.isComposing) {
+                e.preventDefault();
+                return;
+              }
+              // The first Escape on a draft is kept from the panel's close handler, which skips a
+              // prevented event; a second one passes through unprevented and closes the panel.
+              if (
+                e.key === "Escape" &&
+                composerEscapeAction(value, escapeGuardArmed.current) === "swallow"
+              ) {
                 e.preventDefault();
+                escapeGuardArmed.current = false;
               }
               // Only while empty, so with text present Tab keeps its normal focus behavior.
               if (e.key === "Tab" && !e.shiftKey && placeholderSuggestion && value === "") {

apps/webapp/app/components/dashboard-agent/composer-escape.test.ts

@@ -1,16 +1,43 @@
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
 import { describe, expect, it } from "vitest";
-import { composerKeepsEscape } from "./composer-escape";
+import { composerEscapeAction } from "./composer-escape";
+
+const COMPOSER = readFileSync(join(__dirname, "DashboardAgentComposer.tsx"), "utf8");
 
 describe("Escape while the composer has focus", () => {
-  it("is kept by the composer while there is a draft, so the panel stays open", () => {
-    expect(composerKeepsEscape("half a question about a failing run")).toBe(true);
+  it("is kept by the composer on the first Escape with a draft, so the panel stays open", () => {
+    expect(composerEscapeAction("half a question about a failing run", true)).toBe("swallow");
+  });
+
+  it("lets a second consecutive Escape through, so the panel closes", () => {
+    expect(composerEscapeAction("half a question about a failing run", false)).toBe("pass");
+  });
+
+  it("guards the draft again once the guard is re-armed by typing", () => {
+    expect(composerEscapeAction("half a question, now longer", true)).toBe("swallow");
   });
 
-  it("closes the panel when there is nothing to lose", () => {
-    expect(composerKeepsEscape("")).toBe(false);
+  it("closes the panel on the first Escape when there is nothing to lose", () => {
+    expect(composerEscapeAction("", true)).toBe("pass");
   });
 
   it("reads whitespace as nothing to lose, matching what Send accepts", () => {
-    expect(composerKeepsEscape("  \n ")).toBe(false);
+    expect(composerEscapeAction("  \n ", true)).toBe("pass");
+  });
+});
+
+// Source-level checks: the guard's step is spent in the composer, not in the pure helper.
+describe("the composer's Escape wiring", () => {
+  it("disarms the guard in the swallow branch, so the next Escape passes", () => {
+    expect(COMPOSER).toMatch(
+      /=== "swallow"\s*\)\s*\{\s*e\.preventDefault\(\);\s*escapeGuardArmed\.current = false;/
+    );
+  });
+
+  it("swallows an IME-cancelling Escape without spending the guard's step", () => {
+    expect(COMPOSER).toMatch(
+      /e\.key === "Escape" && e\.nativeEvent\.isComposing\s*\)\s*\{\s*e\.preventDefault\(\);\s*return;/
+    );
   });
 });

apps/webapp/app/components/dashboard-agent/composer-escape.ts

@@ -1,8 +1,11 @@
+export type ComposerEscapeAction = "swallow" | "pass";
+
 /**
  * The panel closes on Escape unless a child has already prevented the event's default —
- * `defaultPrevented` is how a child vetoes the close. A composer holding a draft takes the
- * first Escape for itself, so the draft survives; an empty one lets Escape close the panel.
+ * `defaultPrevented` is how a child vetoes the close. Escape is two-step while a draft
+ * exists: the first one is swallowed so the draft survives, a second consecutive one
+ * passes through and closes the panel. Anything else re-arms the guard.
  */
-export function composerKeepsEscape(value: string): boolean {
-  return value.trim() !== "";
+export function composerEscapeAction(draft: string, guardArmed: boolean): ComposerEscapeAction {
+  return draft.trim() !== "" && guardArmed ? "swallow" : "pass";
 }