coder · DanielleMaywood · Aug 14, 2026 · Aug 13, 2026 · Aug 13, 2026 · Aug 13, 2026
diff --git a/site/package.json b/site/package.json
@@ -58,6 +58,7 @@
 		"@novnc/novnc": "^1.5.0",
 		"@pierre/diffs": "1.3.3",
 		"@pierre/trees": "1.0.0-beta.4",
+		"@shadcn/react": "0.3.0",
 		"@tanstack/react-query-devtools": "5.82.0",
 		"@xterm/addon-canvas": "0.7.0",
 		"@xterm/addon-fit": "0.11.0",
@@ -94,7 +95,6 @@
 		"react-confetti": "6.4.0",
 		"react-day-picker": "9.14.0",
 		"react-dom": "19.2.8",
-		"react-infinite-scroll-component": "7.2.1",
 		"react-markdown": "9.1.0",
 		"react-query": "npm:@tanstack/[email protected]",
 		"react-resizable-panels": "3.0.6",

diff --git a/site/pnpm-lock.yaml b/site/pnpm-lock.yaml
@@ -1,6 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import type { FC } from "react";
-import { useRef } from "react";
 import { hashKey } from "react-query";
 import { Outlet, useNavigate } from "react-router";
 import { expect, spyOn, userEvent, waitFor, within } from "storybook/test";
@@ -50,7 +49,6 @@ import type { AgentsPageOutletContext } from "./AgentsPageLayout";
 // Layout wrapper: provides outlet context for the child route.
 // ---------------------------------------------------------------------------
 const AgentChatPageLayout: FC = () => {
-	const scrollContainerRef = useRef<HTMLDivElement | null>(null);
 	return (
 		<div className="flex h-full">
 			<div className="flex min-w-0 flex-1 flex-col overflow-hidden">
@@ -74,7 +72,6 @@ const AgentChatPageLayout: FC = () => {
 							onToggleSidebarCollapsed: () => {},
 							onExpandSidebar: () => {},
 							onChatReady: () => {},
-							scrollContainerRef,
 						} satisfies AgentsPageOutletContext
 					}
 				/>
@@ -3149,6 +3146,72 @@ export const SendResponseAfterChatSwitch: Story = {
 	},
 };
 
+/**
+ * The send flow renders the durable user row once the server accepts the
+ * prompt, before the assistant turn produces any output.
+ */
+export const SendRendersDurableUserRowBeforeAssistantOutput: Story = {
+	parameters: {
+		queries: buildQueries(
+			{
+				id: CHAT_ID,
+				...baseChatFields,
+				title: "Durable send",
+				status: "waiting",
+			},
+			{ messages: [], queued_messages: [], has_more: false },
+			{ diffUrl: undefined },
+		),
+	},
+	beforeEach: () => {
+		spyOn(API.experimental, "getUserSkills").mockResolvedValue([]);
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		let releaseSend: (() => void) | undefined;
+		const sendGate = new Promise<void>((resolve) => {
+			releaseSend = resolve;
+		});
+		const sendSpy = spyOn(
+			API.experimental,
+			"createChatMessage",
+		).mockImplementation(async () => {
+			await sendGate;
+			return {
+				queued: false,
+				message: {
+					...MockChatMessage,
+					id: 60,
+					chat_id: CHAT_ID,
+					role: "user",
+					content: [{ type: "text", text: "Durable prompt" }],
+				},
+			};
+		});
+
+		const editor = await canvas.findByTestId("chat-message-input");
+		await userEvent.click(editor);
+		await userEvent.type(editor, "Durable prompt");
+		await userEvent.keyboard("{Enter}");
+		await waitFor(() => {
+			expect(sendSpy).toHaveBeenCalledTimes(1);
+		});
+
+		const timeline = within(await canvas.findByTestId("conversation-timeline"));
+		expect(
+			timeline.queryByTestId("chat-message-message:60"),
+		).not.toBeInTheDocument();
+
+		releaseSend?.();
+		expect(
+			await timeline.findByTestId("chat-message-message:60"),
+		).toHaveTextContent("Durable prompt");
+		// The turn is still waiting on its first chunk, so the durable row is in
+		// place before any assistant output exists.
+		expect(canvas.getByTestId("live-activity-slot")).toBeVisible();
+	},
+};
+
 const mockErrorChat: TypesGen.Chat = {
 	...MockChat,
 	id: CHAT_ID,

@@ -28,7 +28,7 @@ import {
 	restoreOptimisticRequestSnapshot,
 	runPromoteQueuedMessage,
 	settlePromotedQueueHead,
-	submitEditAndScroll,
+	submitEdit,
 	useConversationEditingState,
 	waitForPendingChatSettingsSyncs,
 } from "./AgentChatPage";
@@ -1246,63 +1246,40 @@ describe("useConversationEditingState", () => {
 	});
 });
 
-describe("submitEditAndScroll", () => {
+describe("submitEdit", () => {
 	const dummyArgs = {
 		messageId: 42,
 		req: { content: [{ type: "text" as const, text: "edited" }] },
 	};
 
-	it("calls scrollToBottom after editMessage resolves", async () => {
-		const callOrder: string[] = [];
-		const editMessage = vi.fn(async () => {
-			callOrder.push("editMessage");
-		});
-		const scrollToBottom = vi.fn(() => {
-			callOrder.push("scrollToBottom");
-		});
+	it("awaits editMessage", async () => {
+		const editMessage = vi.fn().mockResolvedValue(undefined);
 
-		await submitEditAndScroll({
+		await submitEdit({
 			editMessage,
 			editArgs: dummyArgs,
-			scrollToBottom,
 			onError: vi.fn(),
 		});
 
-		expect(callOrder).toEqual(["editMessage", "scrollToBottom"]);
+		expect(editMessage).toHaveBeenCalledWith(dummyArgs);
 	});
 
-	it("does not call scrollToBottom when editMessage throws", async () => {
-		const scrollToBottom = vi.fn();
+	it("reports and rethrows an editMessage failure", async () => {
 		const onError = vi.fn();
 		const editMessage = vi.fn().mockRejectedValue(new Error("boom"));
 
 		await expect(
-			submitEditAndScroll({
+			submitEdit({
 				editMessage,
 				editArgs: dummyArgs,
-				scrollToBottom,
 				onError,
 			}),
 		).rejects.toThrow("boom");
 
-		expect(scrollToBottom).not.toHaveBeenCalled();
 		expect(onError).toHaveBeenCalledWith(
 			expect.objectContaining({ message: "boom" }),
 		);
 	});
-
-	it("tolerates null scrollToBottom", async () => {
-		const editMessage = vi.fn().mockResolvedValue(undefined);
-
-		await submitEditAndScroll({
-			editMessage,
-			editArgs: dummyArgs,
-			scrollToBottom: null,
-			onError: vi.fn(),
-		});
-
-		expect(editMessage).toHaveBeenCalled();
-	});
 });
 
 describe("sidebar tab persistence", () => {