feat: queue user messages while busy

source/app/App.tsx

@@ -38,8 +38,10 @@ import {useSessionAutosave} from '@/hooks/useSessionAutosave';
 import {ThemeContext} from '@/hooks/useTheme';
 import {TitleShapeContext, updateTitleShape} from '@/hooks/useTitleShape';
 import {UIStateProvider} from '@/hooks/useUIState';
+import {useUserMessageQueue} from '@/hooks/useUserMessageQueue';
 import {useVSCodeServer} from '@/hooks/useVSCodeServer';
 import {generateKey} from '@/session/key-generator';
+import type {ImageAttachment} from '@/types/core';
 import type {ThemePreset} from '@/types/ui';
 import {createPinoLogger} from '@/utils/logging/pino-logger';
 import {setGlobalMessageQueue} from '@/utils/message-queue';
@@ -75,6 +77,15 @@ export default function App({
 
 	// Use extracted hooks
 	const appState = useAppState(initialDevelopmentMode);
+	const userMessageQueue = useUserMessageQueue();
+	const queuedUserSubmitRef = React.useRef<
+		| ((
+				message: string,
+				displayValue: string,
+				images?: ImageAttachment[],
+		  ) => Promise<void>)
+		| null
+	>(null);
 	const {exit} = useApp();
 	const {isTrusted, handleConfirmTrust, isTrustLoading, isTrustedError} =
 		useDirectoryTrust();
@@ -159,6 +170,28 @@ export default function App({
 		}
 	}, []);
 
+	const drainQueuedUserMessage = React.useCallback(() => {
+		queueMicrotask(() => {
+			void userMessageQueue.drainNextMessage(async message => {
+				const submitQueuedMessage = queuedUserSubmitRef.current;
+				if (!submitQueuedMessage || !appState.client || !appState.toolManager) {
+					return false;
+				}
+
+				await submitQueuedMessage(
+					message.message,
+					message.displayValue,
+					message.images,
+				);
+				return true;
+			});
+		});
+	}, [
+		appState.client,
+		appState.toolManager,
+		userMessageQueue.drainNextMessage,
+	]);
+
 	// Setup chat handler
 	const chatHandler = useChatHandler({
 		client: appState.client,
@@ -180,6 +213,7 @@ export default function App({
 			appState.setCompactToolCounts(null);
 			appState.compactToolCountsRef.current = {};
 			appState.setLiveTaskList(null);
+			drainQueuedUserMessage();
 		},
 		reasoningExpandedRef: appState.reasoningExpandedRef,
 		compactToolDisplayRef: appState.compactToolDisplayRef,
@@ -404,6 +438,10 @@ export default function App({
 		activeEditor: vscodeServer.activeEditor,
 	});
 
+	React.useEffect(() => {
+		queuedUserSubmitRef.current = handleUserSubmit;
+	}, [handleUserSubmit]);
+
 	// Setup non-interactive mode
 	const {nonInteractiveLoadingMessage} = useNonInteractiveMode({
 		nonInteractivePrompt,
@@ -605,6 +643,7 @@ export default function App({
 						handleToolConfirmation={handleToolConfirmation}
 						handleQuestionAnswer={handleQuestionAnswer}
 						handleUserSubmit={handleUserSubmit}
+						userMessageQueue={userMessageQueue}
 						handleIdeSelect={handleIdeSelect}
 					/>
 				</UIStateProvider>

source/app/components/chat-input.spec.tsx

@@ -102,6 +102,48 @@ test('ChatInput shows tool execution indicator when executing', t => {
 	unmount();
 });
 
+test('ChatInput keeps UserInput visible while a tool is executing', t => {
+	const mockToolCall = {
+		id: 'test-1',
+		function: {name: 'test_tool', arguments: {}},
+	};
+
+	const props = createDefaultProps({
+		isToolExecuting: true,
+		isBusy: true,
+		inputDisabled: true,
+		pendingToolCalls: [mockToolCall],
+		currentToolIndex: 0,
+	});
+
+	const {lastFrame, unmount} = renderWithTheme(<ChatInput {...props} />);
+	const output = lastFrame();
+	t.truthy(output);
+	t.regex(output!, /hat would you like me to help with\?/);
+	t.regex(output!, /Press Esc to cancel/);
+	unmount();
+});
+
+test('ChatInput keeps modal decision states ahead of busy input', t => {
+	const mockToolCall = {
+		id: 'test-1',
+		function: {name: 'test_tool', arguments: {}},
+	};
+
+	const props = createDefaultProps({
+		isToolExecuting: true,
+		isBusy: true,
+		inputDisabled: true,
+		pendingToolConfirmation: {toolCall: mockToolCall as never},
+	});
+
+	const {lastFrame, unmount} = renderWithTheme(<ChatInput {...props} />);
+	const output = lastFrame();
+	t.truthy(output);
+	t.notRegex(output!, /What would you like me to help with\?/);
+	unmount();
+});
+
 test('ChatInput shows cancelling indicator when cancelling', t => {
 	const props = createDefaultProps({
 		isCancelling: true,

source/app/components/chat-input.tsx

@@ -8,6 +8,10 @@ import ToolConfirmation from '@/components/tool-confirmation';
 import ToolExecutionIndicator from '@/components/tool-execution-indicator';
 import UserInput from '@/components/user-input';
 import {useTheme} from '@/hooks/useTheme';
+import type {
+	QueuedUserMessage,
+	UserMessageQueueDraft,
+} from '@/hooks/useUserMessageQueue';
 import type {Task} from '@/tools/tasks/types';
 import type {
 	ContextSource,
@@ -51,6 +55,9 @@ export interface ChatInputProps {
 	// Input state
 	customCommands: string[];
 	inputDisabled: boolean;
+	queuedMessages?: QueuedUserMessage[];
+	onQueueMessage?: (message: UserMessageQueueDraft) => void;
+	onRemoveQueuedMessage?: (id: string) => void;
 	// True when in-flight work makes Escape a cancel; lets UserInput defer to
 	// the section-level global cancel handler instead of clearing the input.
 	isBusy: boolean;
@@ -108,6 +115,9 @@ export function ChatInput({
 	client,
 	customCommands,
 	inputDisabled,
+	queuedMessages = [],
+	onQueueMessage,
+	onRemoveQueuedMessage,
 	isBusy,
 	developmentMode,
 	contextPercentUsed,
@@ -126,6 +136,12 @@ export function ChatInput({
 	onDismissActiveEditor,
 }: ChatInputProps): React.ReactElement {
 	const {colors} = useTheme();
+	const activeToolCall = pendingToolCalls[currentToolIndex];
+	const showToolExecutionIndicator =
+		isToolExecuting &&
+		activeToolCall &&
+		activeToolCall.function.name !== 'execute_bash' &&
+		activeToolCall.function.name !== 'agent';
 
 	return (
 		<Box flexDirection="column" marginLeft={-1}>
@@ -141,6 +157,14 @@ export function ChatInput({
 
 			{isCancelling && <CancellingIndicator />}
 
+			{showToolExecutionIndicator && (
+				<ToolExecutionIndicator
+					toolName={activeToolCall.function.name}
+					currentIndex={currentToolIndex}
+					totalTools={pendingToolCalls.length}
+				/>
+			)}
+
 			{/* Subagent Tool Approval — takes priority since subagent is blocked */}
 			{pendingSubagentApproval ? (
 				<ToolConfirmation
@@ -155,16 +179,6 @@ export function ChatInput({
 					onConfirm={onToolConfirmation}
 					onCancel={() => onToolConfirmation(false)}
 				/>
-			) : /* Tool Execution - skip indicator for streaming tools (they show their own progress) */
-			isToolExecuting &&
-				pendingToolCalls[currentToolIndex] &&
-				pendingToolCalls[currentToolIndex].function.name !== 'execute_bash' &&
-				pendingToolCalls[currentToolIndex].function.name !== 'agent' ? (
-				<ToolExecutionIndicator
-					toolName={pendingToolCalls[currentToolIndex].function.name}
-					currentIndex={currentToolIndex}
-					totalTools={pendingToolCalls.length}
-				/>
 			) : /* Question Prompt (ask_question tool) */
 			isQuestionMode && pendingQuestion ? (
 				<QuestionPrompt
@@ -178,7 +192,10 @@ export function ChatInput({
 					onSubmit={(msg, display, images) =>
 						void onSubmit(msg, display, images)
 					}
-					disabled={inputDisabled}
+					onQueueMessage={onQueueMessage}
+					queuedMessages={queuedMessages}
+					onRemoveQueuedMessage={onRemoveQueuedMessage}
+					disabled={inputDisabled && !isBusy}
 					isBusy={isBusy}
 					onToggleMode={onToggleMode}
 					onToggleReasoningExpanded={onToggleReasoningExpanded}

source/app/sections/interactive-app.spec.tsx

@@ -102,6 +102,16 @@ function makeProps(o: Overrides = {}) {
 		handleToolConfirmation: noop,
 		handleQuestionAnswer: noop,
 		handleUserSubmit: noopAsync,
+		userMessageQueue: {
+			queuedMessages: [],
+			enqueueMessage: () => ({
+				id: 'queued-test',
+				message: '',
+				displayValue: '',
+			}),
+			removeMessage: noop,
+			drainNextMessage: () => false,
+		},
 		handleIdeSelect: noop,
 	} as never;
 }

source/app/sections/interactive-app.tsx

@@ -9,6 +9,7 @@ import type {useChatHandler} from '@/hooks/chat-handler';
 import type {AppHandlers} from '@/hooks/useAppHandlers';
 import type {useAppState} from '@/hooks/useAppState';
 import type {useModeHandlers} from '@/hooks/useModeHandlers';
+import type {useUserMessageQueue} from '@/hooks/useUserMessageQueue';
 import type {useVSCodeServer} from '@/hooks/useVSCodeServer';
 import type {ImageAttachment} from '@/types/core';
 import type {PendingToolApproval} from '@/utils/tool-approval-queue';
@@ -33,6 +34,7 @@ interface InteractiveAppProps {
 		displayValue: string,
 		images?: ImageAttachment[],
 	) => Promise<void>;
+	userMessageQueue: ReturnType<typeof useUserMessageQueue>;
 	handleIdeSelect: (ide: string) => void;
 }
 
@@ -56,6 +58,7 @@ export function InteractiveApp({
 	handleToolConfirmation,
 	handleQuestionAnswer,
 	handleUserSubmit,
+	userMessageQueue,
 	handleIdeSelect,
 }: InteractiveAppProps): React.ReactElement {
 	const handleToggleCompactDisplay = () => {
@@ -181,7 +184,10 @@ export function InteractiveApp({
 						mcpInitialized={appState.mcpInitialized}
 						client={appState.client}
 						customCommands={Array.from(appState.customCommandCache.keys())}
-						inputDisabled={chatHandler.isGenerating || appState.isToolExecuting}
+						inputDisabled={false}
+						queuedMessages={userMessageQueue.queuedMessages}
+						onQueueMessage={userMessageQueue.enqueueMessage}
+						onRemoveQueuedMessage={userMessageQueue.removeMessage}
 						isBusy={cancellable}
 						developmentMode={appState.developmentMode}
 						contextPercentUsed={appState.contextPercentUsed}