From 1aba7f9c1208c19a3db8e958b127d479dc684d73 Mon Sep 17 00:00:00 2001
From: hhhjin <hey@hyeongjin.com>
Date: Sat, 11 Apr 2026 16:22:04 +0900
Subject: [PATCH 1/9] Add Playwright smoke tests for public uploads

---
 .github/workflows/ci.yml                      | 47 +++++++++
 .gitignore                                    |  4 +-
 README.md                                     | 14 +++
 .../upload-form/components/PreviewPane.tsx    |  1 +
 .../upload-form/components/SuccessView.tsx    |  2 +
 .../components/TurnstileWidget.tsx            | 24 +++--
 .../upload-form/components/UploadView.tsx     |  3 +
 .../upload-form/components/WarningDialog.tsx  |  9 +-
 .../features/upload-form/hooks/useUpload.ts   | 12 ++-
 e2e/fixtures/sample.md                        | 10 ++
 e2e/public-upload.spec.ts                     | 97 +++++++++++++++++++
 package.json                                  |  5 +
 playwright.config.ts                          | 51 ++++++++++
 pnpm-lock.yaml                                | 38 ++++++++
 vite.config.ts                                |  8 ++
 vitest.config.mts                             |  2 +
 16 files changed, 310 insertions(+), 17 deletions(-)
 create mode 100644 e2e/fixtures/sample.md
 create mode 100644 e2e/public-upload.spec.ts
 create mode 100644 playwright.config.ts

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 9a39dcb..d9b3a7d 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -35,3 +35,50 @@ jobs:
 
       - name: Test
         run: pnpm test
+
+  e2e:
+    name: Playwright E2E
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "24.13.0"
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Install Playwright browsers
+        run: pnpm exec playwright install --with-deps chromium
+
+      - name: Run Playwright tests
+        run: pnpm test:e2e
+        env:
+          ENV: dev
+          TURNSTILE_SECRET_KEY: dummy-turnstile-secret
+          BETTER_AUTH_SECRET: dummy-better-auth-secret-32chars
+          BETTER_AUTH_URL: http://127.0.0.1:4173
+          GITHUB_CLIENT_ID: dummy-github-client-id
+          GITHUB_CLIENT_SECRET: dummy-github-client-secret
+
+      - name: Upload Playwright report
+        if: always()
+        uses: actions/upload-artifact@v4
+        with:
+          name: playwright-report
+          path: playwright-report
+          if-no-files-found: ignore
+
+      - name: Upload Playwright test results
+        if: always()
+        uses: actions/upload-artifact@v4
+        with:
+          name: playwright-test-results
+          path: test-results
+          if-no-files-found: ignore
diff --git a/.gitignore b/.gitignore
index cf40553..8ca8bbf 100644
--- a/.gitignore
+++ b/.gitignore
@@ -170,7 +170,9 @@ dist
 # Vite bundled output
 dist
 .output
+playwright-report/
+test-results/
 
 .DS_Store
 
-.omx
\ No newline at end of file
+.omx
diff --git a/README.md b/README.md
index 8d3bcb3..54196fb 100644
--- a/README.md
+++ b/README.md
@@ -108,6 +108,20 @@ If you encounter type errors, generate Cloudflare Worker types:
 pnpm cf-typegen
 ```
 
+### End-to-End Tests
+
+Install the Chromium browser used by Playwright:
+
+```bash
+pnpm test:e2e:install
+```
+
+Run the Playwright smoke tests:
+
+```bash
+pnpm test:e2e
+```
+
 ### Building
 
 Build the production bundle:
diff --git a/client/features/upload-form/components/PreviewPane.tsx b/client/features/upload-form/components/PreviewPane.tsx
index 495ca71..1981d4e 100644
--- a/client/features/upload-form/components/PreviewPane.tsx
+++ b/client/features/upload-form/components/PreviewPane.tsx
@@ -53,6 +53,7 @@ export function PreviewPane({
 			</div>
 
 			<div
+				data-testid="preview-iframe-wrapper"
 				className={cn(
 					"flex-1 relative bg-white transition-opacity duration-200",
 					loading ? "opacity-0" : "opacity-100",
diff --git a/client/features/upload-form/components/SuccessView.tsx b/client/features/upload-form/components/SuccessView.tsx
index 0875da8..ecc8bf1 100644
--- a/client/features/upload-form/components/SuccessView.tsx
+++ b/client/features/upload-form/components/SuccessView.tsx
@@ -40,6 +40,7 @@ export function SuccessView({ url, onReset }: SuccessViewProps) {
 			<div className="flex w-full gap-2 mb-6">
 				<input
 					type="text"
+					data-testid="success-url-input"
 					className="min-w-0 flex-1 bg-background border border-border rounded-md px-3 font-sans text-[13px] text-text-secondary outline-none h-9 transition-colors duration-200 focus:border-text-tertiary focus:text-text-primary"
 					readOnly
 					value={url}
@@ -60,6 +61,7 @@ export function SuccessView({ url, onReset }: SuccessViewProps) {
 				</button>
 				<a
 					href={url}
+					data-testid="success-open-link"
 					target="_blank"
 					rel="noopener noreferrer"
 					className="w-9 h-9 p-0 shrink-0 flex items-center justify-center bg-surface-highlight border border-border rounded-md text-text-secondary cursor-pointer transition-all duration-200 no-underline hover:bg-[#25262a] hover:border-text-tertiary hover:text-text-primary"
diff --git a/client/features/upload-form/components/TurnstileWidget.tsx b/client/features/upload-form/components/TurnstileWidget.tsx
index 6beea66..db77e11 100644
--- a/client/features/upload-form/components/TurnstileWidget.tsx
+++ b/client/features/upload-form/components/TurnstileWidget.tsx
@@ -1,4 +1,6 @@
-import Turnstile from "react-turnstile";
+import { lazy, Suspense } from "react";
+
+const Turnstile = lazy(() => import("react-turnstile"));
 
 interface TurnstileWidgetProps {
 	onVerify: (token: string) => void;
@@ -12,14 +14,16 @@ export function TurnstileWidget({
 	onError,
 }: TurnstileWidgetProps) {
 	return (
-		<Turnstile
-			sitekey={import.meta.env.VITE_PUBLIC_TURNSTILE_SITE_KEY}
-			appearance="interaction-only"
-			theme="dark"
-			onVerify={onVerify}
-			onExpire={onExpire}
-			onError={onError}
-			fixedSize
-		/>
+		<Suspense fallback={null}>
+			<Turnstile
+				sitekey={import.meta.env.VITE_PUBLIC_TURNSTILE_SITE_KEY}
+				appearance="interaction-only"
+				theme="dark"
+				onVerify={onVerify}
+				onExpire={onExpire}
+				onError={onError}
+				fixedSize
+			/>
+		</Suspense>
 	);
 }
diff --git a/client/features/upload-form/components/UploadView.tsx b/client/features/upload-form/components/UploadView.tsx
index 208d899..015394d 100644
--- a/client/features/upload-form/components/UploadView.tsx
+++ b/client/features/upload-form/components/UploadView.tsx
@@ -173,6 +173,7 @@ export function UploadView({
 				<input
 					type="file"
 					ref={fileInputRef}
+					data-testid="upload-file-input"
 					className="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10"
 					accept=".md,.markdown,.txt"
 					onChange={handleInputChange}
@@ -403,6 +404,7 @@ export function UploadView({
 			<div className="p-1">
 				<button
 					type="button"
+					data-testid="upload-preview-button"
 					className="w-full bg-transparent border border-border text-text-secondary py-2.5 h-10 rounded-lg text-[13px] font-medium cursor-pointer transition-all duration-200 shadow-none flex items-center justify-center gap-2 mb-2 hover:enabled:bg-surface-highlight hover:enabled:border-text-tertiary hover:enabled:text-text-primary hover:enabled:shadow-[0_2px_4px_rgba(0,0,0,0.1)] disabled:bg-surface disabled:border-border disabled:text-text-tertiary disabled:cursor-not-allowed disabled:opacity-100"
 					disabled={!selectedFile}
 					onClick={onPreview}
@@ -421,6 +423,7 @@ export function UploadView({
 
 				<button
 					type="button"
+					data-testid="upload-create-button"
 					className={cn(
 						"w-full bg-linear-to-b from-primary to-[#4e5ac0] border border-white/8 border-t-white/15 text-white py-2.5 h-10 rounded-lg text-[13px] font-medium cursor-pointer transition-all duration-200 shadow-btn flex items-center justify-center gap-2",
 						"hover:enabled:-translate-y-px hover:enabled:shadow-btn-hover active:enabled:translate-y-0 active:enabled:opacity-90",
diff --git a/client/features/upload-form/components/WarningDialog.tsx b/client/features/upload-form/components/WarningDialog.tsx
index 9143d7f..b22ae2b 100644
--- a/client/features/upload-form/components/WarningDialog.tsx
+++ b/client/features/upload-form/components/WarningDialog.tsx
@@ -52,7 +52,12 @@ export function WarningDialog({
 				<Dialog.Backdrop className="fixed inset-0 bg-black/80 z-1000 backdrop-blur-sm animate-fade-in" />
 				<Dialog.Viewport className="fixed inset-0 z-1000 flex items-center justify-center p-2.5">
 					<Dialog.Popup className="w-full max-w-[400px]">
-						<div className="bg-surface border border-border rounded-xl w-full flex flex-col shadow-dialog relative p-6 animate-fade-in">
+						<div
+							className="bg-surface border border-border rounded-xl w-full flex flex-col shadow-dialog relative p-6 animate-fade-in"
+							data-testid={
+								onSecondary ? "anonymous-warning-dialog" : "warning-dialog"
+							}
+						>
 							<div className="flex items-center justify-center mb-4">
 								<div
 									className={cn(
@@ -80,6 +85,7 @@ export function WarningDialog({
 												<button
 													{...rest}
 													type="button"
+													data-testid="warning-secondary-button"
 													onClick={(e) => {
 														onClick?.(e);
 														onSecondary();
@@ -104,6 +110,7 @@ export function WarningDialog({
 											<button
 												{...rest}
 												type="button"
+												data-testid="warning-confirm-button"
 												onClick={(e) => {
 													onClick?.(e);
 													onConfirm();
diff --git a/client/features/upload-form/hooks/useUpload.ts b/client/features/upload-form/hooks/useUpload.ts
index 2ad9ef8..75d069a 100644
--- a/client/features/upload-form/hooks/useUpload.ts
+++ b/client/features/upload-form/hooks/useUpload.ts
@@ -1,7 +1,6 @@
 import { resolveThemeId, type ThemeId } from "@shared/themes/theme-registry";
 import { useMutation } from "@tanstack/react-query";
 import { useCallback, useState } from "react";
-import { useTurnstile } from "react-turnstile";
 import { trpc } from "@/utils/trpc";
 
 const DAY_MS = 24 * 60 * 60 * 1000;
@@ -55,8 +54,6 @@ export function useUpload({
 	const [uploadErrorStatus, setUploadErrorStatus] = useState<number | null>(
 		null,
 	);
-	const turnstile = useTurnstile();
-
 	const publicCreateMutation = useMutation(
 		trpc.upload.publicCreate.mutationOptions(),
 	);
@@ -109,7 +106,13 @@ export function useUpload({
 			}, 2000);
 		} finally {
 			setIsUploading(false);
-			if (import.meta.env.PROD) turnstile.reset();
+			if (import.meta.env.PROD) {
+				(
+					window as typeof window & {
+						turnstile?: { reset?: () => void };
+					}
+				).turnstile?.reset?.();
+			}
 		}
 	}, [
 		file,
@@ -120,7 +123,6 @@ export function useUpload({
 		onSuccess,
 		publicCreateMutation,
 		userCreateMutation,
-		turnstile,
 	]);
 
 	const handleReset = useCallback(() => {
diff --git a/e2e/fixtures/sample.md b/e2e/fixtures/sample.md
new file mode 100644
index 0000000..bd1397b
--- /dev/null
+++ b/e2e/fixtures/sample.md
@@ -0,0 +1,10 @@
+# Sample Title
+
+This is a Playwright smoke test document.
+
+- alpha
+- beta
+
+```ts
+console.log("hello from playwright");
+```
diff --git a/e2e/public-upload.spec.ts b/e2e/public-upload.spec.ts
new file mode 100644
index 0000000..5652b0c
--- /dev/null
+++ b/e2e/public-upload.spec.ts
@@ -0,0 +1,97 @@
+import { fileURLToPath } from "node:url";
+import { expect, test } from "@playwright/test";
+
+const fixturePath = fileURLToPath(
+	new URL("./fixtures/sample.md", import.meta.url),
+);
+const rawMarkdown = `# Sample Title
+
+This is a Playwright smoke test document.
+
+- alpha
+- beta
+
+\`\`\`ts
+console.log("hello from playwright");
+\`\`\`
+`;
+
+test.beforeEach(async ({ page }) => {
+	await page.addInitScript(() => {
+		window.localStorage.setItem("mdto.lang", "en");
+	});
+});
+
+test("home smoke shows upload controls in the initial state", async ({
+	page,
+}) => {
+	await page.goto("/");
+
+	await expect(page.getByTestId("upload-file-input")).toBeAttached();
+	await expect(page.getByTestId("upload-preview-button")).toBeDisabled();
+	await expect(page.getByTestId("upload-create-button")).toBeDisabled();
+});
+
+test("preview opens and closes for an uploaded markdown file", async ({
+	page,
+}) => {
+	await page.goto("/");
+	await page.getByTestId("upload-file-input").setInputFiles(fixturePath);
+
+	await expect(page.getByText("sample.md")).toBeVisible();
+
+	await page.getByTestId("upload-preview-button").click();
+
+	const previewFrame = page.frameLocator(
+		'[data-testid="preview-iframe-wrapper"] iframe',
+	);
+	await expect(page.getByTestId("preview-iframe-wrapper")).toBeVisible();
+	await expect(previewFrame.locator("h1")).toHaveText("Sample Title");
+	await expect(
+		previewFrame.getByText("This is a Playwright smoke test document."),
+	).toBeVisible();
+
+	await page.getByTestId("upload-preview-button").click();
+	await expect(page.getByTestId("preview-iframe-wrapper")).not.toBeVisible();
+});
+
+test("anonymous upload creates a public page and exposes the raw markdown", async ({
+	page,
+}) => {
+	await page.goto("/");
+	await page.getByTestId("upload-file-input").setInputFiles(fixturePath);
+	await page.getByRole("button", { name: "GitHub" }).click();
+
+	await page.getByTestId("upload-create-button").click();
+	await expect(page.getByTestId("anonymous-warning-dialog")).toBeVisible();
+
+	await page.getByTestId("warning-confirm-button").click();
+
+	const successUrlInput = page.getByTestId("success-url-input");
+	await expect(successUrlInput).toBeVisible();
+	const successUrl = await successUrlInput.inputValue();
+
+	expect(successUrl).toMatch(
+		/^http:\/\/127\.0\.0\.1:4173\/(1|7|E|1E)\/[A-Za-z0-9_-]{5}$/,
+	);
+	await expect(page.getByTestId("success-open-link")).toHaveAttribute(
+		"href",
+		successUrl,
+	);
+
+	await page.goto(successUrl);
+	await expect(page.locator("body")).toHaveClass(/theme-github/);
+	await expect(page.locator('link[href="/themes/github.css"]')).toHaveCount(1);
+	await expect(
+		page.getByRole("heading", { level: 1, name: "Sample Title" }),
+	).toBeVisible();
+	await expect(
+		page.getByText("This is a Playwright smoke test document."),
+	).toBeVisible();
+
+	const rawResponse = await page.request.get(`${successUrl}.md`);
+	expect(rawResponse.ok()).toBeTruthy();
+	expect(rawResponse.headers()["content-type"]).toContain("text/markdown");
+	const rawBody = await rawResponse.text();
+	expect(rawBody).toBe(rawMarkdown);
+});
diff --git a/package.json b/package.json
index 557f865..601465a 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,10 @@
 		"lint": "biome check",
 		"lint:fix": "biome check --write",
 		"test": "vitest run",
+		"test:e2e": "playwright test",
+		"test:e2e:headed": "playwright test --headed",
+		"test:e2e:ui": "playwright test --ui",
+		"test:e2e:install": "playwright install --with-deps chromium",
 		"cf-typegen": "wrangler types",
 		"lifecycle:apply": "wrangler r2 bucket lifecycle set mdto --file r2-lifecycle.json",
 		"db:generate": "drizzle-kit generate",
@@ -26,6 +30,7 @@
 		"@biomejs/biome": "2.3.11",
 		"@cloudflare/vitest-pool-workers": "^0.8.19",
 		"@libsql/client": "^0.17.0",
+		"@playwright/test": "^1.55.0",
 		"@tailwindcss/vite": "^4.1.18",
 		"@types/js-yaml": "^4.0.9",
 		"@types/mdast": "^4.0.4",
diff --git a/playwright.config.ts b/playwright.config.ts
new file mode 100644
index 0000000..08865a8
--- /dev/null
+++ b/playwright.config.ts
@@ -0,0 +1,51 @@
+import { defineConfig } from "@playwright/test";
+
+const baseURL = "http://127.0.0.1:4173";
+
+export default defineConfig({
+	testDir: "./e2e",
+	fullyParallel: false,
+	retries: process.env.CI ? 2 : 0,
+	workers: process.env.CI ? 1 : undefined,
+	reporter: process.env.CI ? [["html"], ["github"]] : [["html"], ["list"]],
+	use: {
+		baseURL,
+		trace: "retain-on-failure",
+		video: "retain-on-failure",
+		screenshot: "only-on-failure",
+	},
+	projects: [
+		{
+			name: "chromium",
+			use: {
+				browserName: "chromium",
+				headless: true,
+				viewport: {
+					width: 1280,
+					height: 900,
+				},
+			},
+		},
+	],
+	webServer: [
+		{
+			command:
+				"pnpm generate:themes && vite --host 127.0.0.1 --port 4173 --strictPort",
+			url: baseURL,
+			reuseExistingServer: !process.env.CI,
+			timeout: 120_000,
+		},
+		{
+			command:
+				"pnpm exec wrangler dev --ip 127.0.0.1 --port 8787 --local --log-level error",
+			url: "http://127.0.0.1:8787",
+			env: {
+				...process.env,
+				ENV: "dev",
+				BETTER_AUTH_URL: baseURL,
+			},
+			reuseExistingServer: !process.env.CI,
+			timeout: 120_000,
+		},
+	],
+});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b3bbaad..5c49b6b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -147,6 +147,9 @@ importers:
       '@libsql/client':
         specifier: ^0.17.0
         version: 0.17.0
+      '@playwright/test':
+        specifier: ^1.55.0
+        version: 1.59.1
       '@tailwindcss/vite':
         specifier: ^4.1.18
         version: 4.1.18(vite@7.3.1(@types/node@25.0.9)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.21.0))
@@ -1636,6 +1639,11 @@ packages:
     resolution: {integrity: sha512-R5R9tb2AXs2IRLNKLBJDynhkfmx7mX0vi8NkhZb3gUkPWHn6HXk5J8iQ/dql0U3ApfWym4kXXmBDRGO+oeOfjg==}
     engines: {node: '>=14'}
 
+  '@playwright/test@1.59.1':
+    resolution: {integrity: sha512-PG6q63nQg5c9rIi4/Z5lR5IVF7yU5MqmKaPOe0HSc0O2cX1fPi96sUQu5j7eo4gKCkB2AnNGoWt7y4/Xx3Kcqg==}
+    engines: {node: '>=18'}
+    hasBin: true
+
   '@poppinss/colors@4.1.6':
     resolution: {integrity: sha512-H9xkIdFswbS8n1d6vmRd8+c10t2Qe+rZITbbDHHkQixH5+2x1FDGmi/0K+WgWiqQFKPSlIYB7jlH6Kpfn6Fleg==}
 
@@ -2819,6 +2827,11 @@ packages:
   fs-constants@1.0.0:
     resolution: {integrity: sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==}
 
+  fsevents@2.3.2:
+    resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+
   fsevents@2.3.3:
     resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
@@ -3442,6 +3455,16 @@ packages:
     resolution: {integrity: sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==}
     engines: {node: '>=12'}
 
+  playwright-core@1.59.1:
+    resolution: {integrity: sha512-HBV/RJg81z5BiiZ9yPzIiClYV/QMsDCKUyogwH9p3MCP6IYjUFu/MActgYAvK0oWyV9NlwM3GLBjADyWgydVyg==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  playwright@1.59.1:
+    resolution: {integrity: sha512-C8oWjPR3F81yljW9o5OxcWzfh6avkVwDD2VYdwIGqTkl+OGFISgypqzfu7dOe4QNLL2aqcWBmI3PMtLIK233lw==}
+    engines: {node: '>=18'}
+    hasBin: true
+
   postcss@8.5.6:
     resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==}
     engines: {node: ^10 || ^12 || >=14}
@@ -5224,6 +5247,10 @@ snapshots:
 
   '@opentelemetry/semantic-conventions@1.39.0': {}
 
+  '@playwright/test@1.59.1':
+    dependencies:
+      playwright: 1.59.1
+
   '@poppinss/colors@4.1.6':
     dependencies:
       kleur: 4.1.5
@@ -6366,6 +6393,9 @@ snapshots:
   fs-constants@1.0.0:
     optional: true
 
+  fsevents@2.3.2:
+    optional: true
+
   fsevents@2.3.3:
     optional: true
 
@@ -7220,6 +7250,14 @@ snapshots:
 
   picomatch@4.0.3: {}
 
+  playwright-core@1.59.1: {}
+
+  playwright@1.59.1:
+    dependencies:
+      playwright-core: 1.59.1
+    optionalDependencies:
+      fsevents: 2.3.2
+
   postcss@8.5.6:
     dependencies:
       nanoid: 3.3.11
diff --git a/vite.config.ts b/vite.config.ts
index c2861a1..4e49072 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -33,10 +33,18 @@ export default defineConfig({
 				target: "http://localhost:8787",
 				changeOrigin: true,
 			},
+			"^/(1|7|E|1E|e|1e)/[a-zA-Z0-9_-]{5}(\\.md)?$": {
+				target: "http://localhost:8787",
+				changeOrigin: true,
+			},
 			"^/[^/]+/[a-zA-Z0-9_-]{4}$": {
 				target: "http://localhost:8787",
 				changeOrigin: true,
 			},
+			"^/[^/]+/[a-zA-Z0-9_-]{4}(\\.md)?$": {
+				target: "http://localhost:8787",
+				changeOrigin: true,
+			},
 		},
 	},
 	ssr: {
diff --git a/vitest.config.mts b/vitest.config.mts
index 8f00ee6..3c3fdc4 100644
--- a/vitest.config.mts
+++ b/vitest.config.mts
@@ -3,6 +3,7 @@ import {
 	defineWorkersConfig,
 	readD1Migrations,
 } from "@cloudflare/vitest-pool-workers/config";
+import { configDefaults } from "vitest/config";
 
 export default defineWorkersConfig(async () => {
 	const migrations = await readD1Migrations(path.join(__dirname, "migrations"));
@@ -15,6 +16,7 @@ export default defineWorkersConfig(async () => {
 			},
 		},
 		test: {
+			exclude: [...configDefaults.exclude, "e2e/**"],
 			poolOptions: {
 				workers: {
 					// Filtered runs intermittently fail in the Cloudflare worker pool

From f8d98eca5fea4312f1fc7eb693de3547105a2195 Mon Sep 17 00:00:00 2001
From: hhhjin <hey@hyeongjin.com>
Date: Sat, 11 Apr 2026 16:26:16 +0900
Subject: [PATCH 2/9] Make Playwright E2E build worker assets first

---
 playwright.config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/playwright.config.ts b/playwright.config.ts
index 08865a8..e53f1e7 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -37,7 +37,7 @@ export default defineConfig({
 		},
 		{
 			command:
-				"pnpm exec wrangler dev --ip 127.0.0.1 --port 8787 --local --log-level error",
+				"pnpm build && pnpm exec wrangler dev --ip 127.0.0.1 --port 8787 --local --log-level error",
 			url: "http://127.0.0.1:8787",
 			env: {
 				...process.env,

From 41a3a7347e54996a439d08c92d6f70bde1e44e0c Mon Sep 17 00:00:00 2001
From: hhhjin <hey@hyeongjin.com>
Date: Sat, 11 Apr 2026 16:29:34 +0900
Subject: [PATCH 3/9] Inject worker vars for Playwright CI

---
 playwright.config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/playwright.config.ts b/playwright.config.ts
index e53f1e7..de9555c 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -37,7 +37,7 @@ export default defineConfig({
 		},
 		{
 			command:
-				"pnpm build && pnpm exec wrangler dev --ip 127.0.0.1 --port 8787 --local --log-level error",
+				"VITE_PUBLIC_TURNSTILE_SITE_KEY='' VITE_PUBLIC_POSTHOG_HOST='' VITE_PUBLIC_POSTHOG_KEY='' pnpm build && pnpm exec wrangler dev --ip 127.0.0.1 --port 8787 --local --log-level error --var BETTER_AUTH_URL:http://127.0.0.1:4173 --var TURNSTILE_SECRET_KEY:dummy-turnstile-secret --var BETTER_AUTH_SECRET:dummy-better-auth-secret-32chars --var GITHUB_CLIENT_ID:dummy-github-client-id --var GITHUB_CLIENT_SECRET:dummy-github-client-secret",
 			url: "http://127.0.0.1:8787",
 			env: {
 				...process.env,

From 1e4f7542aa73a4185240271522e193d0bceb9283 Mon Sep 17 00:00:00 2001
From: hhhjin <hey@hyeongjin.com>
Date: Sat, 11 Apr 2026 16:32:19 +0900
Subject: [PATCH 4/9] Refine E2E URL assertion and dedupe proxy rules

---
 e2e/public-upload.spec.ts | 6 +++---
 vite.config.ts            | 8 --------
 2 files changed, 3 insertions(+), 11 deletions(-)

diff --git a/e2e/public-upload.spec.ts b/e2e/public-upload.spec.ts
index 5652b0c..d368f51 100644
--- a/e2e/public-upload.spec.ts
+++ b/e2e/public-upload.spec.ts
@@ -71,9 +71,9 @@ test("anonymous upload creates a public page and exposes the raw markdown", asyn
 	await expect(successUrlInput).toBeVisible();
 	const successUrl = await successUrlInput.inputValue();
 
-	expect(successUrl).toMatch(
-		/^http:\/\/127\.0\.0\.1:4173\/(1|7|E|1E)\/[A-Za-z0-9_-]{5}$/,
-	);
+	const url = new URL(successUrl);
+	expect(url.origin).toBe(new URL(page.url()).origin);
+	expect(url.pathname).toMatch(/^\/(1|7|E|1E)\/[A-Za-z0-9_-]{5}$/);
 	await expect(page.getByTestId("success-open-link")).toHaveAttribute(
 		"href",
 		successUrl,
diff --git a/vite.config.ts b/vite.config.ts
index 4e49072..c5f87bf 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -29,18 +29,10 @@ export default defineConfig({
 				target: "http://localhost:8787",
 				changeOrigin: true,
 			},
-			"^/(1|7|E|1E|e|1e)/[a-zA-Z0-9_-]{5}$": {
-				target: "http://localhost:8787",
-				changeOrigin: true,
-			},
 			"^/(1|7|E|1E|e|1e)/[a-zA-Z0-9_-]{5}(\\.md)?$": {
 				target: "http://localhost:8787",
 				changeOrigin: true,
 			},
-			"^/[^/]+/[a-zA-Z0-9_-]{4}$": {
-				target: "http://localhost:8787",
-				changeOrigin: true,
-			},
 			"^/[^/]+/[a-zA-Z0-9_-]{4}(\\.md)?$": {
 				target: "http://localhost:8787",
 				changeOrigin: true,

From 826b6621ba453f825cee55a21c88eeb166847557 Mon Sep 17 00:00:00 2001
From: hhhjin <hey@hyeongjin.com>
Date: Sat, 11 Apr 2026 16:42:26 +0900
Subject: [PATCH 5/9] Retry E2E file upload after hydration

---
 e2e/public-upload.spec.ts | 26 +++++++++++++++++++++-----
 1 file changed, 21 insertions(+), 5 deletions(-)

diff --git a/e2e/public-upload.spec.ts b/e2e/public-upload.spec.ts
index d368f51..6935d5c 100644
--- a/e2e/public-upload.spec.ts
+++ b/e2e/public-upload.spec.ts
@@ -1,5 +1,5 @@
 import { fileURLToPath } from "node:url";
-import { expect, test } from "@playwright/test";
+import { expect, type Page, test } from "@playwright/test";
 
 const fixturePath = fileURLToPath(
 	new URL("./fixtures/sample.md", import.meta.url),
@@ -22,6 +22,24 @@ test.beforeEach(async ({ page }) => {
 	});
 });
 
+async function attachMarkdownFile(page: Page) {
+	for (let attempt = 0; attempt < 3; attempt++) {
+		await page.getByTestId("upload-file-input").setInputFiles(fixturePath);
+
+		try {
+			await expect(page.getByText("sample.md")).toBeVisible({ timeout: 5000 });
+			await expect(page.getByTestId("upload-preview-button")).toBeEnabled();
+			await expect(page.getByTestId("upload-create-button")).toBeEnabled();
+			return;
+		} catch (error) {
+			if (attempt === 2) {
+				throw error;
+			}
+			await page.waitForTimeout(500);
+		}
+	}
+}
+
 test("home smoke shows upload controls in the initial state", async ({
 	page,
 }) => {
@@ -36,9 +54,7 @@ test("preview opens and closes for an uploaded markdown file", async ({
 	page,
 }) => {
 	await page.goto("/");
-	await page.getByTestId("upload-file-input").setInputFiles(fixturePath);
-
-	await expect(page.getByText("sample.md")).toBeVisible();
+	await attachMarkdownFile(page);
 
 	await page.getByTestId("upload-preview-button").click();
 
@@ -59,7 +75,7 @@ test("anonymous upload creates a public page and exposes the raw markdown", asyn
 	page,
 }) => {
 	await page.goto("/");
-	await page.getByTestId("upload-file-input").setInputFiles(fixturePath);
+	await attachMarkdownFile(page);
 	await page.getByRole("button", { name: "GitHub" }).click();
 
 	await page.getByTestId("upload-create-button").click();

From 77883ba3bac4f6fc1127431a9e74db16c376f2d5 Mon Sep 17 00:00:00 2001
From: hhhjin <hey@hyeongjin.com>
Date: Sat, 11 Apr 2026 17:09:40 +0900
Subject: [PATCH 6/9] Avoid Vite build race in Playwright CI

---
 playwright.config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/playwright.config.ts b/playwright.config.ts
index de9555c..d5a343d 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -37,7 +37,7 @@ export default defineConfig({
 		},
 		{
 			command:
-				"VITE_PUBLIC_TURNSTILE_SITE_KEY='' VITE_PUBLIC_POSTHOG_HOST='' VITE_PUBLIC_POSTHOG_KEY='' pnpm build && pnpm exec wrangler dev --ip 127.0.0.1 --port 8787 --local --log-level error --var BETTER_AUTH_URL:http://127.0.0.1:4173 --var TURNSTILE_SECRET_KEY:dummy-turnstile-secret --var BETTER_AUTH_SECRET:dummy-better-auth-secret-32chars --var GITHUB_CLIENT_ID:dummy-github-client-id --var GITHUB_CLIENT_SECRET:dummy-github-client-secret",
+				"mkdir -p .output && pnpm exec wrangler dev --ip 127.0.0.1 --port 8787 --local --log-level error --var BETTER_AUTH_URL:http://127.0.0.1:4173 --var TURNSTILE_SECRET_KEY:dummy-turnstile-secret --var BETTER_AUTH_SECRET:dummy-better-auth-secret-32chars --var GITHUB_CLIENT_ID:dummy-github-client-id --var GITHUB_CLIENT_SECRET:dummy-github-client-secret",
 			url: "http://127.0.0.1:8787",
 			env: {
 				...process.env,

From 232401dc966c8560c251a4d64bc0bdade87ce081 Mon Sep 17 00:00:00 2001
From: hhhjin <hey@hyeongjin.com>
Date: Sat, 11 Apr 2026 17:25:21 +0900
Subject: [PATCH 7/9] Separate E2E build from Playwright web servers

---
 .github/workflows/ci.yml | 7 +++++++
 playwright.config.ts     | 6 ++++--
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index d9b3a7d..f17c056 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -57,6 +57,13 @@ jobs:
       - name: Install Playwright browsers
         run: pnpm exec playwright install --with-deps chromium
 
+      - name: Build app for E2E
+        run: pnpm build
+        env:
+          VITE_PUBLIC_TURNSTILE_SITE_KEY: ""
+          VITE_PUBLIC_POSTHOG_HOST: ""
+          VITE_PUBLIC_POSTHOG_KEY: ""
+
       - name: Run Playwright tests
         run: pnpm test:e2e
         env:
diff --git a/playwright.config.ts b/playwright.config.ts
index d5a343d..e97e3f7 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -1,6 +1,9 @@
 import { defineConfig } from "@playwright/test";
 
 const baseURL = "http://127.0.0.1:4173";
+const workerCommand = process.env.CI
+	? "pnpm exec wrangler dev --ip 127.0.0.1 --port 8787 --local --log-level error --var BETTER_AUTH_URL:http://127.0.0.1:4173 --var TURNSTILE_SECRET_KEY:dummy-turnstile-secret --var BETTER_AUTH_SECRET:dummy-better-auth-secret-32chars --var GITHUB_CLIENT_ID:dummy-github-client-id --var GITHUB_CLIENT_SECRET:dummy-github-client-secret"
+	: "VITE_PUBLIC_TURNSTILE_SITE_KEY='' VITE_PUBLIC_POSTHOG_HOST='' VITE_PUBLIC_POSTHOG_KEY='' pnpm build && pnpm exec wrangler dev --ip 127.0.0.1 --port 8787 --local --log-level error --var BETTER_AUTH_URL:http://127.0.0.1:4173 --var TURNSTILE_SECRET_KEY:dummy-turnstile-secret --var BETTER_AUTH_SECRET:dummy-better-auth-secret-32chars --var GITHUB_CLIENT_ID:dummy-github-client-id --var GITHUB_CLIENT_SECRET:dummy-github-client-secret";
 
 export default defineConfig({
 	testDir: "./e2e",
@@ -36,8 +39,7 @@ export default defineConfig({
 			timeout: 120_000,
 		},
 		{
-			command:
-				"mkdir -p .output && pnpm exec wrangler dev --ip 127.0.0.1 --port 8787 --local --log-level error --var BETTER_AUTH_URL:http://127.0.0.1:4173 --var TURNSTILE_SECRET_KEY:dummy-turnstile-secret --var BETTER_AUTH_SECRET:dummy-better-auth-secret-32chars --var GITHUB_CLIENT_ID:dummy-github-client-id --var GITHUB_CLIENT_SECRET:dummy-github-client-secret",
+			command: workerCommand,
 			url: "http://127.0.0.1:8787",
 			env: {
 				...process.env,

From 5e79c02f4dc2fb1b27dc2634f2e68044bc61b29e Mon Sep 17 00:00:00 2001
From: hhhjin <hey@hyeongjin.com>
Date: Sat, 11 Apr 2026 17:35:25 +0900
Subject: [PATCH 8/9] Pass ENV binding to wrangler in Playwright CI

---
 playwright.config.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/playwright.config.ts b/playwright.config.ts
index e97e3f7..9b25403 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -2,8 +2,8 @@ import { defineConfig } from "@playwright/test";
 
 const baseURL = "http://127.0.0.1:4173";
 const workerCommand = process.env.CI
-	? "pnpm exec wrangler dev --ip 127.0.0.1 --port 8787 --local --log-level error --var BETTER_AUTH_URL:http://127.0.0.1:4173 --var TURNSTILE_SECRET_KEY:dummy-turnstile-secret --var BETTER_AUTH_SECRET:dummy-better-auth-secret-32chars --var GITHUB_CLIENT_ID:dummy-github-client-id --var GITHUB_CLIENT_SECRET:dummy-github-client-secret"
-	: "VITE_PUBLIC_TURNSTILE_SITE_KEY='' VITE_PUBLIC_POSTHOG_HOST='' VITE_PUBLIC_POSTHOG_KEY='' pnpm build && pnpm exec wrangler dev --ip 127.0.0.1 --port 8787 --local --log-level error --var BETTER_AUTH_URL:http://127.0.0.1:4173 --var TURNSTILE_SECRET_KEY:dummy-turnstile-secret --var BETTER_AUTH_SECRET:dummy-better-auth-secret-32chars --var GITHUB_CLIENT_ID:dummy-github-client-id --var GITHUB_CLIENT_SECRET:dummy-github-client-secret";
+	? "pnpm exec wrangler dev --ip 127.0.0.1 --port 8787 --local --log-level error --var ENV:dev --var BETTER_AUTH_URL:http://127.0.0.1:4173 --var TURNSTILE_SECRET_KEY:dummy-turnstile-secret --var BETTER_AUTH_SECRET:dummy-better-auth-secret-32chars --var GITHUB_CLIENT_ID:dummy-github-client-id --var GITHUB_CLIENT_SECRET:dummy-github-client-secret"
+	: "VITE_PUBLIC_TURNSTILE_SITE_KEY='' VITE_PUBLIC_POSTHOG_HOST='' VITE_PUBLIC_POSTHOG_KEY='' pnpm build && pnpm exec wrangler dev --ip 127.0.0.1 --port 8787 --local --log-level error --var ENV:dev --var BETTER_AUTH_URL:http://127.0.0.1:4173 --var TURNSTILE_SECRET_KEY:dummy-turnstile-secret --var BETTER_AUTH_SECRET:dummy-better-auth-secret-32chars --var GITHUB_CLIENT_ID:dummy-github-client-id --var GITHUB_CLIENT_SECRET:dummy-github-client-secret";
 
 export default defineConfig({
 	testDir: "./e2e",

From e0a2fa6fd14003663f7cb33dd202fdca462f63e9 Mon Sep 17 00:00:00 2001
From: hhhjin <hey@hyeongjin.com>
Date: Sat, 11 Apr 2026 17:53:44 +0900
Subject: [PATCH 9/9] Remove redundant Playwright worker env overrides

---
 playwright.config.ts | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/playwright.config.ts b/playwright.config.ts
index 9b25403..639d888 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -41,11 +41,6 @@ export default defineConfig({
 		{
 			command: workerCommand,
 			url: "http://127.0.0.1:8787",
-			env: {
-				...process.env,
-				ENV: "dev",
-				BETTER_AUTH_URL: baseURL,
-			},
 			reuseExistingServer: !process.env.CI,
 			timeout: 120_000,
 		},