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,16 +14,20 @@ 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,
-}: ChatInputProps) {
 		const [input, setInput] = useState("");
 		const inputRef = useRef<HTMLTextAreaElement>(null);
 
+		useImperativeHandle(ref, () => ({
+			appendToInput(text: string) {
+				setInput((prev) => (prev ? `${prev}\n${text}` : text));
+			},
+		}));
+
 		useEffect(() => {
 			inputRef.current?.focus();
 		}, []);
@@ -188,4 +196,5 @@ export function ChatInput({
 				</div>
 			</div>
 		);
-}
+	},
+);