2.7.0 filter component list, history flyout available for free users

feat: filter component list
feat: history flyout available for free users
data: emit metric on license activation
data: purchase link metric
feat: update post-trial messaging to include all features and hide image in post-trial message
- 'Trial expires in...' text is a clickable link
- purchase before trial link
chore: migrate project to pnpm
chore(deps-dev): bump the dev-dependencies group across 1 directory with 8 updates (#66)
chore(deps): bump the prod-dependencies group with 2 updates (#61)
chore: skip git hooks install on Jules VMs

Author: HugoDF

.github/workflows/build.yml

@@ -16,53 +16,53 @@ jobs:
 
     runs-on: ubuntu-latest
 
-    strategy:
-      matrix:
-        node-version: [22.x]
-
     env:
       CI: true
 
     steps:
     - uses: actions/checkout@v4
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v1
+    - name: Install pnpm
+      uses: pnpm/action-setup@v2
+      with:
+        version: 10
+    - name: Use Node.js 24.x
+      uses: actions/setup-node@v3
       with:
-        node-version: ${{ matrix.node-version }}
+        node-version: 24.x
+        cache: 'pnpm'
     - name: install
-      run: npm ci
+      run: pnpm install --frozen-lockfile
       env:
         CYPRESS_INSTALL_BINARY: "0"
     - name: build
-      # need npm run because we have shell commands inside this script
-      run: npm run package
+      run: pnpm mainline
     - name: Archive production artifacts
       uses: actions/upload-artifact@v4
       with:
         name: alpine-devtools
         path: dist
     - name: unit tests
-      run: node --run test
+      run: pnpm test
     - name: typecheck
-      run: node --run typecheck
+      run: pnpm typecheck
     - name: check formatting
-      run: node --run check:format
+      run: pnpm run check:format
     # see https://github.com/bahmutov/cypress-gh-action-split-install
-    - run: npx cypress cache path && npx cypress cache list
+    - 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('**/package.json') }}
+        key: cypress-cache-v1-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
     # install Cypress binary
-    - run: npx cypress install && npx cypress cache list
+    - run: pnpm cy:bin:install
     - name: Devtools@v2 E2E
       uses: cypress-io/github-action@v6
       with:
-        start: node --run start
-        command: node --run cy:run
+        start: pnpm start
+        command: pnpm run cy:run
         working-directory: packages/browser-extension
         install: false

AGENTS.md

@@ -19,20 +19,24 @@ We also use `basecoat-ui` for some base styles. You can find more information ab
 
 As the last step of any plan, you **MUST** run the following checks and ensure they pass
 
-- `npm run format` (run formatter)
-- `npm run typecheck`
-- `npm t` (unit tests)
+- `pnpm run format` (run formatter)
+- `pnpm run typecheck`
+- `pnpm t` (unit tests)
 
 When making changes to the UI, you **SHOULD** propose to run the cypress tests (see next section).
 
+## Commit message
+
+You **MUST** include the full user-provided prompt as part of commit messages.
+
 ## Running Cypress 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),
 
 ```bash
-npm run --prefix=packages/browser-extension jules-test
+pnpm test:e2e
 ```
 
 **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.

README.md

@@ -57,14 +57,14 @@ Unlike other frameworks, Alpine does not include named components. Therefore by
 
 ### Prerequisites
 
-- Node ^22.x
-- npm ^10.x
+- Node ^24.x
+- pnpm ^10.x
 
 ### Chrome
 
 1. Clone this repo
-2. Run `npm install`
-3. Run `npm run build:dev` (or `npm run build` to test a production build)
+2. Run `pnpm install`
+3. Run `pnpm build:dev` (or `pnpm build` to test a production build)
 4. Load unpacked extension inside [dist/chrome](./dist/chrome) directory
 5. Open any HTML file that imports Alpine.js then inspect with Chrome DevTools. You should now have an Alpine.js panel available.
 
@@ -84,21 +84,21 @@ A devtools simulator is provided in order to run tests and have an easier develo
 Note that when using the simulator all Chrome/Firefox devtools/Extension APIs are faked so it's useful if working on the Extension Backend (which runs in the end user's window, see `packages/shell-chrome/src/backend.js`) or the Alpine.js app which runs in the devtools panel (entrypoint: `packages/shell-chrome/src/devtools/app.js`).
 
 1. Clone this repo
-2. Run `npm install`
-3. Run `npm start`
-4. Open [http://locahost:8080](http://locahost:8080) (default port is 8080, you can override the port using the `PORT` environment variable. eg. `PORT=5000 npm start` will start the simulator on [http://localhost:5000](http://localhost:5000))
+2. Run `pnpm install`
+3. Run `pnpm start`
+4. Open [http://locahost:8080](http://locahost:8080) (default port is 8080, you can override the port using the `PORT` environment variable. eg. `PORT=5000 pnpm start` will start the simulator on [http://localhost:5000](http://localhost:5000))
 5. You'll see a page with our sample Alpine.js app, [example.html](./packages/simulator/example.html), running in the top half of the screen and the [devtools simulator](./packages/simulator/dev.js) running in the bottom half of the screen.
 
 ### Testing
 
 We have 2 levels of tests in the project:
 
 - unit tests in [./tests](./tests), written and run with `node:test`
-    - The command to run them is `npm test`.
+  - The command to run them is `pnpm test`.
 - E2E tests that run against the devtools simulator, in [./cypress](./cypress), using [Cypress](https://cypress.io).
-    - The command to run Cypress tests is `npm run cy:run`
-    - The command to open the Cypress UI is `npm run cy:open`
-    - **Note** in order to run any Cypress tests, you'll need the simulator running (see [Running the Alpine.js devtools simulator](#running-the-alpinejs-devtools-simulator)).
+  - The command to run Cypress tests is `pnpm cy:run`
+  - The command to open the Cypress UI is `pnpm cy:open`
+  - **Note** in order to run any Cypress tests, you'll need the simulator running (see [Running the Alpine.js devtools simulator](#running-the-alpinejs-devtools-simulator)).
 
 ### Formatting/Linting
 

lint-staged.config.js

@@ -0,0 +1,5 @@
+// lint-staged.config.js
+export default {
+  '*.{js,ts,tsx,css,md,html,json}': 'prettier --write',
+  '**/*.{ts,tsx}': () => 'pnpm typecheck',
+};