fix(desktop): keep Escape inside compose instead of exiting the stream #294

Merged
talksik merged 1 commits from claude/escape-key-compose-review-a496b2 into main 2026-06-21 15:32:59 +00:00
@@ -595,6 +595,16 @@ export function ComposeOverlay({
const handleKeyDown = (e: KeyboardEvent) => {
const currentStep = stepRef.current;
// Consume a key compose handles so it never reaches the stream's
// window-level navigation/action handlers. Without this, e.g. Escape
// while recording or reviewing would both cancel compose and exit the
// stream. Listening in the capture phase (see below) guarantees compose
// sees the key before those handlers regardless of registration order.
const consume = () => {
e.preventDefault();
e.stopPropagation();
};
if (
currentStep === 'typing' ||
currentStep === 'task' ||
@@ -602,7 +612,7 @@ export function ComposeOverlay({
currentStep === 'picking'
) {
if (e.key === 'Escape') {
e.preventDefault();
consume();
cancel();
}
return;
@@ -620,19 +630,19 @@ export function ComposeOverlay({
switch (currentStep) {
case 'idle': {
if (e.key === '`' && !e.repeat) {
e.preventDefault();
consume();
handleRecordIntent();
} else if (e.key === 's' || e.key === 'S') {
e.preventDefault();
consume();
if (!guardIdle()) break;
if (!requireDesktop('Screen recording')) break;
setRecordingSource('screen');
setStepSync('picking');
} else if (e.key === 't' || e.key === 'T') {
e.preventDefault();
consume();
handleTextIntent();
} else if (e.key === 'd' || e.key === 'D') {
e.preventDefault();
consume();
handleTaskIntent();
}
break;
@@ -641,17 +651,17 @@ export function ComposeOverlay({
case 'recording': {
if (e.key === '`' && !e.repeat) {
// Second tap stops media recording (toggle mode)
e.preventDefault();
consume();
handleStopIntent();
} else if (
(e.key === 's' || e.key === 'S') &&
recordingSourceRef.current === 'screen'
) {
// S stops screen recording when main window is focused
e.preventDefault();
consume();
handleStopIntent();
} else if (e.key === 'q' || e.key === 'Q' || e.key === 'Escape') {
e.preventDefault();
consume();
handleCancelIntent();
}
break;
@@ -659,10 +669,10 @@ export function ComposeOverlay({
case 'reviewing': {
if (e.key === 'q' || e.key === 'Q' || e.key === 'Escape') {
e.preventDefault();
consume();
handleCancelIntent();
} else if (e.key === 'Enter') {
e.preventDefault();
consume();
handleSendIntent();
}
break;
@@ -689,10 +699,13 @@ export function ComposeOverlay({
}
};
window.addEventListener('keydown', handleKeyDown);
// Capture phase so compose can consume keys before the stream's
// window-level navigation/action handlers (which listen in the bubble
// phase) see them.
window.addEventListener('keydown', handleKeyDown, true);
window.addEventListener('keyup', handleKeyUp);
return () => {
window.removeEventListener('keydown', handleKeyDown);
window.removeEventListener('keydown', handleKeyDown, true);
window.removeEventListener('keyup', handleKeyUp);
};
}, [