story-kit: merge 168_bug_agent_message_queue_limited_to_one_line

frontend/src/components/Chat.test.tsx

@@ -811,7 +811,7 @@ describe("Chat message queue (Story 155)", () => {
 		expect((input as HTMLTextAreaElement).value).toBe("Edit me back");
 	});
 
-	it("subsequent submissions replace the queued message (AC5)", async () => {
+	it("subsequent submissions are appended to the queue (Bug 168)", async () => {
 		render(<Chat projectPath="/tmp/project" onCloseProject={vi.fn()} />);
 
 		await waitFor(() => expect(capturedWsHandlers).not.toBeNull());
@@ -826,9 +826,9 @@ describe("Chat message queue (Story 155)", () => {
 			fireEvent.keyDown(input, { key: "Enter", shiftKey: false });
 		});
 
-		// Queue first replacement
+		// Queue first message
 		await act(async () => {
-			fireEvent.change(input, { target: { value: "Original queue" } });
+			fireEvent.change(input, { target: { value: "Queue 1" } });
 		});
 		await act(async () => {
 			fireEvent.keyDown(input, { key: "Enter", shiftKey: false });
@@ -836,17 +836,70 @@ describe("Chat message queue (Story 155)", () => {
 
 		await screen.findByTestId("queued-message-indicator");
 
-		// Queue second replacement — should overwrite the first
+		// Queue second message — should be appended, not overwrite the first
 		await act(async () => {
-			fireEvent.change(input, { target: { value: "Replaced queue" } });
+			fireEvent.change(input, { target: { value: "Queue 2" } });
 		});
 		await act(async () => {
 			fireEvent.keyDown(input, { key: "Enter", shiftKey: false });
 		});
 
-		const indicator = await screen.findByTestId("queued-message-indicator");
+		// Both messages should be visible
-		expect(indicator).toHaveTextContent("Replaced queue");
+		const indicators = await screen.findAllByTestId("queued-message-indicator");
-		expect(indicator).not.toHaveTextContent("Original queue");
+		expect(indicators).toHaveLength(2);
+		expect(indicators[0]).toHaveTextContent("Queue 1");
+		expect(indicators[1]).toHaveTextContent("Queue 2");
+	});
+
+	it("queued messages are delivered in order (Bug 168)", 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 two messages
+		await act(async () => {
+			fireEvent.change(input, { target: { value: "Second" } });
+		});
+		await act(async () => {
+			fireEvent.keyDown(input, { key: "Enter", shiftKey: false });
+		});
+		await act(async () => {
+			fireEvent.change(input, { target: { value: "Third" } });
+		});
+		await act(async () => {
+			fireEvent.keyDown(input, { key: "Enter", shiftKey: false });
+		});
+
+		// Both messages should be visible in order
+		const indicators = await screen.findAllByTestId("queued-message-indicator");
+		expect(indicators).toHaveLength(2);
+		expect(indicators[0]).toHaveTextContent("Second");
+		expect(indicators[1]).toHaveTextContent("Third");
+
+		// Simulate first response completing — "Second" is sent next
+		act(() => {
+			capturedWsHandlers?.onUpdate([
+				{ role: "user", content: "First" },
+				{ role: "assistant", content: "Response 1." },
+			]);
+		});
+
+		// "Third" should remain queued; "Second" was consumed
+		await waitFor(() => {
+			const remaining = screen.queryAllByTestId("queued-message-indicator");
+			expect(remaining).toHaveLength(1);
+			expect(remaining[0]).toHaveTextContent("Third");
+		});
 	});
 
 	it("does not auto-send queued message when generation is cancelled (AC6)", async () => {

frontend/src/components/Chat.tsx

@@ -91,9 +91,12 @@ 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);
+	const [queuedMessages, setQueuedMessages] = useState<
-	// Ref so stale WebSocket callbacks can read the current queued message
+		{ id: string; text: string }[]
-	const queuedMessageRef = useRef<string | null>(null);
+	>([]);
+	// Ref so stale WebSocket callbacks can read the current queued messages
+	const queuedMessagesRef = useRef<{ id: string; text: string }[]>([]);
+	const queueIdCounterRef = useRef(0);
 	// Trigger state: set to a message string to fire auto-send after loading ends
 	const [pendingAutoSend, setPendingAutoSend] = useState<string | null>(null);
 
@@ -210,11 +213,10 @@ export function Chat({ projectPath, onCloseProject }: ChatProps) {
 				if (last?.role === "assistant" && !last.tool_calls) {
 					setLoading(false);
 					setActivityStatus(null);
-					if (queuedMessageRef.current) {
+					const nextQueued = queuedMessagesRef.current.shift();
-						const msg = queuedMessageRef.current;
+					if (nextQueued !== undefined) {
-						queuedMessageRef.current = null;
+						setQueuedMessages([...queuedMessagesRef.current]);
-						setQueuedMessage(null);
+						setPendingAutoSend(nextQueued.text);
-						setPendingAutoSend(msg);
 					}
 				}
 			},
@@ -225,11 +227,10 @@ export function Chat({ projectPath, onCloseProject }: ChatProps) {
 				console.error("WebSocket error:", message);
 				setLoading(false);
 				setActivityStatus(null);
-				if (queuedMessageRef.current) {
+				const nextQueued = queuedMessagesRef.current.shift();
-					const msg = queuedMessageRef.current;
+				if (nextQueued !== undefined) {
-					queuedMessageRef.current = null;
+					setQueuedMessages([...queuedMessagesRef.current]);
-					setQueuedMessage(null);
+					setPendingAutoSend(nextQueued.text);
-					setPendingAutoSend(msg);
 				}
 			},
 			onPipelineState: (state) => {
@@ -330,9 +331,9 @@ export function Chat({ projectPath, onCloseProject }: ChatProps) {
 	}, []);
 
 	const cancelGeneration = async () => {
-		// Discard any queued message — do not auto-send after cancel
+		// Discard any queued messages — do not auto-send after cancel
-		queuedMessageRef.current = null;
+		queuedMessagesRef.current = [];
-		setQueuedMessage(null);
+		setQueuedMessages([]);
 		try {
 			wsRef.current?.cancel();
 			await api.cancelChat();
@@ -358,8 +359,12 @@ export function Chat({ projectPath, onCloseProject }: ChatProps) {
 
 		// Agent is busy — queue the message instead of dropping it
 		if (loading) {
-			queuedMessageRef.current = messageToSend;
+			const newItem = {
-			setQueuedMessage(messageToSend);
+				id: String(queueIdCounterRef.current++),
+				text: messageToSend,
+			};
+			queuedMessagesRef.current = [...queuedMessagesRef.current, newItem];
+			setQueuedMessages([...queuedMessagesRef.current]);
 			if (!messageOverride || messageOverride === input) {
 				setInput("");
 			}
@@ -890,9 +895,10 @@ export function Chat({ projectPath, onCloseProject }: ChatProps) {
 								gap: "8px",
 							}}
 						>
-							{/* Queued message indicator */}
+							{/* Queued message indicators */}
-							{queuedMessage && (
+							{queuedMessages.map(({ id, text }) => (
 								<div
+									key={id}
 									data-testid="queued-message-indicator"
 									style={{
 										display: "flex",
@@ -926,15 +932,18 @@ export function Chat({ projectPath, onCloseProject }: ChatProps) {
 											whiteSpace: "nowrap",
 										}}
 									>
-										{queuedMessage}
+										{text}
 									</span>
 									<button
 										type="button"
 										title="Edit queued message"
 										onClick={() => {
-											setInput(queuedMessage);
+											setInput(text);
-											queuedMessageRef.current = null;
+											queuedMessagesRef.current =
-											setQueuedMessage(null);
+												queuedMessagesRef.current.filter(
+													(item) => item.id !== id,
+												);
+											setQueuedMessages([...queuedMessagesRef.current]);
 											inputRef.current?.focus();
 										}}
 										style={{
@@ -954,8 +963,11 @@ export function Chat({ projectPath, onCloseProject }: ChatProps) {
 										type="button"
 										title="Cancel queued message"
 										onClick={() => {
-											queuedMessageRef.current = null;
+											queuedMessagesRef.current =
-											setQueuedMessage(null);
+												queuedMessagesRef.current.filter(
+													(item) => item.id !== id,
+												);
+											setQueuedMessages([...queuedMessagesRef.current]);
 										}}
 										style={{
 											background: "none",
@@ -971,7 +983,7 @@ export function Chat({ projectPath, onCloseProject }: ChatProps) {
 										✕
 									</button>
 								</div>
-							)}
+							))}
 							{/* Input row */}
 							<div
 								style={{