feat(new-deepnotes): Playwright demo session E2E, CI migrate and dev.vars, plan progress

Author: gustavotoyota

.github/workflows/new-deepnotes-ci.yml

@@ -51,6 +51,12 @@ jobs:
       - name: Install
         run: pnpm install --frozen-lockfile
 
+      - name: API e2e vars (Wrangler)
+        run: cp e2e/dev.vars.ci apps/api-worker/.dev.vars
+
+      - name: Migrate Postgres (app DB for worker + e2e)
+        run: pnpm db:migrate
+
       - name: Lint
         run: pnpm lint
 
@@ -65,3 +71,9 @@ jobs:
 
       - name: Build
         run: pnpm build
+
+      - name: Install Playwright (Chromium)
+        run: pnpm --filter @deepnotes/web exec playwright install chromium --with-deps
+
+      - name: E2E (Playwright)
+        run: pnpm test:e2e

new-deepnotes/PLAN_PROGRESS.md

@@ -2,7 +2,7 @@
 
 Checklist for [docs/RESTART_PLAN.md](../docs/RESTART_PLAN.md). **Procedure-level map:** [docs/TRPC_REST_MAP.md](./docs/TRPC_REST_MAP.md) (legacy tRPC + app-server WebSocket rows are marked **implemented** or **removed**).
 
-**Last reviewed:** 2026-04-27
+**Last reviewed:** 2026-04-28
 
 ---
 
@@ -14,7 +14,7 @@ Checklist for [docs/RESTART_PLAN.md](../docs/RESTART_PLAN.md). **Procedure-level
 | **1** — Legacy repo hygiene | **Optional** | Only if still editing the old monorepo. |
 | **2** — Repo bootstrap | **Done** | Turbo, CI, template DB tests, deploy notes. |
 | **3** — REST + Drizzle | **In progress** | All **HTTP** items in TRPC_REST_MAP through **slice 10** (`…/collab-updates`), **Stripe**, **2FA**, membership, crypto bootstrap routes. **Not started:** **live Yjs collab WebSocket** and **realtime** (legacy `realtime-server` / msgpackr — separate from collab). |
-| **4** — Client MVP | **In progress** | Auth, register (E2EE), pages list, Tiptap+Yjs+REST collab, groups + invites/join E2EE, notifications (list/read; **no** body decrypt), MSW contract smoke, ESLint import walls. **Next:** Playwright (or broader MSW) for cookies; optional demo keyring for CI. |
+| **4** — Client MVP | **In progress** | Auth, register (E2EE), pages list, Tiptap+Yjs+REST collab, groups + invites/join E2EE, notifications (list/read; **no** body decrypt), MSW contract smoke, ESLint import walls. **Done:** Playwright smoke for **demo** session (httpOnly tokens, `loggedIn` hint, reload → bootstrap/refresh). **Next:** password-login E2E (registered user fixture or flow); optional demo keyring assertions; marketing `vite-ssg` per plan. |
 | **5** — Cutover | **Not started** | Canary, retire `/trpc` when safe. |
 
 ---
@@ -62,9 +62,20 @@ Cross-check [TRPC_REST_MAP.md](./docs/TRPC_REST_MAP.md): **sessions**, **users.a
 - [x] `/groups`, `/groups/:id`, invite landing `/invite`, join `/join`, membership crypto  
 - [x] `/notifications` (ciphertext not decrypted in UI)  
 - [x] MSW: `GET /api/health`, `GET /api/users/me`; ESLint `no-restricted-imports` on `src/**/*.ts`  
-- [ ] Playwright (or equivalent) E2E for httpOnly session  
+- [x] Playwright: demo session against real `wrangler dev` + Vite (see **E2E / Playwright** below)  
+- [ ] Password-login (or registered-user) Playwright path; optional/crypto assertions beyond cookies  
 - [ ] Capacitor / Tauri after web MVP  
 
+### E2E / Playwright (detail)
+
+| Item | Detail |
+|------|--------|
+| **Spec** | [`apps/web/e2e/session.spec.ts`](./apps/web/e2e/session.spec.ts) — “Try demo”, assert `accessToken` / `refreshToken` **not** in `document.cookie`, `loggedIn` hint present, **reload** then still “Signed in” (refresh + `/me`). |
+| **Config** | [`apps/web/playwright.config.ts`](./apps/web/playwright.config.ts) — `webServer`: `pnpm --filter @deepnotes/api-worker dev` (waits on `GET /api/health`) + `pnpm --filter @deepnotes/web dev` on `127.0.0.1:5174`. |
+| **CI secrets file** | [`e2e/dev.vars.ci`](./e2e/dev.vars.ci) — copied to `apps/api-worker/.dev.vars` in GitHub Actions (non-production test-only values, same shape as `account-flows.integration.test.ts`). |
+| **CI DB** | Job runs `pnpm db:migrate` on the service Postgres **before** lint/test so the worker’s Hyperdrive DB matches the session integration template schema. |
+| **Local** | Docker Compose Postgres on **5433** (matches `wrangler.toml` `localConnectionString`), `pnpm db:migrate`, copy `e2e/dev.vars.ci` → `apps/api-worker/.dev.vars`, then `pnpm test:e2e` from repo root. |
+
 ---
 
 ## Phase 2 & 5
@@ -78,18 +89,19 @@ Cross-check [TRPC_REST_MAP.md](./docs/TRPC_REST_MAP.md): **sessions**, **users.a
 ## Tests & tooling (maintenance)
 
 | Package | What runs | Notes |
-|---------|-----------|--------|
+|---------|-----------|-------|
 | `@deepnotes/session` | **`account-flows.integration.test.ts`** — **20** `it()` when `DATABASE_URL` + admin URL set; clones template DB | Account, 2FA, groups/pages, prefs, slices 4–10, membership, collab REST |
 | `@deepnotes/db` | `template-db.test.ts` — **6** FK/clone cases | |
 | `@deepnotes/api` | `openapi.test.ts`, `schemas/users.test.ts`, … | |
 | `@deepnotes/api-worker` | **`index.test.ts`** — **71** route × 503 matrix + **1** extra `email-verification/confirm` 503 | Totals **72** env-missing smoke cases |
-| `@deepnotes/web` | Vitest + happy-dom; composable/API tests | Extend MSW/login matrix; Playwright later |
+| `@deepnotes/web` | Vitest + happy-dom; composable/API tests | MSW contracts; extend login matrix |
+| **Playwright** | `pnpm test:e2e` (root) → `@deepnotes/web` **1** spec (demo cookies + reload) | Needs migrated DB + `.dev.vars`; CI installs Chromium only |
 
 Run session integration (from repo root):  
 `pnpm --filter @deepnotes/session exec vitest run src/account-flows.integration.test.ts`  
 (requires `new-deepnotes/.env` with DB URLs as in package README.)
 
-**Follow-ups:** Redis failed-login integration; expired refresh JWT; optional OpenAPI snapshot CI drift check.
+**Follow-ups:** Redis failed-login integration; expired refresh JWT; optional OpenAPI snapshot CI drift check; second Playwright spec for email/password registration + login.
 
 ---
 
@@ -102,14 +114,15 @@ Run session integration (from repo root):
 - [ ] Stripe (and other high-risk paths): deeper automated coverage where secrets allow.  
 - [ ] Cloudflare staging: Hyperdrive + Postgres + Redis + chosen WS topology load-tested.  
 - [x] Web: Vitest in CI; restricted imports from `apps/web` TS.  
-- [ ] E2E smoke (cookies) before calling client MVP “done”.  
+- [ ] E2E smoke **complete for client MVP:** demo path [x]; password/session edge cases [ ].  
 
 ---
 
 ## Short log (newest first)
 
 | Date | Change |
 |------|--------|
+| 2026-04-28 | Playwright demo E2E (`session.spec.ts`), `e2e/dev.vars.ci`, CI: migrate app DB, copy `.dev.vars`, Chromium + `pnpm test:e2e`; root `test:e2e`; tsconfig.node includes playwright + e2e. |
 | 2026-04-27 | Compacted PLAN_PROGRESS; verified legacy map vs `TRPC_REST_MAP` — HTTP + listed WS flows migrated; added **realtime** vs **collab WS** distinction, optional gaps (public page list, vite-ssg, scheduler). Corrected counts: **20** session integration `it()`, **72** worker 503 smokes (71-route matrix + confirm). |
 | 2026-04-27 | MSW contract tests + ESLint restricted imports on web `*.ts`. |
 | 2026-04-27 | Tiptap + Yjs editor; invite/join E2EE + crypto bootstrap API; members detail UI; notifications thin SPA; groups overview; collab REST + `passwordSalt`; Stripe. |

new-deepnotes/apps/web/e2e/session.spec.ts

@@ -0,0 +1,30 @@
+import { expect, test } from "@playwright/test";
+
+test.describe("Demo session cookies (httpOnly + bootstrap)", () => {
+  test("demo login stays signed in after reload; tokens not in document.cookie", async ({
+    page,
+  }) => {
+    await page.goto("/login");
+    await page.getByRole("button", { name: "Try demo" }).click();
+
+    await expect(page.getByRole("heading", { name: "Signed in" })).toBeVisible({
+      timeout: 60_000,
+    });
+
+    const cookieReport = await page.evaluate(() => ({
+      documentCookie: document.cookie,
+      hasAccessInDoc: document.cookie.includes("accessToken"),
+      hasRefreshInDoc: document.cookie.includes("refreshToken"),
+      hasLoggedInHint: document.cookie.includes("loggedIn"),
+    }));
+
+    expect(cookieReport.hasAccessInDoc).toBe(false);
+    expect(cookieReport.hasRefreshInDoc).toBe(false);
+    expect(cookieReport.hasLoggedInHint).toBe(true);
+
+    await page.reload();
+    await expect(page.getByRole("heading", { name: "Signed in" })).toBeVisible({
+      timeout: 60_000,
+    });
+  });
+});

new-deepnotes/apps/web/package.json

@@ -9,6 +9,7 @@
     "dev": "vite",
     "lint": "eslint vite.config.ts \"src/**/*.ts\"",
     "test": "vitest run",
+    "test:e2e": "playwright test",
     "typecheck": "vue-tsc --noEmit -p tsconfig.app.json",
     "preview": "vite preview"
   },
@@ -36,6 +37,7 @@
     "yjs": "^13.6.30"
   },
   "devDependencies": {
+    "@playwright/test": "^1.52.0",
     "@types/node": "^22.14.1",
     "@vitejs/plugin-vue": "^5.2.3",
     "@vue/test-utils": "^2.4.6",

new-deepnotes/apps/web/playwright.config.ts

@@ -0,0 +1,39 @@
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+import { defineConfig, devices } from "@playwright/test";
+
+const appDir = path.dirname(fileURLToPath(import.meta.url));
+/** Monorepo root `new-deepnotes/` (parent of `apps/`). */
+const workspaceRoot = path.resolve(appDir, "..", "..");
+
+export default defineConfig({
+  testDir: "./e2e",
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 1 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: "list",
+  use: {
+    baseURL: "http://127.0.0.1:5174",
+    trace: "on-first-retry",
+    ...devices["Desktop Chrome"],
+  },
+  webServer: [
+    {
+      command: "pnpm --filter @deepnotes/api-worker dev",
+      cwd: workspaceRoot,
+      url: "http://127.0.0.1:8787/api/health",
+      timeout: 180_000,
+      reuseExistingServer: !process.env.CI,
+    },
+    {
+      command:
+        "pnpm --filter @deepnotes/web dev -- --host 127.0.0.1 --port 5174 --strictPort",
+      cwd: workspaceRoot,
+      url: "http://127.0.0.1:5174/",
+      timeout: 180_000,
+      reuseExistingServer: !process.env.CI,
+    },
+  ],
+});

new-deepnotes/apps/web/tsconfig.node.json

@@ -1,13 +1,13 @@
 {
   "compilerOptions": {
     "target": "ES2022",
-    "lib": ["ES2023"],
+    "lib": ["ES2023", "DOM"],
     "module": "ESNext",
     "moduleResolution": "Bundler",
     "strict": true,
     "skipLibCheck": true,
     "noEmit": true,
     "verbatimModuleSyntax": true
   },
-  "include": ["vite.config.ts"]
+  "include": ["vite.config.ts", "playwright.config.ts", "e2e/**/*.ts"]
 }

new-deepnotes/e2e/dev.vars.ci

@@ -0,0 +1,13 @@
+# Non-secret values for CI and local e2e only (matches @deepnotes/session integration test shape).
+# Copy to apps/api-worker/.dev.vars before `pnpm test:e2e`, or let CI copy it.
+ACCESS_SECRET=test-access-secret-min-32-chars-long!!
+REFRESH_SECRET=test-refresh-secret-min-32-chars-long!!
+USER_EMAIL_SECRET=test-user-email-secret-hmac-key!!
+USER_EMAIL_ENCRYPTION_KEY=AQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQE=
+USER_REHASHED_LOGIN_HASH_ENCRYPTION_KEY=AgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgI=
+USER_AUTHENTICATOR_SECRET_ENCRYPTION_KEY=AwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwM=
+USER_RECOVERY_CODES_ENCRYPTION_KEY=BAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQ=
+GROUP_REHASHED_PASSWORD_HASH_ENCRYPTION_KEY=BQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQU=
+DEV=true
+SEND_EMAILS=false
+PUBLIC_APP_URL=http://127.0.0.1:5174

new-deepnotes/package.json

@@ -12,6 +12,7 @@
     "lint": "turbo run lint",
     "typecheck": "turbo run typecheck",
     "test": "turbo run test",
+    "test:e2e": "pnpm --filter @deepnotes/web run test:e2e",
     "db:generate": "pnpm --filter @deepnotes/db exec drizzle-kit generate",
     "db:migrate": "pnpm --filter @deepnotes/db exec drizzle-kit migrate",
     "db:studio": "pnpm --filter @deepnotes/db exec drizzle-kit studio",