refactor: extract shared test helpers and improve error assertions

- Create tests/e2e/lib/helpers.ts with shared SSE mock functions
- Add proper error UI assertions to error-handling.spec.ts
- Remove waitForTimeout calls in favor of real assertions
- Update 6 test files to use shared helpers

tests/e2e/copy-paste.spec.ts

@@ -1,36 +1,5 @@
 import { expect, test } from "@playwright/test"
-
+import { createMockSSEResponse } from "./lib/helpers"
-// Helper to create SSE response
-function createMockSSEResponse(xml: string, text: string) {
-    const messageId = `msg_${Date.now()}`
-    const toolCallId = `call_${Date.now()}`
-    const textId = `text_${Date.now()}`
-
-    const events = [
-        { type: "start", messageId },
-        { type: "text-start", id: textId },
-        { type: "text-delta", id: textId, delta: text },
-        { type: "text-end", id: textId },
-        { type: "tool-input-start", toolCallId, toolName: "display_diagram" },
-        {
-            type: "tool-input-available",
-            toolCallId,
-            toolName: "display_diagram",
-            input: { xml },
-        },
-        {
-            type: "tool-output-available",
-            toolCallId,
-            output: "Successfully displayed the diagram",
-        },
-        { type: "finish" },
-    ]
-
-    return (
-        events.map((e) => `data: ${JSON.stringify(e)}\n\n`).join("") +
-        "data: [DONE]\n\n"
-    )
-}
 
 test.describe("Copy/Paste Functionality", () => {
     test("can paste text into chat input", async ({ page }) => {

tests/e2e/diagram-generation.spec.ts

@@ -1,4 +1,5 @@
 import { expect, test } from "@playwright/test"
+import { createMockSSEResponse } from "./lib/helpers"
 
 // Simple cat diagram XML for testing (mxCell elements only, no wrapper)
 const CAT_DIAGRAM_XML = `<mxCell id="cat-head" value="Cat Head" style="ellipse;whiteSpace=wrap;html=1;fillColor=#FFE4B5;" vertex="1" parent="1">
@@ -19,52 +20,14 @@ const FLOWCHART_XML = `<mxCell id="start" value="Start" style="rounded=1;whiteSp
   <mxGeometry x="200" y="210" width="100" height="40" as="geometry"/>
 </mxCell>`
 
-// Helper to create SSE-formatted UI message stream response
-function createMockSSEResponse(xml: string, toolName = "display_diagram") {
-    const messageId = `msg_${Date.now()}`
-    const toolCallId = `call_${Date.now()}`
-    const textId = `text_${Date.now()}`
-
-    // SSE format: each event is "data: <json>\n\n"
-    const events = [
-        // Message start
-        { type: "start", messageId },
-        // Text content
-        { type: "text-start", id: textId },
-        {
-            type: "text-delta",
-            id: textId,
-            delta: "I'll create a diagram for you.",
-        },
-        { type: "text-end", id: textId },
-        // Tool call
-        { type: "tool-input-start", toolCallId, toolName },
-        {
-            type: "tool-input-available",
-            toolCallId,
-            toolName,
-            input: { xml },
-        },
-        {
-            type: "tool-output-available",
-            toolCallId,
-            output: "Successfully displayed the diagram",
-        },
-        // Finish
-        { type: "finish" },
-    ]
-
-    return (
-        events.map((e) => `data: ${JSON.stringify(e)}\n\n`).join("") +
-        "data: [DONE]\n\n"
-    )
-}
-
 test.describe("Diagram Generation", () => {
     test.beforeEach(async ({ page }) => {
         // Mock the chat API to return our test XML
         await page.route("**/api/chat", async (route) => {
-            const response = createMockSSEResponse(CAT_DIAGRAM_XML)
+            const response = createMockSSEResponse(
+                CAT_DIAGRAM_XML,
+                "I'll create a diagram for you.",
+            )
             await route.fulfill({
                 status: 200,
                 contentType: "text/event-stream",
@@ -147,7 +110,10 @@ test.describe("Diagram Edit", () => {
                 await route.fulfill({
                     status: 200,
                     contentType: "text/event-stream",
-                    body: createMockSSEResponse(FLOWCHART_XML),
+                    body: createMockSSEResponse(
+                        FLOWCHART_XML,
+                        "I'll create a diagram for you.",
+                    ),
                 })
             } else {
                 // Edit response - replaces the diagram
@@ -158,7 +124,10 @@ test.describe("Diagram Edit", () => {
                 await route.fulfill({
                     status: 200,
                     contentType: "text/event-stream",
-                    body: createMockSSEResponse(editedXml),
+                    body: createMockSSEResponse(
+                        editedXml,
+                        "I'll create a diagram for you.",
+                    ),
                 })
             }
         })
@@ -200,7 +169,10 @@ test.describe("Diagram Append", () => {
                 await route.fulfill({
                     status: 200,
                     contentType: "text/event-stream",
-                    body: createMockSSEResponse(FLOWCHART_XML),
+                    body: createMockSSEResponse(
+                        FLOWCHART_XML,
+                        "I'll create a diagram for you.",
+                    ),
                 })
             } else {
                 // Append response - adds new element
@@ -210,7 +182,11 @@ test.describe("Diagram Append", () => {
                 await route.fulfill({
                     status: 200,
                     contentType: "text/event-stream",
-                    body: createMockSSEResponse(appendXml, "append_diagram"),
+                    body: createMockSSEResponse(
+                        appendXml,
+                        "I'll create a diagram for you.",
+                        "append_diagram",
+                    ),
                 })
             }
         })

tests/e2e/error-handling.spec.ts

@@ -21,8 +21,14 @@ test.describe("Error Handling", () => {
         await chatInput.fill("Draw a cat")
         await chatInput.press("ControlOrMeta+Enter")
 
-        // After error, user should be able to type again (input still functional)
+        // Should show error indication (toast, alert, or error text)
-        await page.waitForTimeout(2000) // Wait for error response
+        const errorIndicator = page
+            .locator('[role="alert"]')
+            .or(page.locator("[data-sonner-toast]"))
+            .or(page.locator("text=/error|failed|something went wrong/i"))
+        await expect(errorIndicator.first()).toBeVisible({ timeout: 10000 })
+
+        // User should be able to type again (input still functional)
         await chatInput.fill("Retry message")
         await expect(chatInput).toHaveValue("Retry message")
     })
@@ -49,8 +55,14 @@ test.describe("Error Handling", () => {
         await chatInput.fill("Draw a cat")
         await chatInput.press("ControlOrMeta+Enter")
 
-        // After rate limit error, user should be able to type again
+        // Should show error indication for rate limit
-        await page.waitForTimeout(2000) // Wait for error response
+        const errorIndicator = page
+            .locator('[role="alert"]')
+            .or(page.locator("[data-sonner-toast]"))
+            .or(page.locator("text=/rate limit|too many|try again/i"))
+        await expect(errorIndicator.first()).toBeVisible({ timeout: 10000 })
+
+        // User should be able to type again
         await chatInput.fill("Retry after rate limit")
         await expect(chatInput).toHaveValue("Retry after rate limit")
     })
@@ -73,8 +85,12 @@ test.describe("Error Handling", () => {
         await chatInput.fill("Draw a cat")
         await chatInput.press("ControlOrMeta+Enter")
 
-        // Wait for timeout error to occur
+        // Should show error indication for network failure
-        await page.waitForTimeout(3000)
+        const errorIndicator = page
+            .locator('[role="alert"]')
+            .or(page.locator("[data-sonner-toast]"))
+            .or(page.locator("text=/error|failed|network|timeout/i"))
+        await expect(errorIndicator.first()).toBeVisible({ timeout: 10000 })
 
         // After timeout, user should be able to type again
         await chatInput.fill("Try again after timeout")

tests/e2e/file-upload.spec.ts

@@ -1,37 +1,5 @@
-import path from "node:path"
 import { expect, test } from "@playwright/test"
-
+import { createMockSSEResponse } from "./lib/helpers"
-// Helper to create SSE response
-function createMockSSEResponse(xml: string, text: string) {
-    const messageId = `msg_${Date.now()}`
-    const toolCallId = `call_${Date.now()}`
-    const textId = `text_${Date.now()}`
-
-    const events = [
-        { type: "start", messageId },
-        { type: "text-start", id: textId },
-        { type: "text-delta", id: textId, delta: text },
-        { type: "text-end", id: textId },
-        { type: "tool-input-start", toolCallId, toolName: "display_diagram" },
-        {
-            type: "tool-input-available",
-            toolCallId,
-            toolName: "display_diagram",
-            input: { xml },
-        },
-        {
-            type: "tool-output-available",
-            toolCallId,
-            output: "Successfully displayed the diagram",
-        },
-        { type: "finish" },
-    ]
-
-    return (
-        events.map((e) => `data: ${JSON.stringify(e)}\n\n`).join("") +
-        "data: [DONE]\n\n"
-    )
-}
 
 test.describe("File Upload", () => {
     test("upload button opens file picker", async ({ page }) => {

tests/e2e/history-restore.spec.ts

@@ -1,36 +1,5 @@
 import { expect, test } from "@playwright/test"
-
+import { createMockSSEResponse } from "./lib/helpers"
-// Helper to create SSE response
-function createMockSSEResponse(xml: string, text: string) {
-    const messageId = `msg_${Date.now()}`
-    const toolCallId = `call_${Date.now()}`
-    const textId = `text_${Date.now()}`
-
-    const events = [
-        { type: "start", messageId },
-        { type: "text-start", id: textId },
-        { type: "text-delta", id: textId, delta: text },
-        { type: "text-end", id: textId },
-        { type: "tool-input-start", toolCallId, toolName: "display_diagram" },
-        {
-            type: "tool-input-available",
-            toolCallId,
-            toolName: "display_diagram",
-            input: { xml },
-        },
-        {
-            type: "tool-output-available",
-            toolCallId,
-            output: "Successfully displayed the diagram",
-        },
-        { type: "finish" },
-    ]
-
-    return (
-        events.map((e) => `data: ${JSON.stringify(e)}\n\n`).join("") +
-        "data: [DONE]\n\n"
-    )
-}
 
 test.describe("History and Session Restore", () => {
     test("new chat button clears conversation", async ({ page }) => {

tests/e2e/iframe-interaction.spec.ts

@@ -1,36 +1,5 @@
 import { expect, test } from "@playwright/test"
-
+import { createMockSSEResponse } from "./lib/helpers"
-// Helper to create SSE response
-function createMockSSEResponse(xml: string, text: string) {
-    const messageId = `msg_${Date.now()}`
-    const toolCallId = `call_${Date.now()}`
-    const textId = `text_${Date.now()}`
-
-    const events = [
-        { type: "start", messageId },
-        { type: "text-start", id: textId },
-        { type: "text-delta", id: textId, delta: text },
-        { type: "text-end", id: textId },
-        { type: "tool-input-start", toolCallId, toolName: "display_diagram" },
-        {
-            type: "tool-input-available",
-            toolCallId,
-            toolName: "display_diagram",
-            input: { xml },
-        },
-        {
-            type: "tool-output-available",
-            toolCallId,
-            output: "Successfully displayed the diagram",
-        },
-        { type: "finish" },
-    ]
-
-    return (
-        events.map((e) => `data: ${JSON.stringify(e)}\n\n`).join("") +
-        "data: [DONE]\n\n"
-    )
-}
 
 test.describe("Iframe Interaction", () => {
     test("draw.io iframe loads successfully", async ({ page }) => {

tests/e2e/lib/helpers.ts

@@ -0,0 +1,88 @@
+/**
+ * Shared test helpers for E2E tests
+ */
+
+/**
+ * Creates a mock SSE response for the chat API
+ * Format matches AI SDK UI message stream protocol
+ */
+export function createMockSSEResponse(
+    xml: string,
+    text: string,
+    toolName = "display_diagram",
+) {
+    const messageId = `msg_${Date.now()}`
+    const toolCallId = `call_${Date.now()}`
+    const textId = `text_${Date.now()}`
+
+    const events = [
+        { type: "start", messageId },
+        { type: "text-start", id: textId },
+        { type: "text-delta", id: textId, delta: text },
+        { type: "text-end", id: textId },
+        { type: "tool-input-start", toolCallId, toolName },
+        { type: "tool-input-available", toolCallId, toolName, input: { xml } },
+        {
+            type: "tool-output-available",
+            toolCallId,
+            output: "Successfully displayed the diagram",
+        },
+        { type: "finish" },
+    ]
+
+    return (
+        events.map((e) => `data: ${JSON.stringify(e)}\n\n`).join("") +
+        "data: [DONE]\n\n"
+    )
+}
+
+/**
+ * Creates a text-only SSE response (no tool call)
+ */
+export function createTextOnlyResponse(text: string) {
+    const messageId = `msg_${Date.now()}`
+    const textId = `text_${Date.now()}`
+
+    const events = [
+        { type: "start", messageId },
+        { type: "text-start", id: textId },
+        { type: "text-delta", id: textId, delta: text },
+        { type: "text-end", id: textId },
+        { type: "finish" },
+    ]
+
+    return (
+        events.map((e) => `data: ${JSON.stringify(e)}\n\n`).join("") +
+        "data: [DONE]\n\n"
+    )
+}
+
+/**
+ * Creates a mock SSE response with a tool error
+ */
+export function createToolErrorResponse(text: string, errorMessage: string) {
+    const messageId = `msg_${Date.now()}`
+    const toolCallId = `call_${Date.now()}`
+    const textId = `text_${Date.now()}`
+
+    const events = [
+        { type: "start", messageId },
+        { type: "text-start", id: textId },
+        { type: "text-delta", id: textId, delta: text },
+        { type: "text-end", id: textId },
+        { type: "tool-input-start", toolCallId, toolName: "display_diagram" },
+        {
+            type: "tool-input-available",
+            toolCallId,
+            toolName: "display_diagram",
+            input: { xml: "<invalid>" },
+        },
+        { type: "tool-output-error", toolCallId, error: errorMessage },
+        { type: "finish" },
+    ]
+
+    return (
+        events.map((e) => `data: ${JSON.stringify(e)}\n\n`).join("") +
+        "data: [DONE]\n\n"
+    )
+}

tests/e2e/multi-turn.spec.ts

@@ -1,54 +1,5 @@
 import { expect, test } from "@playwright/test"
-
+import { createMockSSEResponse, createTextOnlyResponse } from "./lib/helpers"
-// Helper to create SSE response
-function createMockSSEResponse(
-    xml: string,
-    text: string,
-    toolName = "display_diagram",
-) {
-    const messageId = `msg_${Date.now()}`
-    const toolCallId = `call_${Date.now()}`
-    const textId = `text_${Date.now()}`
-
-    const events = [
-        { type: "start", messageId },
-        { type: "text-start", id: textId },
-        { type: "text-delta", id: textId, delta: text },
-        { type: "text-end", id: textId },
-        { type: "tool-input-start", toolCallId, toolName },
-        { type: "tool-input-available", toolCallId, toolName, input: { xml } },
-        {
-            type: "tool-output-available",
-            toolCallId,
-            output: "Successfully displayed the diagram",
-        },
-        { type: "finish" },
-    ]
-
-    return (
-        events.map((e) => `data: ${JSON.stringify(e)}\n\n`).join("") +
-        "data: [DONE]\n\n"
-    )
-}
-
-// Helper for text-only response
-function createTextOnlyResponse(text: string) {
-    const messageId = `msg_${Date.now()}`
-    const textId = `text_${Date.now()}`
-
-    const events = [
-        { type: "start", messageId },
-        { type: "text-start", id: textId },
-        { type: "text-delta", id: textId, delta: text },
-        { type: "text-end", id: textId },
-        { type: "finish" },
-    ]
-
-    return (
-        events.map((e) => `data: ${JSON.stringify(e)}\n\n`).join("") +
-        "data: [DONE]\n\n"
-    )
-}
 
 test.describe("Multi-turn Conversation", () => {
     test("handles multiple diagram requests in sequence", async ({ page }) => {