dave/storkit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 7 Wiki Activity

story-kit: merge 155_story_queue_messages_while_agent_is_busy

Browse Source
This commit is contained in:
Dave
2026-02-24 16:29:05 +00:00
parent f0000e0436
commit bb1c3ac97c
2 changed files with 420 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

240
frontend/src/components/Chat.test.tsx
View File

@@ -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();
});
});
});

140
frontend/src/components/Chat.tsx
View File

@@ -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-")) {
@@ -841,6 +880,96 @@ export function Chat({ projectPath, onCloseProject }: ChatProps) {
style={{
maxWidth: "768px",
width: "100%",
display: "flex",
flexDirection: "column",
gap: "8px",
}}
>
{/* Queued message indicator */}
{queuedMessage && (
<div
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",
}}
>
{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={{
display: "flex",
gap: "8px",
alignItems: "center",
@@ -876,7 +1005,11 @@ export function Chat({ projectPath, onCloseProject }: ChatProps) {
/>
<button
type="button"
onClick={loading ? cancelGeneration : () => sendMessage()}
onClick={
loading && !input.trim()
? cancelGeneration
: () => sendMessage()
}
disabled={!loading && !input.trim()}
style={{
background: "#ececec",
@@ -893,11 +1026,12 @@ export function Chat({ projectPath, onCloseProject }: ChatProps) {
flexShrink: 0,
}}
>
{loading ? "■" : "↑"}
{loading && !input.trim() ? "■" : "↑"}
</button>
</div>
</div>
</div>
</div>
{/* Right column: panels independently scrollable */}
<div