chore: import upstream snapshot with attribution

examples/e2e/tests/v1.x/chat-window-layout.spec.ts

@@ -0,0 +1,78 @@
+/**
+ * Regression test for the chat window flex layout broken in 1.55.
+ *
+ * Root cause: the drag-and-drop wrapper div introduced with attachments had
+ * no CSS class when not dragging, so no flex rule applied and the chat body
+ * collapsed to content height instead of filling the window.
+ */
+import { test, expect } from "@playwright/test";
+
+const EXAMPLE = process.env.EXAMPLE ?? "form-filling";
+
+test.describe("chat window layout", () => {
+  test.skip(EXAMPLE !== "form-filling", `EXAMPLE=${EXAMPLE}`);
+
+  test.beforeEach(async ({ page }) => {
+    await page.goto("/");
+    // form-filling uses defaultOpen — window is already open after hydration
+    await page.locator(".copilotKitWindow.open").waitFor({ timeout: 10_000 });
+  });
+
+  test("chat body fills the window", async ({ page }) => {
+    const chatBody = page.locator(".copilotKitChatBody");
+    const window = page.locator(".copilotKitWindow");
+
+    await expect(chatBody).toHaveCSS("flex", "1 1 0%");
+
+    const bodyBox = await chatBody.boundingBox();
+    const windowBox = await window.boundingBox();
+    expect(bodyBox).not.toBeNull();
+    expect(windowBox).not.toBeNull();
+    expect(bodyBox!.height).toBeGreaterThan(windowBox!.height * 0.8);
+  });
+
+  test("messages area fills available space", async ({ page }) => {
+    const messages = page.locator(".copilotKitMessages");
+    const window = page.locator(".copilotKitWindow");
+
+    const messagesBox = await messages.boundingBox();
+    const windowBox = await window.boundingBox();
+    expect(messagesBox).not.toBeNull();
+    expect(windowBox).not.toBeNull();
+    expect(messagesBox!.height).toBeGreaterThan(windowBox!.height * 0.5);
+    expect(messagesBox!.height).toBeLessThanOrEqual(windowBox!.height);
+  });
+
+  test("input is pinned to the lower half of the window", async ({ page }) => {
+    const input = page.locator(".copilotKitInput");
+    const window = page.locator(".copilotKitWindow");
+
+    const inputBox = await input.boundingBox();
+    const windowBox = await window.boundingBox();
+    expect(inputBox).not.toBeNull();
+    expect(windowBox).not.toBeNull();
+
+    const inputMidY = inputBox!.y + inputBox!.height / 2;
+    const windowMidY = windowBox!.y + windowBox!.height / 2;
+    expect(inputMidY).toBeGreaterThan(windowMidY);
+  });
+
+  test("drag state does not break layout", async ({ page }) => {
+    const chatBody = page.locator(".copilotKitChatBody");
+    const messages = page.locator(".copilotKitMessages");
+    const window = page.locator(".copilotKitWindow");
+
+    await page.evaluate(() => {
+      const body = document.querySelector(".copilotKitChatBody");
+      body?.dispatchEvent(new DragEvent("dragenter", { bubbles: true }));
+    });
+
+    await expect(chatBody).toHaveCSS("flex", "1 1 0%");
+
+    const messagesBox = await messages.boundingBox();
+    const windowBox = await window.boundingBox();
+    expect(messagesBox).not.toBeNull();
+    expect(windowBox).not.toBeNull();
+    expect(messagesBox!.height).toBeGreaterThan(windowBox!.height * 0.5);
+  });
+});

examples/e2e/tests/v1.x/chat-with-your-data.spec.ts

@@ -0,0 +1,15 @@
+import { test, expect } from "@playwright/test";
+
+const EXAMPLE = process.env.EXAMPLE ?? "form-filling";
+
+test.describe("chat-with-your-data", () => {
+  test.skip(EXAMPLE !== "chat-with-your-data", `EXAMPLE=${EXAMPLE}`);
+
+  test("loads", async ({ page }) => {
+    await page.goto("/");
+    await expect(page).toHaveTitle(/Chat with your data/i);
+    await expect(
+      page.getByRole("heading", { name: "Data Dashboard" }),
+    ).toBeVisible();
+  });
+});

examples/e2e/tests/v1.x/dark-mode-scoping.spec.ts

@@ -0,0 +1,118 @@
+/**
+ * Regression test for #2920 — .dark CSS selectors must be scoped to CopilotKit
+ * elements, not leak into the host application.
+ *
+ * Before the fix (main), selectors like `.dark, html.dark, body.dark` applied
+ * `color: white` and `color: rgb(69, 69, 69)` directly to the .dark element
+ * itself, cascading into every child — including host app content.
+ *
+ * After the fix (#3850), selectors are scoped:
+ *   `.dark .copilotKitDevConsole .copilotKitDebugMenuTriggerButton`
+ *   `.dark .poweredBy`
+ * so only CopilotKit elements receive the dark mode overrides.
+ */
+import { test, expect } from "@playwright/test";
+
+const EXAMPLE = process.env.EXAMPLE ?? "form-filling";
+
+test.describe("dark mode CSS scoping (#2920)", () => {
+  // This test relies on an app that uses .dark class (e.g. form-filling)
+  test.skip(EXAMPLE !== "form-filling", `EXAMPLE=${EXAMPLE}`);
+
+  test.beforeEach(async ({ page }) => {
+    await page.goto("/");
+    await page.locator(".copilotKitWindow.open").waitFor({ timeout: 10_000 });
+  });
+
+  test("enabling .dark class does not leak CopilotKit styles to host elements", async ({
+    page,
+  }) => {
+    // Grab a host-app element that should never be styled by CopilotKit CSS.
+    // In form-filling the <body> itself or a top-level container works.
+    const body = page.locator("body");
+
+    // Toggle dark mode by adding .dark to <html>
+    await page.evaluate(() => document.documentElement.classList.add("dark"));
+
+    // Wait a tick for styles to recompute
+    await page.waitForTimeout(100);
+
+    const colorAfter = await body.evaluate(
+      (el) => window.getComputedStyle(el).color,
+    );
+
+    // The bug on main: .dark { color: rgb(69, 69, 69) !important } would
+    // override the body's color. With the fix, the body color should be
+    // determined solely by the host app's own .dark styles, NOT by CopilotKit.
+    //
+    // We verify the body color is NOT rgb(69, 69, 69) — the specific value
+    // that the broken CopilotKit input.css `.dark` rule forced.
+    expect(colorAfter).not.toBe("rgb(69, 69, 69)");
+  });
+
+  test("CopilotKit poweredBy gets correct dark mode color", async ({
+    page,
+  }) => {
+    // Toggle dark mode
+    await page.evaluate(() => document.documentElement.classList.add("dark"));
+    await page.waitForTimeout(100);
+
+    const poweredBy = page.locator(".poweredBy");
+
+    // With the fix, .dark .poweredBy { color: rgb(69, 69, 69) !important }
+    // should apply to the poweredBy element specifically.
+    const count = await poweredBy.count();
+    test.skip(count === 0, "No .poweredBy element found — skipping");
+
+    const color = await poweredBy
+      .first()
+      .evaluate((el) => window.getComputedStyle(el).color);
+    expect(color).toBe("rgb(69, 69, 69)");
+  });
+
+  test("screenshot: dark mode side-by-side comparison", async ({ page }) => {
+    // Light mode screenshot
+    await page.evaluate(() =>
+      document.documentElement.classList.remove("dark"),
+    );
+    await page.waitForTimeout(200);
+    const lightScreenshot = await page.screenshot({ fullPage: true });
+    expect(lightScreenshot).toBeTruthy();
+
+    // Dark mode screenshot
+    await page.evaluate(() => document.documentElement.classList.add("dark"));
+    await page.waitForTimeout(200);
+    const darkScreenshot = await page.screenshot({ fullPage: true });
+    expect(darkScreenshot).toBeTruthy();
+
+    // Visual regression: dark mode screenshot should differ from light mode
+    // (if they're identical, dark mode styles aren't applying at all)
+    expect(Buffer.compare(lightScreenshot, darkScreenshot)).not.toBe(0);
+  });
+
+  test("dark mode styles only target CopilotKit elements", async ({ page }) => {
+    // Add a marker element outside CopilotKit to detect style leaks
+    await page.evaluate(() => {
+      const marker = document.createElement("div");
+      marker.id = "leak-detector";
+      marker.textContent = "Leak detector";
+      document.body.prepend(marker);
+    });
+
+    // Enable dark mode
+    await page.evaluate(() => document.documentElement.classList.add("dark"));
+    await page.waitForTimeout(100);
+
+    const markerColorDark = await page
+      .locator("#leak-detector")
+      .evaluate((el) => window.getComputedStyle(el).color);
+
+    // The leak detector element should NOT have its color changed by
+    // CopilotKit's .dark CSS rules. If it does, that's a style leak.
+    //
+    // Note: The host app's own .dark { --foreground: ... } will change colors
+    // via CSS variables, which is fine. What we're checking is that
+    // CopilotKit doesn't force rgb(69, 69, 69) or white via its own rules.
+    expect(markerColorDark).not.toBe("rgb(69, 69, 69)");
+  });
+});

examples/e2e/tests/v1.x/form-filling.spec.ts

@@ -0,0 +1,20 @@
+import { test, expect } from "@playwright/test";
+
+const EXAMPLE = process.env.EXAMPLE ?? "form-filling";
+
+test.describe("form-filling", () => {
+  test.skip(EXAMPLE !== "form-filling", `EXAMPLE=${EXAMPLE}`);
+
+  test("loads", async ({ page }) => {
+    await page.goto("/");
+    await expect(
+      page.getByRole("heading", { name: "Security Incident Report" }),
+    ).toBeVisible();
+    await expect(
+      page
+        .getByRole("contentinfo")
+        .filter({ hasText: /Powered by CopilotKit/i })
+        .first(),
+    ).toBeVisible();
+  });
+});

examples/e2e/tests/v1.x/research-canvas.spec.ts

@@ -0,0 +1,14 @@
+import { test, expect } from "@playwright/test";
+
+const EXAMPLE = process.env.EXAMPLE ?? "form-filling";
+
+test.describe("research-canvas", () => {
+  test.skip(EXAMPLE !== "research-canvas", `EXAMPLE=${EXAMPLE}`);
+
+  test("loads", async ({ page }) => {
+    await page.goto("/");
+    await expect(
+      page.getByRole("heading", { name: "Research Helper" }),
+    ).toBeVisible();
+  });
+});

examples/e2e/tests/v1.x/state-machine.spec.ts

@@ -0,0 +1,15 @@
+import { test, expect } from "@playwright/test";
+
+const EXAMPLE = process.env.EXAMPLE ?? "form-filling";
+
+test.describe("state-machine", () => {
+  test.skip(EXAMPLE !== "state-machine", `EXAMPLE=${EXAMPLE}`);
+
+  test("loads", async ({ page }) => {
+    await page.goto("/");
+    await expect(page.getByRole("button", { name: "Orders" })).toBeVisible();
+    await expect(
+      page.getByRole("button", { name: "State Visualizer" }),
+    ).toBeVisible();
+  });
+});

examples/e2e/tests/v1.x/travel.spec.ts

@@ -0,0 +1,12 @@
+import { test, expect } from "@playwright/test";
+
+const EXAMPLE = process.env.EXAMPLE ?? "form-filling";
+
+test.describe("travel", () => {
+  test.skip(EXAMPLE !== "travel", `EXAMPLE=${EXAMPLE}`);
+
+  test("loads", async ({ page }) => {
+    await page.goto("/?copilotOpen=false");
+    await expect(page).toHaveTitle(/CopilotKit Travel/i);
+  });
+});