DanielleMaywood · Aug 14, 2026 · Aug 13, 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/react-query@5.82.0",
 		"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", () => {

@@ -338,10 +338,9 @@ export const settlePromotedQueueHead = async (
 	);
 };
 
-export async function submitEditAndScroll({
+export async function submitEdit({
 	editMessage,
 	editArgs,
-	scrollToBottom,
 	onError,
 }: {
 	editMessage: (args: {
@@ -354,7 +353,6 @@ export async function submitEditAndScroll({
 		optimisticMessage?: TypesGen.ChatMessage;
 		req: TypesGen.EditChatMessageRequest;
 	};
-	scrollToBottom: (() => void) | null | undefined;
 	onError: (error: unknown) => void;
 }): Promise<void> {
 	try {
@@ -363,13 +361,6 @@ export async function submitEditAndScroll({
 		onError(error);
 		throw error;
 	}
-	// Scroll after the mutation resolves so the optimistic
-	// truncation and server reconciliation have already been
-	// applied to the DOM. Scrolling before this point causes
-	// the sticky user message to cycle through prior messages
-	// as the IntersectionObserver reacts to rapid layout
-	// shifts between the old and truncated content.
-	scrollToBottom?.();
 }
 
 /** @internal Exported for testing. */
@@ -882,7 +873,6 @@ const AgentChatPage: FC = () => {
 		isSidebarCollapsed,
 		onToggleSidebarCollapsed,
 		onChatReady,
-		scrollContainerRef,
 	} = useOutletContext<AgentsPageOutletContext>();
 	const queryClient = useQueryClient();
 	const { permissions, user: currentUser } = useAuthenticated();
@@ -891,7 +881,6 @@ const AgentChatPage: FC = () => {
 	const [selectedModel, setSelectedModel] = useState("");
 	const [selectedReasoningEffort, setSelectedReasoningEffort] = useState("");
 	const isEditReasoningEffortDirtyRef = useRef(false);
-	const scrollToBottomRef = useRef<(() => void) | null>(null);
 	const chatInputRef = useRef<ChatMessageInputRef | null>(null);
 	const inputValueRef = useRef(
 		agentId
@@ -1662,7 +1651,6 @@ const AgentChatPage: FC = () => {
 			clearStreamError();
 			store.clearStreamState();
 			store.setChatStatus("running");
-			scrollToBottomRef.current?.();
 			try {
 				await compact();
 			} catch (error) {
@@ -1715,14 +1703,13 @@ const AgentChatPage: FC = () => {
 				store.setChatStatus("running");
 				store.clearStreamState();
 			});
-			await submitEditAndScroll({
+			await submitEdit({
 				editMessage,
 				editArgs: {
 					messageId: editedMessageID,
 					optimisticMessage,
 					req: request,
 				},
-				scrollToBottom: scrollToBottomRef.current,
 				onError: (error) => {
 					restoreOptimisticRequestSnapshot(store, previousSnapshot);
 					handleRequestError(error);
@@ -1758,7 +1745,6 @@ const AgentChatPage: FC = () => {
 		};
 		clearChatErrorReason(agentId);
 		clearStreamError();
-		scrollToBottomRef.current?.();
 
 		// An errored-chat send may promote the queue head that existed when the request began.
 		const queuedMessagesBeforeSend = store.getSnapshot().queuedMessages;
@@ -2035,12 +2021,10 @@ const AgentChatPage: FC = () => {
 			isPinned={(chatRecord?.pin_order ?? 0) > 0}
 			isChildChat={parentChatID !== undefined}
 			urlTransform={urlTransform}
-			scrollContainerRef={scrollContainerRef}
-			scrollToBottomRef={scrollToBottomRef}
 			hasMoreMessages={chatMessagesQuery.hasNextPage ?? false}
 			isFetchingMoreMessages={chatMessagesQuery.isFetchingNextPage}
+			hasFetchMoreError={chatMessagesQuery.isFetchNextPageError}
 			onFetchMoreMessages={chatMessagesQuery.fetchNextPage}
-			messageCount={storeMessageCount}
 			desktopChatId={desktopEnabled ? agentId : undefined}
 			mcpServers={mcpServers}
 			selectedMCPServerIds={effectiveMCPServerIds}