Story 48: Two Column Layout — Chat Left, Panels Right

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/src/components/Chat.test.tsx

@@ -766,7 +766,95 @@ describe("Chat message rendering — unified tool call UI", () => {
 			capturedWsHandlers?.onUpdate(messages);
 		});
 
+<<<<<<< HEAD
 		expect(await screen.findByText("Bash(cargo test)")).toBeInTheDocument();
 		expect(await screen.findByText("Read(Cargo.toml)")).toBeInTheDocument();
 	});
 });
+
+describe("Chat two-column layout", () => {
+	beforeEach(() => {
+		capturedWsHandlers = null;
+
+		mockedApi.getOllamaModels.mockResolvedValue(["llama3.1"]);
+		mockedApi.getAnthropicApiKeyExists.mockResolvedValue(true);
+		mockedApi.getAnthropicModels.mockResolvedValue([]);
+		mockedApi.getModelPreference.mockResolvedValue(null);
+		mockedApi.setModelPreference.mockResolvedValue(true);
+		mockedApi.cancelChat.mockResolvedValue(true);
+
+		mockedWorkflow.getAcceptance.mockResolvedValue({
+			can_accept: true,
+			reasons: [],
+			warning: null,
+			summary: { total: 0, passed: 0, failed: 0 },
+			missing_categories: [],
+		});
+		mockedWorkflow.getReviewQueueAll.mockResolvedValue({ stories: [] });
+		mockedWorkflow.ensureAcceptance.mockResolvedValue(true);
+		mockedWorkflow.getStoryTodos.mockResolvedValue({ stories: [] });
+		mockedWorkflow.getUpcomingStories.mockResolvedValue({ stories: [] });
+	});
+
+	it("renders left and right column containers (AC1, AC2)", async () => {
+		render(<Chat projectPath="/tmp/project" onCloseProject={vi.fn()} />);
+
+		expect(await screen.findByTestId("chat-content-area")).toBeInTheDocument();
+		expect(await screen.findByTestId("chat-left-column")).toBeInTheDocument();
+		expect(await screen.findByTestId("chat-right-column")).toBeInTheDocument();
+	});
+
+	it("renders chat input inside the left column (AC2, AC5)", async () => {
+		render(<Chat projectPath="/tmp/project" onCloseProject={vi.fn()} />);
+
+		const leftColumn = await screen.findByTestId("chat-left-column");
+		const input = screen.getByPlaceholderText("Send a message...");
+		expect(leftColumn).toContainElement(input);
+	});
+
+	it("renders panels inside the right column (AC2)", async () => {
+		mockedWorkflow.getReviewQueueAll.mockResolvedValue({ stories: [] });
+
+		render(<Chat projectPath="/tmp/project" onCloseProject={vi.fn()} />);
+
+		const rightColumn = await screen.findByTestId("chat-right-column");
+		const reviewPanel = await screen.findByText("Stories Awaiting Review");
+		expect(rightColumn).toContainElement(reviewPanel);
+	});
+
+	it("uses row flex-direction on wide screens (AC3)", async () => {
+		Object.defineProperty(window, "innerWidth", {
+			writable: true,
+			configurable: true,
+			value: 1200,
+		});
+		window.dispatchEvent(new Event("resize"));
+
+		render(<Chat projectPath="/tmp/project" onCloseProject={vi.fn()} />);
+
+		const contentArea = await screen.findByTestId("chat-content-area");
+		expect(contentArea).toHaveStyle({ flexDirection: "row" });
+	});
+
+	it("uses column flex-direction on narrow screens (AC4)", async () => {
+		Object.defineProperty(window, "innerWidth", {
+			writable: true,
+			configurable: true,
+			value: 600,
+		});
+		window.dispatchEvent(new Event("resize"));
+
+		render(<Chat projectPath="/tmp/project" onCloseProject={vi.fn()} />);
+
+		const contentArea = await screen.findByTestId("chat-content-area");
+		expect(contentArea).toHaveStyle({ flexDirection: "column" });
+
+		// Restore wide width for subsequent tests
+		Object.defineProperty(window, "innerWidth", {
+			writable: true,
+			configurable: true,
+			value: 1024,
+		});
+>>>>>>> 222b581 (Story 48: Two Column Layout — Chat Left, Panels Right)
+	});
+});