test(e2e): add interference + depression-cone specs, update map spec for rename

- map.spec.ts: 'Depression Cones' → 'Depression Cone' (label after layer key
  rename), and add an explicit Interference toggle visibility check.
- interference.spec.ts (new): toggle the layer, capture pageerror + console
  errors during fetch+render, and verify the checkbox is reversible. Treats
  network 'Failed to load resource' as non-fatal so a slow backend doesn't
  fail the spec.
- depression-cone.spec.ts (new): toggle the layer, assert the TimeSlider
  buttons (1/7/30/90d), the Cones mode toggle (Selected/All active), and
  the DrawdownLegend appear; verify changing the time preset updates the
  legend label; verify overlays disappear when the layer is turned off.

All checks are DOM-based (role/text queries). Per orchestrator halt rule, no
canvas inspection or map.getStyle() introspection — Playwright can't see
MapLibre WebGL paint, only DOM, and the map ref isn't currently exposed to
window for evaluate-based queries either.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: CreatmanCEO

frontend/e2e/depression-cone.spec.ts

@@ -0,0 +1,51 @@
+import { test, expect } from "@playwright/test";
+
+test.describe("Depression cone layer", () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto("/");
+    await page.waitForSelector(".maplibregl-canvas", { timeout: 15000 });
+    await page.waitForTimeout(3000);
+  });
+
+  test("toggle reveals time slider, mode toggle, and legend", async ({ page }) => {
+    const errors: string[] = [];
+    page.on("pageerror", (e) => errors.push(e.message));
+
+    const checkbox = page.getByRole("checkbox", { name: /depression cone/i });
+    await checkbox.check();
+    await expect(checkbox).toBeChecked();
+
+    // TimeSlider buttons (1d/7d/30d/90d)
+    await expect(page.getByRole("button", { name: "1d" })).toBeVisible();
+    await expect(page.getByRole("button", { name: "7d" })).toBeVisible();
+    await expect(page.getByRole("button", { name: "30d" })).toBeVisible();
+    await expect(page.getByRole("button", { name: "90d" })).toBeVisible();
+
+    // Mode toggle
+    await expect(page.getByRole("button", { name: "Selected" })).toBeVisible();
+    await expect(page.getByRole("button", { name: "All active" })).toBeVisible();
+
+    // Legend (heading text contains the current t_days; default 30)
+    await expect(page.getByText(/Drawdown after \d+d/i)).toBeVisible();
+
+    expect(errors).toEqual([]);
+  });
+
+  test("changing time preset updates the legend label", async ({ page }) => {
+    const checkbox = page.getByRole("checkbox", { name: /depression cone/i });
+    await checkbox.check();
+    await expect(page.getByText(/Drawdown after 30d/i)).toBeVisible();
+
+    await page.getByRole("button", { name: "90d" }).click();
+    await expect(page.getByText(/Drawdown after 90d/i)).toBeVisible();
+  });
+
+  test("overlays disappear when layer is toggled off", async ({ page }) => {
+    const checkbox = page.getByRole("checkbox", { name: /depression cone/i });
+    await checkbox.check();
+    await expect(page.getByRole("button", { name: "30d" })).toBeVisible();
+
+    await checkbox.uncheck();
+    await expect(page.getByRole("button", { name: "30d" })).toBeHidden();
+  });
+});

frontend/e2e/interference.spec.ts

@@ -0,0 +1,36 @@
+import { test, expect } from "@playwright/test";
+
+test.describe("Interference layer", () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto("/");
+    await page.waitForSelector(".maplibregl-canvas", { timeout: 15000 });
+    await page.waitForTimeout(3000);
+  });
+
+  test("interference toggle activates without console errors", async ({ page }) => {
+    const errors: string[] = [];
+    page.on("pageerror", (e) => errors.push(e.message));
+    page.on("console", (msg) => {
+      if (msg.type() === "error") errors.push(msg.text());
+    });
+
+    const checkbox = page.getByRole("checkbox", { name: /interference/i });
+    await checkbox.check();
+    await expect(checkbox).toBeChecked();
+
+    // Allow fetch + render to settle
+    await page.waitForTimeout(2500);
+
+    // No top-level page or console errors during the toggle.
+    const fatal = errors.filter((e) => !/Failed to load resource/i.test(e));
+    expect(fatal).toEqual([]);
+  });
+
+  test("interference toggle is reversible", async ({ page }) => {
+    const checkbox = page.getByRole("checkbox", { name: /interference/i });
+    await checkbox.check();
+    await expect(checkbox).toBeChecked();
+    await checkbox.uncheck();
+    await expect(checkbox).not.toBeChecked();
+  });
+});

frontend/e2e/map.spec.ts

@@ -21,15 +21,16 @@ test.describe("Map", () => {
   test("layer controls panel visible", async ({ page }) => {
     await expect(page.getByText("Layers", { exact: false }).first()).toBeVisible();
     await expect(page.getByText("Wells").first()).toBeVisible();
-    await expect(page.getByText("Depression Cones").first()).toBeVisible();
+    await expect(page.getByText("Depression Cone").first()).toBeVisible();
+    await expect(page.getByText("Interference").first()).toBeVisible();
   });
 
   test("wells checkbox is checked by default", async ({ page }) => {
     const wellsCheckbox = page.locator("input[type=checkbox]").first();
     await expect(wellsCheckbox).toBeChecked();
   });
 
-  test("depression cones toggle works", async ({ page }) => {
+  test("depression cone toggle works", async ({ page }) => {
     const conesCheckbox = page.locator("input[type=checkbox]").nth(1);
     await conesCheckbox.check();
     await expect(conesCheckbox).toBeChecked();