Smooth WebUI streaming with state-driven viewport motion (#4696)

webui/src/tests/markdown-text.test.tsx

@@ -29,6 +29,7 @@ vi.mock("@/components/MarkdownTextRenderer", () => ({
       <div
         data-testid="markdown-renderer"
         data-highlight-code={String(highlightCode)}
+        data-streaming-layout={String(streaming)}
       >
         {children}
       </div>
@@ -106,6 +107,33 @@ describe("MarkdownText", () => {
     expect(rendererMountSpy).toHaveBeenCalledTimes(1);
   });
 
+  it("can complete without replacing the streaming renderer layout", async () => {
+    const source = "A layout-stable answer";
+    const { rerender } = render(
+      <MarkdownText streaming preserveStreamingLayout>{source}</MarkdownText>,
+    );
+
+    await act(async () => {
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+    expect(screen.getByTestId("markdown-renderer")).toHaveAttribute(
+      "data-streaming-layout",
+      "true",
+    );
+
+    rerender(<MarkdownText preserveStreamingLayout>{source}</MarkdownText>);
+
+    expect(screen.getByTestId("markdown-renderer")).toHaveAttribute(
+      "data-streaming-layout",
+      "true",
+    );
+    expect(screen.getByTestId("markdown-renderer")).toHaveAttribute(
+      "data-highlight-code",
+      "true",
+    );
+  });
+
   it("defers syntax highlighting until the final render", async () => {
     rendererSpy.mockClear();
     const largeCode = `\`\`\`ts\n${"const value = 1;\n".repeat(1_100)}\`\`\``;