2.8.0: manual theme toggle, inspector, mid trial activation

Closes #467
feat: manual theme toggle button
fix(nested getter bug) feat(add inspector)
feat(context menu opens at component) chore(migrate to playwright)
chore: suppress warnings in build output
feat: mid trial license activation
test: unskip v2 tests

Author: HugoDF

.github/workflows/build.yml

@@ -32,8 +32,6 @@ jobs:
         cache: 'pnpm'
     - name: install
       run: pnpm install --frozen-lockfile
-      env:
-        CYPRESS_INSTALL_BINARY: "0"
     - name: build
       run: pnpm mainline
     - name: Archive production artifacts
@@ -47,22 +45,9 @@ jobs:
       run: pnpm typecheck
     - name: check formatting
       run: pnpm run check:format
-    # see https://github.com/bahmutov/cypress-gh-action-split-install
-    - run: pnpm cy:cache:check
-    # restore / cache the binary ourselves on Linux
-    # see https://github.com/actions/cache
-    - name: Cache Cypress
-      id: cache-cypress
-      uses: actions/cache@v4
-      with:
-        path: ~/.cache/Cypress
-        key: cypress-cache-v1-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
-    # install Cypress binary
-    - run: pnpm cy:bin:install
-    - name: Devtools@v2 E2E
-      uses: cypress-io/github-action@v6
-      with:
-        start: pnpm start
-        command: pnpm run cy:run
-        working-directory: packages/browser-extension
-        install: false
+    - name: Install Playwright browsers
+      run: pnpm exec playwright install chromium --with-deps
+      working-directory: packages/browser-extension
+    - name: E2E tests
+      run: pnpm pw:run
+      working-directory: packages/browser-extension

AGENTS.md

@@ -23,28 +23,18 @@ As the last step of any plan, you **MUST** run the following checks and ensure t
 - `pnpm run typecheck`
 - `pnpm t` (unit tests)
 
-When making changes to the UI, you **SHOULD** propose to run the cypress tests (see next section).
+When making changes to the UI, you **SHOULD** propose to run the Playwright tests (see next section).
 
 ## Commit message
 
 You **MUST** include the full user-provided prompt as part of commit messages.
 
-## Running Cypress Tests
+## Running Playwright Tests
 
-To run the Cypress tests for the `browser-extension` package, you **SHOULD** use the `jules-test` script. This script will start the development server and then run the tests.
-
-To run the Cypress tests you **MUST** run from the root of the project (`/app` for Jules),
+To run the Playwright E2E tests for the `browser-extension` package, run from the root of the project:
 
 ```bash
-pnpm test:e2e
+pnpm pw:run
 ```
 
-**Note for agent Jules:** You **SHOULD** be aware that when working in the shell, the current working directory is often `/app/packages/browser-extension`. If you are having trouble with file paths, you **SHOULD** run `pwd` to confirm your location.
-
-This will run all the Cypress tests in headless mode.
-
-**Note:** If you are running the tests in a headless environment, you **SHOULD** be aware that you may need to install `xvfb`. On Debian-based systems, you can install it with:
-
-```bash
-sudo apt-get update && sudo apt-get install -y xvfb
-```
+This will start the dev server automatically and run all tests in headless mode.

package.json

@@ -13,21 +13,18 @@
     "sa": "pnpm mainline",
     "mainline": "rm -rf dist && pnpm build && pnpm package",
     "test": "pnpm -r test",
-    "test:e2e": "pnpm -r jules-test",
-    "cy:run": "pnpm --filter=browser-extension cy:run",
-    "cy:open": "pnpm --filter=browser-extension cy:open",
-    "format": "prettier './{packages/**/,cypress/**/*,lib/}*.{js,ts,tsx,html,css}' --write",
-    "check:format": "prettier './{packages/**/,cypress/**/*,}*.{js,ts,tsx,html,css}' -c",
+    "pw:run": "pnpm --filter=browser-extension pw:run",
+    "pw:open": "pnpm --filter=browser-extension pw:open",
+    "format": "prettier './{packages/**/,lib/}*.{js,ts,tsx,html,css}' --write",
+    "check:format": "prettier './{packages/**/,}*.{js,ts,tsx,html,css}' -c",
     "check:firefox": "pnpm ea && web-ext lint --source-dir=dist/firefox-ext",
     "typecheck": "pnpm --filter=browser-extension typecheck",
     "package": "pnpm pkg:chrome && pnpm pkg:firefox && pnpm archive:v2",
     "pkg:chrome": "web-ext build --source-dir=dist/browser-extension --artifacts-dir=./dist/chrome-v2",
     "pkg:firefox": "web-ext build --source-dir=dist/firefox-ext --artifacts-dir=./dist/firefox-v2",
     "archive:v2": "git archive -o ./dist/alpine-devtools-source-archive-v2.zip HEAD:packages/browser-extension",
     "ff:open": "web-ext run -s=./dist/firefox-ext",
-    "ff:dev": "web-ext run -s=./dist/browser-extension",
-    "cy:cache:check": "pnpm --filter=browser-extension exec cypress cache path && pnpm --filter=browser-extension exec cypress cache list",
-    "cy:bin:install": "pnpm --filter=browser-extension exec cypress install && pnpm --filter=browser-extension exec cypress cache list"
+    "ff:dev": "web-ext run -s=./dist/browser-extension"
   },
   "license": "MIT",
   "workspaces": [

packages/browser-extension/.gitignore

@@ -1,2 +1,3 @@
 node_modules
-dist
+dist
+test-results

packages/browser-extension/AGENTS.md

@@ -34,7 +34,7 @@ Here is a breakdown of the important files and directories in the `packages/brow
 
 - **`assets/`**: This directory contains static assets like images, HTML files, and icons.
 
-- **`cypress/`**: This directory contains the end-to-end tests for the extension.
+- **`tests/`**: This directory contains the Playwright end-to-end tests for the extension.
 
 - **`package.json`**: This file lists the project's dependencies and scripts.
 

packages/browser-extension/build.js

@@ -41,6 +41,12 @@ async function buildAll() {
       sourcemap: true,
       target: 'esnext',
       platform: 'browser',
+      define: {
+        'import.meta.env.DEV': JSON.stringify(!isProd),
+        'import.meta.env.VITE_MAINLINE_PUBLISH': JSON.stringify(
+          JSON.stringify(process.env.VITE_MAINLINE_PUBLISH === 'true'),
+        ),
+      },
     });
 
     const alpineBuild = await copyFile(