S3.5: every page on the pixel grid: tokenised type, square corners, pixel charts with HTML axis labels

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

tests/e2e/pixel-grid.ts

@@ -0,0 +1,20 @@
+import type { Page } from "@playwright/test";
+
+/** Visible text off the pixel font's grid: a size other than its 1x or 2x, or added letter spacing; code excepted. */
+export function offGridText(page: Page) {
+  return page.evaluate(() => {
+    const scale = parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--px"));
+    const sizes = [12 * scale, 24 * scale];
+    const odd: string[] = [];
+    for (const element of document.querySelectorAll<HTMLElement>("body *")) {
+      const own = [...element.childNodes].some((node) => node.nodeType === Node.TEXT_NODE && node.textContent!.trim() !== "");
+      if (!own || element.closest("svg, canvas, .sr-only")) continue;
+      const style = getComputedStyle(element);
+      if (style.fontFamily.includes("Geist Mono") || element.getClientRects().length === 0) continue;
+      const size = parseFloat(style.fontSize);
+      const spaced = style.letterSpacing !== "normal" && parseFloat(style.letterSpacing) !== 0;
+      if (spaced || !sizes.some((grid) => Math.abs(grid - size) < 0.01)) odd.push(`${element.tagName}.${element.className} ${size}px ${style.letterSpacing} "${element.textContent!.trim().slice(0, 30)}"`);
+    }
+    return odd;
+  });
+}

tests/e2e/pixel-pages.spec.ts

@@ -0,0 +1,31 @@
+import { _electron as electron, expect, test } from "@playwright/test";
+import { mkdirSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join, resolve } from "node:path";
+import { randomUUID } from "node:crypto";
+import { seedBuiltinSkillsFixture } from "./builtin-skills-fixture";
+import { closeApp, onboard } from "./onboard";
+import { offGridText } from "./pixel-grid";
+
+test("every page and onboarding step draws its text on the pixel font's grid", async () => {
+  const profileDir = join(tmpdir(), `agentcompany-new-e2e-pxpages-${randomUUID()}`);
+  mkdirSync(profileDir, { recursive: true });
+  const builtinDir = seedBuiltinSkillsFixture(join(tmpdir(), `agentcompany-new-e2e-pxpages-builtin-${randomUUID()}`));
+  const app = await electron.launch({
+    args: [resolve("out/main/index.js")],
+    env: { ...process.env, AGENTCOMPANY_NEW_PROFILE_DIR: profileDir, AGENTCOMPANY_NEW_AUTORUN: "0", AGENTCOMPANY_NEW_BUILTIN_SKILLS_DIR: builtinDir },
+  });
+  try {
+    const page = await app.firstWindow();
+    await expect(page.getByRole("heading", { name: "Welcome" })).toBeVisible();
+    expect(await offGridText(page)).toEqual([]);
+    await onboard(page, "Grid Co");
+    for (const route of ["Home", "Work", "Team", "Office", "Messages", "Runs", "Files", "Library", "Approvals", "Connectors", "Settings"]) {
+      await page.getByRole("button", { name: route, exact: true }).click();
+      await page.waitForTimeout(400);
+      expect({ route, odd: await offGridText(page) }).toEqual({ route, odd: [] });
+    }
+  } finally {
+    await closeApp(app);
+  }
+});

tests/e2e/render-recovery.spec.ts

@@ -6,6 +6,7 @@ import { randomUUID } from "node:crypto";
 import { DatabaseSync } from "node:sqlite";
 import { seedBuiltinSkillsFixture } from "./builtin-skills-fixture";
 import { onboard } from "./onboard";
+import { offGridText } from "./pixel-grid";
 
 test("a record that breaks one page leaves the rest of the app working", async () => {
   const profileDir = join(tmpdir(), `agentcompany-new-e2e-render-${randomUUID()}`);
@@ -35,6 +36,7 @@ test("a record that breaks one page leaves the rest of the app working", async (
     await expect(failure).toContainText("Approval risk tone is missing.");
     // A failure reads as a game over, with Continue to try again; the same fault fails the same way.
     await expect(failure).toContainText("GAME OVER");
+    expect(await offGridText(page)).toEqual([]);
     await failure.getByRole("button", { name: "Continue" }).click();
     await expect(failure).toContainText("Approval risk tone is missing.");
     await page.getByRole("button", { name: "Home" }).click();