@fungi.computer/bonsai 0.0.0-stage → 0.1.0

package/test/browser/capture.browser.mjs

@@ -0,0 +1,1264 @@
+import process from "node:process";
+import console from "node:console";
+import { URL } from "node:url";
+import assert from "node:assert/strict";
+import { chromium } from "playwright";
+import { mkdir, writeFile } from "node:fs/promises";
+const phase = process.argv[2] ?? "before";
+const output = new URL(
+  `../../../../.botanical/bonsai-shots/${phase}/`,
+  import.meta.url,
+);
+await mkdir(output, { recursive: true });
+const browser = await chromium.launch({ headless: true });
+try {
+  if (phase.startsWith("scene5-")) {
+    const origin = process.argv[3] ?? "http://127.0.0.1:5188";
+    const findings = [];
+    const railFindings = [];
+    const railMeasurements = [];
+    const measurements = [];
+    for (const width of [1440, 390]) {
+      const page = await browser.newPage({
+        viewport: { width, height: width === 390 ? 844 : 900 },
+      });
+      await page.clock.install();
+      await page.goto(`${origin}/test/browser/visual.html?tab=changes&scene5`);
+      await page.locator('[data-tile="changes"]').waitFor();
+      assert.equal(
+        await page.locator(".caps-copy-field code").first().textContent(),
+        "https://oyster.shiit.app/git/bonsai/koi-pond.git",
+        "capture serves this branch's scene5 fixture",
+      );
+      await page.evaluate(() => globalThis.document.fonts.ready);
+      await page.clock.runFor(500);
+      const measured = await page.evaluate(() => {
+        const nav = globalThis.document.querySelector(
+          '[aria-label="Repository sections"]',
+        );
+        const links = [...nav.querySelectorAll("a")];
+        const changes = links.find((link) =>
+          link.textContent.startsWith("Changes"),
+        );
+        const badge = changes.querySelector(".badge");
+        const label = globalThis.document.createRange();
+        label.selectNodeContents(changes.firstChild);
+        const overview = links.find((link) => link.textContent === "Overview");
+        const railBounds = nav.getBoundingClientRect();
+        const firstVisible = links.find(
+          (link) => link.getBoundingClientRect().right > railBounds.left + 1,
+        );
+        const clone = [
+          ...globalThis.document.querySelectorAll(".caps-copy-field"),
+        ].find((field) => field.getBoundingClientRect().width > 0);
+        const code = clone?.querySelector("code");
+        const statuses = [
+          ...globalThis.document.querySelectorAll(".list-row .caps-status"),
+        ];
+        const tile = globalThis.document.querySelector('[data-tile="changes"]');
+        const panel = tile.querySelector(".caps-screen") ?? tile;
+        const recent = globalThis.document.querySelector(
+          '[aria-label*="working now"], [aria-label="Recent repository pushes"]',
+        );
+        return {
+          badgeGap:
+            badge.getBoundingClientRect().left -
+            label.getBoundingClientRect().right,
+          overviewVisible:
+            overview.getBoundingClientRect().left >=
+            nav.getBoundingClientRect().left - 1,
+          leadingTabWhole:
+            firstVisible.getBoundingClientRect().left >= railBounds.left - 1,
+          cloneLines: code
+            ? code.getBoundingClientRect().height /
+              Number.parseFloat(globalThis.getComputedStyle(code).lineHeight)
+            : null,
+          readyInsets: statuses.map((status) => {
+            const row = status.closest("li");
+            return (
+              row.getBoundingClientRect().right -
+              Number.parseFloat(globalThis.getComputedStyle(row).paddingRight) -
+              status.lastElementChild.getBoundingClientRect().right
+            );
+          }),
+          panelBottomBorder: panel
+            ? Number.parseFloat(
+                globalThis.getComputedStyle(panel).borderBottomWidth,
+              )
+            : null,
+          recentText: recent?.textContent ?? null,
+        };
+      });
+      measurements.push({ width, ...measured });
+      if (measured.badgeGap < 4)
+        findings.push(`${width}: Changes badge touches its label`);
+      if (!measured.leadingTabWhole)
+        findings.push(`${width}: leading tab is partially clipped`);
+      if (width === 1440 && measured.cloneLines > 1.1)
+        findings.push("1440: clone URL wraps mid-word");
+      if (measured.readyInsets.some((inset) => Math.abs(inset) > 2))
+        findings.push(`${width}: status is not a trailing column`);
+      if (measured.panelBottomBorder === 0)
+        findings.push(`${width}: Changes panel has no bottom rule`);
+      if (measured.recentText !== "3 pushed recently")
+        findings.push(`${width}: push activity is labelled as current work`);
+      if (width === 390) {
+        const clone = page.getByRole("button", { name: "Clone", exact: true });
+        if (await clone.locator(".caps-keycap-led").count())
+          findings.push("390: Clone has a stray status lamp");
+      }
+      await page.screenshot({
+        path: new URL(`${width}.png`, output).pathname,
+        animations: "disabled",
+      });
+      if (width === 390) {
+        const rail = page.getByRole("navigation", {
+          name: "Repository sections",
+        });
+        const viewport = rail.locator(".caps-navigation-rail-viewport");
+        const overflow = await viewport.evaluate(
+          (element) => element.scrollWidth > element.clientWidth + 1,
+        );
+        if (overflow) {
+          if (
+            !(await rail.getAttribute("data-overflow-start")) &&
+            !(await rail.getAttribute("data-overflow-end"))
+          )
+            railFindings.push(
+              "390: overflowing tabs have no scroll affordance",
+            );
+          for (const link of await rail.getByRole("link").all()) {
+            await link.focus();
+            await page.clock.runFor(500);
+            const readBounds = () =>
+              link.evaluate((element) => {
+                const bounds = element.getBoundingClientRect();
+                const scroller = element.closest(
+                  ".caps-navigation-rail-viewport",
+                );
+                const viewport = scroller.getBoundingClientRect();
+                return {
+                  label: element.textContent,
+                  left: bounds.left,
+                  right: bounds.right,
+                  viewportLeft: viewport.left,
+                  viewportRight: viewport.right,
+                  scrollLeft: scroller.scrollLeft,
+                  scrollWidth: scroller.scrollWidth,
+                  clientWidth: scroller.clientWidth,
+                  reachable:
+                    bounds.left >= viewport.left - 1 &&
+                    bounds.right <= viewport.right + 1,
+                };
+              });
+            let focused = await readBounds();
+            railMeasurements.push({ interaction: "focus", ...focused });
+            if (!focused.reachable) {
+              await viewport.hover();
+              await page.mouse.wheel(
+                focused.right > focused.viewportRight ? 180 : -180,
+                0,
+              );
+              await page.clock.runFor(500);
+              focused = await readBounds();
+              railMeasurements.push({
+                interaction: "horizontal wheel",
+                ...focused,
+              });
+            }
+            if (!focused.reachable)
+              railFindings.push(
+                `390: tab ${await link.innerText()} is unreachable`,
+              );
+          }
+        }
+      }
+      if (phase.endsWith("after")) {
+        await page.clock.fastForward(7 * 60_000 + 1);
+        await page.clock.runFor(100);
+        if (
+          await page
+            .getByLabel("Recent repository pushes", { exact: true })
+            .count()
+        )
+          findings.push(
+            `${width}: activity survives its window without new data`,
+          );
+      }
+      await page.close();
+    }
+    await writeFile(
+      new URL("measurements.json", output),
+      JSON.stringify(
+        { measurements, findings, railFindings, railMeasurements },
+        null,
+        2,
+      ),
+    );
+    assert.deepEqual(
+      railFindings,
+      [],
+      "phone tabs remain reachable with overflow affordance",
+    );
+    if (phase === "scene5-css") {
+      assert.ok(
+        measurements.find((item) => item.width === 1440).cloneLines <= 1.1,
+        "desktop clone URL remains on one line",
+      );
+      console.log(
+        `PASS clone URL + phone rail ONLY: 1440/390; ${output.pathname}`,
+      );
+    } else {
+      assert.deepEqual(findings, [], "scene 5 visual and activity regressions");
+      console.log(`PASS scene 5: 1440/390; ${output.pathname}`);
+    }
+  } else if (phase.startsWith("live-polish-")) {
+    const origin = process.argv[3] ?? "http://127.0.0.1:5188";
+    for (const scenario of ["overview", "home", "pending", "error"])
+      for (const width of [1440, 390])
+        for (const theme of ["light", "dark"]) {
+          const page = await browser.newPage({
+            viewport: { width, height: 1000 },
+            colorScheme: theme,
+          });
+          const errors = [];
+          page.on("pageerror", (error) => errors.push(error.message));
+          const tab = scenario === "home" ? "home" : "overview";
+          const loading = scenario === "pending" || scenario === "error";
+          await page.goto(
+            `${origin}/test/browser/visual.html?tab=${tab}${loading ? `&load=${scenario}` : ""}`,
+          );
+          await page.evaluate(
+            (t) =>
+              globalThis.document.documentElement.setAttribute("data-theme", t),
+            theme,
+          );
+          await page.locator('[data-tile="network"]').waitFor();
+          if (loading) {
+            assert.match(
+              await page.locator('[data-tile="readme"]').innerText(),
+              /Koi pond/u,
+            );
+            if (scenario === "pending")
+              assert.match(
+                await page.locator('[data-tile="network"]').innerText(),
+                /Loading network/u,
+              );
+            else
+              assert.equal(
+                await page
+                  .locator('[data-tile="network"]')
+                  .getByRole("button", { name: "Retry", exact: true })
+                  .count(),
+                1,
+              );
+          }
+          if (scenario === "overview") {
+            const gutter = await page
+              .locator(".bonsai-network-gutter")
+              .boundingBox();
+            const plot = await page
+              .locator(".bonsai-network-scroll")
+              .boundingBox();
+            assert.ok(
+              gutter && plot && gutter.x + gutter.width <= plot.x + 1,
+              "lane labels stay outside the plot",
+            );
+            const nav = page.getByRole("navigation", {
+              name: "Repository sections",
+            });
+            if (width === 390) {
+              const rail = await nav.boundingBox();
+              const arrange = await page
+                .getByRole("button", { name: "Arrange tiles" })
+                .boundingBox();
+              assert.ok(
+                rail && arrange && arrange.y >= rail.y + rail.height,
+                "Arrange sits below phone tabs",
+              );
+            }
+            for (const name of [
+              "Overview",
+              "Code",
+              "History",
+              "Changes",
+              "Issues",
+            ]) {
+              const link = nav.getByRole("link", {
+                name,
+                exact: name !== "Changes" && name !== "Issues",
+              });
+              await link.scrollIntoViewIfNeeded();
+              const box = await link.boundingBox();
+              assert.ok(
+                box && box.x >= 0 && box.x + box.width <= width,
+                `${name} reachable`,
+              );
+            }
+            await nav
+              .getByRole("link", { name: "Overview", exact: true })
+              .scrollIntoViewIfNeeded();
+            await page.evaluate(() => globalThis.scrollTo(0, 0));
+          }
+          assert.equal(
+            await page.evaluate(
+              () =>
+                globalThis.document.documentElement.scrollWidth <=
+                globalThis.innerWidth,
+            ),
+            true,
+            "no viewport overflow",
+          );
+          assert.deepEqual(errors, []);
+          await page.screenshot({
+            path: new URL(`${String(width)}-${theme}-${scenario}.png`, output)
+              .pathname,
+            fullPage: true,
+            animations: "disabled",
+          });
+          await page.close();
+        }
+    console.log(
+      `PASS live polish: progressive loading, Retry, phone navigation and lane spacing; ${output.pathname}`,
+    );
+  } else if (/^redesign-[5-8]-/u.test(phase)) {
+    const slice = phase.split("-")[1];
+    const tab = { 5: "commits", 6: "code", 7: "home", 8: "issues" }[slice];
+    for (const width of [1440, 390])
+      for (const theme of ["light", "dark"]) {
+        const page = await browser.newPage({
+          viewport: { width, height: 1000 },
+          colorScheme: theme,
+        });
+        const errors = [];
+        page.on("pageerror", (error) => errors.push(error.message));
+        await page.goto(
+          `http://127.0.0.1:5188/test/browser/visual.html?tab=${tab}`,
+        );
+        await page.locator("main").waitFor();
+        await page.evaluate(
+          (t) =>
+            globalThis.document.documentElement.setAttribute("data-theme", t),
+          theme,
+        );
+        if (slice === "5" && phase.endsWith("after")) {
+          const rows = page.locator(".bonsai-history-commits > li");
+          await page.getByRole("tab", { name: "Agents", exact: true }).click();
+          assert.equal(await rows.count(), 30);
+          await page.getByRole("tab", { name: "People", exact: true }).click();
+          assert.equal(await rows.count(), 10);
+          await page.getByRole("tab", { name: "All", exact: true }).click();
+          assert.equal(await rows.count(), 40);
+          assert.equal(
+            await page
+              .locator(".bonsai-history")
+              .evaluate(
+                (element) => element.scrollHeight <= element.clientHeight,
+              ),
+            true,
+            "history uses page scroll",
+          );
+          await page.evaluate(() => globalThis.document.activeElement?.blur());
+          await page.keyboard.press("j");
+          assert.match(
+            await page
+              .locator('[aria-current="true"]')
+              .locator("..")
+              .getAttribute("class"),
+            /stipe-surface-selected/u,
+          );
+          assert.match(
+            await page.locator('[aria-current="true"]').getAttribute("href"),
+            /00000027$/u,
+          );
+          if (width === 1440) {
+            await page
+              .locator('[data-tile="commit"] h1')
+              .filter({ hasText: "Keep fish inside the reeds" })
+              .waitFor();
+          } else {
+            assert.equal(await page.locator('[data-tile="commit"]').count(), 0);
+            await page.keyboard.press("Enter");
+            await page
+              .locator("h1")
+              .filter({ hasText: "Keep fish inside the reeds" })
+              .waitFor();
+            await page.goto(
+              `http://127.0.0.1:5188/test/browser/visual.html?tab=${tab}`,
+            );
+            await page.getByRole("tab", { name: "All", exact: true }).waitFor();
+          }
+        }
+        if (slice === "6" && phase.endsWith("after")) {
+          await page
+            .locator('[data-tile="file"]')
+            .getByText("Koi pond", { exact: true })
+            .waitFor();
+          await page.getByText("Latest commit ·", { exact: false }).waitFor();
+          await page.getByRole("button", { name: "Raw", exact: true }).click();
+          await page
+            .locator('[data-tile="file"] pre')
+            .filter({ hasText: "# Koi pond" })
+            .waitFor();
+          await page.getByRole("button", { name: "Raw", exact: true }).click();
+          if (width === 390)
+            await page
+              .getByRole("button", { name: "Files · README.md", exact: true })
+              .click();
+          const fileRow = page.locator(
+            '[data-item-path="src/pond.ts"][role="treeitem"]',
+          );
+          if (!(await fileRow.isVisible()))
+            await page
+              .locator('[data-item-path="src"][role="treeitem"]')
+              .click();
+          await fileRow.click();
+          await page
+            .locator('[data-tile="file"]')
+            .getByText("src/pond.ts", { exact: true })
+            .waitFor();
+          await page.getByRole("button", { name: "Raw", exact: true }).click();
+          await page
+            .locator('[data-tile="file"] pre')
+            .filter({ hasText: "export const ripples = 5" })
+            .waitFor();
+          await page.getByRole("button", { name: "Raw", exact: true }).click();
+          if (width === 390)
+            assert.equal(
+              await page
+                .getByRole("button", {
+                  name: "Files · src/pond.ts",
+                  exact: true,
+                })
+                .getAttribute("aria-expanded"),
+              "false",
+            );
+        }
+        if (slice === "7" && phase.endsWith("after")) {
+          await page
+            .locator('[data-tile="readme"]')
+            .getByRole("heading", { name: "Bonsai", exact: true })
+            .waitFor();
+          await page.locator('[data-tile="network"] svg').first().waitFor();
+          await page
+            .locator('[data-tile="repo:koi-pond"]')
+            .getByRole("link")
+            .waitFor();
+          const card = page.locator('[data-tile="repo:koi-pond"]');
+          assert.equal(
+            await card.getByRole("link").count(),
+            1,
+            "whole repository card is one link",
+          );
+          assert.equal(await card.getByText("Open repository ›").count(), 0);
+          if (width === 1440) {
+            await page.waitForFunction(() => {
+              const network = globalThis.document.querySelector(
+                '[data-tile="network"]',
+              );
+              const live =
+                globalThis.document.querySelector('[data-tile="live"]');
+              const card = globalThis.document.querySelector(
+                '[data-tile="repo:koi-pond"]',
+              );
+              return (
+                Math.abs(
+                  network.getBoundingClientRect().bottom -
+                    live.getBoundingClientRect().bottom,
+                ) < 2 &&
+                Math.abs(
+                  card.getBoundingClientRect().top -
+                    network.getBoundingClientRect().bottom -
+                    12,
+                ) < 2
+              );
+            });
+          }
+          await page.waitForFunction(() =>
+            [
+              ...globalThis.document.querySelectorAll(
+                '[data-tile="readme"] img',
+              ),
+            ].every((img) => img.complete && img.naturalWidth > 0),
+          );
+        }
+        if (slice === "8" && phase.endsWith("after")) {
+          for (const name of ["Unblocked", "Blocked", "Done"])
+            await page.getByRole("heading", { name, exact: true }).waitFor();
+          assert.equal(
+            await page
+              .getByRole("heading", {
+                name: "Issue files need fixing",
+                exact: true,
+              })
+              .count(),
+            0,
+          );
+          const blocked = page
+            .getByRole("heading", { name: "Blocked", exact: true })
+            .locator("..");
+          await blocked
+            .getByRole("link", { name: "Plant reeds", exact: true })
+            .waitFor();
+          assert.equal(
+            await blocked.getByText("ready · agent", { exact: true }).count(),
+            0,
+          );
+          await blocked
+            .locator(".caps-status")
+            .filter({ hasText: "blocked by pond-01" })
+            .waitFor();
+          const done = page
+            .getByRole("heading", { name: "Done", exact: true })
+            .locator("..");
+          assert.equal(
+            await done.locator(".caps-status").getAttribute("data-glyph"),
+            "dot",
+          );
+          const titleBox = await blocked
+            .getByRole("link", { name: "Plant reeds", exact: true })
+            .boundingBox();
+          const statusBox = await blocked.locator(".caps-status").boundingBox();
+          assert.ok(
+            titleBox.x < statusBox.x,
+            "issue title precedes trailing status",
+          );
+          await blocked
+            .getByRole("link", { name: "pond-01", exact: true })
+            .click();
+          await page
+            .getByRole("heading", { name: "Add a lily pad", exact: true })
+            .waitFor();
+          await page
+            .getByRole("link", { name: "Issues", exact: true })
+            .last()
+            .click();
+          await page
+            .getByRole("heading", { name: "Blocked", exact: true })
+            .waitFor();
+          await page.waitForFunction(
+            () => globalThis.document.documentElement.scrollHeight <= 1200,
+          );
+        }
+        await page.screenshot({
+          path: new URL(`${width}-${theme}-${tab}.png`, output).pathname,
+          fullPage: true,
+          animations: "disabled",
+        });
+        if (slice === "7" && phase.endsWith("after")) {
+          await page.screenshot({
+            path: new URL(`${width}-${theme}-${tab}-viewport.png`, output)
+              .pathname,
+            animations: "disabled",
+          });
+          await page
+            .locator('[data-tile="repo:koi-pond"]')
+            .getByRole("link")
+            .focus();
+          await page.keyboard.press("Enter");
+          assert.equal(
+            await page
+              .getByRole("link", { name: "Overview", exact: true })
+              .getAttribute("aria-current"),
+            "page",
+          );
+        }
+        assert.deepEqual(errors, []);
+        assert.equal(
+          await page.evaluate(
+            () =>
+              globalThis.document.documentElement.scrollWidth <=
+              globalThis.innerWidth,
+          ),
+          true,
+        );
+        await page.close();
+      }
+    console.log(
+      `PASS ${phase}: 1440/390 light/dark screenshots, viewport fit, no page errors`,
+    );
+  } else if (phase.startsWith("redesign-4")) {
+    for (const width of [1440, 390])
+      for (const theme of phase.includes("-pr-")
+        ? ["latte", "mocha"]
+        : ["light", "dark"])
+        for (const state of ["ready", "conflict"]) {
+          const page = await browser.newPage({
+            viewport: { width, height: 1000 },
+            colorScheme:
+              theme === "mocha" || theme === "dark" ? "dark" : "light",
+          });
+          page.on("pageerror", (error) => console.error(error.message));
+          await page.goto(
+            `http://127.0.0.1:5188/test/browser/visual.html?change=${state}`,
+          );
+          await page.locator("h1").waitFor();
+          await page.evaluate(
+            (t) =>
+              globalThis.document.documentElement.setAttribute("data-theme", t),
+            theme,
+          );
+          if (phase.endsWith("after")) {
+            assert.equal(await page.locator("[data-tile]").count(), 6);
+            assert.equal(
+              await page
+                .getByRole("button", { name: "Merge into main", exact: true })
+                .isDisabled(),
+              state === "conflict",
+            );
+            assert.equal(
+              await page.evaluate(
+                () =>
+                  globalThis.document.documentElement.scrollWidth <=
+                  globalThis.innerWidth,
+              ),
+              true,
+              "Change fits viewport",
+            );
+            await page
+              .getByText("before the latest push", { exact: false })
+              .waitFor();
+            await page.getByText("1 file ·", { exact: false }).waitFor();
+            if (state === "conflict")
+              await page
+                .getByText("Update Luna/main from main", { exact: false })
+                .waitFor();
+            assert.match(
+              await page
+                .getByRole("button", { name: "Merge into main", exact: true })
+                .getAttribute("class"),
+              /btn-primary caps-button-filled/,
+            );
+            await page
+              .getByRole("heading", {
+                name: "#1 Add ripples around the koi",
+                exact: true,
+              })
+              .waitFor();
+            await page
+              .getByRole("button", { name: "Approve", exact: true })
+              .waitFor();
+            await page
+              .getByRole("button", { name: "Close", exact: true })
+              .waitFor();
+            assert.equal(
+              await page
+                .getByRole("button", { name: "Re-run checks", exact: true })
+                .count(),
+              0,
+            );
+            await page.getByText("1 of 1 passed", { exact: true }).waitFor();
+            const actionHeights = await Promise.all(
+              ["Approve", "Close", "Merge into main"].map(async (name) => {
+                const box = await page
+                  .getByRole("button", { name, exact: true })
+                  .boundingBox();
+                assert.ok(box);
+                return box.height;
+              }),
+            );
+            assert.equal(
+              new Set(actionHeights).size,
+              1,
+              "actions share one Caps button height",
+            );
+            await page
+              .getByRole("link", { name: "Next change #2", exact: true })
+              .waitFor();
+
+            if (state === "conflict") {
+              const reason = page.locator(
+                '[data-tile="head"] span[tabindex="0"]',
+              );
+              await reason.focus();
+              await page
+                .getByRole("tooltip")
+                .filter({ hasText: "Resolve the conflicts" })
+                .waitFor();
+              await page
+                .getByRole("button", { name: "Close", exact: true })
+                .focus();
+              await page.getByRole("tooltip").waitFor({ state: "hidden" });
+            }
+            const labels = page.locator(
+              '[data-tile="lane"] .bonsai-network-lane',
+            );
+            await labels.locator(".bonsai-lane-owner").nth(1).waitFor();
+            assert.deepEqual(
+              await labels.locator(".bonsai-lane-owner").allTextContents(),
+              ["main", "Luna"],
+            );
+            assert.equal(
+              await labels.last().getAttribute("title"),
+              "koi-pond--Luna/main",
+            );
+            for (const [above, below] of width === 1440
+              ? [
+                  ["lane", "commits"],
+                  ["diff", "review"],
+                  ["commits", "files"],
+                ]
+              : [
+                  ["review", "diff"],
+                  ["diff", "lane"],
+                  ["lane", "commits"],
+                  ["commits", "files"],
+                ]) {
+              await page.waitForFunction(
+                ([a, b]) => {
+                  const first = globalThis.document
+                    .querySelector(`[data-tile="${a}"] > :first-child`)
+                    .getBoundingClientRect();
+                  const second = globalThis.document
+                    .querySelector(`[data-tile="${b}"]`)
+                    .getBoundingClientRect();
+                  const gap = second.y - first.bottom;
+                  return gap >= 10 && gap <= 14;
+                },
+                [above, below],
+              );
+            }
+          }
+          await page.screenshot({
+            path: new URL(`${width}-${theme}-${state}.png`, output).pathname,
+            fullPage: true,
+            animations: "disabled",
+            timeout: 60_000,
+          });
+          await page.close();
+        }
+    if (phase.endsWith("after")) {
+      for (const result of [
+        "merged",
+        "moved",
+        "conflict",
+        "refused",
+        "error",
+      ]) {
+        const page = await browser.newPage({
+          viewport: { width: 390, height: 1000 },
+        });
+        const errors = [];
+        page.on("pageerror", (error) => errors.push(error.message));
+        await page.goto(
+          `http://127.0.0.1:5188/test/browser/visual.html?change=ready&result=${result}`,
+        );
+        await page
+          .getByRole("button", { name: "Merge into main", exact: true })
+          .click();
+        const message = {
+          merged: "Merged as",
+          moved: "The reviewed head moved",
+          conflict: "Conflicts in",
+          refused: "Merge refused",
+          error: "Fixture merge unavailable",
+        }[result];
+        await page
+          .getByRole(result === "error" ? "alert" : "status")
+          .filter({ hasText: message })
+          .waitFor();
+        assert.deepEqual(
+          await page.evaluate(() =>
+            JSON.parse(globalThis.localStorage.getItem("fixture-merge")),
+          ),
+          {
+            repo: "koi-pond",
+            number: 1,
+            head: "7c3c104600000000000000000000000000000026",
+          },
+          "merge uses numbered identity and exact displayed head",
+        );
+        if (result === "merged" || result === "conflict")
+          assert.equal(
+            await page
+              .getByRole("button", { name: "Merge into main", exact: true })
+              .isDisabled(),
+            true,
+          );
+        await page.keyboard.press("]");
+        await page
+          .getByRole("heading", {
+            name: "#2 Keep fish inside the reeds",
+            exact: true,
+          })
+          .waitFor();
+        await page.keyboard.press("[");
+        await page
+          .getByRole("heading", {
+            name: "#1 Add ripples around the koi",
+            exact: true,
+          })
+          .waitFor();
+        assert.deepEqual(errors, [], "no Change page errors");
+        await page.close();
+      }
+    }
+    if (phase.includes("-pr-") && phase.endsWith("after")) {
+      const page = await browser.newPage({
+        viewport: { width: 390, height: 1000 },
+      });
+      const errors = [];
+      page.on("pageerror", (error) => errors.push(error.message));
+      await page.goto(
+        "http://127.0.0.1:5188/test/browser/visual.html?change=ready#change/koi-pond/1",
+      );
+      await page.getByRole("button", { name: "Approve", exact: true }).click();
+      await page
+        .getByRole("status")
+        .filter({ hasText: "Approved 7c3c104" })
+        .waitFor();
+      assert.deepEqual(
+        await page.evaluate(() =>
+          JSON.parse(globalThis.localStorage.getItem("fixture-approval")),
+        ),
+        {
+          repo: "koi-pond",
+          number: 1,
+          head: "7c3c104600000000000000000000000000000026",
+        },
+      );
+      await page.getByRole("button", { name: "Close", exact: true }).click();
+      await page
+        .getByRole("status")
+        .filter({ hasText: "Change closed." })
+        .waitFor();
+      assert.deepEqual(
+        await page.evaluate(() =>
+          JSON.parse(globalThis.localStorage.getItem("fixture-close")),
+        ),
+        { repo: "koi-pond", number: 1 },
+      );
+      assert.equal(
+        await page
+          .getByRole("button", { name: "Approve", exact: true })
+          .count(),
+        0,
+      );
+      assert.equal(
+        await page.getByRole("button", { name: "Close", exact: true }).count(),
+        0,
+      );
+      assert.equal(
+        await page
+          .getByRole("button", { name: "Merge into main", exact: true })
+          .isDisabled(),
+        true,
+      );
+      assert.deepEqual(errors, []);
+      await page.close();
+    }
+    console.log(
+      `PASS ${phase}: Change ready/conflict shots 1440/390 ${phase.includes("-pr-") ? "Latte/Mocha; approve/close actions;" : "light/dark;"} numbered merge outcomes and keyboard neighbours`,
+    );
+  } else {
+    for (const width of [1440, 390])
+      for (const theme of ["light", "dark"]) {
+        const page = await browser.newPage({
+          viewport: { width, height: 1000 },
+          colorScheme: theme,
+        });
+        const errors = [];
+        page.on("pageerror", (error) => errors.push(error.message));
+        await page.goto(
+          "http://127.0.0.1:5188/" +
+            (phase === "before"
+              ? ".botanical/before/visual.html"
+              : "test/browser/visual.html"),
+        );
+        await page.locator("h1").filter({ hasText: "koi-pond" }).waitFor();
+        await page.evaluate(
+          (t) =>
+            globalThis.document.documentElement.setAttribute("data-theme", t),
+          theme,
+        );
+        if (phase !== "before") {
+          assert.equal(
+            await page
+              .getByRole("button", { name: "G O", exact: true })
+              .count(),
+            0,
+          );
+          await page.locator(".bonsai-history-commits").evaluate((list) => {
+            for (const row of list.children) {
+              const title = row.querySelector("a > span:first-child");
+              const branch = row.querySelector(".bonsai-history-branch");
+              if (
+                !title ||
+                !branch ||
+                branch.getBoundingClientRect().left <
+                  title.getBoundingClientRect().right
+              )
+                throw new Error("Branch label overlaps commit title");
+            }
+          });
+          await page.keyboard.press("g");
+          await page.keyboard.press("o");
+          await page
+            .locator('[aria-current="page"]')
+            .filter({ hasText: "Overview" })
+            .waitFor();
+          await page.keyboard.press("g");
+          await page.keyboard.press("h");
+          await page
+            .locator('[aria-current="page"]')
+            .filter({ hasText: "History" })
+            .waitFor();
+          if (width === 390) {
+            assert.ok(
+              (await page.locator("h1").boundingBox()).height < 60,
+              "repository name remains readable on phones",
+            );
+            await page
+              .getByRole("button", { name: "Clone", exact: true })
+              .click();
+            await page
+              .getByRole("region", { name: "Clone repository" })
+              .waitFor();
+            await page.keyboard.press("Escape");
+            assert.equal(
+              await page
+                .getByRole("region", { name: "Clone repository" })
+                .count(),
+              0,
+            );
+          }
+          await page
+            .context()
+            .grantPermissions(["clipboard-read", "clipboard-write"]);
+          await page.keyboard.press("c");
+          await page.waitForFunction(
+            async () =>
+              (await globalThis.navigator.clipboard.readText()) ===
+              "https://example.test/git/koi-pond",
+          );
+          await page.keyboard.press("Escape");
+        }
+        await page.screenshot({
+          path: new URL(`${width}-${theme}-history.png`, output).pathname,
+          fullPage: true,
+          animations: "disabled",
+          timeout: 60_000,
+        });
+        if (phase !== "before") {
+          assert.equal(
+            await page.locator(".bonsai-history-commits li").count(),
+            40,
+          );
+          await page
+            .getByRole("link", { name: "Overview", exact: true })
+            .click();
+          await page.locator('[data-tile="contributors"]').waitFor();
+          assert.equal(await page.locator("[data-tile]").count(), 8);
+          await page.waitForFunction(() => {
+            const window = globalThis.document.querySelector(
+              ".bonsai-network-scroll",
+            );
+            const newest = window?.querySelector(
+              ".bonsai-bead:last-child circle",
+            );
+            if (!window || !newest) return false;
+            const frame = window.getBoundingClientRect();
+            const bead = newest.getBoundingClientRect();
+            return bead.left >= frame.left && bead.right <= frame.right;
+          });
+          assert.equal(
+            await page
+              .locator('[data-tile="ages"], [data-tile="churn"]')
+              .count(),
+            0,
+          );
+          for (const name of [".bonsai-contributor-chart"]) {
+            await page.waitForFunction((selector) => {
+              const chart = globalThis.document.querySelector(selector);
+              const axis = chart?.querySelector("[data-time-axis]");
+              return (
+                chart &&
+                axis &&
+                Math.abs(
+                  chart.getBoundingClientRect().width -
+                    axis.getBoundingClientRect().width,
+                ) < 1
+              );
+            }, name);
+          }
+          assert.equal(
+            await page.evaluate(
+              () =>
+                globalThis.document.documentElement.scrollWidth <=
+                globalThis.innerWidth,
+            ),
+            true,
+            "page fits viewport",
+          );
+          assert.equal(await page.locator('[data-tile="branches"]').count(), 0);
+          await page.waitForFunction(() => {
+            const chart = globalThis.document.querySelector(
+              ".bonsai-contributor-chart",
+            );
+            const paths = [...chart.querySelectorAll("path")];
+            return paths.some(
+              (path) =>
+                path.getBBox().x < 1 &&
+                path.getBBox().width >= chart.viewBox.baseVal.width - 1,
+            );
+          });
+          const calendar = await page
+            .locator('[data-tile="calendar"] > :first-child')
+            .boundingBox();
+          assert.ok(
+            calendar && calendar.height < 330,
+            "calendar fits its content",
+          );
+          if (phase === "redesign-9-after") {
+            await page.locator(".bonsai-feed-item").evaluateAll((rows) => {
+              for (const row of rows) {
+                const lines = row.querySelectorAll("p");
+                if (
+                  lines.length !== 2 ||
+                  row.getBoundingClientRect().height > 70
+                )
+                  throw new Error("Live activity must fit two compact lines");
+              }
+            });
+            await page.emulateMedia({ reducedMotion: "reduce" });
+            assert.equal(
+              await page
+                .locator(".bonsai-recent-head")
+                .evaluateAll((heads) =>
+                  heads.every(
+                    (head) =>
+                      globalThis.globalThis.getComputedStyle(head)
+                        .animationName === "none",
+                  ),
+                ),
+              true,
+            );
+            await page.emulateMedia({ reducedMotion: "no-preference" });
+            if (width === 1440 && theme === "light") {
+              await page.locator('[data-tile="network"]').screenshot({
+                path: new URL(
+                  "../../../../packages/oyster/docs/media/bonsai-network.png",
+                  import.meta.url,
+                ).pathname,
+                animations: "disabled",
+              });
+              await page.screenshot({
+                path: new URL(
+                  "../../../../packages/oyster/docs/media/bonsai-repository.png",
+                  import.meta.url,
+                ).pathname,
+                animations: "disabled",
+              });
+              await page.screenshot({
+                path: new URL(
+                  "../../docs/media/bonsai-insights.png",
+                  import.meta.url,
+                ).pathname,
+                fullPage: true,
+                animations: "disabled",
+              });
+            }
+          }
+          await page.screenshot({
+            path: new URL(`${width}-${theme}-insights.png`, output).pathname,
+            fullPage: true,
+            animations: "disabled",
+            timeout: 60_000,
+          });
+          await page.getByRole("button", { name: "Arrange tiles" }).click();
+          const contributor = page.locator('[data-tile="contributors"]');
+          for (const title of ["README", "Contribution calendar"])
+            await page
+              .getByRole("button", { name: `Remove ${title}`, exact: true })
+              .click();
+          if (width === 1440) {
+            await page
+              .getByRole("button", { name: "Move Contributors", exact: true })
+              .evaluate((element) =>
+                element.scrollIntoView({ block: "center" }),
+              );
+            const handle = await page
+              .getByRole("button", { name: "Move Contributors", exact: true })
+              .boundingBox();
+            assert.ok(handle);
+            const original = await contributor.boundingBox();
+            await page.mouse.move(
+              handle.x + handle.width / 2,
+              handle.y + handle.height / 2,
+            );
+            await page.mouse.down();
+            await page.mouse.move(
+              handle.x + handle.width / 2 + (original?.width ?? 0) + 12,
+              handle.y + handle.height / 2,
+              { steps: 8 },
+            );
+            await page.mouse.up();
+            assert.notEqual(
+              (await contributor.boundingBox())?.x,
+              original?.x,
+              "pointer drag moves tile",
+            );
+          }
+          if (width === 1440) {
+            await page
+              .getByRole("button", { name: "Cancel", exact: true })
+              .click();
+            await page.getByRole("button", { name: "Arrange tiles" }).click();
+            for (const title of ["README", "Contribution calendar"])
+              await page
+                .getByRole("button", { name: `Remove ${title}`, exact: true })
+                .click();
+          }
+          const firstTop = await contributor.evaluate(
+            (element) => element.offsetLeft + element.offsetTop,
+          );
+          await page
+            .getByRole("button", { name: "Move Contributors", exact: true })
+            .focus();
+          await page.keyboard.press(width === 1440 ? "ArrowRight" : "ArrowUp");
+          const moved = await contributor.boundingBox();
+          assert.notEqual(
+            await contributor.evaluate(
+              (element) => element.offsetLeft + element.offsetTop,
+            ),
+            firstTop,
+            "keyboard movement moves tile",
+          );
+          await page
+            .getByRole("button", { name: "Resize Contributors", exact: true })
+            .focus();
+          await page.keyboard.press("ArrowDown");
+          await page.keyboard.press("ArrowDown");
+          const resized = await contributor.boundingBox();
+          assert.ok(
+            (resized?.height ?? 0) > (moved?.height ?? 0),
+            "keyboard resize grows tile",
+          );
+          assert.equal(await page.locator('[data-tile="ages"]').count(), 0);
+          await page
+            .getByRole("button", { name: "Save layout", exact: true })
+            .click();
+          await page.getByRole("button", { name: "Arrange tiles" }).waitFor();
+          await page.reload();
+          await page
+            .getByRole("link", { name: "Overview", exact: true })
+            .click();
+          await contributor.waitFor();
+          assert.equal(
+            await page.locator('[data-tile="ages"]').count(),
+            0,
+            "removed tile stays removed after reload",
+          );
+          assert.equal(
+            await page.evaluate(
+              () =>
+                JSON.parse(
+                  globalThis.localStorage.getItem("fixture-layout"),
+                ).tiles.placements.find((tile) => tile.id === "contributors").h,
+            ),
+            3,
+            "saved row span survives reload",
+          );
+          assert.ok(
+            (await contributor.boundingBox())?.height >= 528,
+            "reloaded tile retains at least its three-row height",
+          );
+          await page.getByRole("button", { name: "Arrange tiles" }).click();
+          await page.getByLabel("Visualization to add").selectOption("ages");
+          await page.getByRole("button", { name: "Add", exact: true }).click();
+          await page.locator('[data-tile="ages"]').waitFor();
+          await page.waitForFunction(() => {
+            const chart =
+              globalThis.document.querySelector(".bonsai-age-chart");
+            const axis = chart?.querySelector("[data-time-axis]");
+            return (
+              chart &&
+              axis &&
+              Math.abs(
+                chart.getBoundingClientRect().width -
+                  axis.getBoundingClientRect().width,
+              ) < 1
+            );
+          });
+          await page
+            .getByRole("button", { name: "Cancel", exact: true })
+            .click();
+          assert.equal(
+            await page.locator('[data-tile="ages"]').count(),
+            0,
+            "cancel discards unsaved changes",
+          );
+        }
+        assert.deepEqual(errors, [], "no page errors");
+        await page.close();
+      }
+    if (phase !== "before") {
+      const page = await browser.newPage({
+        viewport: { width: 390, height: 1000 },
+      });
+      await page.goto(
+        "http://127.0.0.1:5188/test/browser/visual.html?ref=main",
+      );
+      await page.locator(".bonsai-history-commits li").first().waitFor();
+      assert.equal(
+        await page.locator(".bonsai-history-commits li").count(),
+        10,
+        "selected branch limits history",
+      );
+      await page.locator(".bonsai-history").evaluate((element) => {
+        element.style.width = "280px";
+      });
+      assert.equal(
+        await page
+          .locator(".bonsai-history")
+          .evaluate((element) => element.scrollWidth <= element.clientWidth),
+        true,
+        "history fits a sidebar",
+      );
+      await page.goto(
+        "http://127.0.0.1:5188/test/browser/visual.html?tab=insights",
+      );
+      await page
+        .locator('[aria-current="page"]')
+        .filter({ hasText: "Overview" })
+        .waitFor();
+      assert.equal(
+        await page.getByRole("link", { name: "Insights", exact: true }).count(),
+        0,
+      );
+      await page.goto("http://127.0.0.1:5188/test/browser/visual.html?empty");
+      await page.getByRole("link", { name: "Overview", exact: true }).click();
+      await page
+        .getByText("Push a first commit to start this repository.", {
+          exact: false,
+        })
+        .waitFor();
+      assert.equal(await page.locator("[data-tile]").count(), 0);
+      await page.goto(
+        "http://127.0.0.1:5188/test/browser/visual.html?save-error",
+      );
+      await page.getByRole("link", { name: "Overview", exact: true }).click();
+      await page.getByRole("button", { name: "Arrange tiles" }).click();
+      await page
+        .getByRole("button", { name: "Remove Contributors", exact: true })
+        .click();
+      await page
+        .getByRole("button", { name: "Save layout", exact: true })
+        .click();
+      await page.getByText("Fixture save unavailable").waitFor();
+      assert.equal(
+        await page.locator('[data-tile="contributors"]').count(),
+        0,
+        "failed saves retain the edit for retry",
+      );
+      await page.getByRole("button", { name: "Cancel", exact: true }).click();
+      await page.locator('[data-tile="contributors"]').waitFor();
+      await page.close();
+    }
+    console.log(
+      `PASS ${phase}: 1440/390 light/dark screenshots${phase === "before" ? "" : ", pointer and keyboard move/resize, add/remove, cancel, save/reload, viewport fit, empty and save-error states"}`,
+    );
+  }
+} finally {
+  await browser.close();
+}