everyscreen 0.0.0-stage → 0.1.0

package/dist/run-one-at-a-time-BeV_a3Fm.mjs

@@ -0,0 +1,48 @@
+import { dirname } from "node:path";
+import { randomUUID } from "node:crypto";
+import { mkdir, readFile, rename, rm, writeFile } from "node:fs/promises";
+// src/hub/stored-files.ts
+const DEFAULT_FILE_MODE = 438;
+const isMissingFileError = (error) => error instanceof Error && "code" in error && error.code === "ENOENT";
+const readStoredBytes = async (filePath) => {
+	try {
+		return await readFile(filePath);
+	} catch (error) {
+		if (isMissingFileError(error)) return null;
+		throw error;
+	}
+};
+const readStoredFile = async (filePath) => {
+	const fileBytes = await readStoredBytes(filePath);
+	if (fileBytes === null) return null;
+	return fileBytes.toString("utf8");
+};
+const writeStoredFile = async (filePath, fileBytes, fileMode = DEFAULT_FILE_MODE) => {
+	const folderPath = dirname(filePath);
+	const draftPath = `${filePath}.${randomUUID()}.draft`;
+	await mkdir(folderPath, { recursive: true });
+	await writeFile(draftPath, fileBytes, { mode: fileMode });
+	try {
+		await rename(draftPath, filePath);
+	} catch (error) {
+		await rm(draftPath, { force: true });
+		throw error;
+	}
+};
+// src/hub/run-one-at-a-time.ts
+const queuedTasks = /* @__PURE__ */ new Map();
+const runAfter = async (previousTask, task) => {
+	await Promise.allSettled([previousTask]);
+	return task();
+};
+const runOneAtATime = async (queueKey, task) => {
+	const previousTask = queuedTasks.get(queueKey) ?? null;
+	const currentTask = runAfter(previousTask, task);
+	queuedTasks.set(queueKey, currentTask);
+	try {
+		return await currentTask;
+	} finally {
+		if (queuedTasks.get(queueKey) === currentTask) queuedTasks.delete(queueKey);
+	}
+};
+export { writeStoredFile as i, readStoredBytes as n, readStoredFile as r, runOneAtATime as t };

package/dist/runs-store-Bd_ITPFj.mjs

@@ -0,0 +1,283 @@
+import { m as countDeviceStatuses, w as STORE_FOLDER } from "./commands-logic-DVWfSe3O.mjs";
+import { i as writeStoredFile, r as readStoredFile, t as runOneAtATime } from "./run-one-at-a-time-BeV_a3Fm.mjs";
+import { HTTPException } from "hono/http-exception";
+import { z } from "zod";
+import { basename, join } from "node:path";
+import { glob } from "node:fs/promises";
+// src/checks/checks-logic.ts
+const MIN_TAP_SIZE = 44;
+const REQUEST_FAILURE_ECHO = "Failed to load resource";
+const FAVICON_PATH = "/favicon.ico";
+const SEVERITIES = ["failed", "warn"];
+const findOverflow = (measurements, checkDevice) => {
+	const { widestPastEdge } = measurements;
+	if (widestPastEdge === null) return [];
+	const { selector, overflowPx } = widestPastEdge;
+	return [{
+		kind: "overflow",
+		severity: "failed",
+		deviceId: checkDevice.id,
+		selector,
+		message: `${selector} is ${overflowPx}px past the edge`
+	}];
+};
+const findClippedLabels = (measurements, checkDevice) => measurements.clippedSelectors.map((selector) => ({
+	kind: "clipped-text",
+	severity: "warn",
+	deviceId: checkDevice.id,
+	selector,
+	message: `${selector} cuts its text off`
+}));
+const listSafeAreaFindings = (measurements, checkDevice) => {
+	if (!measurements.isViewportCover) return [];
+	const { pinnedBoxes, viewportHeight } = measurements;
+	const { safeAreaInsets } = checkDevice;
+	const homeBarTop = viewportHeight - safeAreaInsets.bottom;
+	return pinnedBoxes.filter((pinnedBox) => {
+		const { top, bottom } = safeAreaInsets;
+		const { cssSafeAreaSides } = pinnedBox;
+		const isTopCovered = pinnedBox.paddingTop >= top || cssSafeAreaSides.top;
+		const isBottomCovered = pinnedBox.paddingBottom >= bottom || cssSafeAreaSides.bottom;
+		const isUnderNotch = pinnedBox.top < top && !isTopCovered;
+		const isUnderHomeBar = pinnedBox.bottom > homeBarTop && !isBottomCovered;
+		return isUnderNotch || isUnderHomeBar;
+	}).map((pinnedBox) => ({
+		kind: "safe-area",
+		severity: "warn",
+		deviceId: checkDevice.id,
+		selector: pinnedBox.selector,
+		message: `${pinnedBox.selector} sits under the notch or home bar`
+	}));
+};
+const findSmallTapTargets = (measurements, checkDevice) => {
+	if (!checkDevice.hasTouch) return [];
+	return measurements.tapTargets.filter(({ width, height }) => Math.min(width, height) < MIN_TAP_SIZE).map(({ selector, width, height }) => ({
+		kind: "tap-target",
+		severity: "warn",
+		deviceId: checkDevice.id,
+		selector,
+		message: `${selector} is ${Math.round(width)}x${Math.round(height)}, under ${MIN_TAP_SIZE}x${MIN_TAP_SIZE}`
+	}));
+};
+const listFindings = (measurements, checkDevice) => [
+	...findOverflow(measurements, checkDevice),
+	...findClippedLabels(measurements, checkDevice),
+	...listSafeAreaFindings(measurements, checkDevice),
+	...findSmallTapTargets(measurements, checkDevice)
+];
+const isRequestFailureEcho = (consoleMessage) => consoleMessage.startsWith(REQUEST_FAILURE_ECHO);
+const isFaviconUrl = (requestUrl) => new URL(requestUrl).pathname === FAVICON_PATH;
+const createConsoleFinding = (deviceId, consoleMessage) => ({
+	kind: "console-error",
+	severity: "failed",
+	deviceId,
+	selector: null,
+	message: consoleMessage
+});
+const createRequestFinding = (deviceId, requestUrl, failureReason) => {
+	const { pathname } = new URL(requestUrl);
+	return {
+		kind: "failed-request",
+		severity: "failed",
+		deviceId,
+		selector: null,
+		message: `${pathname} ${failureReason ?? "failed"}`
+	};
+};
+// src/runs/runs-logic.ts
+const RUN_ID_PATTERN = /^run-(\d+)$/;
+const RUN_ID_DIGITS = 4;
+const NOT_FOUND_STATUS = 404;
+const CONFLICT_STATUS = 409;
+const readRunNumber = (runId) => {
+	const idParts = RUN_ID_PATTERN.exec(runId);
+	if (idParts === null) return null;
+	return Number(idParts[1]);
+};
+const pickNextRunId = (runIds) => {
+	const runNumbers = runIds.map(readRunNumber).filter((runNumber) => runNumber !== null);
+	const latestNumber = Math.max(0, ...runNumbers);
+	return `run-${String(latestNumber + 1).padStart(RUN_ID_DIGITS, "0")}`;
+};
+const pickRunStatus = (steps) => {
+	const { failedCount } = countDeviceStatuses(steps);
+	return failedCount > 0 ? "failed" : "ok";
+};
+const checkRunEvent = (savedRun, runEvent) => {
+	if (savedRun === null) throw new HTTPException(NOT_FOUND_STATUS, { message: "No run with that id" });
+	if (savedRun.status !== "running" && runEvent.kind === "step-end") throw new HTTPException(CONFLICT_STATUS, { message: "The run has already ended" });
+	return savedRun;
+};
+const mergeRunEvent = (run, runEvent) => {
+	switch (runEvent.kind) {
+		case "run-start": return {
+			...run,
+			origin: runEvent.origin,
+			runKind: runEvent.runKind,
+			status: "running"
+		};
+		case "step-end": return {
+			...run,
+			steps: [...run.steps, runEvent.step]
+		};
+		case "run-end": {
+			const isReportedFailed = runEvent.status === "failed";
+			const stepsStatus = pickRunStatus(run.steps);
+			const status = isReportedFailed ? "failed" : stepsStatus;
+			return {
+				...run,
+				status
+			};
+		}
+	}
+};
+const createStepId = (stepNumber) => `step-${stepNumber}`;
+const pickStepId = (steps) => createStepId(steps.length + 1);
+const isRunOpen = (run) => {
+	return run !== null && run.status === "running";
+};
+const pickLeftOpenRuns = (runs) => runs.filter(({ origin, status }) => origin === "cli" && status === "running");
+// src/runs/run-schema.ts
+const runOriginSchema = z.enum([
+	"cli",
+	"flow",
+	"playwright"
+]);
+const runKindSchema = z.enum(["steps", "sweep"]);
+const deviceAnswerSchema = z.discriminatedUnion("status", [z.object({
+	status: z.literal("ok"),
+	deviceId: z.string(),
+	durationMs: z.number(),
+	shotPath: z.string().nullable().default(null)
+}), z.object({
+	status: z.literal("failed"),
+	deviceId: z.string(),
+	durationMs: z.number(),
+	message: z.string(),
+	shotPath: z.string().nullable()
+})]);
+const findingSchema = z.object({
+	kind: z.enum([
+		"overflow",
+		"clipped-text",
+		"safe-area",
+		"tap-target",
+		"console-error",
+		"failed-request"
+	]),
+	severity: z.enum(SEVERITIES),
+	deviceId: z.string(),
+	selector: z.string().nullable(),
+	message: z.string()
+});
+const stepProofSchema = z.object({
+	shotPath: z.string().nullable(),
+	errorMessage: z.string(),
+	codeSnippet: z.string().nullable(),
+	codeLocation: z.string().nullable()
+});
+const runStepSchema = z.object({
+	stepId: z.string(),
+	title: z.string(),
+	startedAt: z.number(),
+	deviceAnswers: z.array(deviceAnswerSchema),
+	findings: z.array(findingSchema),
+	proof: stepProofSchema.nullable()
+});
+const runSchema = z.object({
+	runId: z.string(),
+	origin: runOriginSchema,
+	runKind: runKindSchema.default("steps"),
+	status: z.enum([
+		"running",
+		"ok",
+		"failed"
+	]),
+	startedAt: z.number(),
+	steps: z.array(runStepSchema)
+});
+const runEventSchema = z.discriminatedUnion("kind", [
+	z.object({
+		kind: z.literal("run-start"),
+		origin: runOriginSchema,
+		runKind: runKindSchema
+	}),
+	z.object({
+		kind: z.literal("step-end"),
+		step: runStepSchema
+	}),
+	z.object({
+		kind: z.literal("run-end"),
+		status: z.enum(["ok", "failed"])
+	})
+]);
+// src/runs/runs-store.ts
+const RUNS_SUBFOLDER = "runs";
+const RUN_FILE_EXTENSION = ".json";
+const RUN_FILE_PATTERN = `*${RUN_FILE_EXTENSION}`;
+const pickRunsFolder = (rootFolder) => join(rootFolder, STORE_FOLDER, RUNS_SUBFOLDER);
+const pickRunFilePath = (rootFolder, runId) => join(pickRunsFolder(rootFolder), `${runId}${RUN_FILE_EXTENSION}`);
+const listRunIds = async (rootFolder) => {
+	const runIds = [];
+	const runFileNames = glob(RUN_FILE_PATTERN, { cwd: pickRunsFolder(rootFolder) });
+	for await (const runFileName of runFileNames) runIds.push(basename(runFileName, RUN_FILE_EXTENSION));
+	return runIds.sort();
+};
+const writeRun = async (rootFolder, run) => {
+	const serializedRun = JSON.stringify(run, null, 2);
+	await writeStoredFile(pickRunFilePath(rootFolder, run.runId), serializedRun);
+};
+const readRun = async (rootFolder, runId) => {
+	const serializedRun = await readStoredFile(pickRunFilePath(rootFolder, runId));
+	if (serializedRun === null) return null;
+	return runSchema.parse(JSON.parse(serializedRun));
+};
+const listRuns = async (rootFolder) => {
+	const runIds = await listRunIds(rootFolder);
+	const runs = [];
+	for (const runId of runIds) try {
+		const run = await readRun(rootFolder, runId);
+		if (run !== null) runs.push(run);
+	} catch (error) {
+		console.error({
+			runId,
+			error
+		});
+	}
+	return runs;
+};
+const createRun = async (rootFolder, origin, runKind) => {
+	return runOneAtATime(pickRunsFolder(rootFolder), async () => {
+		const runIds = await listRunIds(rootFolder);
+		const run = {
+			runId: pickNextRunId(runIds),
+			origin,
+			runKind,
+			status: "running",
+			startedAt: Date.now(),
+			steps: []
+		};
+		await writeRun(rootFolder, run);
+		return run;
+	});
+};
+const saveRunEvent = async (rootFolder, runId, runEvent) => {
+	const runFilePath = pickRunFilePath(rootFolder, runId);
+	return runOneAtATime(runFilePath, async () => {
+		const savedRun = await readRun(rootFolder, runId);
+		const checkedRun = checkRunEvent(savedRun, runEvent);
+		const mergedRun = mergeRunEvent(checkedRun, runEvent);
+		await writeRun(rootFolder, mergedRun);
+		return mergedRun;
+	});
+};
+const closeRun = (rootFolder, runId) => saveRunEvent(rootFolder, runId, {
+	kind: "run-end",
+	status: "ok"
+});
+const closeLeftOpenRuns = async (rootFolder) => {
+	const runs = await listRuns(rootFolder);
+	const leftOpenRuns = pickLeftOpenRuns(runs);
+	for (const leftOpenRun of leftOpenRuns) await closeRun(rootFolder, leftOpenRun.runId);
+};
+export { listFindings as _, readRun as a, runOriginSchema as c, isRunOpen as d, pickStepId as f, isRequestFailureEcho as g, isFaviconUrl as h, listRuns as i, RUN_ID_PATTERN as l, createRequestFinding as m, closeRun as n, saveRunEvent as o, createConsoleFinding as p, createRun as r, runEventSchema as s, closeLeftOpenRuns as t, createStepId as u };

package/dist/test.d.mts

@@ -0,0 +1,11 @@
+import { f as HubFile, n as DeviceProjectOptions } from "./playwright-logic-QFlBFspE.mjs";
+import { t as ReportHubTrouble } from "./report-hub-trouble-BjbcuK21.mjs";
+interface WorkerHub {
+  hubFile: HubFile | null;
+  reportTrouble: ReportHubTrouble;
+}
+export declare const test: import("playwright/test").TestType<import("playwright/test").PlaywrightTestArgs & import("playwright/test").PlaywrightTestOptions & DeviceProjectOptions, import("playwright/test").PlaywrightWorkerArgs & import("playwright/test").PlaywrightWorkerOptions & {
+  everyscreenHub: WorkerHub;
+}>;
+export declare const expect: import("playwright/test").Expect<{}>;
+export {};

package/dist/test.mjs

@@ -0,0 +1,69 @@
+import { C as SCREENCAST } from "./commands-logic-DVWfSe3O.mjs";
+import { n as readHubFileSafely, v as pickScreenHubUrl } from "./read-hub-file-N4rZ-6Wr.mjs";
+import { n as postToHub, t as createHubTroubleReporter } from "./report-hub-trouble-CaUiyteI.mjs";
+import { test as test$1 } from "@playwright/test";
+// src/playwright/playwright-fixture.ts
+const SCREEN_INTERVAL_MS = 300;
+const SCREENSHOT_TIMEOUT_MS = 2e3;
+const sendScreenImage = async (page, deviceId, hubTarget) => {
+	const screenImage = await page.screenshot({
+		type: SCREENCAST.format,
+		quality: SCREENCAST.quality,
+		scale: "css",
+		timeout: SCREENSHOT_TIMEOUT_MS
+	});
+	await postToHub(hubTarget, "/screens", {
+		deviceId,
+		imageBase64: screenImage.toString("base64")
+	});
+};
+const startSendingScreens = (page, deviceId, hubTarget) => {
+	const sending = { screenSend: null };
+	const sendSafely = async () => {
+		try {
+			await sendScreenImage(page, deviceId, hubTarget);
+		} catch (error) {
+			if (!page.isClosed()) hubTarget.reportTrouble(error);
+		} finally {
+			sending.screenSend = null;
+		}
+	};
+	const sendOnTick = () => {
+		if (sending.screenSend !== null) return;
+		sending.screenSend = sendSafely();
+	};
+	const tickTimer = setInterval(sendOnTick, SCREEN_INTERVAL_MS);
+	return async () => {
+		clearInterval(tickTimer);
+		await sending.screenSend;
+	};
+};
+const test = test$1.extend({
+	everyscreenDeviceId: [null, { option: true }],
+	everyscreenHub: [async ({}, use) => {
+		const reportTrouble = createHubTroubleReporter();
+		await use({
+			hubFile: readHubFileSafely(reportTrouble),
+			reportTrouble
+		});
+	}, { scope: "worker" }],
+	page: async ({ page, everyscreenDeviceId, everyscreenHub }, use) => {
+		const { hubFile, reportTrouble } = everyscreenHub;
+		const screenHubUrl = pickScreenHubUrl(hubFile, everyscreenDeviceId);
+		if (screenHubUrl !== null && everyscreenDeviceId !== null) {
+			const stopSendingScreens = startSendingScreens(page, everyscreenDeviceId, {
+				hubUrl: screenHubUrl,
+				reportTrouble
+			});
+			try {
+				await use(page);
+			} finally {
+				await stopSendingScreens();
+			}
+			return;
+		}
+		await use(page);
+	}
+});
+const expect = test$1.expect;
+export { expect, test };

package/package.json

@@ -1,6 +1,108 @@
 {
   "name": "everyscreen",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "Local CLI and live dashboard that runs your web app on many device sizes at once, with layout checks and one-line results for coding agents.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/YosefHayim/everyscreen.git"
+  },
+  "homepage": "https://everyscreen.jtslabs.dev",
+  "type": "module",
+  "bin": {
+    "everyscreen": "./dist/cli.mjs"
+  },
+  "exports": {
+    "./playwright": {
+      "types": "./dist/playwright.d.mts",
+      "default": "./dist/playwright.mjs"
+    },
+    "./test": {
+      "types": "./dist/test.d.mts",
+      "default": "./dist/test.mjs"
+    },
+    "./reporter": {
+      "types": "./dist/reporter.d.mts",
+      "default": "./dist/reporter.mjs"
+    },
+    "./theme.css": "./src/dashboard/ui/theme.css"
+  },
+  "files": [
+    "dist",
+    "!dist/site",
+    "src/skill/SKILL.md",
+    "src/dashboard/ui/theme.css"
+  ],
+  "engines": {
+    "node": ">=22.17"
+  },
+  "packageManager": "pnpm@10.14.0",
+  "scripts": {
+    "dev": "pnpm run \"/^dev:(hub|dashboard)$/\"",
+    "dev:hub": "tsx watch src/cli/cli.ts start --foreground",
+    "dev:dashboard": "vite",
+    "dev:site": "vite --config vite.site.config.ts",
+    "prod": "pnpm build && node dist/cli.mjs start",
+    "build": "tsdown && vite build",
+    "build:site": "vite build --config vite.site.config.ts",
+    "deploy:site": "pnpm build:site && wrangler deploy",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:e2e": "playwright test",
+    "lint": "biome check && knip",
+    "lint:fix": "biome check --write",
+    "typecheck": "tsc --noEmit",
+    "prepare": "husky",
+    "check": "turbo run lint typecheck test test:e2e build build:site --output-logs=errors-only"
+  },
+  "dependencies": {
+    "@hono/node-server": "2.1.5",
+    "@hono/zod-validator": "0.9.1",
+    "hono": "4.13.14",
+    "playwright": "1.64.1",
+    "ws": "8.22.0",
+    "yaml": "2.9.1",
+    "zod": "4.6.7"
+  },
+  "peerDependencies": {
+    "@playwright/test": "~1.64.0"
+  },
+  "peerDependenciesMeta": {
+    "@playwright/test": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@biomejs/biome": "2.6.3",
+    "@hookform/resolvers": "6.0.2",
+    "@playwright/test": "1.64.1",
+    "@tailwindcss/vite": "4.3.3",
+    "@tanstack/react-query": "5.105.0",
+    "@tanstack/react-router": "1.170.46",
+    "@tanstack/router-plugin": "1.168.48",
+    "@types/node": "24.19.2",
+    "@types/react": "19.3.0",
+    "@types/react-dom": "19.3.0",
+    "@types/ws": "8.18.2",
+    "@vitejs/plugin-react": "6.1.2",
+    "@vitest/coverage-v8": "5.0.5",
+    "class-variance-authority": "0.7.1",
+    "clsx": "2.1.1",
+    "husky": "9.1.7",
+    "i18next": "26.5.11",
+    "knip": "6.43.0",
+    "react": "19.3.1",
+    "react-dom": "19.3.1",
+    "react-hook-form": "7.91.0",
+    "react-i18next": "17.1.9",
+    "tailwind-merge": "3.7.0",
+    "tailwindcss": "4.3.3",
+    "tsdown": "0.23.3",
+    "tsx": "4.23.15",
+    "turbo": "2.11.8",
+    "typescript": "7.0.2",
+    "vite": "8.3.5",
+    "vitest": "5.0.5",
+    "wrangler": "4.154.0"
+  }
+}

package/src/dashboard/ui/theme.css

@@ -0,0 +1,28 @@
+@theme {
+  --color-*: initial;
+  --color-paper: #eef0f4;
+  --color-card: #ffffff;
+  --color-line: #d7dbe5;
+  --color-soft: #f6f7fa;
+  --color-ink: #0e1222;
+  --color-ink-2: #4e5468;
+  --color-ink-3: #5f6579;
+  --color-muted: #8b91a8;
+  --color-frame-detail: #2e3450;
+  --color-window-close: #ff5f57;
+  --color-window-minimize: #febc2e;
+  --color-window-maximize: #28c840;
+  --color-pink: #ff4f9a;
+  --color-cobalt: #2b35e0;
+  --color-cobalt-hover: #1c24b0;
+  --color-ok: #0b7a4b;
+  --color-ok-soft: #e6f4ec;
+  --color-warn: #a35a00;
+  --color-warn-soft: #fff3e0;
+  --color-failed: #c8361b;
+  --color-failed-soft: #fdece8;
+  --font-sans: "Geist", system-ui, sans-serif;
+  --font-mono: "Geist Mono", ui-monospace, monospace;
+  --shadow-lift:
+    0 18px 40px -16px rgb(14 18 34 / 0.32), 0 2px 6px rgb(14 18 34 / 0.06);
+}

package/src/skill/SKILL.md

@@ -0,0 +1,15 @@
+---
+name: everyscreen
+description: Check a web app on many device sizes at once with the Everyscreen CLI. Use when the user asks to test a page on phones, tablets or other screen sizes, or to find layout bugs.
+---
+
+# Everyscreen
+
+Everyscreen runs your web app on many devices at once and answers each command with one line.
+
+1. Start the hub with `npx everyscreen start`. The dashboard is at http://127.0.0.1:4100.
+2. Add `--json` to every command. The reply is then one JSON object instead of the line.
+3. Read the reply. Do not open shots unless a step fails.
+4. When a step fails, read `failures` in the JSON reply. Each failed device has `deviceId`, `message` (the error, so read its first line) and `shotPath`. Open only the shots of the failed devices. For the full report, give the user `http://127.0.0.1:4100/runs/<runId>`, using `runId` from the reply.
+5. To check every route of the app on every device, run `npx everyscreen sweep --url <url>`. Add `--before <flow.yaml>` to run a login flow first on each device.
+6. To run the user's Playwright tests on every device at once, import `test` from `everyscreen/test` and use the `everyscreen/reporter` reporter. See the README.