story-kit: merge 215_bug_cancel_button_still_discards_queued_messages_197_regression

frontend/src/components/Chat.tsx

@@ -8,6 +8,7 @@ import { useChatHistory } from "../hooks/useChatHistory";
 import type { Message, ProviderConfig } from "../types";
 import { AgentPanel } from "./AgentPanel";
 import { ChatHeader } from "./ChatHeader";
+import type { ChatInputHandle } from "./ChatInput";
 import { ChatInput } from "./ChatInput";
 import { LozengeFlyProvider } from "./LozengeFlyContext";
 import { MessageItem } from "./MessageItem";
@@ -200,6 +201,7 @@ export function Chat({ projectPath, onCloseProject }: ChatProps) {
 	>(null);
 
 	const wsRef = useRef<ChatWebSocket | null>(null);
+	const chatInputRef = useRef<ChatInputHandle>(null);
 	const messagesEndRef = useRef<HTMLDivElement>(null);
 	const scrollContainerRef = useRef<HTMLDivElement>(null);
 	const shouldAutoScrollRef = useRef(true);
@@ -419,7 +421,13 @@ export function Chat({ projectPath, onCloseProject }: ChatProps) {
 	}, []);
 
 	const cancelGeneration = async () => {
-		// Discard any queued messages — do not auto-send after cancel
+		// Preserve queued messages by appending them to the chat input box
+		if (queuedMessagesRef.current.length > 0) {
+			const queued = queuedMessagesRef.current
+				.map((item) => item.text)
+				.join("\n");
+			chatInputRef.current?.appendToInput(queued);
+		}
 		queuedMessagesRef.current = [];
 		setQueuedMessages([]);
 		try {
@@ -843,6 +851,7 @@ export function Chat({ projectPath, onCloseProject }: ChatProps) {
 
 					{/* Chat input pinned at bottom of left column */}
 					<ChatInput
+						ref={chatInputRef}
 						loading={loading}
 						queuedMessages={queuedMessages}
 						onSubmit={sendMessage}

frontend/src/components/ChatInput.test.tsx

@@ -1,5 +1,7 @@
 import { act, fireEvent, render, screen } from "@testing-library/react";
+import * as React from "react";
 import { describe, expect, it, vi } from "vitest";
+import type { ChatInputHandle } from "./ChatInput";
 import { ChatInput } from "./ChatInput";
 
 describe("ChatInput component (Story 178 AC1)", () => {
@@ -200,3 +202,78 @@ describe("ChatInput component (Story 178 AC1)", () => {
 		expect(onRemove).toHaveBeenCalledWith("q1");
 	});
 });
+
+describe("ChatInput appendToInput (Bug 215 regression)", () => {
+	it("appendToInput sets text into an empty input", async () => {
+		const ref = React.createRef<ChatInputHandle>();
+
+		render(
+			<ChatInput
+				ref={ref}
+				loading={false}
+				queuedMessages={[]}
+				onSubmit={vi.fn()}
+				onCancel={vi.fn()}
+				onRemoveQueuedMessage={vi.fn()}
+			/>,
+		);
+
+		await act(async () => {
+			ref.current?.appendToInput("queued message");
+		});
+
+		const textarea = screen.getByPlaceholderText("Send a message...");
+		expect((textarea as HTMLTextAreaElement).value).toBe("queued message");
+	});
+
+	it("appendToInput appends to existing input content with a newline separator", async () => {
+		const ref = React.createRef<ChatInputHandle>();
+
+		render(
+			<ChatInput
+				ref={ref}
+				loading={false}
+				queuedMessages={[]}
+				onSubmit={vi.fn()}
+				onCancel={vi.fn()}
+				onRemoveQueuedMessage={vi.fn()}
+			/>,
+		);
+
+		const textarea = screen.getByPlaceholderText("Send a message...");
+
+		await act(async () => {
+			fireEvent.change(textarea, { target: { value: "existing text" } });
+		});
+
+		await act(async () => {
+			ref.current?.appendToInput("appended text");
+		});
+
+		expect((textarea as HTMLTextAreaElement).value).toBe(
+			"existing text\nappended text",
+		);
+	});
+
+	it("multiple queued messages joined with newlines are appended on cancel", async () => {
+		const ref = React.createRef<ChatInputHandle>();
+
+		render(
+			<ChatInput
+				ref={ref}
+				loading={false}
+				queuedMessages={[]}
+				onSubmit={vi.fn()}
+				onCancel={vi.fn()}
+				onRemoveQueuedMessage={vi.fn()}
+			/>,
+		);
+
+		await act(async () => {
+			ref.current?.appendToInput("msg one\nmsg two");
+		});
+
+		const textarea = screen.getByPlaceholderText("Send a message...");
+		expect((textarea as HTMLTextAreaElement).value).toBe("msg one\nmsg two");
+	});
+});

frontend/src/components/ChatInput.tsx

@@ -1,6 +1,10 @@
 import * as React from "react";
 
-const { useEffect, useRef, useState } = React;
+const { forwardRef, useEffect, useImperativeHandle, useRef, useState } = React;
+
+export interface ChatInputHandle {
+	appendToInput(text: string): void;
+}
 
 interface ChatInputProps {
 	loading: boolean;
@@ -10,182 +14,187 @@ interface ChatInputProps {
 	onRemoveQueuedMessage: (id: string) => void;
 }
 
-export function ChatInput({
+export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
-	loading,
+	function ChatInput(
-	queuedMessages,
+		{ loading, queuedMessages, onSubmit, onCancel, onRemoveQueuedMessage },
-	onSubmit,
+		ref,
-	onCancel,
+	) {
-	onRemoveQueuedMessage,
+		const [input, setInput] = useState("");
-}: ChatInputProps) {
+		const inputRef = useRef<HTMLTextAreaElement>(null);
-	const [input, setInput] = useState("");
-	const inputRef = useRef<HTMLTextAreaElement>(null);
 
-	useEffect(() => {
+		useImperativeHandle(ref, () => ({
-		inputRef.current?.focus();
+			appendToInput(text: string) {
-	}, []);
+				setInput((prev) => (prev ? `${prev}\n${text}` : text));
+			},
+		}));
 
-	const handleSubmit = () => {
+		useEffect(() => {
-		if (!input.trim()) return;
+			inputRef.current?.focus();
-		onSubmit(input);
+		}, []);
-		setInput("");
-	};
 
-	return (
+		const handleSubmit = () => {
-		<div
+			if (!input.trim()) return;
-			style={{
+			onSubmit(input);
-				padding: "24px",
+			setInput("");
-				background: "#171717",
+		};
-				display: "flex",
+
-				justifyContent: "center",
+		return (
-			}}
-		>
 			<div
 				style={{
-					maxWidth: "768px",
+					padding: "24px",
-					width: "100%",
+					background: "#171717",
 					display: "flex",
-					flexDirection: "column",
+					justifyContent: "center",
-					gap: "8px",
 				}}
 			>
-				{/* Queued message indicators */}
-				{queuedMessages.map(({ id, text }) => (
-					<div
-						key={id}
-						data-testid="queued-message-indicator"
-						style={{
-							display: "flex",
-							alignItems: "center",
-							gap: "8px",
-							padding: "8px 12px",
-							background: "#1e1e1e",
-							border: "1px solid #3a3a3a",
-							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",
-							}}
-						>
-							{text}
-						</span>
-						<button
-							type="button"
-							title="Edit queued message"
-							onClick={() => {
-								setInput(text);
-								onRemoveQueuedMessage(id);
-								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={() => onRemoveQueuedMessage(id)}
-							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={{
+						maxWidth: "768px",
+						width: "100%",
 						display: "flex",
+						flexDirection: "column",
 						gap: "8px",
-						alignItems: "center",
 					}}
 				>
-					<textarea
+					{/* Queued message indicators */}
-						ref={inputRef}
+					{queuedMessages.map(({ id, text }) => (
-						value={input}
+						<div
-						onChange={(e) => setInput(e.target.value)}
+							key={id}
-						onKeyDown={(e) => {
+							data-testid="queued-message-indicator"
-							if (e.key === "Enter" && !e.shiftKey) {
+							style={{
-								e.preventDefault();
+								display: "flex",
-								handleSubmit();
+								alignItems: "center",
-							}
+								gap: "8px",
-						}}
+								padding: "8px 12px",
-						placeholder="Send a message..."
+								background: "#1e1e1e",
-						rows={1}
+								border: "1px solid #3a3a3a",
+								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",
+								}}
+							>
+								{text}
+							</span>
+							<button
+								type="button"
+								title="Edit queued message"
+								onClick={() => {
+									setInput(text);
+									onRemoveQueuedMessage(id);
+									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={() => onRemoveQueuedMessage(id)}
+								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 && !input.trim() ? onCancel : handleSubmit}
-						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 && !input.trim() ? "■" : "↑"}
+						<textarea
-					</button>
+							ref={inputRef}
+							value={input}
+							onChange={(e) => setInput(e.target.value)}
+							onKeyDown={(e) => {
+								if (e.key === "Enter" && !e.shiftKey) {
+									e.preventDefault();
+									handleSubmit();
+								}
+							}}
+							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() ? onCancel : handleSubmit}
+							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>
+		);
-	);
+	},
-}
+);