story-kit: merge 155_story_queue_messages_while_agent_is_busy

frontend/src/components/Chat.test.tsx

@@ -555,3 +555,243 @@ describe("Chat activity status indicator (Bug 140)", () => {
 		expect(indicator).toHaveTextContent("Using SomeCustomTool...");
 	});
 });
+
+describe("Chat message queue (Story 155)", () => {
+	beforeEach(() => {
+		capturedWsHandlers = null;
+		setupMocks();
+	});
+
+	it("shows queued message indicator when submitting while loading (AC1, AC2)", async () => {
+		render(<Chat projectPath="/tmp/project" onCloseProject={vi.fn()} />);
+
+		await waitFor(() => expect(capturedWsHandlers).not.toBeNull());
+
+		// Send first message to put the chat in loading state
+		const input = screen.getByPlaceholderText("Send a message...");
+		await act(async () => {
+			fireEvent.change(input, { target: { value: "First message" } });
+		});
+		await act(async () => {
+			fireEvent.keyDown(input, { key: "Enter", shiftKey: false });
+		});
+
+		// Now type and submit a second message while loading is true
+		await act(async () => {
+			fireEvent.change(input, { target: { value: "Queued message" } });
+		});
+		await act(async () => {
+			fireEvent.keyDown(input, { key: "Enter", shiftKey: false });
+		});
+
+		// The queued message indicator should appear
+		const indicator = await screen.findByTestId("queued-message-indicator");
+		expect(indicator).toBeInTheDocument();
+		expect(indicator).toHaveTextContent("Queued");
+		expect(indicator).toHaveTextContent("Queued message");
+
+		// Input should be cleared after queuing
+		expect((input as HTMLTextAreaElement).value).toBe("");
+	});
+
+	it("auto-sends queued message when agent response completes (AC4)", async () => {
+		render(<Chat projectPath="/tmp/project" onCloseProject={vi.fn()} />);
+
+		await waitFor(() => expect(capturedWsHandlers).not.toBeNull());
+
+		const input = screen.getByPlaceholderText("Send a message...");
+
+		// Send first message
+		await act(async () => {
+			fireEvent.change(input, { target: { value: "First" } });
+		});
+		await act(async () => {
+			fireEvent.keyDown(input, { key: "Enter", shiftKey: false });
+		});
+
+		// Queue a second message while loading
+		await act(async () => {
+			fireEvent.change(input, { target: { value: "Auto-send this" } });
+		});
+		await act(async () => {
+			fireEvent.keyDown(input, { key: "Enter", shiftKey: false });
+		});
+
+		// Verify it's queued
+		expect(
+			await screen.findByTestId("queued-message-indicator"),
+		).toBeInTheDocument();
+
+		// Simulate agent response completing (loading → false)
+		act(() => {
+			capturedWsHandlers?.onUpdate([
+				{ role: "user", content: "First" },
+				{ role: "assistant", content: "Done." },
+			]);
+		});
+
+		// The queued indicator should disappear (message was sent)
+		await waitFor(() => {
+			expect(
+				screen.queryByTestId("queued-message-indicator"),
+			).not.toBeInTheDocument();
+		});
+	});
+
+	it("cancel button discards the queued message (AC3, AC6)", async () => {
+		render(<Chat projectPath="/tmp/project" onCloseProject={vi.fn()} />);
+
+		await waitFor(() => expect(capturedWsHandlers).not.toBeNull());
+
+		const input = screen.getByPlaceholderText("Send a message...");
+
+		// Send first message to start loading
+		await act(async () => {
+			fireEvent.change(input, { target: { value: "First" } });
+		});
+		await act(async () => {
+			fireEvent.keyDown(input, { key: "Enter", shiftKey: false });
+		});
+
+		// Queue a second message
+		await act(async () => {
+			fireEvent.change(input, { target: { value: "Discard me" } });
+		});
+		await act(async () => {
+			fireEvent.keyDown(input, { key: "Enter", shiftKey: false });
+		});
+
+		const indicator = await screen.findByTestId("queued-message-indicator");
+		expect(indicator).toBeInTheDocument();
+
+		// Click the ✕ cancel button
+		const cancelBtn = screen.getByTitle("Cancel queued message");
+		await act(async () => {
+			fireEvent.click(cancelBtn);
+		});
+
+		// Indicator should be gone
+		expect(
+			screen.queryByTestId("queued-message-indicator"),
+		).not.toBeInTheDocument();
+	});
+
+	it("edit button puts queued message back into input (AC3)", async () => {
+		render(<Chat projectPath="/tmp/project" onCloseProject={vi.fn()} />);
+
+		await waitFor(() => expect(capturedWsHandlers).not.toBeNull());
+
+		const input = screen.getByPlaceholderText("Send a message...");
+
+		// Send first message to start loading
+		await act(async () => {
+			fireEvent.change(input, { target: { value: "First" } });
+		});
+		await act(async () => {
+			fireEvent.keyDown(input, { key: "Enter", shiftKey: false });
+		});
+
+		// Queue a second message
+		await act(async () => {
+			fireEvent.change(input, { target: { value: "Edit me back" } });
+		});
+		await act(async () => {
+			fireEvent.keyDown(input, { key: "Enter", shiftKey: false });
+		});
+
+		await screen.findByTestId("queued-message-indicator");
+
+		// Click the Edit button
+		const editBtn = screen.getByTitle("Edit queued message");
+		await act(async () => {
+			fireEvent.click(editBtn);
+		});
+
+		// Indicator should be gone and message back in input
+		expect(
+			screen.queryByTestId("queued-message-indicator"),
+		).not.toBeInTheDocument();
+		expect((input as HTMLTextAreaElement).value).toBe("Edit me back");
+	});
+
+	it("subsequent submissions replace the queued message (AC5)", async () => {
+		render(<Chat projectPath="/tmp/project" onCloseProject={vi.fn()} />);
+
+		await waitFor(() => expect(capturedWsHandlers).not.toBeNull());
+
+		const input = screen.getByPlaceholderText("Send a message...");
+
+		// Send first message to start loading
+		await act(async () => {
+			fireEvent.change(input, { target: { value: "First" } });
+		});
+		await act(async () => {
+			fireEvent.keyDown(input, { key: "Enter", shiftKey: false });
+		});
+
+		// Queue first replacement
+		await act(async () => {
+			fireEvent.change(input, { target: { value: "Original queue" } });
+		});
+		await act(async () => {
+			fireEvent.keyDown(input, { key: "Enter", shiftKey: false });
+		});
+
+		await screen.findByTestId("queued-message-indicator");
+
+		// Queue second replacement — should overwrite the first
+		await act(async () => {
+			fireEvent.change(input, { target: { value: "Replaced queue" } });
+		});
+		await act(async () => {
+			fireEvent.keyDown(input, { key: "Enter", shiftKey: false });
+		});
+
+		const indicator = await screen.findByTestId("queued-message-indicator");
+		expect(indicator).toHaveTextContent("Replaced queue");
+		expect(indicator).not.toHaveTextContent("Original queue");
+	});
+
+	it("does not auto-send queued message when generation is cancelled (AC6)", async () => {
+		render(<Chat projectPath="/tmp/project" onCloseProject={vi.fn()} />);
+
+		await waitFor(() => expect(capturedWsHandlers).not.toBeNull());
+
+		const input = screen.getByPlaceholderText("Send a message...");
+
+		// Send first message to start loading
+		await act(async () => {
+			fireEvent.change(input, { target: { value: "First" } });
+		});
+		await act(async () => {
+			fireEvent.keyDown(input, { key: "Enter", shiftKey: false });
+		});
+
+		// Queue a second message
+		await act(async () => {
+			fireEvent.change(input, { target: { value: "Should not send" } });
+		});
+		await act(async () => {
+			fireEvent.keyDown(input, { key: "Enter", shiftKey: false });
+		});
+
+		await screen.findByTestId("queued-message-indicator");
+
+		// Click the stop button (■) — but input is empty so button is stop
+		// Actually simulate cancel by clicking the stop button (which requires empty input)
+		// We need to use the send button when input is empty (stop mode)
+		// Simulate cancel via the cancelGeneration path: the button when loading && !input
+		// At this point input is empty (was cleared after queuing)
+		const stopButton = screen.getByRole("button", { name: "■" });
+		await act(async () => {
+			fireEvent.click(stopButton);
+		});
+
+		// Queued indicator should be gone (cancelled)
+		await waitFor(() => {
+			expect(
+				screen.queryByTestId("queued-message-indicator"),
+			).not.toBeInTheDocument();
+		});
+	});
+});

frontend/src/components/Chat.tsx

@@ -90,6 +90,11 @@ export function Chat({ projectPath, onCloseProject }: ChatProps) {
 	const [agentConfigVersion, setAgentConfigVersion] = useState(0);
 	const [needsOnboarding, setNeedsOnboarding] = useState(false);
 	const onboardingTriggeredRef = useRef(false);
+	const [queuedMessage, setQueuedMessage] = useState<string | null>(null);
+	// Ref so stale WebSocket callbacks can read the current queued message
+	const queuedMessageRef = useRef<string | null>(null);
+	// Trigger state: set to a message string to fire auto-send after loading ends
+	const [pendingAutoSend, setPendingAutoSend] = useState<string | null>(null);
 
 	const wsRef = useRef<ChatWebSocket | null>(null);
 	const messagesEndRef = useRef<HTMLDivElement>(null);
@@ -204,6 +209,12 @@ export function Chat({ projectPath, onCloseProject }: ChatProps) {
 				if (last?.role === "assistant" && !last.tool_calls) {
 					setLoading(false);
 					setActivityStatus(null);
+					if (queuedMessageRef.current) {
+						const msg = queuedMessageRef.current;
+						queuedMessageRef.current = null;
+						setQueuedMessage(null);
+						setPendingAutoSend(msg);
+					}
 				}
 			},
 			onSessionId: (sessionId) => {
@@ -213,6 +224,12 @@ export function Chat({ projectPath, onCloseProject }: ChatProps) {
 				console.error("WebSocket error:", message);
 				setLoading(false);
 				setActivityStatus(null);
+				if (queuedMessageRef.current) {
+					const msg = queuedMessageRef.current;
+					queuedMessageRef.current = null;
+					setQueuedMessage(null);
+					setPendingAutoSend(msg);
+				}
 			},
 			onPipelineState: (state) => {
 				setPipeline(state);
@@ -295,6 +312,15 @@ export function Chat({ projectPath, onCloseProject }: ChatProps) {
 		inputRef.current?.focus();
 	}, []);
 
+	// Auto-send queued message when loading ends
+	useEffect(() => {
+		if (pendingAutoSend) {
+			const msg = pendingAutoSend;
+			setPendingAutoSend(null);
+			sendMessage(msg);
+		}
+	}, [pendingAutoSend]);
+
 	useEffect(() => {
 		const handleResize = () =>
 			setIsNarrowScreen(window.innerWidth < NARROW_BREAKPOINT);
@@ -303,6 +329,9 @@ export function Chat({ projectPath, onCloseProject }: ChatProps) {
 	}, []);
 
 	const cancelGeneration = async () => {
+		// Discard any queued message — do not auto-send after cancel
+		queuedMessageRef.current = null;
+		setQueuedMessage(null);
 		try {
 			wsRef.current?.cancel();
 			await api.cancelChat();
@@ -324,7 +353,17 @@ export function Chat({ projectPath, onCloseProject }: ChatProps) {
 
 	const sendMessage = async (messageOverride?: string) => {
 		const messageToSend = messageOverride ?? input;
-		if (!messageToSend.trim() || loading) return;
+		if (!messageToSend.trim()) return;
+
+		// Agent is busy — queue the message instead of dropping it
+		if (loading) {
+			queuedMessageRef.current = messageToSend;
+			setQueuedMessage(messageToSend);
+			if (!messageOverride || messageOverride === input) {
+				setInput("");
+			}
+			return;
+		}
 
 		const isClaudeCode = model === "claude-code-pty";
 		if (!isClaudeCode && model.startsWith("claude-")) {
@@ -842,59 +881,154 @@ export function Chat({ projectPath, onCloseProject }: ChatProps) {
 								maxWidth: "768px",
 								width: "100%",
 								display: "flex",
+								flexDirection: "column",
 								gap: "8px",
-								alignItems: "center",
 							}}
 						>
-							<textarea
+							{/* Queued message indicator */}
-								ref={inputRef}
+							{queuedMessage && (
-								value={input}
+								<div
-								onChange={(e) => setInput(e.target.value)}
+									data-testid="queued-message-indicator"
-								onKeyDown={(e) => {
+									style={{
-									if (e.key === "Enter" && !e.shiftKey) {
+										display: "flex",
-										e.preventDefault();
+										alignItems: "center",
-										sendMessage();
+										gap: "8px",
-									}
+										padding: "8px 12px",
-								}}
+										background: "#1e1e1e",
-								placeholder="Send a message..."
+										border: "1px solid #3a3a3a",
-								rows={1}
+										borderRadius: "12px",
+										fontSize: "0.875rem",
+									}}
+								>
+									<span
+										style={{
+											color: "#666",
+											flexShrink: 0,
+											fontSize: "0.7rem",
+											fontWeight: 700,
+											letterSpacing: "0.05em",
+											textTransform: "uppercase",
+										}}
+									>
+										Queued
+									</span>
+									<span
+										style={{
+											color: "#888",
+											flex: 1,
+											overflow: "hidden",
+											textOverflow: "ellipsis",
+											whiteSpace: "nowrap",
+										}}
+									>
+										{queuedMessage}
+									</span>
+									<button
+										type="button"
+										title="Edit queued message"
+										onClick={() => {
+											setInput(queuedMessage);
+											queuedMessageRef.current = null;
+											setQueuedMessage(null);
+											inputRef.current?.focus();
+										}}
+										style={{
+											background: "none",
+											border: "none",
+											color: "#666",
+											cursor: "pointer",
+											padding: "2px 6px",
+											fontSize: "0.8rem",
+											flexShrink: 0,
+											borderRadius: "4px",
+										}}
+									>
+										Edit
+									</button>
+									<button
+										type="button"
+										title="Cancel queued message"
+										onClick={() => {
+											queuedMessageRef.current = null;
+											setQueuedMessage(null);
+										}}
+										style={{
+											background: "none",
+											border: "none",
+											color: "#666",
+											cursor: "pointer",
+											padding: "2px 4px",
+											fontSize: "0.875rem",
+											flexShrink: 0,
+											borderRadius: "4px",
+										}}
+									>
+										✕
+									</button>
+								</div>
+							)}
+							{/* Input row */}
+							<div
 								style={{
-									flex: 1,
-									padding: "14px 20px",
-									borderRadius: "24px",
-									border: "1px solid #333",
-									outline: "none",
-									fontSize: "1rem",
-									fontWeight: "500",
-									background: "#2f2f2f",
-									color: "#ececec",
-									boxShadow: "0 2px 6px rgba(0,0,0,0.02)",
-									resize: "none",
-									overflowY: "auto",
-									fontFamily: "inherit",
-								}}
-							/>
-							<button
-								type="button"
-								onClick={loading ? cancelGeneration : () => sendMessage()}
-								disabled={!loading && !input.trim()}
-								style={{
-									background: "#ececec",
-									color: "black",
-									border: "none",
-									borderRadius: "50%",
-									width: "32px",
-									height: "32px",
 									display: "flex",
+									gap: "8px",
 									alignItems: "center",
-									justifyContent: "center",
-									cursor: "pointer",
-									opacity: !loading && !input.trim() ? 0.5 : 1,
-									flexShrink: 0,
 								}}
 							>
-								{loading ? "■" : "↑"}
+								<textarea
-							</button>
+									ref={inputRef}
+									value={input}
+									onChange={(e) => setInput(e.target.value)}
+									onKeyDown={(e) => {
+										if (e.key === "Enter" && !e.shiftKey) {
+											e.preventDefault();
+											sendMessage();
+										}
+									}}
+									placeholder="Send a message..."
+									rows={1}
+									style={{
+										flex: 1,
+										padding: "14px 20px",
+										borderRadius: "24px",
+										border: "1px solid #333",
+										outline: "none",
+										fontSize: "1rem",
+										fontWeight: "500",
+										background: "#2f2f2f",
+										color: "#ececec",
+										boxShadow: "0 2px 6px rgba(0,0,0,0.02)",
+										resize: "none",
+										overflowY: "auto",
+										fontFamily: "inherit",
+									}}
+								/>
+								<button
+									type="button"
+									onClick={
+										loading && !input.trim()
+											? cancelGeneration
+											: () => sendMessage()
+									}
+									disabled={!loading && !input.trim()}
+									style={{
+										background: "#ececec",
+										color: "black",
+										border: "none",
+										borderRadius: "50%",
+										width: "32px",
+										height: "32px",
+										display: "flex",
+										alignItems: "center",
+										justifyContent: "center",
+										cursor: "pointer",
+										opacity: !loading && !input.trim() ? 0.5 : 1,
+										flexShrink: 0,
+									}}
+								>
+									{loading && !input.trim() ? "■" : "↑"}
+								</button>
+							</div>
 						</div>
 					</div>
 				</div>