feat: wire remaining dialogs to useModalA11y and unify zh agent terminology

packages/agent-chat/src/ranch-shell/ConnectAgentModal.tsx

@@ -9,6 +9,7 @@ import {
 } from "./connectPrompt";
 import type { RanchLocale, RanchMessages } from "./i18n";
 import { btnGhost, btnPrimary, colors, inputStyle } from "./styles";
+import { useModalA11y } from "./useModalA11y";
 
 type Props = {
   locale: RanchLocale;
@@ -32,6 +33,8 @@ export function ConnectAgentModal({
   const [failed, setFailed] = useState(false);
   const [copied, setCopied] = useState<CopiedKind | null>(null);
   const qrRef = useRef<HTMLButtonElement>(null);
+  const cardRef = useRef<HTMLDivElement | null>(null);
+  useModalA11y({ open: true, onClose, containerRef: cardRef });
 
   const origin = useMemo(() => {
     const fromProp = (interfazeBaseUrl || "").replace(/\/+$/, "");
@@ -65,14 +68,6 @@ export function ConnectAgentModal({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  useEffect(() => {
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key === "Escape") onClose();
-    };
-    document.addEventListener("keydown", onKey);
-    return () => document.removeEventListener("keydown", onKey);
-  }, [onClose]);
-
   const prompt = connectPromptForInvite(locale, code, origin);
   const pageUrl = joinLandingUrl(origin, code);
 
@@ -104,7 +99,7 @@ export function ConnectAgentModal({
       style={overlay}
       onClick={onClose}
     >
-      <div style={card} onClick={(e) => e.stopPropagation()}>
+      <div style={card} onClick={(e) => e.stopPropagation()} ref={cardRef} tabIndex={-1}>
         <div style={header}>
           <strong style={{ fontSize: 16 }}>{t.connectExisting}</strong>
           <button type="button" onClick={onClose} style={btnGhost} aria-label={t.close}>

packages/agent-chat/src/ranch-shell/CreateAgentDialog.tsx

@@ -12,6 +12,7 @@ import {
 import type { RanchMessages } from "./i18n";
 import { buildWalletCheckoutUrl } from "./interfazeHost";
 import { btnGhost, btnPrimary, colors } from "./styles";
+import { useModalA11y } from "./useModalA11y";
 import { watchAgentCreateJob } from "./watchAgentCreateJob";
 
 function machinesFrom(avail: AgentCreateAvailability | null): AgentCreateMachine[] {
@@ -84,6 +85,16 @@ export function CreateAgentDialog({
   const [error, setError] = useState<string | null>(null);
   const [acting, setActing] = useState(false);
   const cancelledRef = useRef(false);
+  const cardRef = useRef<HTMLDivElement | null>(null);
+  useModalA11y({
+    open: true,
+    onClose: () => {
+      // Submit in flight — don't let Escape abandon it silently.
+      if (acting) return;
+      onClose();
+    },
+    containerRef: cardRef,
+  });
   const onReadyRef = useRef(onReady);
   const onWatchJobRef = useRef(onWatchJob);
   onReadyRef.current = onReady;
@@ -256,8 +267,8 @@ export function CreateAgentDialog({
   };
 
   return (
-    <div style={overlay} role="dialog" aria-label={t.createAgentTitle}>
-      <div style={card}>
+    <div style={overlay} role="dialog" aria-modal="true" aria-label={t.createAgentTitle}>
+      <div style={card} ref={cardRef} tabIndex={-1}>
         <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 12 }}>
           <strong style={{ flex: 1, fontSize: 16 }}>{t.createAgentTitle}</strong>
           <button type="button" style={btnGhost} onClick={onClose}>