e2e: editing earliest prompt hides downstream prompt

Author: princeaden1

e2e-tests/edit_prompt.spec.ts

@@ -0,0 +1,50 @@
+import { test } from "./helpers/test_helper";
+import { expect } from "@playwright/test";
+import type { PageObject } from "./helpers/test_helper";
+
+async function editFirstPrompt(po: PageObject, newContent: string) {
+  // Find the edit button with Pencil icon within chat messages
+  // The button contains a Pencil icon (lucide-react's Pencil component)
+  const editButton = po.page.locator("button:has(.lucide-pencil)").first();
+  await editButton.click();
+
+  // Wait for the textarea to be visible before trying to fill it
+  const editTextarea = po.page.getByTestId("chat-message-edit-textarea");
+  await editTextarea.waitFor({ state: "visible" });
+  await editTextarea.fill(newContent);
+
+  await po.page.getByRole("button", { name: "Save" }).click();
+  await po.waitForChatCompletion();
+}
+
+test("editing earliest prompt hides downstream prompts until switching versions", async ({
+  po,
+}) => {
+  await po.setUp({ autoApprove: true });
+
+  await po.sendPrompt("Prompt 1 - original");
+  await po.sendPrompt("Prompt 2 - follow-up");
+  await po.sendPrompt("Prompt 3 - final context");
+
+  await expect(
+    po.page.getByText("Prompt 2 - follow-up", { exact: true }),
+  ).toBeVisible();
+  await expect(
+    po.page.getByText("Prompt 3 - final context", { exact: true }),
+  ).toBeVisible();
+
+  await editFirstPrompt(po, "Prompt 1 - edited branch");
+
+  await expect(po.page.getByText("2/2", { exact: true })).toBeVisible();
+
+  await expect(
+    po.page.getByText("Prompt 1 - original", { exact: true }),
+  ).toHaveCount(0);
+
+  await po.page.getByRole("button", { name: "Previous version" }).click();
+
+  await expect(po.page.getByText("1/2", { exact: true })).toBeVisible();
+  await expect(
+    po.page.getByText("Prompt 1 - original", { exact: true }),
+  ).toBeVisible();
+});

src/components/chat/ChatMessage.tsx

@@ -150,6 +150,7 @@ const ChatMessage = ({
           {isEditing ? (
             <div className="flex flex-col gap-2">
               <Textarea
+                data-testid="chat-message-edit-textarea"
                 className="w-full p-2 border rounded-md"
                 value={editedContent}
                 onChange={(event) => setEditedContent(event.target.value)}