kandev/apps/web/e2e/tests/layout/pane-persistence-tablet.spec.ts

import { type Page, expect as pwExpect } from "@playwright/test";
import { test, expect } from "../../fixtures/test-base";
import type { SeedData } from "../../fixtures/test-base";
import type { ApiClient } from "../../helpers/api-client";
import { SessionPage } from "../../pages/session-page";

const TABLET_VIEWPORT = { width: 900, height: 900 };

async function openTabletTask(
  page: Page,
  apiClient: ApiClient,
  seedData: SeedData,
  title: string,
): Promise<SessionPage> {
  await page.setViewportSize(TABLET_VIEWPORT);
  pwExpect(await page.evaluate(() => matchMedia("(pointer: coarse)").matches)).toBe(true);
  const task = await apiClient.createTaskWithAgent(
    seedData.workspaceId,
    title,
    seedData.agentProfileId,
    {
      description: "/e2e:simple-message",
      workflow_id: seedData.workflowId,
      workflow_step_id: seedData.startStepId,
      repository_ids: [seedData.repositoryId],
    },
  );
  await page.goto(`/t/${task.id}`);
  const session = new SessionPage(page);
  await session.waitForLoad();
  await expect(page.getByTestId("tablet-task-layout")).toBeVisible({ timeout: 10_000 });
  return session;
}

async function readStoredLayout(page: Page, id: string): Promise<Record<string, number> | null> {
  return page.evaluate((key) => {
    const raw = window.localStorage.getItem(key);
    return raw ? (JSON.parse(raw) as Record<string, number>) : null;
  }, id);
}

test.describe("Tablet pane persistence", () => {
  test("tablet left/right split persists across reload", async ({
    tabletTestPage,
    apiClient,
    seedData,
  }) => {
    const session = await openTabletTask(tabletTestPage, apiClient, seedData, "Tablet persist");

    // Drive the resize-panels library directly by overwriting the stored
    // layout — the underlying drag handle is a complex pointer-events target
    // that's flaky to grab in headless. The stored layout drives the next
    // render; this test verifies the round-trip persistence contract AND
    // that the rendered panels match the stored proportions.
    await tabletTestPage.evaluate(() => {
      window.localStorage.setItem("task-layout-tablet-v1", JSON.stringify({ left: 55, right: 45 }));
    });
    await tabletTestPage.reload();
    await session.waitForLoad();
    await expect(tabletTestPage.getByTestId("tablet-task-layout")).toBeVisible({ timeout: 10_000 });

    // localStorage round-trip: react-resizable-panels writes its own
    // normalized version on layout, so allow a small tolerance.
    const stored = await readStoredLayout(tabletTestPage, "task-layout-tablet-v1");
    pwExpect(stored).not.toBeNull();
    pwExpect(Math.abs((stored?.left ?? 0) - 55)).toBeLessThanOrEqual(2);
    pwExpect(Math.abs((stored?.right ?? 0) - 45)).toBeLessThanOrEqual(2);

    // The localStorage round-trip above is the persistence contract;
    // verifying rendered pixel widths in `react-resizable-panels` requires
    // querying internal panel DOM that isn't stable across versions, so we
    // stop here.
  });

  test("invalid stored layout is replaced with a valid default", async ({
    tabletTestPage,
    apiClient,
    seedData,
  }) => {
    await tabletTestPage.goto("/");
    await tabletTestPage.evaluate(() => {
      window.localStorage.setItem("task-layout-tablet-v1", '{"left":2}');
    });
    const session = await openTabletTask(tabletTestPage, apiClient, seedData, "Tablet fallback");
    void session;

    // After load, onLayoutChanged replaces the invalid stub with the
    // rendered (valid) layout. Verify the persisted value is now valid:
    // both panel IDs present and >= MIN_PANEL_PERCENT (5).
    const stored = await readStoredLayout(tabletTestPage, "task-layout-tablet-v1");
    pwExpect(stored).not.toBeNull();
    pwExpect(stored?.left).toBeGreaterThanOrEqual(5);
    pwExpect(stored?.right).toBeGreaterThanOrEqual(5);
  });

  test("tablet right-panel inner split accepts values below the old 30% floor", async ({
    tabletTestPage,
    apiClient,
    seedData,
  }) => {
    await openTabletTask(tabletTestPage, apiClient, seedData, "Tablet top shrink");

    // The right-panel internal split now allows minSize=15. Round-trip via
    // localStorage: write a 20/80 layout (below the old 30% floor) and
    // verify it survives the reload — would have been rejected before.
    await tabletTestPage.evaluate(() => {
      window.localStorage.setItem("task-layout-right-v2", JSON.stringify({ top: 20, bottom: 80 }));
    });
    await tabletTestPage.reload();
    await expect(tabletTestPage.getByTestId("tablet-task-layout")).toBeVisible({ timeout: 10_000 });

    const stored = await readStoredLayout(tabletTestPage, "task-layout-right-v2");
    pwExpect(stored).not.toBeNull();
    pwExpect(Math.abs((stored?.top ?? 0) - 20)).toBeLessThanOrEqual(2);
    pwExpect(Math.abs((stored?.bottom ?? 0) - 80)).toBeLessThanOrEqual(2);
  });
});