Switch front-end from yarn to pnpm; volta to vite-plus

.claude/skills/run-bloom/SKILL.md

@@ -18,13 +18,13 @@ verified quick path.
 
 ## Prerequisites
 
-Dev machines already have: volta (provides node + yarn 1.22), .NET SDK 10,
-WebView2 runtime. On a machine missing dependencies, run `./init.sh`
-(fetches C# deps, yarn installs, initial `yarn build`) — documented but not
-re-verified here; a failed C# build with CS0246 errors (missing
-`PodcastUtilities` etc.) means `./init.sh` is needed.
+Dev machines already have: node 22 + pnpm 11.5.2 (see .node-version and the
+packageManager field), .NET SDK 10, WebView2 runtime. On a machine missing
+dependencies, run `./init.sh` (fetches C# deps, pnpm installs, initial
+`pnpm build`) — documented but not re-verified here; a failed C# build with
+CS0246 errors (missing `PodcastUtilities` etc.) means `./init.sh` is needed.
 
-Never run `yarn build` while a watch/dev build is running (see AGENTS.md).
+Never run `pnpm build` while a watch/dev build is running (see AGENTS.md).
 Never launch a previously built `Bloom.exe` directly — it can be stale.
 
 ## Step 1: Is Bloom already running?
@@ -160,5 +160,5 @@ the whole flow down.
 Exe-backed Playwright suite (not re-run this session; see
 `.github/skills/bloom-automation/SKILL.md` for detail): from
 `src/BloomBrowserUI/react_components/component-tester`,
-`BLOOM_HTTP_PORT=<httpPort> yarn playwright test --config playwright.bloom-exe.config.ts`.
-TypeScript unit tests: `yarn test` in `src/BloomBrowserUI` (Vitest).
+`BLOOM_HTTP_PORT=<httpPort> pnpm playwright test --config playwright.bloom-exe.config.ts`.
+TypeScript unit tests: `pnpm test` in `src/BloomBrowserUI` (Vitest).

.claude/skills/run-bloom/screenshotBloom.mjs

@@ -100,7 +100,7 @@ const loadPlaywright = () => {
     } catch (error) {
         const message = error instanceof Error ? error.message : String(error);
         throw new Error(
-            `Could not load Playwright from ${componentTesterDir}. Run 'yarn install' in src/BloomBrowserUI/react_components/component-tester if dependencies are missing. Original error: ${message}`,
+            `Could not load Playwright from ${componentTesterDir}. Run 'pnpm install' in src/BloomBrowserUI/react_components/component-tester if dependencies are missing. Original error: ${message}`,
         );
     }
 };

.github/skills/bloom-automation/SKILL.md

@@ -147,7 +147,7 @@ Notes:
 6. Use `node .github/skills/bloom-automation/switchWorkspaceTab.mjs --http-port <httpPort> --tab <collection|edit|publish>` for top bar interactions, or attach another confirmed client to `http://localhost:<cdpPort>` if you need lower-level inspection.
 7. Manipulate the UI by clicking or typing in the attached browser context. Do not use Bloom API endpoints to simulate the user action itself.
 8. Use browser-native inspection for DOM, console, and network.
-9. If the task is test-related, run the exe-backed Playwright suite with `BLOOM_HTTP_PORT=<httpPort> yarn playwright test --config playwright.bloom-exe.config.ts`.
+9. If the task is test-related, run the exe-backed Playwright suite with `BLOOM_HTTP_PORT=<httpPort> pnpm exec playwright test --config playwright.bloom-exe.config.ts`.
 
 ## Running Bloom Workflow
 Use this when the user says to reuse the already-running Bloom.
@@ -217,8 +217,8 @@ Reason: the current MCP wrappers in this environment control their own browser i
 
 ## Tests
 - Run from `src/BloomBrowserUI/react_components/component-tester`.
-- Use `BLOOM_HTTP_PORT=<httpPort> yarn playwright test --config playwright.bloom-exe.config.ts`.
-- Run one file with `BLOOM_HTTP_PORT=<httpPort> yarn playwright test --config playwright.bloom-exe.config.ts ../TopBar/component-tests/bloom-exe-tabs.uitest.ts`.
+- Use `BLOOM_HTTP_PORT=<httpPort> pnpm exec playwright test --config playwright.bloom-exe.config.ts`.
+- Run one file with `BLOOM_HTTP_PORT=<httpPort> pnpm exec playwright test --config playwright.bloom-exe.config.ts ../TopBar/component-tests/bloom-exe-tabs.uitest.ts`.
 
 These tests attach to the real Bloom.exe target over CDP and verify tab switching plus console and network observation.
 

.github/skills/bloom-automation/dismissProblemDialog.mjs

@@ -111,7 +111,7 @@ const loadPlaywright = () => {
     } catch (error) {
         const message = error instanceof Error ? error.message : String(error);
         throw new Error(
-            `Could not load Playwright from ${componentTesterDir}. Run 'yarn install' there if dependencies are missing. Original error: ${message}`,
+            `Could not load Playwright from ${componentTesterDir}. Run 'pnpm install' there if dependencies are missing. Original error: ${message}`,
         );
     }
 };

.github/skills/bloom-automation/switchWorkspaceTab.mjs

@@ -128,7 +128,7 @@ const loadPlaywright = () => {
     } catch (error) {
         const message = error instanceof Error ? error.message : String(error);
         throw new Error(
-            `Could not load Playwright from ${componentTesterDir}. Run 'yarn install' in src/BloomBrowserUI/react_components/component-tester if dependencies are missing. Original error: ${message}`,
+            `Could not load Playwright from ${componentTesterDir}. Run 'pnpm install' in src/BloomBrowserUI/react_components/component-tester if dependencies are missing. Original error: ${message}`,
         );
     }
 };

.github/skills/bloom-canvas-e2e-testing/SKILL.md

@@ -30,15 +30,15 @@ Use the `src/BloomBrowserUI` package and run the canvas suite via the root e2e s
 
 1) Install once (or when deps change):
 - `cd src/BloomBrowserUI`
-- `yarn install`
+- `pnpm install`
 
 2) Run one canvas test:
 - `cd src/BloomBrowserUI`
-- `yarn e2e canvas specs/01-toolbox-drag-to-canvas.spec.ts`
+- `pnpm e2e canvas specs/01-toolbox-drag-to-canvas.spec.ts`
 
 3) Run the full canvas suite:
 - `cd src/BloomBrowserUI`
-- `yarn e2e canvas`
+- `pnpm e2e canvas`
 
 ## Frame model (critical)
 Bloom Edit Tab has multiple iframes. Use frame names first:
@@ -89,7 +89,7 @@ A valid non-trivial proof test should:
 
 ## Troubleshooting
 - If test says "No tests found": verify path filter is relative to the config `testDir`.
-- If command says `playwright: not found`: run `yarn install` in `src/BloomBrowserUI`.
+- If command says `playwright: not found`: run `pnpm install` in `src/BloomBrowserUI`.
 - If canvas waits time out: confirm you selected the `page` frame, not top frame.
 - If canvas tab click times out: check whether Canvas controls are already visible and skip click in that case.
 

.github/skills/edit-bloom-book/validateBloomBook.mjs

@@ -22,7 +22,7 @@ const loadJSDOM = () => {
     } catch (error) {
         const details = error instanceof Error ? error.message : String(error);
         console.error(
-            "Failed to load jsdom from src/BloomBrowserUI. Run yarn in src/BloomBrowserUI if dependencies are missing.",
+            "Failed to load jsdom from src/BloomBrowserUI. Run pnpm install in src/BloomBrowserUI if dependencies are missing.",
         );
         console.error(details);
         process.exitCode = 2;

.github/workflows/pr-automation.yml

@@ -41,9 +41,12 @@ jobs:
                   node-version: lts/*
 
             - name: Install Playwright driver (no browser download)
+              # npm (not pnpm) is deliberate here: this job runs without a repo checkout,
+              # so the repo's pnpm policy doesn't apply. It only needs playwright-core in
+              # a throwaway directory on the runner, and npm is preinstalled there.
               run: |
-                  yarn init -y
-                  yarn add playwright-core
+                  npm init -y
+                  npm install playwright-core
 
             - name: Open the devinreview.com URL in a real (headless) browser
               env:

.gitignore

@@ -135,7 +135,7 @@ DistFiles/IntegrityFailureAdvice-*.htm
 DistFiles/infoPages/TrainingVideos-*.htm
 DistFiles/localization/*.htm
 
-src/BloomBrowserUI/yarn-error\.log
+pnpm-debug.log*
 
 src/BloomExe/Firefox/
 
@@ -178,22 +178,8 @@ src/BloomBrowserUI/templates/template books/Activity/domActivities.css
 
 src/BloomBrowserUI/templates/template books/Activity/choiceActivities.css
 
-# per https://yarnpkg.com/getting-started/qa#which-files-should-be-gitignored
-src/BloomBrowserUI/.pnp.*
-src/BloomBrowserUI/.yarn/*
-!src/BloomBrowserUI/.yarn/patches
-!src/BloomBrowserUI/.yarn/plugins
-!src/BloomBrowserUI/.yarn/releases
-!src/BloomBrowserUI/.yarn/sdks
-!src/BloomBrowserUI/.yarn/versions
-
-src/content/.pnp.*
-src/content/.yarn/*
-!src/content/.yarn/patches
-!src/content/.yarn/plugins
-!src/content/.yarn/releases
-!src/content/.yarn/sdks
-!src/content/.yarn/versions
+# pnpm's per-project store / state; the committed pnpm-lock.yaml files are NOT ignored.
+.pnpm-store/
 
 .github/copilot-instructions.md
 

.node-version

@@ -0,0 +1 @@
+22.21.1

AGENTS.md

@@ -1,5 +1,5 @@
 This project has a web front-end at src/BloomBrowserUI.
-The front-end uses yarn 1.22.22. Never ever use npm.
+The front-end uses pnpm 11.5.2. Never ever use npm or yarn.
 
 # Architecture
 
@@ -46,8 +46,8 @@ The vscode terminal often loses the first character sent from copilot agents. So
 
 If you create new files for temporary purposes (e.g. output or artifact or log files), be sure to clean them up when you're done and be careful not to accidentally commit them.
 
-# Don't run yarn build
-It is vital that you not run `yarn build` unless instructed to. If there is already a "--watch" build running, you will wreck it and waste the developer's time. You are welcome to `yarn lint` if you want to check for errors without building.
+# Don't run pnpm build
+It is vital that you not run `pnpm build` unless instructed to. If there is already a "--watch" build running, you will wreck it and waste the developer's time. You are welcome to `pnpm lint` if you want to check for errors without building.
 
 # Localization
 Whenever you add, modify, or review localizable strings (XLF entries), follow `.github/skills/xlf-strings/SKILL.md`.

ReadMe.md

@@ -6,7 +6,7 @@ Internally, Bloom is a hybrid. It started as a C#/WinForms app with an embedded
 
 # Building
 
-1. Install [volta](https://docs.volta.sh/guide/getting-started) globally on your computer. This will provide you with the correct node and yarn. You may need to restart your computer for the installation to take effect.
+1. Install [vite-plus (`vp`)](https://vite.plus) globally on your computer. It reads the `.node-version` and `packageManager` fields in the repo and provides the correct node and pnpm. (We previously used volta, but it does not fully support pnpm.)
 
 2. Install other dependencies:
 
@@ -40,13 +40,15 @@ For Typescript formatting, we use the Prettier extension in VSCode.
 
 ### Updating as you edit files
 
-To rebuild on typescript, less, and md changes in BloomBrowserUI, use `yarn watch`.
+To rebuild on typescript, less, and md changes in BloomBrowserUI, use `pnpm watch`.
 
 To rebuild less and other "content" on changes, see the various scripts in `src/content`'s package.json.
 
-For fast hot-reloading, first do one yarn build, to get all the (so-far) static assets. Then run yarn dev. Currently only some parts of the Bloom UI benefit from this (the ones implemented using ReactControl, including ReactDialog). You may need to run yarn watch in another terminal.
+For fast hot-reloading, first do one pnpm build, to get all the (so-far) static assets. Then run pnpm dev. Currently only some parts of the Bloom UI benefit from this (the ones implemented using ReactControl, including ReactDialog). You may need to run pnpm watch in another terminal.
 
-It may be helpful before submitting a PR to turn off yarn dev and run yarn build, then do a quick smoke test of your work. Yarn build creates the transpiled files that will be used by Bloom in production.
+It may be helpful before submitting a PR to turn off pnpm dev and run pnpm build, then do a quick smoke test of your work. pnpm build creates the transpiled files that will be used by Bloom in production.
+
+If you have the team's agent skills installed (see the Skills section of AGENTS.md), the `/preflight` skill automates the rest of the pre-review checklist: typecheck, lint, tests, draft PR, and the bot review gauntlet.
 
 ### Windows Defender exclusions
 
@@ -56,7 +58,7 @@ For performance reasons, you probably want to exclude at least the following in
 
 ### Typescript unit tests
 
-These are now being run using Vitest in the BloomBrowserUI folder (where all our Typescript currently lives). You can run 'yarn test' in a terminal there, and it will automatically re-run affected tests on every Save. There is also a vitest extension you can install in VsCode, which supports a new panel showing all the tests and allowing them to be run and debugged; it also puts icons in the test files that support running and debugging tests. Breakpoints can be set in VSCode itself. It takes a few seconds for a debug session to start.
+These are now being run using Vitest in the BloomBrowserUI folder (where all our Typescript currently lives). You can run 'pnpm test' in a terminal there, and it will automatically re-run affected tests on every Save. There is also a vitest extension you can install in VsCode, which supports a new panel showing all the tests and allowing them to be run and debugged; it also puts icons in the test files that support running and debugging tests. Breakpoints can be set in VSCode itself. It takes a few seconds for a debug session to start.
 
 For now, all tests are being run using Node and JsDom. This approach has limitations; JsDom's emulation of the browser DOM is imperfect. In particular, you can't do much with a Canvas, and you can't get layout measurements. The file vitest.setup.ts contains various mocks to make jsdom work a little better. Eventually, we hope to be able to run a subset of tests using a real browser.
 

build/check-csharp-ApplicationExit.sh

@@ -1,5 +1,5 @@
 #!/bin/sh
-# This script is run by Husky from src/BloomBrowserUI/package.json. We need to get to
+# This script is run by the pre-commit hook in src/BloomBrowserUI/.vite-hooks/pre-commit. We need to get to
 # the root of the git repository, which is one level up from where this script lives.
 cd $(dirname $0)/..
 echo Checking for calling Application.Exit rather than Program.Exit.

build/check-csharp-robustfile.sh

@@ -1,5 +1,5 @@
 #!/bin/sh
-# This script is run by Husky from src/BloomBrowserUI/package.json. We need to get to
+# This script is run by the pre-commit hook in src/BloomBrowserUI/.vite-hooks/pre-commit. We need to get to
 # the root of the git repository, which is one level up from where this script lives.
 cd $(dirname $0)/..
 

build/check-csharp-xmlclasses.sh

@@ -1,5 +1,5 @@
 #!/bin/sh
-# This script is run by Husky from src/BloomBrowserUI/package.json. We need to get to
+# This script is run by the pre-commit hook in src/BloomBrowserUI/.vite-hooks/pre-commit. We need to get to
 # the root of the git repository, which is one level up from where this script lives.
 cd $(dirname $0)/..
 echo Checking for possible uses of C\# XmlNode based classes.

build/run-csharpier.sh

@@ -1,5 +1,5 @@
 #!/bin/sh
-# This script is run by Husky from src/BloomBrowserUI/package.json. We need to get to
+# This script is run by the pre-commit hook in src/BloomBrowserUI/.vite-hooks/pre-commit. We need to get to
 # the root of the git repository, which is one level up from where this script lives.
 cd $(dirname $0)/..
 echo Formatting any C# files that are being submitted

init.sh

@@ -2,10 +2,10 @@
 set -euo pipefail
 
 ./build/getDependencies-windows.sh &
-(cd src/content && yarn install) &
-(cd src/BloomBrowserUI && yarn install) &
+(cd src/content && pnpm install) &
+(cd src/BloomBrowserUI && pnpm install) &
 dotnet build src/WebView2PdfMaker &
 
 wait
 
-(cd src/BloomBrowserUI && yarn build)
+(cd src/BloomBrowserUI && pnpm run build)

src/BloomBrowserUI/.node-version

@@ -0,0 +1 @@
+22.21.1

src/BloomBrowserUI/.vite-hooks/pre-commit

@@ -0,0 +1,32 @@
+#!/bin/sh
+# Pre-commit checks for the pnpm/vite-plus front-end. This is the "vite-plus" hook
+# referenced by the .githooks/pre-commit dispatcher: on a pnpm branch the dispatcher
+# detects this file and runs it (via `exec`, honoring this shebang). The dispatcher
+# is wired up by core.hooksPath -> .githooks (see scripts/setup-git-hooks.mjs). It
+# replaces husky (husky v4 was EOL and incompatible with pnpm).
+#
+# It is committed executable (mode 0755) with a POSIX-sh shebang so the dispatcher
+# can exec it directly.
+#
+# We deliberately do NOT use `vp staged`: it runs vite-plus's own bundled
+# vite/rolldown/oxc toolchain instead of this project's pinned eslint/prettier/tsgo,
+# and would not match how we lint and type-check everywhere else. Instead we invoke
+# the project's own tools directly.
+
+# The dispatcher runs us from the repo root; put the front-end's node_modules/.bin
+# on PATH (as an absolute path, before we cd) so its bins resolve.
+export PATH="$(pwd)/src/BloomBrowserUI/node_modules/.bin:$PATH"
+
+# JavaScript/TypeScript checks (run from the front-end project)
+cd src/BloomBrowserUI || exit 1
+pretty-quick --staged || exit 1
+# --no-stash keeps linting fast and is safe because lint-staged doesn't modify files here.
+lint-staged --no-stash || exit 1
+node scripts/typecheck.js || exit 1
+
+# C# checks (run from the repo root)
+cd ../.. || exit 1
+build/check-csharp-robustfile.sh || exit 1
+build/check-csharp-xmlclasses.sh || exit 1
+build/check-csharp-ApplicationExit.sh || exit 1
+build/run-csharpier.sh || exit 1

src/BloomBrowserUI/.vscode/launch.json

@@ -9,8 +9,9 @@
             "name": "Debug Vitest Tests",
             "type": "node",
             "request": "launch",
-            "runtimeExecutable": "yarn",
+            "runtimeExecutable": "pnpm",
             "runtimeArgs": [
+                "exec",
                 "vitest",
                 "--run",
                 "--no-coverage",
@@ -27,8 +28,9 @@
             "name": "Debug Current Vitest Test File",
             "type": "node",
             "request": "launch",
-            "runtimeExecutable": "yarn",
+            "runtimeExecutable": "pnpm",
             "runtimeArgs": [
+                "exec",
                 "vitest",
                 "--run",
                 "--no-coverage",
@@ -41,7 +43,7 @@
             "skipFiles": ["<node_internals>/**", "**/node_modules/**"]
         },
         {
-            // 1. Launch the test runner: `yarn karma start --browsers Chrome`.
+            // 1. Launch the test runner: `pnpm exec karma start --browsers Chrome`.
             // 2. Start this "Debug Unit Tests".
             // 3. You may have to do a browser REFRESH before breakpoints are caught. (Possibly in BOTH of the browsers
             // that the two previous commands launch.)

src/BloomBrowserUI/.vscode/settings.json

@@ -59,7 +59,7 @@
     },
     // Vitest extension settings for debugging from test panel
     "vitest.enable": true,
-    "vitest.commandLine": "yarn vitest",
+    "vitest.commandLine": "pnpm exec vitest",
     "vitest.debugExclude": ["**/node_modules/**", "**/dist/**"],
     "vitest.include": ["./**/*{test,spec,Spec}.{js,ts,jsx,tsx}"],
     "vitest.exclude": [

src/BloomBrowserUI/AGENTS.md

@@ -9,8 +9,8 @@ When working in the front-end, cd to src/BloomBrowserUI
 - react
 - MUI
 - Emotion
-- yarn 1.22.22
-- Never use npm commands
+- pnpm 11.5.2
+- Never use npm or yarn commands
 - Never use CDNs. This is an offline app.
 - WebView2 112