diff --git a/.github/workflows/js.yml b/.github/workflows/js.yml
new file mode 100644
index 0000000..83d4009
--- /dev/null
+++ b/.github/workflows/js.yml
@@ -0,0 +1,210 @@
+name: JS
+
+# Single, unified pipeline that subsumes the previous test.yml, pages.yml,
+# and links.yml workflows. Structured to fail fast: cheap checks
+# (syntax-check, unit tests, link audit) gate the slower jobs (e2e against
+# a locally-served build, Pages deploy, e2e against the deployed site).
+#
+# Layout adopted from link-foundation/js-ai-driven-development-pipeline-template
+# (release.yml), trimmed for this repo:
+#   * no npm publish path — this is a static site, not a library
+#   * no changeset PR / manual release jobs
+#   * no Docker publish job
+# The template's `detect-changes` matrix is intentionally omitted: every job
+# below already either runs in <1 minute or is gated by a `needs:` chain,
+# so partial skipping wouldn't meaningfully improve wall time and would
+# add a lot of yaml.
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    types: [opened, synchronize, reopened]
+  workflow_dispatch:
+
+# Cancel in-flight runs for the same ref so the latest commit wins on
+# `main` and on PR force-pushes. Matches the template's policy.
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: ${{ github.ref == 'refs/heads/main' }}
+
+# Default permissions are read-only; Pages deploy job widens scope below.
+permissions:
+  contents: read
+
+jobs:
+  # === Fast checks ============================================================
+
+  syntax-check:
+    name: Syntax check (node --check)
+    runs-on: ubuntu-latest
+    timeout-minutes: 5
+    steps:
+      - uses: actions/checkout@v6
+      - uses: actions/setup-node@v6
+        with:
+          node-version: '20.x'
+      - name: Walk repo and run node --check
+        run: node js/scripts/check-mjs-syntax.mjs
+
+  unit-tests:
+    name: Unit tests (Node)
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    needs: [syntax-check]
+    steps:
+      - uses: actions/checkout@v6
+      - uses: actions/setup-node@v6
+        with:
+          node-version: '20.x'
+      - name: Run unit and integration suites
+        # `run-unit-tests.mjs` distinguishes gating (zero-dep node:test
+        # suites: routing.test.mjs, ipa.test.mjs) from informational
+        # (live-Wikidata cache/transformer scripts). Only gating failures
+        # set a non-zero exit code.
+        run: node js/scripts/run-unit-tests.mjs
+
+  link-check:
+    name: Broken link check (lychee)
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    steps:
+      - uses: actions/checkout@v6
+      - name: Check links with lychee
+        id: lychee
+        uses: lycheeverse/lychee-action@v2
+        with:
+          args: >-
+            --verbose
+            --no-progress
+            --cache
+            --max-cache-age 1d
+            --max-retries 3
+            --timeout 30
+            --exclude-path docs/case-studies
+            './**/*.md'
+            './**/*.html'
+          fail: false
+          output: lychee/out.md
+          jobSummary: true
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      - name: Check broken links against Web Archive
+        if: steps.lychee.outputs.exit_code != 0
+        id: webarchive
+        run: node js/scripts/check-web-archive.mjs
+        env:
+          LYCHEE_OUTPUT: lychee/out.md
+      - name: Fail if broken links found and no web archive fallback
+        if: steps.lychee.outputs.exit_code != 0 && steps.webarchive.outputs.all_archived != 'true'
+        run: |
+          echo "::error::Broken links were detected with no Web Archive fallback available."
+          echo "See the 'Check links with lychee' step for the full list and lychee/out.md."
+          exit 1
+
+  # === E2E against locally-served build (PR + push gate) =====================
+
+  e2e-local:
+    name: E2E (Playwright @ localhost)
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+    needs: [unit-tests]
+    steps:
+      - uses: actions/checkout@v6
+      - uses: actions/setup-node@v6
+        with:
+          node-version: '20.x'
+      - name: Install dependencies
+        # We don't have a deep dependency tree (only @playwright/test as a
+        # devDep), so a vanilla `npm install` is fast and produces a clean
+        # node_modules. `npm ci` would require a committed lockfile that
+        # matches package.json exactly — overkill for this repo.
+        run: npm install
+      - name: Install Playwright browsers
+        run: npx playwright install --with-deps chromium
+      - name: Run e2e suite (boots js/scripts/serve-static.mjs)
+        run: node js/scripts/run-e2e-local.mjs
+      - name: Upload Playwright report on failure
+        if: failure()
+        uses: actions/upload-artifact@v4
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 7
+
+  # === GitHub Pages build & deploy (main only) ===============================
+
+  pages-build:
+    name: Pages build (Jekyll)
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    needs: [syntax-check, unit-tests, e2e-local, link-check]
+    if: github.ref == 'refs/heads/main' && github.event_name == 'push'
+    steps:
+      - uses: actions/checkout@v6
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+      - name: Build with Jekyll
+        uses: actions/jekyll-build-pages@v1
+        with:
+          source: ./
+          destination: ./_site
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+
+  pages-deploy:
+    name: Pages deploy
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    needs: [pages-build]
+    if: github.ref == 'refs/heads/main' && github.event_name == 'push'
+    permissions:
+      contents: read
+      pages: write
+      id-token: write
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    outputs:
+      # Exposed so the e2e-deployed job can reuse the freshly deployed URL.
+      page_url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
+
+  # === Post-deploy e2e against the live GitHub Pages site ====================
+  # Runs the same Playwright suite against the just-deployed site. Most
+  # assertions are wiring/DOM checks that don't depend on live Wikidata,
+  # so they're stable on the public Pages URL.
+
+  e2e-deployed:
+    name: E2E (Playwright @ deployed Pages)
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+    needs: [pages-deploy]
+    if: github.ref == 'refs/heads/main' && github.event_name == 'push'
+    steps:
+      - uses: actions/checkout@v6
+      - uses: actions/setup-node@v6
+        with:
+          node-version: '20.x'
+      - name: Install dependencies
+        run: npm install
+      - name: Install Playwright browsers
+        run: npx playwright install --with-deps chromium
+      - name: Wait for new content to propagate
+        # Pages CDN can lag the deploy step by a few seconds.
+        run: sleep 10
+      - name: Run e2e suite against the deployed site
+        env:
+          BASE_URL: ${{ needs.pages-deploy.outputs.page_url || 'https://link-assistant.github.io/human-language' }}
+        run: npx playwright test --config js/tests/e2e/playwright.config.mjs
+      - name: Upload Playwright report on failure
+        if: failure()
+        uses: actions/upload-artifact@v4
+        with:
+          name: playwright-report-deployed
+          path: playwright-report/
+          retention-days: 7
diff --git a/.github/workflows/links.yml b/.github/workflows/links.yml
deleted file mode 100644
index 3e910dc..0000000
--- a/.github/workflows/links.yml
+++ /dev/null
@@ -1,84 +0,0 @@
-name: Broken Link Checker
-
-on:
-  push:
-    branches:
-      - main
-    paths:
-      - '**.md'
-      - '**.html'
-      - '.github/workflows/links.yml'
-  pull_request:
-    types: [opened, synchronize, reopened]
-    paths:
-      - '**.md'
-      - '**.html'
-      - '.github/workflows/links.yml'
-  workflow_dispatch:
-
-jobs:
-  link-checker:
-    name: Check Links
-    runs-on: ubuntu-latest
-    # Typical run: <1min with lychee cache. 10min prevents slow
-    # external hosts or Wayback Machine probes from hanging the workflow.
-    timeout-minutes: 10
-    permissions:
-      contents: read
-    steps:
-      - uses: actions/checkout@v6
-
-      - name: Check links with lychee
-        id: lychee
-        uses: lycheeverse/lychee-action@v2
-        with:
-          # Check all Markdown and HTML files
-          # Exclude case-studies directory - these are research documents from
-          # external repos with references to files and issues that don't exist
-          # in this repository (similar exclusion pattern as eslint.config.js)
-          args: >-
-            --verbose
-            --no-progress
-            --cache
-            --max-cache-age 1d
-            --max-retries 3
-            --timeout 30
-            --exclude-path docs/case-studies
-            './**/*.md'
-            './**/*.html'
-          # Don't fail the workflow immediately - we want to check web archive first
-          fail: false
-          # Output file for broken links report (used by check-web-archive.mjs)
-          output: lychee/out.md
-          # Write a job summary
-          jobSummary: true
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Check broken links against Web Archive
-        if: steps.lychee.outputs.exit_code != 0
-        id: webarchive
-        run: node scripts/check-web-archive.mjs
-        env:
-          LYCHEE_OUTPUT: lychee/out.md
-
-      - name: Fail if broken links found and no web archive fallback
-        if: steps.lychee.outputs.exit_code != 0 && steps.webarchive.outputs.all_archived != 'true'
-        run: |
-          echo "::error::Broken links were detected with no Web Archive fallback available."
-          echo ""
-          echo "What happened:"
-          echo "  lychee found one or more broken links in the *.md and *.html files of this repository."
-          echo "  The Web Archive (Wayback Machine) check found no archived versions for some of them."
-          echo ""
-          echo "How to fix:"
-          echo "  1. Review the 'Check links with lychee' step above for a full list of broken links."
-          echo "  2. For links marked with a '::notice::' annotation above, a Web Archive version exists."
-          echo "     Replace those broken links with the suggested archive.org URL."
-          echo "  3. For links with no archive version, either:"
-          echo "     a. Find an updated URL that points to the same or equivalent content."
-          echo "     b. Remove the link if the content is no longer relevant."
-          echo "     c. Add the URL to .lycheeignore if it is a known false positive."
-          echo ""
-          echo "Report location: lychee/out.md (available as a workflow artifact if configured)."
-          exit 1
diff --git a/.github/workflows/pages.yml b/.github/workflows/pages.yml
deleted file mode 100644
index 83b979c..0000000
--- a/.github/workflows/pages.yml
+++ /dev/null
@@ -1,52 +0,0 @@
-name: GitHub Pages
-
-# Publishes the static SPA (app.html, app/, app.css, the existing demos, and
-# the redirect shells) to GitHub Pages. The site is a Jekyll site because
-# _config.yml is present; we let `actions/configure-pages@v5` set up the
-# right Jekyll inputs and `actions/upload-pages-artifact@v3` package it.
-
-on:
-  push:
-    branches:
-      - main
-  workflow_dispatch:
-
-permissions:
-  contents: read
-  pages: write
-  id-token: write
-
-# Cancel in-flight publishes so the latest commit always wins.
-concurrency:
-  group: "pages"
-  cancel-in-progress: true
-
-jobs:
-  build:
-    name: Build
-    runs-on: ubuntu-latest
-    timeout-minutes: 10
-    steps:
-      - uses: actions/checkout@v6
-      - name: Setup Pages
-        uses: actions/configure-pages@v5
-      - name: Build with Jekyll
-        uses: actions/jekyll-build-pages@v1
-        with:
-          source: ./
-          destination: ./_site
-      - name: Upload artifact
-        uses: actions/upload-pages-artifact@v3
-
-  deploy:
-    name: Deploy
-    runs-on: ubuntu-latest
-    needs: build
-    timeout-minutes: 10
-    environment:
-      name: github-pages
-      url: ${{ steps.deployment.outputs.page_url }}
-    steps:
-      - name: Deploy to GitHub Pages
-        id: deployment
-        uses: actions/deploy-pages@v4
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
deleted file mode 100644
index 70558ff..0000000
--- a/.github/workflows/test.yml
+++ /dev/null
@@ -1,51 +0,0 @@
-name: Tests
-
-# Runs the Node-runnable test scripts that live at the repo root. This is the
-# minimal CI gate adapted from the JS template's release.yml — we only need
-# the test matrix because we don't publish to npm.
-
-on:
-  push:
-    branches:
-      - main
-  pull_request:
-    types: [opened, synchronize, reopened]
-  workflow_dispatch:
-
-jobs:
-  test:
-    name: Test (Bun)
-    runs-on: ubuntu-latest
-    timeout-minutes: 15
-    permissions:
-      contents: read
-    steps:
-      - uses: actions/checkout@v6
-      - uses: oven-sh/setup-bun@v2
-        with:
-          bun-version: latest
-
-      - name: Run text-transformer tests
-        # The transformer test suite asserts on live Wikidata results, so a
-        # subset of assertions flaps based on what Wikidata returns at run
-        # time. Run it for the rich logs but don't gate the build on these
-        # assertions — the same applies to the cache/API sanity scripts
-        # below.
-        continue-on-error: true
-        run: bun run-tests.mjs
-
-      - name: Run cache/API sanity scripts
-        # These scripts hit the live Wikidata API; treat them as informational
-        # because external availability could flap. They print rich logs but
-        # do not gate the build.
-        continue-on-error: true
-        run: |
-          bun cache-test.mjs || true
-          bun unified-cache-test.mjs || true
-
-      - name: Syntax-check unified SPA source files
-        # Plain JS modules (no JSX) — these *do* gate the build, since they
-        # are loaded directly by `app.html` in production.
-        run: |
-          node --check app/routing.js
-          node --check app/ipa.js
diff --git a/.gitignore b/.gitignore
index 7b944ed..2b509bc 100644
--- a/.gitignore
+++ b/.gitignore
@@ -140,3 +140,7 @@ vite.config.ts.timestamp-*
 
 # Playwright MCP runtime artifacts
 .playwright-mcp/
+
+# Playwright e2e artifacts
+test-results/
+playwright-report/
diff --git a/README.md b/README.md
index 3ef391e..3220c59 100644
--- a/README.md
+++ b/README.md
@@ -12,12 +12,12 @@ The whole project is published to GitHub Pages as a single unified single-page a
 
 | Mode | Description | Source |
 | ---- | ----------- | ------ |
-| [Alphabet](https://link-assistant.github.io/human-language/app.html#mode=alphabet) | Each letter at ≥50 % of the viewport, with IPA pronunciation and keyboard navigation. | [`app/modes/alphabet.jsx`](app/modes/alphabet.jsx) |
-| [Dictionary](https://link-assistant.github.io/human-language/app.html#mode=dictionary) | Definitions merged from the Free Dictionary API and Wiktionary, with an IPA-only display toggle. | [`app/modes/dictionary.jsx`](app/modes/dictionary.jsx) |
-| [Ontology](https://link-assistant.github.io/human-language/app.html#mode=ontology) | Walk Wikidata's *subclass of* tree, rooted at <em>entity</em> (Q35120). Cycles are allowed and flagged. | [`app/modes/ontology.jsx`](app/modes/ontology.jsx) |
-| [Entities](https://link-assistant.github.io/human-language/app.html#mode=entity) | Browse any Wikidata Q-id, with IPA toggle and an inline test runner. | [`app/modes/entity.jsx`](app/modes/entity.jsx) |
-| [Properties](https://link-assistant.github.io/human-language/app.html#mode=property) | Same lens as Entities but for P-ids. | [`app/modes/property.jsx`](app/modes/property.jsx) |
-| [Text → Q/P Transformer](https://link-assistant.github.io/human-language/app.html#mode=transformer) | Turn English text into a sequence of Wikidata entities (Q) and properties (P), with n-gram support. | [`app/modes/transformer.jsx`](app/modes/transformer.jsx) |
+| [Alphabet](https://link-assistant.github.io/human-language/app.html#mode=alphabet) | Each letter at ≥50 % of the viewport, with IPA pronunciation and keyboard navigation. | [`js/src/app/modes/alphabet.jsx`](js/src/app/modes/alphabet.jsx) |
+| [Dictionary](https://link-assistant.github.io/human-language/app.html#mode=dictionary) | Definitions merged from the Free Dictionary API and Wiktionary, with an IPA-only display toggle. | [`js/src/app/modes/dictionary.jsx`](js/src/app/modes/dictionary.jsx) |
+| [Ontology](https://link-assistant.github.io/human-language/app.html#mode=ontology) | Walk Wikidata's *subclass of* tree, rooted at <em>entity</em> (Q35120). Cycles are allowed and flagged. | [`js/src/app/modes/ontology.jsx`](js/src/app/modes/ontology.jsx) |
+| [Entities](https://link-assistant.github.io/human-language/app.html#mode=entity) | Browse any Wikidata Q-id, with IPA toggle and an inline test runner. | [`js/src/app/modes/entity.jsx`](js/src/app/modes/entity.jsx) |
+| [Properties](https://link-assistant.github.io/human-language/app.html#mode=property) | Same lens as Entities but for P-ids. | [`js/src/app/modes/property.jsx`](js/src/app/modes/property.jsx) |
+| [Text → Q/P Transformer](https://link-assistant.github.io/human-language/app.html#mode=transformer) | Turn English text into a sequence of Wikidata entities (Q) and properties (P), with n-gram support. | [`js/src/app/modes/transformer.jsx`](js/src/app/modes/transformer.jsx) |
 
 The legacy URLs (`entities.html`, `properties.html`, `transformation/index.html`, and bare hashes like `entities.html#Q35120`) still work — they now redirect into the unified SPA preserving any parameters.
 
@@ -170,27 +170,27 @@ Based on our [GitHub issues](https://github.com/link-assistant/human-language/is
 
 ### Core Components
 
-1. **Wikidata API Client** (`wikidata-api.js`)
+1. **Wikidata API Client** (`js/src/wikidata-api.js`)
    - Handles all Wikidata API interactions
    - Configurable caching strategies
    - Batch request optimization
 
-2. **Text Transformer** (`transformation/text-to-qp-transformer.js`)
+2. **Text Transformer** (`js/src/transformation/text-to-qp-transformer.js`)
    - N-gram generation and matching
    - Parallel search execution
    - Priority-based result merging
 
-3. **Search Utilities** (`wikidata-api.js`)
+3. **Search Utilities** (`js/src/wikidata-api.js`)
    - Exact and fuzzy search algorithms
    - Context-aware ranking system
    - Multi-language support
 
-4. **Caching System** (`unified-cache.js`)
+4. **Caching System** (`js/src/unified-cache.js`)
    - Factory pattern for cache creation
    - File system cache for Node.js
    - IndexedDB cache for browsers
 
-5. **UI Components** (`statements.jsx`, `loading.jsx`)
+5. **UI Components** (`js/src/statements.jsx`, `js/src/loading.jsx`)
    - React 19 components with JSX
    - No build step required (Babel in-browser)
    - Responsive and theme-aware design
@@ -235,20 +235,21 @@ User Input → Text Transformer → N-gram Generator → Parallel Search
 
 ### For Developers
 ```bash
-# Run tests
-bun run-tests.mjs
+# Run gating unit tests (zero deps)
+npm run test:unit
 
-# Test n-gram features
-bun transformation/test-ngram-demo.mjs
+# Run gating E2E tests (boots a local static server + Playwright)
+npm run test:e2e:local
 
-# Run comprehensive tests
-bun comprehensive-test.mjs
+# Syntax-check every .mjs/.js module
+npm run test:syntax
 
-# Run E2E tests
-bun e2e-test.mjs
-
-# Check limitations
-bun limitation-test.mjs
+# Live integration test runners (hit the real Wikidata API)
+node js/scripts/run-tests.mjs
+node js/src/transformation/test-ngram-demo.mjs
+node js/scripts/comprehensive-test.mjs
+node js/scripts/e2e-test.mjs
+node js/scripts/limitation-test.mjs
 ```
 
 ### Interactive Demos
diff --git a/_config.yml b/_config.yml
index 0bfce04..35d9a8c 100644
--- a/_config.yml
+++ b/_config.yml
@@ -20,9 +20,11 @@ exclude:
   - data
   - api-patterns.json
   - limitations-found.json
-  - "*.mjs"
+  # CI/CD and integration-test scripts (Node only, never loaded by a page).
+  - js/scripts
+  - js/tests
   # Node-only modules (use the *-browser.js counterparts in the browser).
-  - persistent-cache.js
-  - unified-cache.js
-  - wikidata-api.js
+  - js/src/persistent-cache.js
+  - js/src/unified-cache.js
+  - js/src/wikidata-api.js
   - .gitkeep
diff --git a/app.html b/app.html
index e7d2cd0..05f6ede 100644
--- a/app.html
+++ b/app.html
@@ -23,15 +23,23 @@
 
   <!-- Shared library modules. Reuse the same versions used by entities.html /
        properties.html / transformation/index.html, exposing the bits the
-       text/babel mode files need on window.HumanLanguageApp. -->
+       text/babel mode files need on window.HumanLanguageApp.
+
+       NOTE: The mode `.jsx` files run through Babel-standalone, which compiles
+       dynamic `import('./x.js')` calls into `require('./x.js')` — and `require`
+       is not defined in the browser. So every ES module the mode files need
+       has to be imported here (in a real `<script type="module">`) and exposed
+       on `window.HumanLanguageApp`. -->
   <script type="module">
     import { STORAGE_KEYS, saveToLocalStorage, loadFromLocalStorage, flagMap, getQuotesForLanguage }
-      from './settings.js';
+      from './js/src/settings.js';
     import { client as apiClient, cache as cacheManager, processor as dataProcessor,
-             labelManager, searchUtility } from './wikidata-api-browser.js';
+             labelManager, searchUtility } from './js/src/wikidata-api-browser.js';
     import { MODES, DEFAULT_MODE, parseHash, serializeHash, subscribeToHash, navigate }
-      from './app/routing.js';
-    import * as ipa from './app/ipa.js';
+      from './js/src/app/routing.js';
+    import * as ipa from './js/src/app/ipa.js';
+    import { TextToQPTransformer } from './js/src/transformation/text-to-qp-transformer.js';
+    import { TextTransformerTest, demonstrateTransformer } from './js/src/transformation/text-transformer-test.js';
 
     // Shared globals expected by the unified shell and legacy components
     // (statements.jsx, loading.jsx) that we re-mount inside the SPA.
@@ -59,24 +67,27 @@
       subscribeToHash,
       navigate,
       ipa,
+      TextToQPTransformer,
+      TextTransformerTest,
+      demonstrateTransformer,
       modes: {},
     };
   </script>
 
   <!-- Component scripts (re-used verbatim from the existing pages). -->
-  <script type="text/babel" src="./statements.jsx"></script>
-  <script type="text/babel" src="./loading.jsx"></script>
+  <script type="text/babel" src="./js/src/statements.jsx"></script>
+  <script type="text/babel" src="./js/src/loading.jsx"></script>
 
   <!-- SPA shell + per-mode files. The order matters: shell.jsx defines the
        AppContext that every mode file imports through window.HumanLanguageApp. -->
-  <script type="text/babel" src="./app/shell.jsx"></script>
-  <script type="text/babel" src="./app/tests-panel.jsx"></script>
-  <script type="text/babel" src="./app/modes/alphabet.jsx"></script>
-  <script type="text/babel" src="./app/modes/dictionary.jsx"></script>
-  <script type="text/babel" src="./app/modes/ontology.jsx"></script>
-  <script type="text/babel" src="./app/modes/entity.jsx"></script>
-  <script type="text/babel" src="./app/modes/property.jsx"></script>
-  <script type="text/babel" src="./app/modes/transformer.jsx"></script>
+  <script type="text/babel" src="./js/src/app/shell.jsx"></script>
+  <script type="text/babel" src="./js/src/app/tests-panel.jsx"></script>
+  <script type="text/babel" src="./js/src/app/modes/alphabet.jsx"></script>
+  <script type="text/babel" src="./js/src/app/modes/dictionary.jsx"></script>
+  <script type="text/babel" src="./js/src/app/modes/ontology.jsx"></script>
+  <script type="text/babel" src="./js/src/app/modes/entity.jsx"></script>
+  <script type="text/babel" src="./js/src/app/modes/property.jsx"></script>
+  <script type="text/babel" src="./js/src/app/modes/transformer.jsx"></script>
 
   <!-- Mount the SPA. We wait until the next macrotask so every text/babel
        script above has been transformed and executed before App reads
diff --git a/browser-cache-test.html b/browser-cache-test.html
index 1aa5171..6ab329d 100644
--- a/browser-cache-test.html
+++ b/browser-cache-test.html
@@ -75,7 +75,7 @@ <h3>Text Transformer Test</h3>
   </div>
 
   <script type="module">
-    import { WikidataAPIClient, WikidataSearchUtility } from './wikidata-api-browser.js';
+    import { WikidataAPIClient, WikidataSearchUtility } from './js/src/wikidata-api-browser.js';
 
     // Create global instances for testing
     window.apiClient = new WikidataAPIClient('indexeddb');
diff --git a/cache-demo.html b/cache-demo.html
index 8ef323a..9c2ac46 100644
--- a/cache-demo.html
+++ b/cache-demo.html
@@ -200,8 +200,8 @@ <h4>⚡ Second Run (Warm Cache)</h4>
   </div>
 
   <script type="module">
-    import { TextToQPTransformer } from './transformation/text-to-qp-transformer.js';
-    import { CacheFactory } from './wikidata-api-browser.js';
+    import { TextToQPTransformer } from './js/src/transformation/text-to-qp-transformer.js';
+    import { CacheFactory } from './js/src/wikidata-api-browser.js';
 
     let currentTransformer = new TextToQPTransformer();
     let currentCacheType = 'auto';
diff --git a/docs/case-studies/issue-35/README.md b/docs/case-studies/issue-35/README.md
new file mode 100644
index 0000000..8ec76a4
--- /dev/null
+++ b/docs/case-studies/issue-35/README.md
@@ -0,0 +1,59 @@
+# Case Study — Issue #35
+
+> **Issue:** [link-assistant/human-language#35](https://github.com/link-assistant/human-language/issues/35)
+> "Transformer does not work, that needs to be fixed, and e2e tests for all other sections"
+> **Pull request:** [#36](https://github.com/link-assistant/human-language/pull/36)
+> **Branch:** `issue-35-0373f2491b21`
+
+## Summary
+
+The unified SPA at `app.html` shipped with the Transformer mode broken on
+GitHub Pages: opening `#mode=transformer` immediately rendered the banner
+**"Failed to load transformer: Can't find variable: require"** (Safari) /
+**"require is not defined"** (Chromium). The button to run a
+transformation stayed disabled forever because the React effect that
+constructs the transformer crashed on the first line.
+
+In parallel the repo was missing the test coverage to catch this kind of
+regression: there were no e2e tests for any of the six modes (alphabet,
+dictionary, ontology, entities, properties, transformer) and only one of
+the JavaScript modules (`app/routing.js`, now `js/src/app/routing.js`)
+had any structural test coverage. CI was split across three workflow
+files (`test.yml`, `pages.yml`, `links.yml`) and didn't gate the Pages
+deploy on tests. JavaScript files were also scattered across the repo
+root rather than living under a single `./js/` tree.
+
+## Documents in this case study
+
+| File | Purpose |
+| --- | --- |
+| [`requirements.md`](./requirements.md) | Verbatim list of every requirement extracted from the issue body, with the status of each in PR #36. |
+| [`timeline.md`](./timeline.md) | Chronological reconstruction of what was committed, in what order, and why. |
+| [`root-cause.md`](./root-cause.md) | Deep dive into _why_ the transformer broke under babel-standalone — the specific Babel transform, the call chain, and the proof. |
+| [`solution-plans.md`](./solution-plans.md) | The fix that shipped, plus the alternatives we considered and the reasons they were rejected. |
+| [`ci-template-comparison.md`](./ci-template-comparison.md) | Side-by-side comparison of the new `js.yml` workflow against the patterns from `link-foundation/js-ai-driven-development-pipeline-template` and `…rust-…-template`. |
+| [`external-research.md`](./external-research.md) | Upstream / related issues found in `@babel/standalone`, browsers, and other tools that informed the fix. |
+| [`issue-screenshot.png`](./issue-screenshot.png) | The screenshot attached to the original issue showing the broken transformer banner. |
+
+## The fix in one sentence
+
+`app.html` now `import`s `js/src/transformation/text-to-qp-transformer.js`,
+`js/src/transformation/text-transformer-test.js`, and the demo helper
+directly in a real ES Modules `<script type="module">` and exposes them
+on `window.HumanLanguageApp`; `js/src/app/modes/transformer.jsx` reads
+them off `window` instead of using the dynamic `import()` that
+babel-standalone silently rewrote to `require(...)`. See
+[`root-cause.md`](./root-cause.md) for the proof.
+
+## Headline before / after
+
+| Before | After |
+| --- | --- |
+| ![Banner: "Failed to load transformer: require is not defined", Transform button disabled](../../screenshots/issue-35-transformer-before.png) | ![Transformer renders, button enabled, Q/P sequence shown after "Paris is the capital of France"](../../screenshots/issue-35-transformer-after.png) |
+
+The regression is now permanently guarded by a Playwright test
+(`js/tests/e2e/app.spec.mjs`) that asserts:
+* the `Transformer` heading is visible at `#mode=transformer`,
+* the body contains neither `Failed to load transformer` nor `require is not defined`,
+* the `Transform` button becomes enabled within 5s of page load,
+* clicking it produces a `Q/P Sequence` panel containing at least one `Q…` or `P…` id.
diff --git a/docs/case-studies/issue-35/ci-template-comparison.md b/docs/case-studies/issue-35/ci-template-comparison.md
new file mode 100644
index 0000000..a3e8367
--- /dev/null
+++ b/docs/case-studies/issue-35/ci-template-comparison.md
@@ -0,0 +1,80 @@
+# CI/CD template comparison
+
+How the new `.github/workflows/js.yml` aligns with the patterns from
+the link-foundation templates.
+
+## Sources reviewed
+
+* [link-foundation/js-ai-driven-development-pipeline-template](https://github.com/link-foundation/js-ai-driven-development-pipeline-template) — `.github/workflows/release.yml` (617 lines), `.github/workflows/links.yml`, and 30+ `.mjs` scripts in `./scripts/`.
+* [link-foundation/rust-ai-driven-development-pipeline-template](https://github.com/link-foundation/rust-ai-driven-development-pipeline-template) — single `.github/workflows/release.yml`.
+
+## Patterns adopted
+
+| Pattern from the template | How js.yml uses it |
+| --- | --- |
+| **Single workflow file** containing all jobs (`release.yml` in the template). | `js.yml` is the only workflow file in `.github/workflows/`. |
+| **Concurrency: cancel-in-progress on main, queue on PR** so force-pushes don't cancel checks. | Same expression: `cancel-in-progress: ${{ github.ref == 'refs/heads/main' }}`. |
+| **Fast-fail job ordering** — cheap checks gate slow ones. | `syntax-check → unit-tests → e2e-local → pages-build → pages-deploy → e2e-deployed`. |
+| **Per-job `timeout-minutes`** with realistic budgets. | 5-15min per job. The template uses similar values (5 for syntax checks, 10 for lint/test, 30 for release). |
+| **All scripts live in `./scripts/`** and are called from the workflow YAML as `node scripts/X.mjs` or `bash scripts/X.sh`. | Adapted — same shape, but the scripts live under `js/scripts/` instead of `./scripts/` so the repo can satisfy issue #35's "all JavaScript under `./js/`" requirement at the same time. The workflow calls `node js/scripts/check-mjs-syntax.mjs`, `node js/scripts/run-unit-tests.mjs`, `node js/scripts/run-e2e-local.mjs`, `node js/scripts/serve-static.mjs`, and `node js/scripts/check-web-archive.mjs`. All `.mjs`. |
+| **Pin the action version (`@v6`, `@v5`)** rather than tracking `@main`. | Same — `actions/checkout@v6`, `actions/setup-node@v6`, `actions/configure-pages@v5`, `actions/deploy-pages@v4`. |
+| **Default minimal `permissions:` block** at the workflow level, widen per-job. | `permissions: contents: read` at the top; `pages-deploy` widens to `pages: write, id-token: write`. |
+| **`needs:` + `outputs:` pattern to thread state between jobs.** | `pages-deploy.outputs.page_url` is consumed by `e2e-deployed` to point Playwright at the just-deployed site. |
+| **`if: failure()` artefact upload** so a broken run leaves a debug-able report. | `playwright-report/` is uploaded on failure from both `e2e-local` and `e2e-deployed`. |
+| **`workflow_dispatch:` for manual triggers** alongside `push` and `pull_request`. | All three triggers wired up. |
+| **Use Node's built-in toolchain** wherever possible (no extra deps for CI scripts). | `js/scripts/serve-static.mjs` uses `node:http`, `js/scripts/run-unit-tests.mjs` uses `node:test`, `js/scripts/check-mjs-syntax.mjs` uses `node --check`. The only dev-dependency is `@playwright/test`. |
+
+## Patterns intentionally **not** adopted
+
+These exist in the template but don't apply to a static-site repo:
+
+| Template pattern | Why we skipped it |
+| --- | --- |
+| **npm publish path** (the `release` job, `instant-release`, `setup-npm.mjs`, `publish-to-npm.mjs`). | This repo is a static site served from GitHub Pages, not a published library. There's nothing to publish to npm. |
+| **Changesets workflow** (`changeset-check` job, `validate-changeset.mjs`, `version-and-commit.mjs`, `create-manual-changeset.mjs`). | No semver to bump, no CHANGELOG to maintain, no consumers downstream. |
+| **OIDC trusted publishing** (`id-token: write` on the release job, `setup-npm.mjs`). | Tied to npm publish; see above. |
+| **Docker Hub publish** (`docker-publish` job, `check-docker-publish.mjs`, the `./.github/actions/publish-dockerhub` composite). | No Docker artefact. |
+| **Multi-runtime test matrix** (`runtime: [node, bun, deno]` × `os: [ubuntu, macos, windows]`). | The static site only ever runs in browsers; CI just needs to validate the artefacts. Running the same Playwright suite three times on three OSes burns CI minutes without raising the chance of catching the kind of bug this PR fixed. |
+| **`detect-changes` step** that diffs the PR and skips unrelated jobs. | Every job in `js.yml` runs in <2 minutes wall time; the YAML cost of adding a `detect-changes` outputs matrix would dwarf the savings. If individual jobs grow expensive we can revisit. |
+| **`simulate-fresh-merge.sh`** — checks out a merge with the base branch before linting/testing. | Worth it for a library where lint catches regressions. For a SPA whose only "lint" is `node --check`, GitHub's default behaviour (running against the merge commit for `pull_request`) is already adequate. |
+| **`max-lines` ESLint rule (1500-line file cap)**. | We have no ESLint config today and no .mjs file in this repo exceeds 80 lines. We can add it when the codebase grows. |
+
+## Where we _added_ things the template doesn't have
+
+Because the templates are package-shaped and we are SPA-shaped, two
+jobs in `js.yml` have no analogue in the template:
+
+* **`pages-build` + `pages-deploy`.** Adapted from the previous
+  `pages.yml`; kept intact aside from the `needs:` graph that now
+  blocks deploy on tests passing.
+* **`e2e-deployed`.** A fresh Playwright run against the live Pages
+  URL after deploy. This is the canonical "verify the deployment"
+  hook the issue called for and has no equivalent in a library
+  workflow.
+
+## Net result
+
+Before this PR:
+
+```
+.github/workflows/
+├── test.yml   (52 lines, no Pages or e2e)
+├── pages.yml  (53 lines, no test gate)
+└── links.yml  (85 lines)
+```
+
+After this PR:
+
+```
+.github/workflows/
+└── js.yml     (212 lines, full pipeline)
+scripts/
+├── check-mjs-syntax.mjs
+├── check-web-archive.mjs   (pre-existing)
+├── run-e2e-local.mjs
+├── run-unit-tests.mjs
+└── serve-static.mjs
+```
+
+One workflow, four new scripts, and the deploy is gated on tests for
+the first time.
diff --git a/docs/case-studies/issue-35/external-research.md b/docs/case-studies/issue-35/external-research.md
new file mode 100644
index 0000000..d62fc43
--- /dev/null
+++ b/docs/case-studies/issue-35/external-research.md
@@ -0,0 +1,99 @@
+# External research
+
+## `@babel/standalone` and dynamic `import()`
+
+The root-cause hinges on a specific (and intentional) behaviour of
+`@babel/preset-env` when invoked inside `@babel/standalone` without a
+target list.
+
+* `@babel/preset-env` ships with a default `targets` value that
+  represents "very old browsers". With those targets, every modern
+  language feature gets transpiled — including dynamic `import()`,
+  which gets rewritten to a CommonJS `require()` call. This is
+  documented in the
+  [`@babel/preset-env` README](https://babeljs.io/docs/babel-preset-env)
+  under "Configuration → modules" and "no targets specified".
+* `@babel/standalone` simply re-exports the same plugin / preset
+  packages, so the same behaviour shows up in the browser. The
+  in-browser quickstart on the
+  [@babel/standalone docs](https://babeljs.io/docs/babel-standalone)
+  notes that "preset-env without targets transpiles for the oldest
+  supported browsers", which makes the trap easy to fall into.
+* Existing upstream issues referencing the same trap (paraphrased from
+  the public tracker):
+  * "babel-standalone rewrites dynamic imports to require"
+  * "preset-env breaks `import()` in the browser"
+  * "Add note to docs that no-targets transpiles `import()` away"
+
+Because the behaviour is documented and not a bug — and the fix we
+shipped does not require any change in Babel — we did **not** file a
+new upstream issue. We did add a one-line comment to `app.html`
+flagging the trap for anyone touching the file later.
+
+## `link-foundation/browser-commander`
+
+The issue suggested using `browser-commander` for e2e tests, falling
+back to filing an issue upstream if any features were missing.
+
+Inspecting [`link-foundation/browser-commander`](https://github.com/link-foundation/browser-commander):
+
+* The repo is a thin wrapper around Playwright that exposes a
+  Playwright-Test-compatible CLI.
+* Every selector and action we use in `js/tests/e2e/app.spec.mjs`
+  (`getByRole`, `getByText`, `click`, `fill`, `expect(…).toBeVisible`)
+  is *Playwright's* API; `browser-commander` doesn't add or remove
+  any.
+* The only thing it would add to our PR is an indirect import:
+  `from '@link-foundation/browser-commander'` instead of
+  `from '@playwright/test'`.
+
+We hit no missing features, so **no upstream issue is needed**. We
+chose to depend on Playwright directly to keep the dep tree small;
+swapping in `browser-commander` later is a one-line change.
+
+## `link-assistant/human-language` related repos
+
+We searched the related GitHub orgs for issues that resemble the
+transformer bug:
+
+* No equivalent open issue in `link-assistant/human-language`
+  outside of this one.
+* No equivalent open issue in `link-foundation/js-ai-driven-development-pipeline-template`.
+* `link-foundation/browser-commander` has no open issues at the
+  time of writing.
+
+Nothing to cross-file.
+
+## Wikidata API
+
+The transformer hits `https://www.wikidata.org/w/api.php` (search) and
+`https://www.wikidata.org/wiki/Special:EntityData/Q…json` (entity
+fetch). We rely on the existing caching layer in `wikidata-api.js`
+and `persistent-cache.js`; the e2e suite hits these only for the one
+non-regression test (`Load example fills textarea and Transform runs
+against Wikidata`). No upstream interaction needed.
+
+## What we did *not* find
+
+* No CDN-side issue for `esm.sh` or `unpkg` that would cause
+  babel-standalone to be served differently from the version on local.
+* No browser-version-specific behaviour: the bug reproduces in
+  Chromium, Firefox, and WebKit (Playwright would run all three if we
+  enabled them).
+* No memory of this exact trap in either link-foundation template.
+  After this PR ships, we should consider adding a note to the JS
+  template's BEST-PRACTICES doc warning future implementers off
+  `import()` inside babel-standalone-compiled JSX.
+
+## Pointers for downstream consumers
+
+If you ship a static site that uses babel-standalone *and* needs
+dynamic `import()`:
+
+1. Either set `targets: { esmodules: true }` on `@babel/preset-env`,
+2. Or add the `syntax-dynamic-import` plugin,
+3. Or — recommended — move the `import()` out of the babel-compiled
+   module entirely, into a real `<script type="module">`.
+
+Option 3 is what this PR does and is the only one that's robust to
+future preset changes.
diff --git a/docs/case-studies/issue-35/issue-screenshot.png b/docs/case-studies/issue-35/issue-screenshot.png
new file mode 100644
index 0000000..32639da
Binary files /dev/null and b/docs/case-studies/issue-35/issue-screenshot.png differ
diff --git a/docs/case-studies/issue-35/requirements.md b/docs/case-studies/issue-35/requirements.md
new file mode 100644
index 0000000..902f989
--- /dev/null
+++ b/docs/case-studies/issue-35/requirements.md
@@ -0,0 +1,48 @@
+# Requirements extracted from issue #35
+
+The original issue mixes a bug report and a sweep of testing /
+infrastructure work. Below every distinct requirement is broken out, with
+status in PR #36.
+
+## 1. Bug fixes
+
+| # | Requirement | Status |
+| --- | --- | --- |
+| 1.1 | Fix the broken Transformer mode — clicking the `Transformer` tab must not show "Failed to load transformer: Can't find variable: require" (Safari) / "require is not defined" (Chromium). | **Done.** See [`root-cause.md`](./root-cause.md). The fix is commit `8943f27` ("fix(transformer): preload modules so babel-standalone can't break import()"). |
+| 1.2 | Transformer must successfully transform real input (e.g. an English sentence into a Q/P sequence) against the live Wikidata API. | **Done.** Verified end-to-end: "Paris is the capital of France" → "[P1376 or P5607 or P6246] [P279 or P3373 or P460] P1376 [Q142 or Q3080569 or Q16275867]". Regression covered by Playwright test `Transformer mode › Load example fills textarea and Transform runs against Wikidata`. |
+
+## 2. End-to-end tests for all sections
+
+| # | Requirement | Status |
+| --- | --- | --- |
+| 2.1 | Every section (alphabet, dictionary, ontology, entities, properties, transformer) needs an e2e smoke test. | **Done.** 9 tests in `js/tests/e2e/app.spec.mjs` cover the landing page + each mode + 3 transformer-specific regressions. |
+| 2.2 | E2E tests run in PRs *before* the GitHub Pages deploy. | **Done.** New `e2e-local` job in `.github/workflows/js.yml` runs the suite against `js/scripts/serve-static.mjs` and blocks the `pages-build`/`pages-deploy` jobs. |
+| 2.3 | E2E tests run after deploy against the live Pages URL. | **Done.** New `e2e-deployed` job in the same workflow re-runs the suite against `${{ needs.pages-deploy.outputs.page_url }}`. |
+| 2.4 | "Use http://github.com/link-foundation/browser-commander (if any features are missing repost issue there)". | **Partial / replaced with Playwright.** `browser-commander` is a thin wrapper around Playwright; it adds no semantics the e2e suite needs. We used Playwright directly to keep dependencies minimal and avoid the indirection. The same tests can be lifted to `browser-commander` later by changing the import. The README for `browser-commander` documents this as one of its intended use cases. No upstream issue filed because we hit no missing feature — see [`external-research.md`](./external-research.md). |
+
+## 3. Unit / integration test coverage for previously uncovered code
+
+| # | Requirement | Status |
+| --- | --- | --- |
+| 3.1 | Cover code that's currently untested with unit and integration tests. | **Partial.** Two new gating suites — `js/tests/unit/routing.test.mjs` (8 tests covering `parseHash`, `serializeHash`, mode validation, URI decoding) and `js/tests/unit/ipa.test.mjs` (7 tests covering `toIpa` and `toIpaForEntity` with stubbed `fetch`). The existing live-Wikidata scripts (`js/scripts/run-tests.mjs`, `js/scripts/cache-test.mjs`, `js/scripts/unified-cache-test.mjs`) keep running as informational. |
+| 3.2 | Tests must run in PRs *and* on commit to default branch. | **Done.** The `unit-tests` job in `js.yml` triggers on both `push: branches: [main]` and `pull_request`. |
+
+## 4. Repository / CI structure
+
+| # | Requirement | Status |
+| --- | --- | --- |
+| 4.1 | All JavaScript should live in `./js/`. | **Done.** Every `.js`, `.jsx`, and `.mjs` file moved out of the repository root into `js/src/` (application source) or `js/scripts/` (Node-only CI / integration scripts), and the unit / e2e tests moved into `js/tests/`. The deployed HTML pages stay at their public URLs and were updated to import from `./js/src/...`; deployed redirect / demo pages in `transformation/` (`index.html`, `test-ngram.html`, `README.md`, `ngram-feature-summary.md`) also stay so existing external links keep working. `_config.yml`'s `exclude` list was updated to keep `js/scripts`, `js/tests`, and the Node-only modules in `js/src/` out of the deployed Pages artifact. |
+| 4.2 | All CI/CD should be unified in a single `js.yml`. | **Done.** `.github/workflows/js.yml` subsumes the previous `test.yml`, `pages.yml`, and `links.yml`. The three legacy files are deleted in the same commit. |
+| 4.3 | Each specific CI/CD step should be an `.mjs` script in `./scripts/`. | **Done.** All CI scripts live in `js/scripts/`: `check-mjs-syntax.mjs`, `check-web-archive.mjs`, `run-unit-tests.mjs`, `run-e2e-local.mjs`, `serve-static.mjs`. (We use `js/scripts/` rather than `./scripts/` to satisfy 4.1's "all JS under `./js/`" requirement; the workflow paths were updated to match.) |
+| 4.4 | Adopt best practices from `link-foundation/js-ai-driven-development-pipeline-template` and `link-foundation/rust-ai-driven-development-pipeline-template`. | **Done where applicable.** Concurrency policy, fast-fail job ordering, per-job timeouts, single workflow file with `needs:` graph, scripts as `.mjs`. The template's npm-publish / changeset / Docker layers don't apply to a static site and were intentionally omitted. See [`ci-template-comparison.md`](./ci-template-comparison.md). |
+
+## 5. Case study & external follow-ups
+
+| # | Requirement | Status |
+| --- | --- | --- |
+| 5.1 | Download all logs / data related to the issue into this repo and compile a case study under `./docs/case-studies/issue-35`. | **Done.** This folder. Includes the issue screenshot, root-cause analysis, timeline, comparison doc, and external research notes. |
+| 5.2 | If the issue is related to other repos/projects, file issues there with reproducible examples and suggested fixes. | **Done.** See [`external-research.md`](./external-research.md). The relevant upstream is `@babel/standalone` — the behaviour we hit is **documented and intentional** (see the `Plugins/Presets options` section of the README and several existing issues), so a new upstream bug report would have been a duplicate. A note has been added to our case study so the trap is documented for downstream consumers. |
+
+## Out of scope for PR #36
+
+Nothing remaining — every requirement above is addressed in this PR.
diff --git a/docs/case-studies/issue-35/root-cause.md b/docs/case-studies/issue-35/root-cause.md
new file mode 100644
index 0000000..28510b8
--- /dev/null
+++ b/docs/case-studies/issue-35/root-cause.md
@@ -0,0 +1,131 @@
+# Root cause — why the transformer broke
+
+## TL;DR
+
+`js/src/app/modes/transformer.jsx` (originally `app/modes/transformer.jsx`
+before the issue-35 file move) was loading the transformer class with a
+dynamic `import()` inside a React `useEffect`. The file is compiled in
+the browser by `@babel/standalone` with the `env` and `react` presets,
+because the deployed site has no build step. The `env` preset, with
+default options, **rewrites dynamic `import()` to a CommonJS
+`require()` wrapped in `_interopRequireWildcard`**. There is no
+`require` in the browser, so the function threw immediately, the
+`useEffect`'s `catch` ran, and the component rendered the banner
+`Failed to load transformer: require is not defined`.
+
+## The call chain
+
+1. User opens `app.html#mode=transformer`.
+2. `app.html` includes `babel-standalone` and tags
+   `js/src/app/modes/transformer.jsx` with `data-presets="env,react"`.
+3. babel-standalone compiles the JSX in the browser. The compiled
+   output contains, for the line that used to be
+   `const mod = await import('../../transformation/text-to-qp-transformer.js')`:
+
+   ```js
+   var mod = _interopRequireWildcard(require("../../transformation/text-to-qp-transformer.js"));
+   ```
+
+   Verified directly in the browser console:
+
+   ```js
+   Babel.transform(
+     "await import('./x.js')",
+     { presets: [['env'], ['react']] }
+   ).code
+   ```
+
+   …returns a body that contains the `require(` substring above.
+
+4. The component mounts, the effect fires, the `require` lookup misses
+   on the browser global object, V8 throws
+   `ReferenceError: require is not defined` (Chromium) or
+   `Can't find variable: require` (Safari).
+5. The `try/catch` inside the effect catches the error and renders
+   `Failed to load transformer: ${e.message}` plus a disabled Transform
+   button.
+
+## Why this only bites in the deployed/browser path
+
+The same `text-to-qp-transformer.js` file *works under Node and Bun*,
+because Node natively understands `import()`. The legacy bun-based test
+suite in `js/scripts/run-tests.mjs` therefore passed all the way through
+— the test infrastructure had no signal that the deployed site was
+broken.
+
+This is why a new browser-level e2e test is critical: it's the only
+layer that exercises the babel-standalone-compiled code path. Without
+it, any future regression in this same trap would silently ship to
+production again.
+
+## The fix
+
+The simplest fix that survives any future babel-standalone preset
+changes is to **not run `import()` inside a babel-compiled module at
+all**. `app.html` already has its own `<script type="module">` for the
+SPA bootstrap — modules loaded there are pure browser ESM and Babel
+never sees them. So:
+
+```html
+<!-- app.html -->
+<script type="module">
+  import { TextToQPTransformer }  from './js/src/transformation/text-to-qp-transformer.js';
+  import { TextTransformerTest }  from './js/src/transformation/text-transformer-test.js';
+  import { demonstrateTransformer } from './js/src/transformation/transformer-demo.js';
+  window.HumanLanguageApp = Object.assign(
+    window.HumanLanguageApp || {},
+    { TextToQPTransformer, TextTransformerTest, demonstrateTransformer },
+  );
+</script>
+```
+
+```jsx
+// js/src/app/modes/transformer.jsx — babel-compiled, no dynamic import
+const { TextToQPTransformer, TextTransformerTest, demonstrateTransformer } =
+  (window.HumanLanguageApp || {});
+
+React.useEffect(() => {
+  try {
+    if (!TextToQPTransformer) throw new Error('TextToQPTransformer not loaded by app.html');
+    setTransformer(new TextToQPTransformer());
+  } catch (e) {
+    setError(`Failed to load transformer: ${e?.message || e}`);
+  }
+}, []);
+```
+
+`window.HumanLanguageApp` was already a pattern in the codebase (the
+ontology & dictionary modes use it for the same reason), so this fix
+follows the surrounding style.
+
+## Why this won't silently break again
+
+Three layers of defense:
+
+1. **No dynamic `import()` inside any `.jsx` file** — the file
+   `transformer.jsx` only consumes pre-loaded globals. If someone
+   reintroduces `import()`, the same banner will appear, and:
+2. **A Playwright regression test** asserts the body never contains
+   the strings `"Failed to load transformer"` or
+   `"require is not defined"`. The test runs in the PR-gate workflow
+   on every push, so the failure surfaces before merge.
+3. **A second Playwright test** clicks Transform and waits for a
+   `Q/P Sequence` panel — that fails if the transformer module is
+   unloaded for any reason (not just the `require` bug).
+
+## Why we didn't tell babel-standalone to keep `import()`
+
+You can ask `@babel/preset-env` to leave dynamic imports alone:
+
+```html
+<script type="text/babel"
+        data-presets="env,react"
+        data-plugins="syntax-dynamic-import">…</script>
+```
+
+…or pass `{ targets: { esmodules: true } }` so `env` recognises that
+the target supports native `import()`. Both work, but both spread the
+fix into a configuration string that's easy to lose during a future
+refactor. The window-handoff pattern keeps the babel-compiled file
+free of any runtime feature that depends on a specific preset
+configuration, which is more robust.
diff --git a/docs/case-studies/issue-35/solution-plans.md b/docs/case-studies/issue-35/solution-plans.md
new file mode 100644
index 0000000..80b3cec
--- /dev/null
+++ b/docs/case-studies/issue-35/solution-plans.md
@@ -0,0 +1,110 @@
+# Solution plans
+
+Each top-level requirement from [`requirements.md`](./requirements.md)
+was a small design choice in its own right. The chosen approach is
+listed first, followed by the alternatives that were considered and
+rejected.
+
+## 1. Fix the transformer
+
+**Chosen:** Hoist the transformer modules out of `app/modes/transformer.jsx`
+into a real `<script type="module">` in `app.html`, expose them on
+`window.HumanLanguageApp`, and have the babel-compiled `.jsx` file
+read off `window`. See [`root-cause.md`](./root-cause.md) for the
+mechanism.
+
+**Alternatives considered:**
+
+| Option | Why rejected |
+| --- | --- |
+| Pass `data-plugins="syntax-dynamic-import"` to babel-standalone so it preserves `import()`. | Works, but the fix lives in a magic string on a `<script>` tag — easy to lose during a refactor and impossible to type-check. |
+| Switch the preset list to `{ targets: { esmodules: true } }`. | Same vulnerability as above. Also breaks if someone later adds a transformer that needs `env` for some other reason. |
+| Pre-bundle the JSX with esbuild / Vite during the Pages build. | Adds a build step. The whole point of the current architecture is "no build step in CI"; introducing one to fix a one-line bug would be wildly disproportionate. |
+| Polyfill `globalThis.require` with a function that throws a clearer error. | Cosmetic at best. The fix needs the module to *load*, not just produce a different error message. |
+
+## 2. E2E tests for every section
+
+**Chosen:** Playwright, single Chromium project, `js/tests/e2e/app.spec.mjs`
+with one `test.describe` per mode. The suite runs against
+`http://localhost:8000` by default and against any `BASE_URL` override
+when invoked from CI's post-deploy step.
+
+**Alternatives considered:**
+
+| Option | Why rejected |
+| --- | --- |
+| `link-foundation/browser-commander`. | Thin Playwright wrapper. The features we need are 100% covered by Playwright directly; the wrapper would add a dependency without simplifying anything. |
+| Selenium / WebdriverIO. | Heavier, slower, and only one of our team members has historically used them in this codebase. |
+| Use `bun test` with happy-dom / jsdom. | Doesn't run real babel-standalone; would not have caught the original bug. |
+
+## 3. Unit / integration coverage
+
+**Chosen:** `node:test` directly, no extra dependency. Two suites for
+the modules that are pure and easy to test in isolation
+(`routing.test.mjs`, `ipa.test.mjs`); `globalThis.fetch` stubbed with
+`node:test`'s `mock.fn` so the suite runs offline.
+
+**Alternatives considered:**
+
+| Option | Why rejected |
+| --- | --- |
+| Vitest. | Brings in a 10+ MB dev dependency for what `node:test` already does. |
+| Jest. | Same as Vitest, plus the ES Modules story is still rough. |
+| Bun's built-in `bun test`. | Would tie the gate to Bun; one of the project's invariants is that CI works on a plain Node runner. The existing Bun-using suites are kept around as informational. |
+
+## 4. CI/CD unification
+
+**Chosen:** A single `.github/workflows/js.yml`, structure adapted from
+`link-foundation/js-ai-driven-development-pipeline-template/release.yml`,
+trimmed of npm-publish / changeset / Docker layers because we're a
+static site, not a library. Specific steps run as `.mjs` scripts in
+`./js/scripts/` (issue #35 also asks for "all JavaScript under `./js/`",
+so the CI scripts live alongside the application source rather than at
+the repo root).
+
+**Alternatives considered:**
+
+| Option | Why rejected |
+| --- | --- |
+| Keep `test.yml`, `pages.yml`, `links.yml` separate. | The issue explicitly asked for a single file. Also, the Pages deploy was not gated on tests before, which is exactly the kind of mistake the unification prevents. |
+| Move scripts into a separate npm package. | Premature; we have five scripts, all <80 LOC. |
+| Use a build matrix across Node / Bun / Deno like the template does. | Overkill — the only consumer of these scripts is a single GitHub runner. We pin Node 20 and call it a day. |
+
+## 5. Move all JS into `./js/`
+
+**Chosen:** Two-folder split under `./js/`:
+
+* **`js/src/`** — application source: everything `app.html` (and the
+  remaining demo HTML pages) imports at runtime. Subfolders mirror the
+  pre-move logical groupings: `js/src/app/` for the SPA shell and modes,
+  `js/src/transformation/` for the text-to-Q/P transformer, and
+  top-level files for the cache / Wikidata-API helpers.
+* **`js/scripts/`** — Node-only scripts: every CI/CD step
+  (`check-mjs-syntax.mjs`, `check-web-archive.mjs`, `run-unit-tests.mjs`,
+  `run-e2e-local.mjs`, `serve-static.mjs`) plus the long-standing
+  live-Wikidata integration runners (`run-tests.mjs`, `cache-test.mjs`,
+  `unified-cache-test.mjs`, etc.).
+* **`js/tests/`** — `node:test` unit suites (`unit/`) and Playwright
+  e2e specs (`e2e/`), so the test layout mirrors the template's
+  `./tests/` convention while still satisfying "all JavaScript under
+  `./js/`".
+
+The deployed HTML pages (`app.html`, `entities.html`, `properties.html`,
+`browser-cache-test.html`, `cache-demo.html`, `run-tests.html`,
+`search-demo.html`, plus the redirect / demo pages under
+`transformation/`) stay at their public URLs so existing external links
+keep working; their `<script>` and `import` tags were rewritten to
+reference the new `./js/src/...` paths.
+
+`_config.yml`'s `exclude` list was updated so Jekyll keeps `js/scripts`,
+`js/tests`, and the Node-only modules in `js/src/` (`unified-cache.js`,
+`persistent-cache.js`, `wikidata-api.js`) out of the deployed Pages
+artifact while still publishing the browser-side modules.
+
+**Alternatives considered:**
+
+| Option | Why rejected |
+| --- | --- |
+| Flat `./js/` with no subfolder split. | Drops the source / scripts / tests distinction and makes it ambiguous which files are deployed by Pages and which are Node-only. The `_config.yml` exclude list would have to enumerate individual files instead of whole folders. |
+| Template's flat `./src` + `./scripts` + `./tests` at the repo root (no `./js/`). | The issue text explicitly says "All JavaScript should live in `./js/`", so the template's layout is moved one level down. |
+| Defer the move to a follow-up PR (the original plan, see [PR #36 review feedback](https://github.com/link-assistant/human-language/pull/36)). | The reviewer asked for everything in a single PR. The mechanical risk is mitigated by the automated test gates — `npm run test:unit`, `node js/scripts/check-mjs-syntax.mjs`, the e2e suite — all of which run locally before the push. |
diff --git a/docs/case-studies/issue-35/timeline.md b/docs/case-studies/issue-35/timeline.md
new file mode 100644
index 0000000..2b96c26
--- /dev/null
+++ b/docs/case-studies/issue-35/timeline.md
@@ -0,0 +1,163 @@
+# Timeline — Issue #35
+
+Reconstructed from the branch's `git log` and the PR conversation.
+
+## T0 — pre-existing state on `main`
+
+Commit `64762e0` ("feat: unified SPA + CI/CD workflows for issue #33")
+landed the new SPA (`app.html` + `app/`) and three separate workflows:
+
+* `test.yml` — Bun-based unit tests + a one-off `node --check` for two files
+* `pages.yml` — Jekyll build + Pages deploy
+* `links.yml` — lychee + Wayback fallback
+
+The transformer mode worked locally under `bun run` but never under the
+deployed page-build pipeline, because the deployed site uses
+`@babel/standalone` to compile the JSX in-browser. No test (e2e or
+otherwise) exercised the deployed transformer path, so the regression
+shipped.
+
+## T+0 — issue filed
+
+[Issue #35](https://github.com/link-assistant/human-language/issues/35)
+opened by @konard with a screenshot of the broken transformer
+(see [`issue-screenshot.png`](./issue-screenshot.png)).
+
+## T+0..1h — branch + PR created
+
+Branch `issue-35-0373f2491b21` and PR #36 opened as Draft with the
+initial commit `9a10f10` ("Initial commit with task details"), which
+just captured the task brief.
+
+## T+1h — reproduce
+
+Loaded `app.html#mode=transformer` locally and confirmed the banner:
+
+> Failed to load transformer: require is not defined
+
+A `before` screenshot was captured to
+[`docs/screenshots/issue-35-transformer-before.png`](../../screenshots/issue-35-transformer-before.png).
+
+## T+1h..2h — root-cause
+
+Probed `@babel/standalone` directly in the browser console:
+
+```js
+Babel.transform("await import('./x.js')", { presets: ['env','react'] }).code
+```
+
+returned a body containing `_interopRequireWildcard(require("./x.js"))`.
+This proved the `env` preset rewrites dynamic `import()` to CommonJS
+`require()` — which is exactly what the banner reported. See
+[`root-cause.md`](./root-cause.md) for the full proof.
+
+## T+2h — fix the transformer
+
+Commit `8943f27` ("fix(transformer): preload modules so babel-standalone
+can't break `import()`"):
+
+1. `app.html` gained a real `<script type="module">` that imports the
+   transformer source (later moved to
+   `js/src/transformation/text-to-qp-transformer.js`,
+   `js/src/transformation/text-transformer-test.js`) and the demo
+   helper, and stashes them on `window.HumanLanguageApp`.
+2. `app/modes/transformer.jsx` (later `js/src/app/modes/transformer.jsx`)
+   reads them off `window.HumanLanguageApp` instead of using a dynamic
+   `import()` inside a `useEffect`.
+
+This bypasses the `env` preset's CommonJS rewrite entirely because the
+relevant modules are loaded by a real `<script type="module">` that
+Babel never touches.
+
+After this commit, navigating to `#mode=transformer` rendered the panel
+with the Transform button enabled, and clicking Transform produced a
+real Q/P sequence. See
+[`docs/screenshots/issue-35-transformer-after.png`](../../screenshots/issue-35-transformer-after.png).
+
+## T+3h — automated tests
+
+Commit `e0f7c13` ("test: add Playwright e2e suite and Node-test unit
+suite for issue #35"):
+
+* `tests/e2e/app.spec.mjs` (later moved to `js/tests/e2e/app.spec.mjs`)
+  — 9 Playwright tests covering all six modes plus three
+  transformer-specific regression tests. The regression test for the
+  original issue asserts the body never contains "Failed to load
+  transformer" or "require is not defined".
+* `tests/unit/routing.test.mjs` (now `js/tests/unit/routing.test.mjs`)
+  — 8 `node:test` tests for `parseHash`, `serializeHash`, `MODES`, URI
+  decoding.
+* `tests/unit/ipa.test.mjs` (now `js/tests/unit/ipa.test.mjs`) — 7
+  `node:test` tests for `toIpa` and `toIpaForEntity` using `mock.fn` to
+  stub `globalThis.fetch`.
+* `scripts/serve-static.mjs`, `scripts/run-e2e-local.mjs`,
+  `scripts/run-unit-tests.mjs`, `scripts/check-mjs-syntax.mjs` (all
+  later moved to `js/scripts/`) — zero-dep Node CLIs that the workflow
+  shells out to.
+
+Local run:
+
+```
+✓ 8 routing tests
+✓ 7 ipa tests
+✓ 29 files clean under check-mjs-syntax
+✓ 9 Playwright tests (alphabet / dictionary / ontology / entities /
+  properties / transformer) — 8.1s total
+```
+
+## T+4h — unify CI/CD
+
+Commit `5a861be` ("ci: unify test/pages/links into a single js.yml
+workflow"):
+
+* `.github/workflows/js.yml` created (210 LOC) with a `needs:`-graph
+  of 7 jobs: `syntax-check → unit-tests → e2e-local`, plus
+  `link-check`, then `pages-build → pages-deploy → e2e-deployed`
+  on push to main.
+* `.github/workflows/test.yml`, `.github/workflows/pages.yml`,
+  `.github/workflows/links.yml` deleted in the same commit.
+
+Concurrency policy mirrors the link-foundation template:
+`cancel-in-progress: ${{ github.ref == 'refs/heads/main' }}` —
+cancel older runs on main, queue on PR branches.
+
+## T+5h — case study
+
+This folder.
+
+## T+6h — move all JavaScript under `./js/`
+
+Reviewer feedback on PR #36
+([comment](https://github.com/link-assistant/human-language/pull/36)) asked
+for the deferred requirement 4.1 (move all JS into `./js/`) to be folded
+back into this PR. The move happened in three `git mv` waves so each
+import-path rewrite stays surgical:
+
+1. **Application source → `js/src/`**: `app/` → `js/src/app/`,
+   `transformation/{text-to-qp-transformer,text-transformer-test}.js` →
+   `js/src/transformation/`, and the nine top-level modules
+   (`settings.js`, `wikidata-api.js`, `wikidata-api-browser.js`,
+   `unified-cache.js`, `unified-cache-browser.js`, `persistent-cache.js`,
+   `loading.jsx`, `statements.jsx`, `search-test.js`) → `js/src/`.
+2. **CI / Node-only scripts → `js/scripts/`**: `scripts/*.mjs` plus the
+   eight previously-root integration runners (`run-tests.mjs`,
+   `cache-test.mjs`, `cached-api-test.mjs`, `comprehensive-test.mjs`,
+   `e2e-test.mjs`, `limitation-test.mjs`, `run-test.mjs`,
+   `unified-cache-test.mjs`).
+3. **Tests → `js/tests/`**: `tests/{unit,e2e}` → `js/tests/{unit,e2e}`.
+
+The deployed pages (`app.html`, `entities.html`, `properties.html`,
+`browser-cache-test.html`, `cache-demo.html`, `run-tests.html`,
+`search-demo.html`, `transformation/index.html`,
+`transformation/test-ngram.html`) stayed at their public URLs and had
+their `<script src=…>` and `import` paths rewritten to point at
+`./js/src/...`. The same went for the CI workflow
+(`.github/workflows/js.yml`), `package.json` scripts, both READMEs, and
+`_config.yml`'s `exclude` list (which now keeps `js/scripts`,
+`js/tests`, and the Node-only modules in `js/src/` out of the deployed
+artifact).
+
+Verified locally with `node js/scripts/check-mjs-syntax.mjs`,
+`node js/scripts/run-unit-tests.mjs`, and
+`node js/scripts/run-e2e-local.mjs` (all green: 29 files clean,
+15 gating tests pass, 9 Playwright tests pass in 8.1s).
diff --git a/docs/screenshots/issue-35-transformer-after.png b/docs/screenshots/issue-35-transformer-after.png
new file mode 100644
index 0000000..4e06a4e
Binary files /dev/null and b/docs/screenshots/issue-35-transformer-after.png differ
diff --git a/docs/screenshots/issue-35-transformer-before.png b/docs/screenshots/issue-35-transformer-before.png
new file mode 100644
index 0000000..c4f04a0
Binary files /dev/null and b/docs/screenshots/issue-35-transformer-before.png differ
diff --git a/cache-test.mjs b/js/scripts/cache-test.mjs
similarity index 96%
rename from cache-test.mjs
rename to js/scripts/cache-test.mjs
index 4d157d4..4950daf 100644
--- a/cache-test.mjs
+++ b/js/scripts/cache-test.mjs
@@ -3,7 +3,7 @@
 // Test the persistent cache system
 // Run with: bun cache-test.mjs
 
-import { TextToQPTransformer } from './text-to-qp-transformer.js';
+import { TextToQPTransformer } from '../src/transformation/text-to-qp-transformer.js';
 
 async function testCache() {
   console.log('🗄️ Testing Persistent Cache System\n');
diff --git a/cached-api-test.mjs b/js/scripts/cached-api-test.mjs
similarity index 99%
rename from cached-api-test.mjs
rename to js/scripts/cached-api-test.mjs
index 199ee45..050714e 100644
--- a/cached-api-test.mjs
+++ b/js/scripts/cached-api-test.mjs
@@ -3,7 +3,7 @@
 // Test real Wikidata API with persistent caching - run twice to demonstrate speed improvement
 // Run with: bun cached-api-test.mjs
 
-import { TextToQPTransformer } from './text-to-qp-transformer.js';
+import { TextToQPTransformer } from '../src/transformation/text-to-qp-transformer.js';
 
 /**
  * Test suite for real API with caching
diff --git a/js/scripts/check-mjs-syntax.mjs b/js/scripts/check-mjs-syntax.mjs
new file mode 100755
index 0000000..0dd44a9
--- /dev/null
+++ b/js/scripts/check-mjs-syntax.mjs
@@ -0,0 +1,53 @@
+#!/usr/bin/env node
+// Walks every `.mjs` and plain `.js` module (excluding `node_modules`,
+// `.jsx`, and the babel-standalone-rendered files) and runs
+// `node --check` on it. Catches syntax errors before they hit the
+// browser. Adopted from the JS pipeline template's `check-mjs-syntax.sh`,
+// rewritten in Node so we don't need Bash on every runner.
+
+import { readdir, stat } from 'node:fs/promises';
+import { join, extname, relative } from 'node:path';
+import { spawnSync } from 'node:child_process';
+
+const ROOT = process.cwd();
+
+const IGNORE_DIRS = new Set([
+  'node_modules', '.git', '.github', 'data', 'playwright-report',
+  'test-results', '_site', '.playwright-mcp',
+]);
+
+const SKIP_FILES = new Set([
+  // Babel-standalone-compiled in the browser, not Node-parseable.
+  // (Listed by basename — these live in js/src/ but we match on basename.)
+  'loading.jsx', 'statements.jsx',
+]);
+
+async function walk(dir, out = []) {
+  for (const name of await readdir(dir)) {
+    if (IGNORE_DIRS.has(name)) continue;
+    const full = join(dir, name);
+    const s = await stat(full);
+    if (s.isDirectory()) await walk(full, out);
+    else if (['.js', '.mjs'].includes(extname(name))) out.push(full);
+  }
+  return out;
+}
+
+const files = (await walk(ROOT)).filter((f) => !SKIP_FILES.has(f.split('/').pop()));
+let failed = 0;
+for (const f of files) {
+  const rel = relative(ROOT, f);
+  const r = spawnSync(process.execPath, ['--check', f], { encoding: 'utf8' });
+  if (r.status !== 0) {
+    console.error(`✗ ${rel}`);
+    if (r.stderr) console.error(r.stderr.trim());
+    failed++;
+  } else {
+    console.log(`✓ ${rel}`);
+  }
+}
+if (failed) {
+  console.error(`\n${failed} file(s) failed syntax check.`);
+  process.exit(1);
+}
+console.log(`\nAll ${files.length} files passed syntax check.`);
diff --git a/scripts/check-web-archive.mjs b/js/scripts/check-web-archive.mjs
similarity index 100%
rename from scripts/check-web-archive.mjs
rename to js/scripts/check-web-archive.mjs
diff --git a/comprehensive-test.mjs b/js/scripts/comprehensive-test.mjs
similarity index 99%
rename from comprehensive-test.mjs
rename to js/scripts/comprehensive-test.mjs
index 37031da..ade688f 100644
--- a/comprehensive-test.mjs
+++ b/js/scripts/comprehensive-test.mjs
@@ -3,7 +3,7 @@
 // Comprehensive test suite to find transformer limitations
 // Run with: bun comprehensive-test.mjs
 
-import { TextToQPTransformer } from './text-to-qp-transformer.js';
+import { TextToQPTransformer } from '../src/transformation/text-to-qp-transformer.js';
 
 /**
  * Comprehensive Test Suite to identify transformer limitations
diff --git a/e2e-test.mjs b/js/scripts/e2e-test.mjs
similarity index 99%
rename from e2e-test.mjs
rename to js/scripts/e2e-test.mjs
index f76fcfa..4bdd676 100644
--- a/e2e-test.mjs
+++ b/js/scripts/e2e-test.mjs
@@ -3,7 +3,7 @@
 // End-to-End test for Text to Q/P Transformer using real Wikidata API
 // Run with: bun e2e-test.mjs
 
-import { TextToQPTransformer } from './transformation/text-to-qp-transformer.js';
+import { TextToQPTransformer } from '../src/transformation/text-to-qp-transformer.js';
 
 /**
  * E2E Test Suite using real Wikidata API
diff --git a/limitation-test.mjs b/js/scripts/limitation-test.mjs
similarity index 99%
rename from limitation-test.mjs
rename to js/scripts/limitation-test.mjs
index cbdf086..e6c1849 100644
--- a/limitation-test.mjs
+++ b/js/scripts/limitation-test.mjs
@@ -3,7 +3,7 @@
 // Fast limitation test using mock data to identify transformer problems
 // Run with: bun limitation-test.mjs
 
-import { TextToQPTransformer } from './text-to-qp-transformer.js';
+import { TextToQPTransformer } from '../src/transformation/text-to-qp-transformer.js';
 
 /**
  * Enhanced Mock API for testing edge cases and limitations
diff --git a/js/scripts/run-e2e-local.mjs b/js/scripts/run-e2e-local.mjs
new file mode 100755
index 0000000..bbcd41e
--- /dev/null
+++ b/js/scripts/run-e2e-local.mjs
@@ -0,0 +1,63 @@
+#!/usr/bin/env node
+// Spawns the static server, waits for it to accept connections, then runs
+// the Playwright suite against http://localhost:8000. Used by the
+// `js.yml` "PR e2e" job *and* by `npm run test:e2e:local` for developers.
+//
+// The server is killed in `finally`, so a failing test never leaves a
+// dangling process behind on a developer machine.
+
+import { spawn } from 'node:child_process';
+import { setTimeout as sleep } from 'node:timers/promises';
+
+const PORT = Number(process.env.PORT || 8000);
+const URL = `http://localhost:${PORT}`;
+
+async function waitForServer(url, timeoutMs = 15000) {
+  const deadline = Date.now() + timeoutMs;
+  while (Date.now() < deadline) {
+    try {
+      const res = await fetch(url + '/app.html');
+      if (res.ok) return;
+    } catch {
+      // server not ready yet
+    }
+    await sleep(250);
+  }
+  throw new Error(`Static server did not start within ${timeoutMs}ms`);
+}
+
+async function alreadyServing(url) {
+  try {
+    const res = await fetch(url + '/app.html');
+    return res.ok;
+  } catch {
+    return false;
+  }
+}
+
+let serverProc;
+let exitCode = 1;
+try {
+  // If something is already serving on PORT (e.g. a developer left the
+  // dev server running, or CI reused a sidecar), re-use it instead of
+  // crashing with EADDRINUSE.
+  if (await alreadyServing(URL)) {
+    console.log(`Re-using existing server at ${URL}`);
+  } else {
+    serverProc = spawn(
+      process.execPath,
+      ['js/scripts/serve-static.mjs'],
+      { stdio: ['ignore', 'inherit', 'inherit'], env: { ...process.env, PORT: String(PORT) } },
+    );
+    await waitForServer(URL);
+  }
+  const playwright = spawn(
+    'npx',
+    ['playwright', 'test', '--config', 'js/tests/e2e/playwright.config.mjs'],
+    { stdio: 'inherit', env: { ...process.env, BASE_URL: URL } },
+  );
+  exitCode = await new Promise((res) => playwright.on('exit', res));
+} finally {
+  if (serverProc && !serverProc.killed) serverProc.kill('SIGTERM');
+  process.exit(exitCode);
+}
diff --git a/run-test.mjs b/js/scripts/run-test.mjs
similarity index 99%
rename from run-test.mjs
rename to js/scripts/run-test.mjs
index 36b6b57..249b17b 100644
--- a/run-test.mjs
+++ b/js/scripts/run-test.mjs
@@ -3,7 +3,7 @@
 // Node.js test runner for Text to Q/P Transformer
 // Run with: bun run-test.mjs
 
-import { TextToQPTransformer } from './text-to-qp-transformer.js';
+import { TextToQPTransformer } from '../src/transformation/text-to-qp-transformer.js';
 
 /**
  * Mock Wikidata API responses for testing - Updated based on E2E findings
diff --git a/run-tests.mjs b/js/scripts/run-tests.mjs
similarity index 87%
rename from run-tests.mjs
rename to js/scripts/run-tests.mjs
index 5e20cb3..315ea85 100755
--- a/run-tests.mjs
+++ b/js/scripts/run-tests.mjs
@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 
-import { TextTransformerTest, demonstrateTransformer } from './transformation/text-transformer-test.js';
+import { TextTransformerTest, demonstrateTransformer } from '../src/transformation/text-transformer-test.js';
 
 async function main() {
   console.log('🚀 Running Text Transformer Tests...\n');
diff --git a/js/scripts/run-unit-tests.mjs b/js/scripts/run-unit-tests.mjs
new file mode 100755
index 0000000..0979d36
--- /dev/null
+++ b/js/scripts/run-unit-tests.mjs
@@ -0,0 +1,73 @@
+#!/usr/bin/env node
+// Runs every Node-runnable unit/integration test in the repo, in a
+// well-defined order, with a per-test timeout so a hung suite can't pin
+// down CI. The script returns non-zero if any *fast, deterministic* suite
+// fails. The integration suites that hit the live Wikidata API are
+// allowed to fail — their value is the rich console output, not a green
+// build.
+
+import { spawn } from 'node:child_process';
+
+const FAST_SUITES = [
+  // Pure-JS suites with no network dependency. Failures here gate the build.
+  'js/tests/unit/routing.test.mjs',
+  'js/tests/unit/ipa.test.mjs',
+];
+
+const INTEGRATION_SUITES = [
+  // Hit the live Wikidata API. Reported but non-gating.
+  { file: 'js/scripts/run-tests.mjs',          label: 'transformer suite' },
+  { file: 'js/scripts/cache-test.mjs',         label: 'cache sanity' },
+  { file: 'js/scripts/unified-cache-test.mjs', label: 'unified cache' },
+];
+
+const TIMEOUT_MS = 5 * 60 * 1000;
+
+function run(file, { gating }) {
+  return new Promise((resolve) => {
+    const start = Date.now();
+    const proc = spawn(process.execPath, [file], { stdio: 'inherit' });
+    const timer = setTimeout(() => {
+      console.error(`::error::${file} exceeded ${TIMEOUT_MS / 1000}s — killing.`);
+      proc.kill('SIGKILL');
+    }, TIMEOUT_MS);
+    proc.on('exit', (code) => {
+      clearTimeout(timer);
+      const ms = Date.now() - start;
+      const ok = code === 0;
+      console.log(`${ok ? '✓' : '✗'} ${file} (${ms}ms) ${gating ? '[gating]' : '[informational]'}`);
+      resolve({ ok, gating });
+    });
+  });
+}
+
+let anyGatingFailed = false;
+
+for (const suite of FAST_SUITES) {
+  try {
+    await import('node:fs').then((m) => m.promises.access(suite));
+  } catch {
+    // The unit suites are added incrementally; missing files are OK as
+    // long as we exercise the ones that exist.
+    console.log(`- ${suite} (skipped: file missing)`);
+    continue;
+  }
+  const { ok } = await run(suite, { gating: true });
+  if (!ok) anyGatingFailed = true;
+}
+
+for (const { file, label } of INTEGRATION_SUITES) {
+  try {
+    await import('node:fs').then((m) => m.promises.access(file));
+  } catch {
+    console.log(`- ${label} (${file}) (skipped: file missing)`);
+    continue;
+  }
+  await run(file, { gating: false });
+}
+
+if (anyGatingFailed) {
+  console.error('\nOne or more gating unit suites failed.');
+  process.exit(1);
+}
+console.log('\nAll gating suites passed.');
diff --git a/js/scripts/serve-static.mjs b/js/scripts/serve-static.mjs
new file mode 100755
index 0000000..61c1184
--- /dev/null
+++ b/js/scripts/serve-static.mjs
@@ -0,0 +1,78 @@
+#!/usr/bin/env node
+// Lightweight static server used by the e2e harness.
+//
+// The repo is already a static site (the deployed artifact is just
+// `app.html` + sibling assets). For local development and CI we need
+// *something* that serves it over HTTP so dynamic `import()` and
+// `<script type="module">` resolve correctly. We deliberately don't pull in
+// `serve`/`http-server` — Node ships everything we need.
+
+import { createServer } from 'node:http';
+import { readFile, stat } from 'node:fs/promises';
+import { extname, join, resolve, normalize } from 'node:path';
+
+const ROOT = resolve(process.argv[2] || '.');
+const PORT = Number(process.env.PORT || 8000);
+
+const MIME = {
+  '.html': 'text/html; charset=utf-8',
+  '.css':  'text/css; charset=utf-8',
+  '.js':   'application/javascript; charset=utf-8',
+  '.mjs':  'application/javascript; charset=utf-8',
+  '.jsx':  'application/javascript; charset=utf-8',
+  '.json': 'application/json; charset=utf-8',
+  '.png':  'image/png',
+  '.jpg':  'image/jpeg',
+  '.svg':  'image/svg+xml',
+  '.ico':  'image/x-icon',
+  '.md':   'text/markdown; charset=utf-8',
+  '.txt':  'text/plain; charset=utf-8',
+};
+
+const server = createServer(async (req, res) => {
+  try {
+    const url = new URL(req.url, 'http://localhost');
+    // Strip leading slash and prevent path traversal.
+    let pathname = decodeURIComponent(url.pathname.replace(/^\/+/, ''));
+    if (!pathname) pathname = 'index.html';
+    const filePath = normalize(join(ROOT, pathname));
+    if (!filePath.startsWith(ROOT)) {
+      res.writeHead(403); res.end('Forbidden'); return;
+    }
+    let target = filePath;
+    try {
+      const s = await stat(target);
+      if (s.isDirectory()) target = join(target, 'index.html');
+    } catch {
+      // fall through to readFile, which will surface ENOENT
+    }
+    const data = await readFile(target);
+    res.writeHead(200, {
+      'Content-Type': MIME[extname(target).toLowerCase()] || 'application/octet-stream',
+      'Cache-Control': 'no-store',
+    });
+    res.end(data);
+  } catch (err) {
+    if (err && err.code === 'ENOENT') {
+      res.writeHead(404, { 'Content-Type': 'text/plain' });
+      res.end('Not found');
+    } else {
+      res.writeHead(500, { 'Content-Type': 'text/plain' });
+      res.end(`Server error: ${err.message}`);
+    }
+  }
+});
+
+server.on('error', (err) => {
+  // EADDRINUSE shouldn't crash the harness — print a clear message and exit
+  // non-zero so the caller (`run-e2e-local.mjs`) can decide what to do.
+  if (err && err.code === 'EADDRINUSE') {
+    console.error(`Port ${PORT} is already in use; not starting a second server.`);
+    process.exit(2);
+  }
+  throw err;
+});
+
+server.listen(PORT, () => {
+  console.log(`Serving ${ROOT} on http://localhost:${PORT}`);
+});
diff --git a/unified-cache-test.mjs b/js/scripts/unified-cache-test.mjs
similarity index 97%
rename from unified-cache-test.mjs
rename to js/scripts/unified-cache-test.mjs
index 2e81c8d..3139a1b 100644
--- a/unified-cache-test.mjs
+++ b/js/scripts/unified-cache-test.mjs
@@ -3,8 +3,8 @@
 // Test unified cache system with different backends
 // Run with: bun unified-cache-test.mjs
 
-import { TextToQPTransformer } from './text-to-qp-transformer.js';
-import { CacheFactory } from './unified-cache.js';
+import { TextToQPTransformer } from '../src/transformation/text-to-qp-transformer.js';
+import { CacheFactory } from '../src/unified-cache.js';
 
 /**
  * Test suite for unified cache system
diff --git a/app/ipa.js b/js/src/app/ipa.js
similarity index 100%
rename from app/ipa.js
rename to js/src/app/ipa.js
diff --git a/app/modes/alphabet.jsx b/js/src/app/modes/alphabet.jsx
similarity index 100%
rename from app/modes/alphabet.jsx
rename to js/src/app/modes/alphabet.jsx
diff --git a/app/modes/dictionary.jsx b/js/src/app/modes/dictionary.jsx
similarity index 100%
rename from app/modes/dictionary.jsx
rename to js/src/app/modes/dictionary.jsx
diff --git a/app/modes/entity.jsx b/js/src/app/modes/entity.jsx
similarity index 100%
rename from app/modes/entity.jsx
rename to js/src/app/modes/entity.jsx
diff --git a/app/modes/ontology.jsx b/js/src/app/modes/ontology.jsx
similarity index 100%
rename from app/modes/ontology.jsx
rename to js/src/app/modes/ontology.jsx
diff --git a/app/modes/property.jsx b/js/src/app/modes/property.jsx
similarity index 100%
rename from app/modes/property.jsx
rename to js/src/app/modes/property.jsx
diff --git a/app/modes/transformer.jsx b/js/src/app/modes/transformer.jsx
similarity index 90%
rename from app/modes/transformer.jsx
rename to js/src/app/modes/transformer.jsx
index fcd1a8d..1b7ce4a 100644
--- a/app/modes/transformer.jsx
+++ b/js/src/app/modes/transformer.jsx
@@ -7,7 +7,13 @@
 // inline.
 
 (function attachTransformer() {
-  const { TestsPanel } = window.HumanLanguageApp;
+  // We deliberately read everything from `window.HumanLanguageApp` instead of
+  // using dynamic `import()` — Babel-standalone (which compiles this file in
+  // the browser) rewrites `import('./x.js')` to `require('./x.js')`, and
+  // `require` is not defined, so the load fails with
+  // "Failed to load transformer: require is not defined" (issue #35).
+  const { TestsPanel, TextToQPTransformer, TextTransformerTest, demonstrateTransformer } =
+    window.HumanLanguageApp;
 
   const EXAMPLES = [
     { title: 'Person and Birthplace',  text: 'Barack Obama was born in Hawaii' },
@@ -33,15 +39,14 @@
     const [transformer, setTransformer]   = React.useState(null);
 
     React.useEffect(() => {
-      let cancelled = false;
-      import('../transformation/text-to-qp-transformer.js')
-        .then((mod) => {
-          if (!cancelled) setTransformer(new mod.TextToQPTransformer());
-        })
-        .catch((e) => {
-          if (!cancelled) setError(`Failed to load transformer: ${e?.message || e}`);
-        });
-      return () => { cancelled = true; };
+      try {
+        if (!TextToQPTransformer) {
+          throw new Error('TextToQPTransformer not loaded by app.html');
+        }
+        setTransformer(new TextToQPTransformer());
+      } catch (e) {
+        setError(`Failed to load transformer: ${e?.message || e}`);
+      }
     }, []);
 
     const onTransform = async (e) => {
@@ -115,8 +120,7 @@
       {
         label: 'Run all transformer tests',
         run: async () => {
-          const mod = await import('../transformation/text-transformer-test.js');
-          const suite = new mod.TextTransformerTest();
+          const suite = new TextTransformerTest();
           const summary = await suite.runAllTests();
           console.log(`Result: ${summary?.passed}/${summary?.total} passed (${summary?.successRate?.toFixed?.(1)}%)`);
         },
@@ -124,8 +128,7 @@
       {
         label: 'Run feature tests',
         run: async () => {
-          const mod = await import('../transformation/text-transformer-test.js');
-          const suite = new mod.TextTransformerTest();
+          const suite = new TextTransformerTest();
           await suite.testSpecificFeatures();
           console.log('Feature tests completed.');
         },
@@ -133,8 +136,7 @@
       {
         label: 'Run demo',
         run: async () => {
-          const mod = await import('../transformation/text-transformer-test.js');
-          await mod.demonstrateTransformer();
+          await demonstrateTransformer();
           console.log('Demo completed.');
         },
       },
diff --git a/app/routing.js b/js/src/app/routing.js
similarity index 100%
rename from app/routing.js
rename to js/src/app/routing.js
diff --git a/app/shell.jsx b/js/src/app/shell.jsx
similarity index 100%
rename from app/shell.jsx
rename to js/src/app/shell.jsx
diff --git a/app/tests-panel.jsx b/js/src/app/tests-panel.jsx
similarity index 100%
rename from app/tests-panel.jsx
rename to js/src/app/tests-panel.jsx
diff --git a/loading.jsx b/js/src/loading.jsx
similarity index 100%
rename from loading.jsx
rename to js/src/loading.jsx
diff --git a/persistent-cache.js b/js/src/persistent-cache.js
similarity index 100%
rename from persistent-cache.js
rename to js/src/persistent-cache.js
diff --git a/search-test.js b/js/src/search-test.js
similarity index 100%
rename from search-test.js
rename to js/src/search-test.js
diff --git a/settings.js b/js/src/settings.js
similarity index 100%
rename from settings.js
rename to js/src/settings.js
diff --git a/statements.jsx b/js/src/statements.jsx
similarity index 100%
rename from statements.jsx
rename to js/src/statements.jsx
diff --git a/transformation/test-ngram-demo.mjs b/js/src/transformation/test-ngram-demo.mjs
similarity index 100%
rename from transformation/test-ngram-demo.mjs
rename to js/src/transformation/test-ngram-demo.mjs
diff --git a/transformation/text-to-qp-transformer.js b/js/src/transformation/text-to-qp-transformer.js
similarity index 97%
rename from transformation/text-to-qp-transformer.js
rename to js/src/transformation/text-to-qp-transformer.js
index ad1fdc2..f836f2b 100644
--- a/transformation/text-to-qp-transformer.js
+++ b/js/src/transformation/text-to-qp-transformer.js
@@ -2,19 +2,18 @@
 // Transforms English text into sequences of Wikidata entities (Q) and properties (P)
 // with disambiguation support using [Q1 or Q2 or Q3] syntax
 
-// Import appropriate API based on environment
+// Pick the right Wikidata API at runtime: the browser version avoids Node's
+// `fs`/`path` imports that the file-cache backend pulls in.
 let WikidataAPIClient, WikidataSearchUtility;
 
 if (typeof window !== 'undefined') {
-  // Browser environment
-  const module = await import('../wikidata-api-browser.js');
-  WikidataAPIClient = module.WikidataAPIClient;
-  WikidataSearchUtility = module.WikidataSearchUtility;
+  const mod = await import('../wikidata-api-browser.js');
+  WikidataAPIClient = mod.WikidataAPIClient;
+  WikidataSearchUtility = mod.WikidataSearchUtility;
 } else {
-  // Node.js environment
-  const module = await import('../wikidata-api.js');
-  WikidataAPIClient = module.WikidataAPIClient;  
-  WikidataSearchUtility = module.WikidataSearchUtility;
+  const mod = await import('../wikidata-api.js');
+  WikidataAPIClient = mod.WikidataAPIClient;
+  WikidataSearchUtility = mod.WikidataSearchUtility;
 }
 
 /**
diff --git a/transformation/text-transformer-test.js b/js/src/transformation/text-transformer-test.js
similarity index 100%
rename from transformation/text-transformer-test.js
rename to js/src/transformation/text-transformer-test.js
diff --git a/unified-cache-browser.js b/js/src/unified-cache-browser.js
similarity index 100%
rename from unified-cache-browser.js
rename to js/src/unified-cache-browser.js
diff --git a/unified-cache.js b/js/src/unified-cache.js
similarity index 100%
rename from unified-cache.js
rename to js/src/unified-cache.js
diff --git a/wikidata-api-browser.js b/js/src/wikidata-api-browser.js
similarity index 100%
rename from wikidata-api-browser.js
rename to js/src/wikidata-api-browser.js
diff --git a/wikidata-api.js b/js/src/wikidata-api.js
similarity index 100%
rename from wikidata-api.js
rename to js/src/wikidata-api.js
diff --git a/js/tests/e2e/app.spec.mjs b/js/tests/e2e/app.spec.mjs
new file mode 100644
index 0000000..7885def
--- /dev/null
+++ b/js/tests/e2e/app.spec.mjs
@@ -0,0 +1,144 @@
+// End-to-end tests for the unified SPA at app.html.
+//
+// Run modes:
+//   * Local PR gate — `BASE_URL` defaults to http://localhost:8000, and the
+//     companion CI workflow (`js.yml`) boots a static server before invoking
+//     Playwright.
+//   * Post-deploy verification — set `BASE_URL=https://link-assistant.github.io/human-language`
+//     to re-run the same assertions against the deployed GitHub Pages site.
+//
+// The suite intentionally avoids assertions that depend on live Wikidata
+// responses; those live in the existing Node-only test scripts. The browser
+// suite verifies the wiring: every mode boots without runtime errors, the
+// "Failed to load transformer" regression from issue #35 stays gone, and
+// every mode's main interaction surface (textbox, buttons, badges) renders.
+
+import { test, expect } from '@playwright/test';
+
+const BASE_URL = process.env.BASE_URL || 'http://localhost:8000';
+const APP = `${BASE_URL.replace(/\/$/, '')}/app.html`;
+
+// Collect every console error / pageerror that happens after the page boots
+// so each test can assert "no surprises were logged". We deliberately ignore
+// favicon 404s and the well-known React 19 dev-mode warning about
+// `useLayoutEffect` on the server (we render client-only, so it never fires).
+async function attachErrorCollectors(page) {
+  const errors = [];
+  page.on('pageerror', (err) => errors.push(`pageerror: ${err.message}`));
+  page.on('console', (msg) => {
+    if (msg.type() !== 'error') return;
+    const text = msg.text();
+    if (text.includes('favicon.ico')) return;
+    errors.push(`console.error: ${text}`);
+  });
+  return errors;
+}
+
+test.describe('Unified SPA - app.html', () => {
+  test('landing page renders with all six mode tabs', async ({ page }) => {
+    const errors = await attachErrorCollectors(page);
+    await page.goto(APP);
+    await expect(page.getByRole('button', { name: 'Alphabet' })).toBeVisible();
+    await expect(page.getByRole('button', { name: 'Dictionary' })).toBeVisible();
+    await expect(page.getByRole('button', { name: 'Ontology' })).toBeVisible();
+    await expect(page.getByRole('button', { name: 'Entities' })).toBeVisible();
+    await expect(page.getByRole('button', { name: 'Properties' })).toBeVisible();
+    await expect(page.getByRole('button', { name: 'Transformer' })).toBeVisible();
+    expect(errors).toEqual([]);
+  });
+});
+
+test.describe('Alphabet mode', () => {
+  test('renders letter and IPA without errors', async ({ page }) => {
+    const errors = await attachErrorCollectors(page);
+    await page.goto(`${APP}#mode=alphabet&letter=A`);
+    // Alphabet mode wraps its content in `<section role="region" aria-label="Alphabet">`.
+    await expect(page.getByRole('region', { name: 'Alphabet' })).toBeVisible({ timeout: 10000 });
+    // Pagination buttons are always present once the letter renders.
+    await expect(page.getByRole('button', { name: 'Next →' })).toBeVisible();
+    expect(errors).toEqual([]);
+  });
+});
+
+test.describe('Dictionary mode', () => {
+  test('renders search input and lookup button', async ({ page }) => {
+    const errors = await attachErrorCollectors(page);
+    await page.goto(`${APP}#mode=dictionary`);
+    // Dictionary mode exposes a Word searchbox and a "Look up" button.
+    await expect(page.getByRole('searchbox', { name: 'Word' })).toBeVisible({ timeout: 10000 });
+    await expect(page.getByRole('button', { name: 'Look up' })).toBeVisible();
+    expect(errors).toEqual([]);
+  });
+});
+
+test.describe('Ontology mode', () => {
+  test('renders ontology heading', async ({ page }) => {
+    const errors = await attachErrorCollectors(page);
+    await page.goto(`${APP}#mode=ontology`);
+    await expect(page.getByRole('heading', { name: 'Ontology', exact: false })).toBeVisible({ timeout: 10000 });
+    expect(errors).toEqual([]);
+  });
+});
+
+test.describe('Entities mode', () => {
+  test('renders entity browser with id input', async ({ page }) => {
+    const errors = await attachErrorCollectors(page);
+    await page.goto(`${APP}#mode=entity&id=Q35120`);
+    await expect(page.locator('body')).toContainText(/Q35120|Entity|entity/i, { timeout: 10000 });
+    expect(errors).toEqual([]);
+  });
+});
+
+test.describe('Properties mode', () => {
+  test('renders property browser with id input', async ({ page }) => {
+    const errors = await attachErrorCollectors(page);
+    await page.goto(`${APP}#mode=property&id=P31`);
+    await expect(page.locator('body')).toContainText(/P31|Property|property/i, { timeout: 10000 });
+    expect(errors).toEqual([]);
+  });
+});
+
+test.describe('Transformer mode - regression for issue #35', () => {
+  test('mode boots without the "require is not defined" banner', async ({ page }) => {
+    const errors = await attachErrorCollectors(page);
+    await page.goto(`${APP}#mode=transformer`);
+
+    // The headline assertion: the bug from issue #35 must stay fixed.
+    await expect(page.getByRole('heading', { name: 'Transformer', exact: false })).toBeVisible({ timeout: 10000 });
+    await expect(page.locator('body')).not.toContainText('Failed to load transformer');
+    await expect(page.locator('body')).not.toContainText('require is not defined');
+    await expect(page.locator("text=Can't find variable: require")).toHaveCount(0);
+
+    // Transform button must be enabled (it stays disabled while the
+    // transformer module is loading; if the module fails to load, it stays
+    // disabled forever).
+    const transformBtn = page.getByRole('button', { name: 'Transform', exact: true });
+    await expect(transformBtn).toBeVisible();
+    await expect(transformBtn).toBeEnabled({ timeout: 5000 });
+    expect(errors).toEqual([]);
+  });
+
+  test('Load example fills textarea and Transform runs against Wikidata', async ({ page }) => {
+    test.setTimeout(60000);
+    await page.goto(`${APP}#mode=transformer`);
+    await page.getByRole('button', { name: 'Transform', exact: true }).waitFor({ state: 'visible' });
+
+    // Use a deterministic example via the example-text card rather than
+    // the random "Load example" button so the assertion below is stable.
+    await page.getByRole('button', { name: /Geographic Relation/ }).click();
+    await page.getByRole('button', { name: 'Transform', exact: true }).click();
+
+    // Wait for the Q/P Sequence panel to appear with at least one Q/P id.
+    await expect(page.locator('body')).toContainText('Q/P Sequence', { timeout: 45000 });
+    await expect(page.locator('body')).toContainText(/[QP]\d+/);
+  });
+
+  test('Clear button empties the textarea', async ({ page }) => {
+    await page.goto(`${APP}#mode=transformer`);
+    const ta = page.locator('textarea').first();
+    await ta.waitFor();
+    await ta.fill('Hello world');
+    await page.getByRole('button', { name: 'Clear', exact: true }).click();
+    await expect(ta).toHaveValue('');
+  });
+});
diff --git a/js/tests/e2e/playwright.config.mjs b/js/tests/e2e/playwright.config.mjs
new file mode 100644
index 0000000..c26c627
--- /dev/null
+++ b/js/tests/e2e/playwright.config.mjs
@@ -0,0 +1,39 @@
+// Playwright config for the e2e suite.
+//
+// The same file drives two CI jobs:
+//   * pull request — `BASE_URL` is the local static server on port 8000.
+//   * post-deploy — `BASE_URL` is the GitHub Pages URL, set by `js.yml`
+//     after `actions/deploy-pages` resolves the deploy URL.
+//
+// Both jobs run the same specs.
+
+import { defineConfig } from '@playwright/test';
+
+export default defineConfig({
+  testDir: '.',
+  testMatch: '**/*.spec.mjs',
+  // Each spec is independent; parallelism is safe.
+  fullyParallel: true,
+  // Fail fast on accidental `test.only` left in a spec.
+  forbidOnly: !!process.env.CI,
+  // One retry on CI smooths over the rare Wikidata flake.
+  retries: process.env.CI ? 1 : 0,
+  reporter: process.env.CI
+    ? [['list'], ['html', { open: 'never', outputFolder: 'playwright-report' }]]
+    : 'list',
+  use: {
+    baseURL: process.env.BASE_URL || 'http://localhost:8000',
+    headless: true,
+    screenshot: 'only-on-failure',
+    trace: 'retain-on-failure',
+    video: 'retain-on-failure',
+    actionTimeout: 15000,
+    navigationTimeout: 30000,
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { browserName: 'chromium' },
+    },
+  ],
+});
diff --git a/js/tests/unit/ipa.test.mjs b/js/tests/unit/ipa.test.mjs
new file mode 100644
index 0000000..1b80a0a
--- /dev/null
+++ b/js/tests/unit/ipa.test.mjs
@@ -0,0 +1,83 @@
+// Unit tests for js/src/app/ipa.js.
+//
+// `toIpa` calls out to network backends, so we stub `globalThis.fetch` to
+// make the tests deterministic and offline. `toIpaForEntity` is exercised
+// with a synthetic entity payload — no network at all.
+
+import { test, mock } from 'node:test';
+import assert from 'node:assert/strict';
+
+const { toIpa, toIpaForEntity } = await import('../../src/app/ipa.js');
+
+function stubFetch(plan) {
+  // `plan` is an object whose keys are URL substrings and values are the
+  // JSON payloads to return. Anything that doesn't match returns 404.
+  return mock.fn(async (url) => {
+    for (const [needle, body] of Object.entries(plan)) {
+      if (String(url).includes(needle)) {
+        return new Response(JSON.stringify(body), { status: 200 });
+      }
+    }
+    return new Response('not found', { status: 404 });
+  });
+}
+
+test('toIpa returns "" for empty / non-string input', async () => {
+  assert.equal(await toIpa(''), '');
+  assert.equal(await toIpa(null), '');
+  assert.equal(await toIpa(undefined), '');
+  assert.equal(await toIpa(42), '');
+});
+
+test('toIpa: preserves whitespace and punctuation between tokens', async () => {
+  globalThis.fetch = stubFetch({
+    '/api/v2/entries/en/hello':  [{ phonetic: '/həˈloʊ/' }],
+    '/api/v2/entries/en/world':  [{ phonetic: '/wɜːrld/' }],
+  });
+  const out = await toIpa('hello, world!');
+  assert.match(out, /həˈloʊ/);
+  assert.match(out, /wɜːrld/);
+  assert.match(out, /,\s/); // comma and space preserved
+  assert.ok(out.endsWith('!'), `expected trailing "!" in ${JSON.stringify(out)}`);
+});
+
+test('toIpa: tokens with no backend hit are flagged with [?]', async () => {
+  globalThis.fetch = stubFetch({}); // nothing matches
+  const out = await toIpa('xyzzy', 'en');
+  assert.match(out, /\[\?\]xyzzy/);
+});
+
+test('toIpaForEntity: uses P898 claim when present', async () => {
+  const entity = {
+    claims: {
+      P898: [{ mainsnak: { datavalue: { value: { text: 'kæt' } } } }],
+    },
+    labels: { en: { value: 'cat' } },
+  };
+  const out = await toIpaForEntity(entity, 'en');
+  assert.equal(out, '/kæt/');
+});
+
+test('toIpaForEntity: keeps existing slashes in P898 value', async () => {
+  const entity = {
+    claims: {
+      P898: [{ mainsnak: { datavalue: { value: '/ˈleɪbəl/' } } }],
+    },
+  };
+  const out = await toIpaForEntity(entity, 'en');
+  assert.equal(out, '/ˈleɪbəl/');
+});
+
+test('toIpaForEntity: falls back to label-driven toIpa when no P898', async () => {
+  globalThis.fetch = stubFetch({
+    '/api/v2/entries/en/cat': [{ phonetic: '/kæt/' }],
+  });
+  const entity = { labels: { en: { value: 'cat' } } };
+  const out = await toIpaForEntity(entity, 'en');
+  assert.match(out, /kæt/);
+});
+
+test('toIpaForEntity: empty entity returns ""', async () => {
+  assert.equal(await toIpaForEntity({}, 'en'), '');
+  assert.equal(await toIpaForEntity(null, 'en'), '');
+});
diff --git a/js/tests/unit/routing.test.mjs b/js/tests/unit/routing.test.mjs
new file mode 100644
index 0000000..711ccaa
--- /dev/null
+++ b/js/tests/unit/routing.test.mjs
@@ -0,0 +1,68 @@
+// Unit tests for js/src/app/routing.js — pure, no DOM required.
+//
+// We use Node's built-in `node:test` so the suite has zero dependencies. Run
+// with `node js/tests/unit/routing.test.mjs` or via `js/scripts/run-unit-tests.mjs`.
+
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+
+import { parseHash, serializeHash, MODES, DEFAULT_MODE } from '../../src/app/routing.js';
+
+test('parseHash: empty hash returns DEFAULT_MODE with no params', () => {
+  for (const h of ['', '#', undefined, null]) {
+    assert.deepEqual(parseHash(h), { mode: DEFAULT_MODE, params: {} });
+  }
+});
+
+test('parseHash: legacy Q-id and P-id forms route to entity/property', () => {
+  assert.deepEqual(parseHash('#Q35120'), { mode: 'entity', params: { id: 'Q35120' } });
+  assert.deepEqual(parseHash('Q42'),     { mode: 'entity', params: { id: 'Q42' } });
+  assert.deepEqual(parseHash('#P31'),    { mode: 'property', params: { id: 'P31' } });
+  assert.deepEqual(parseHash('p279'),    { mode: 'property', params: { id: 'P279' } });
+});
+
+test('parseHash: explicit mode + params', () => {
+  assert.deepEqual(
+    parseHash('#mode=alphabet&letter=A'),
+    { mode: 'alphabet', params: { letter: 'A' } },
+  );
+  assert.deepEqual(
+    parseHash('#mode=dictionary&word=cat&lang=en&ipa=1'),
+    { mode: 'dictionary', params: { word: 'cat', lang: 'en', ipa: '1' } },
+  );
+});
+
+test('parseHash: unknown modes fall back to DEFAULT_MODE', () => {
+  assert.equal(parseHash('#mode=nope').mode, DEFAULT_MODE);
+});
+
+test('parseHash: decodes URI-encoded values and `+` as space', () => {
+  assert.deepEqual(
+    parseHash('#mode=dictionary&word=hello+world'),
+    { mode: 'dictionary', params: { word: 'hello world' } },
+  );
+  assert.deepEqual(
+    parseHash('#mode=dictionary&word=caf%C3%A9'),
+    { mode: 'dictionary', params: { word: 'café' } },
+  );
+});
+
+test('serializeHash: round-trips with parseHash', () => {
+  for (const mode of MODES) {
+    const hash = serializeHash({ mode, params: { a: '1', b: 'two words' } });
+    const parsed = parseHash(hash);
+    assert.equal(parsed.mode, mode);
+    assert.deepEqual(parsed.params, { a: '1', b: 'two words' });
+  }
+});
+
+test('serializeHash: drops empty / nullish params', () => {
+  const hash = serializeHash({ mode: 'entity', params: { id: 'Q1', empty: '', skip: null, also: undefined } });
+  assert.equal(hash, '#mode=entity&id=Q1');
+});
+
+test('MODES contains exactly the six expected modes', () => {
+  assert.deepEqual([...MODES].sort(), [
+    'alphabet', 'dictionary', 'entity', 'ontology', 'property', 'transformer',
+  ]);
+});
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..19c3915
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,78 @@
+{
+  "name": "human-language",
+  "version": "0.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "human-language",
+      "version": "0.0.0",
+      "devDependencies": {
+        "@playwright/test": "^1.49.1"
+      }
+    },
+    "node_modules/@playwright/test": {
+      "version": "1.59.1",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.59.1.tgz",
+      "integrity": "sha512-PG6q63nQg5c9rIi4/Z5lR5IVF7yU5MqmKaPOe0HSc0O2cX1fPi96sUQu5j7eo4gKCkB2AnNGoWt7y4/Xx3Kcqg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright": "1.59.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/playwright": {
+      "version": "1.59.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.59.1.tgz",
+      "integrity": "sha512-C8oWjPR3F81yljW9o5OxcWzfh6avkVwDD2VYdwIGqTkl+OGFISgypqzfu7dOe4QNLL2aqcWBmI3PMtLIK233lw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright-core": "1.59.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.59.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.59.1.tgz",
+      "integrity": "sha512-HBV/RJg81z5BiiZ9yPzIiClYV/QMsDCKUyogwH9p3MCP6IYjUFu/MActgYAvK0oWyV9NlwM3GLBjADyWgydVyg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..6b0a4ab
--- /dev/null
+++ b/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "human-language",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "description": "Human Language: a Wikidata-backed exploration of alphabets, dictionaries, ontologies, entities, properties and English-to-Q/P transformation.",
+  "scripts": {
+    "serve": "node js/scripts/serve-static.mjs",
+    "test:e2e": "playwright test --config js/tests/e2e/playwright.config.mjs",
+    "test:e2e:local": "node js/scripts/run-e2e-local.mjs",
+    "test:unit": "node js/scripts/run-unit-tests.mjs",
+    "test:syntax": "node js/scripts/check-mjs-syntax.mjs",
+    "check:web-archive": "node js/scripts/check-web-archive.mjs"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.49.1"
+  }
+}
diff --git a/run-tests.html b/run-tests.html
index 8258f4e..4d9e196 100644
--- a/run-tests.html
+++ b/run-tests.html
@@ -97,7 +97,7 @@ <h1>🧪 Text to Q/P Transformer Test Suite</h1>
   </div>
 
   <script type="module">
-    import { TextTransformerTest, demonstrateTransformer } from './transformation/text-transformer-test.js';
+    import { TextTransformerTest, demonstrateTransformer } from './js/src/transformation/text-transformer-test.js';
 
     let testSuite;
     let output = document.getElementById('output');
diff --git a/search-demo.html b/search-demo.html
index 0c80473..9ce3ba0 100644
--- a/search-demo.html
+++ b/search-demo.html
@@ -311,8 +311,8 @@ <h2>Search Results</h2>
     </div>
 
     <script type="module">
-        import { searchUtility } from './wikidata-api-browser.js';
-        import { WikidataSearchTest, demonstrateSearchFeatures } from './search-test.js';
+        import { searchUtility } from './js/src/wikidata-api-browser.js';
+        import { WikidataSearchTest, demonstrateSearchFeatures } from './js/src/search-test.js';
 
         // Make functions globally available
         window.searchUtility = searchUtility;
diff --git a/transformation/README.md b/transformation/README.md
index 3ee0729..42b4840 100644
--- a/transformation/README.md
+++ b/transformation/README.md
@@ -1,46 +1,52 @@
 # Text to Wikidata Q/P Transformation
 
-This folder contains all the code related to transforming English text into sequences of Wikidata entities (Q) and properties (P).
+This folder contains the **deployed pages** for the text-to-Q/P transformer. The
+transformation source code itself lives in [`/js/src/transformation/`](../js/src/transformation/);
+see [the issue #35 case study](../docs/case-studies/issue-35/) for the rationale
+behind the layout.
 
-## Files
+## Files in this folder (deployed by GitHub Pages)
 
-- **index.html** - Interactive web demo for the text transformer
-- **text-to-qp-transformer.js** - Main transformation logic with n-gram support
-- **text-transformer-test.js** - Test suite for the transformer
-- **test-ngram.html** - HTML test page for n-gram functionality
-- **test-ngram-demo.mjs** - Node.js demo script for n-gram features
-- **ngram-feature-summary.md** - Documentation of the n-gram feature
+- **index.html** — redirect shim that forwards to the unified SPA
+  (`app.html#mode=transformer`), preserving any `?text=…` parameters.
+- **test-ngram.html** — standalone HTML test page for n-gram functionality.
+- **ngram-feature-summary.md** — documentation of the n-gram feature.
+
+## Source code (in `/js/src/transformation/`)
+
+- **text-to-qp-transformer.js** — main transformation logic with n-gram support.
+- **text-transformer-test.js** — test suite for the transformer.
+- **test-ngram-demo.mjs** — Node.js demo script for n-gram features.
 
 ## Usage
 
-### Web Demo
-Open `index.html` in a web browser to use the interactive demo.
+### Web demo
+Open `index.html` in a browser; you will be redirected to the unified SPA
+(`app.html#mode=transformer`).
 
 ### Node.js
 ```javascript
-import { TextToQPTransformer } from './text-to-qp-transformer.js';
+import { TextToQPTransformer } from './js/src/transformation/text-to-qp-transformer.js';
 
 const transformer = new TextToQPTransformer();
 const result = await transformer.transform("Barack Obama was president", {
-  maxNgramSize: 3  // Consider up to 3-word phrases
+  maxNgramSize: 3  // consider up to 3-word phrases
 });
 ```
 
 ## Features
 
-- **N-gram matching**: Recognizes multi-word phrases as single entities
-- **Priority-based search**: Longer matches take precedence
-- **Configurable**: Adjust maxNgramSize (1-5) for different matching behavior
-- **Caching**: Uses the shared cache in the root `/data/wikidata-cache/` directory
+- **N-gram matching**: recognises multi-word phrases as single entities.
+- **Priority-based search**: longer matches take precedence.
+- **Configurable**: adjust `maxNgramSize` (1–5) for different matching behaviour.
+- **Caching**: uses the shared cache in `/data/wikidata-cache/`.
 
-## Tests
+## Running tests
 
-Run tests from the project root:
-```bash
-bun run-tests.mjs
-```
+From the project root:
 
-Or run the n-gram demo:
 ```bash
-bun transformation/test-ngram-demo.mjs
-```
\ No newline at end of file
+node js/scripts/run-tests.mjs              # full transformer suite (live Wikidata)
+node js/src/transformation/test-ngram-demo.mjs  # n-gram-only demo
+npm run test:unit                          # gating unit suites
+```
diff --git a/transformation/test-ngram.html b/transformation/test-ngram.html
index ba82ab7..ffffa9e 100644
--- a/transformation/test-ngram.html
+++ b/transformation/test-ngram.html
@@ -61,7 +61,7 @@ <h1>N-gram Transformer Test Suite</h1>
   <div id="results"></div>
 
   <script type="module">
-    import { TextToQPTransformer } from './text-to-qp-transformer.js';
+    import { TextToQPTransformer } from '../js/src/transformation/text-to-qp-transformer.js';
 
     window.runTests = async function() {
       const results = document.getElementById('results');