diff --git a/.github/workflows/check-web.yaml b/.github/workflows/check-web.yaml
new file mode 100644
index 0000000..67d72f1
--- /dev/null
+++ b/.github/workflows/check-web.yaml
@@ -0,0 +1,32 @@
+name: check-web
+
+# The page in web/ is generated from four things at once: the classes, the
+# package index, the package table of the README and the scan they share. A
+# pull request can break that without touching web/ at all - a package with no
+# README row, a row whose cells no longer parse, an app in a directory that is
+# no package. None of it shows up until a deploy, and a deploy happens after
+# the merge. This check runs the generator with --check on every pull request
+# instead. Plain node, no dependencies, so it stays a few seconds.
+
+on:
+  pull_request:
+  push:
+    branches: [main]
+
+permissions:
+  contents: read
+
+concurrency:
+  group: check-web-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  check-web:
+    runs-on: ubuntu-latest
+    timeout-minutes: 5
+    steps:
+    - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+    - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
+      with:
+        node-version: '22'
+    - run: node scripts/generate-web-index.mjs --check
diff --git a/.github/workflows/deploy-web.yaml b/.github/workflows/deploy-web.yaml
new file mode 100644
index 0000000..168d32e
--- /dev/null
+++ b/.github/workflows/deploy-web.yaml
@@ -0,0 +1,95 @@
+name: deploy-web
+
+# Publishes the page in web/ to this repository's GitHub Pages.
+#
+# https://abap2ui5.github.io/samples-stack/ — every sample of this repository,
+# searchable by the technology it plays with and by the release your system
+# runs, with what it needs from that system on every card. It is static: three
+# hand-written files plus web/apps.json, which this workflow generates from the
+# tree on every deploy, so the page is never staler than the samples it
+# describes and a sample pull request carries no diff of derived data.
+#
+# No dependencies are installed — the generator is plain node over the same
+# scan SAMPLES.md is built from.
+#
+# This is the ONLY way the site is published: Settings -> Pages -> Source must
+# be "GitHub Actions". A red "pages build and deployment" run on main is
+# GitHub's built-in Jekyll builder rather than this workflow; re-saving the
+# Pages source in Settings clears it.
+
+on:
+  workflow_dispatch:
+  push:
+    branches: [ main ]
+    paths:
+      # the page is derived from all of these: the classes (@summary,
+      # @keywords, the ABAP-Doc header, the DESCRIPT beside them), the package
+      # index, the package table of the README, and the page itself
+      - 'src/**'
+      - 'web/**'
+      - 'README.md'
+      - '.github/packages.json'
+      - 'scripts/generate-web-index.mjs'
+      - 'scripts/lib/scan-samples.mjs'
+      - '.github/workflows/deploy-web.yaml'
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# one Pages deployment at a time; let a newer run supersede an in-flight one
+concurrency:
+  group: pages
+  cancel-in-progress: true
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    steps:
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+
+      - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
+        with:
+          node-version: '22'
+
+      - name: The catalogue behind the page
+        run: node scripts/generate-web-index.mjs
+
+      # The gate this pipeline needs now that there is nothing here that can
+      # fail to build: a page whose data file is missing deploys exactly like a
+      # working one — it just says "the catalogue could not be loaded" to every
+      # visitor. Assert the four files and a non-trivial index before uploading.
+      - name: Check the artefact is complete
+        run: |
+          cd web
+          for f in index.html stack.css stack.js apps.json; do
+            test -s "$f" || { echo "deploy-web: $f is missing or empty"; exit 1; }
+          done
+          node -e '
+            const x = require("./apps.json");
+            if (!Array.isArray(x.apps) || x.apps.length < 20) {
+              console.error(`deploy-web: apps.json holds ${x.apps?.length} samples, expected 20+`);
+              process.exit(1);
+            }
+            if (!Array.isArray(x.packages) || x.packages.length < 5) {
+              console.error("deploy-web: apps.json has no package list");
+              process.exit(1);
+            }
+            console.log(`deploy-web: ${x.apps.length} samples, ${x.packages.length} groups`);
+          '
+
+      - uses: actions/upload-pages-artifact@fc324d3547104276b827a68afc52ff2a11cc49c9 # v5.0.0
+        with:
+          path: web
+
+  deploy:
+    needs: build
+    runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - id: deployment
+        uses: actions/deploy-pages@cd2ce8fcbc39b97be8ca5fce6e763baed58fa128 # v5.0.0
diff --git a/.gitignore b/.gitignore
index 1406277..949adba 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,6 @@
 node_modules
 output
+
+# derived: the catalogue behind the page in web/, written by
+# scripts/generate-web-index.mjs on every deploy (AGENTS.md section 8)
+web/apps.json
diff --git a/AGENTS.md b/AGENTS.md
index a329bd7..f53ce7f 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -310,6 +310,33 @@ gone.
 6. `npm run samples:md` and commit `SAMPLES.md` with it (§6).
 7. `npm run check`.
 
+## 8. The page in `web/`
+
+**<https://abap2ui5.github.io/samples-stack/>** — the catalogue as a searchable
+page, for somebody who has installed nothing yet and is asking whether their
+system can run any of it. Four files: `index.html`, `stack.css`, `stack.js` and
+the generated `web/apps.json`. [`web/README.md`](web/README.md) has the detail;
+what matters here:
+
+- **It introduces no new source of truth.** Every fact on it is read out of
+  something the repository already keeps — the scan (`@summary`, `@keywords`,
+  the ABAP-Doc header, `DESCRIPT`), `.github/packages.json` (branch, release)
+  and the README's package table (what a package plays together with). Adding a
+  sample or a package therefore needs **no step for the page**: `npm run
+  samples:md`, and it is on both.
+- **`web/apps.json` is generated and not committed** — `npm run web:index`
+  writes it, `deploy-web` writes it again on every deploy. A committed copy
+  would put a diff of derived data on every sample pull request.
+- **`npm run check:web` is the gate** (its own workflow, and part of `npm run
+  check`): it runs the generator with `--check`, which fails on a package with
+  no README row, a row whose cells no longer parse, or an app in a directory
+  that is no package. All three break the page without touching `web/`, and
+  none of them shows up before a deploy — which happens after the merge.
+- **No playground link, unlike the sibling repositories' pages.** The playground
+  runs a class with no system behind it, and a system is what every sample here
+  needs. Each app would open there and fail, so the cards link to the source,
+  to the package README's *What you need*, and to the one-package branch.
+
 <!-- The section below is SHARED. Its source is
      abap2UI5/abap2UI5 .github/shared/agents-metadata.md - change it THERE
      first, or the change is drift. abap2UI5's `npm run check:shared`
diff --git a/README.md b/README.md
index d3c0322..3bfee3f 100644
--- a/README.md
+++ b/README.md
@@ -13,7 +13,10 @@
 <br>
 [![check-abapdoc](https://github.com/abap2UI5/samples-stack/actions/workflows/check-abapdoc.yaml/badge.svg)](https://github.com/abap2UI5/samples-stack/actions/workflows/check-abapdoc.yaml)
 [![check-prose-names](https://github.com/abap2UI5/samples-stack/actions/workflows/check-prose-names.yaml/badge.svg)](https://github.com/abap2UI5/samples-stack/actions/workflows/check-prose-names.yaml)
+[![check-web](https://github.com/abap2UI5/samples-stack/actions/workflows/check-web.yaml/badge.svg)](https://github.com/abap2UI5/samples-stack/actions/workflows/check-web.yaml)
+<br>
 [![create-package-branches](https://github.com/abap2UI5/samples-stack/actions/workflows/create-package-branches.yaml/badge.svg)](https://github.com/abap2UI5/samples-stack/actions/workflows/create-package-branches.yaml)
+[![deploy-web](https://github.com/abap2UI5/samples-stack/actions/workflows/deploy-web.yaml/badge.svg)](https://github.com/abap2UI5/samples-stack/actions/workflows/deploy-web.yaml)
 
 # abap2UI5 — samples-stack
 
@@ -42,6 +45,12 @@ install-and-run.
 Every area is self-contained and brings its own README. Pick the one you came
 for and try it out — the others can wait until you need them.
 
+> **Looking for one particular sample?**
+> **<https://abap2ui5.github.io/samples-stack/>** is this catalogue as a
+> searchable page: filter by the technology you came for and by the release
+> your system runs, and every card says what the sample needs from that system
+> before you install anything. ([`web/`](web/README.md))
+
 ## What is in here
 
 | Package | Topic | Plays together with | Runs on |
@@ -231,7 +240,9 @@ they take seconds.
 | `check-abapdoc` | every `"!` block documents the declaration below it, rather than attaching to nothing |
 | `check-app-rules` | the shared abaplint rule block still matches its source in [abap2UI5](https://github.com/abap2UI5/abap2UI5) |
 | `check-prose-names` | every class name written in prose exists — including the sibling repositories' |
+| `check-web` | the data behind the [page](https://abap2ui5.github.io/samples-stack/) can still be generated — every package has a README row that parses, every app sits in a package |
 | `create-package-branches` | rebuilds the nine per-package branches, each verified with abaplint at its own release before it is pushed |
+| `deploy-web` | publishes [`web/`](web/README.md) to GitHub Pages on every push to `main` that touches the tree it describes |
 
 `check-overview` exists because the overview app names its samples as strings and
 resolves them at runtime — that is what lets it survive a package the system cannot
@@ -242,6 +253,13 @@ where the generated branches take theirs from. It runs `node
 scripts/check-overview.mjs`, needs no dependencies, and skips both
 full-tree halves on a checkout that carries only part of the repository.
 
+`check-web` and `deploy-web` are the two halves of the page: the check runs the
+generator on every pull request without writing anything, the deploy runs it for
+real and uploads `web/` as the Pages artefact. Nothing generated is committed, so
+the page can never be staler than the tree — and a sample pull request carries no
+diff of derived data. `deploy-web` is the *only* way the site is published:
+*Settings → Pages → Source* has to be **GitHub Actions**.
+
 `create-package-branches` runs on pull requests too, everything except the push —
 so a change that would break one of the branches fails while it can still be
 fixed. Adding a package is one entry in `.github/packages.json`; neither the
@@ -292,5 +310,10 @@ in front of it. None of these packages depends on another, and none of them is a
 prerequisite for using abap2UI5 at all: they are options you can reach for when
 they help.
 
+If you are not sure which package that is, start at
+**<https://abap2ui5.github.io/samples-stack/>**: pick the release your system runs
+and it shows you what is within reach, with the setup each sample needs on its
+card.
+
 Something else you would like to see combined with abap2UI5? Open an issue or a
 pull request — the collection grows with the scenarios people bring to it.
diff --git a/package.json b/package.json
index 12646d5..671da5d 100644
--- a/package.json
+++ b/package.json
@@ -9,13 +9,15 @@
     "check:abap2ui5": "abap2ui5lint",
     "fmt:chains": "abap2ui5lint --fix",
     "check:overview": "node scripts/check-overview.mjs",
-    "check": "npm run lint && npm run check:abap2ui5 && npm run check:overview && npm run check:keywords && npm run check:abapdoc && npm run check:samples-md && npm run check:app-rules && npm run check:prose",
+    "check": "npm run lint && npm run check:abap2ui5 && npm run check:overview && npm run check:keywords && npm run check:abapdoc && npm run check:samples-md && npm run check:app-rules && npm run check:prose && npm run check:web",
     "check:keywords": "node scripts/check-keywords.mjs",
     "check:abapdoc": "node scripts/check-abapdoc.mjs",
     "samples:md": "node scripts/generate-samples-md.mjs",
     "check:samples-md": "node scripts/generate-samples-md.mjs --check",
     "check:app-rules": "node scripts/check-app-rules.mjs",
-    "check:prose": "node scripts/check-prose-names.mjs"
+    "check:prose": "node scripts/check-prose-names.mjs",
+    "web:index": "node scripts/generate-web-index.mjs",
+    "check:web": "node scripts/generate-web-index.mjs --check"
   },
   "repository": {
     "type": "git",
diff --git a/scripts/generate-samples-md.mjs b/scripts/generate-samples-md.mjs
index 07b7599..e864bd8 100644
--- a/scripts/generate-samples-md.mjs
+++ b/scripts/generate-samples-md.mjs
@@ -30,7 +30,7 @@
 import fs from 'fs';
 import path from 'path';
 import { fileURLToPath } from 'url';
-import { scanSamples, scanOverview } from './lib/scan-samples.mjs';
+import { scanSamples, scanOverview, sampleTitle } from './lib/scan-samples.mjs';
 
 const ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
 const OUT = path.join(ROOT, 'SAMPLES.md');
@@ -54,10 +54,10 @@ const cell = (s) => s.replace(/\|/g, '\\|').trim();
  * better than DESCRIPT alone and one step short of right: it put a sample's
  * description in a different class from the sample. */
 function row(s, section) {
-  const repeats = s.header === section;
-  const head = repeats
-    ? (cell(s.sub) || `**${cell(s.header)}**`)
-    : (s.sub ? `**${cell(s.header)}** — ${cell(s.sub)}` : `**${cell(s.header)}**`);
+  const { title, sub, fromSub } = sampleTitle(s, section);
+  const head = sub
+    ? `**${cell(title)}** — ${cell(sub)}`
+    : (fromSub ? cell(title) : `**${cell(title)}**`);
   const summary = s.summary ? `<br>${cell(s.summary)}` : '';
   const keywords = s.keywords ? `<br><sub>${cell(s.keywords)}</sub>` : '';
   return `| ${head}${summary}${keywords} | [\`${s.cls.toUpperCase()}\`](${s.rel}) |`;
diff --git a/scripts/generate-web-index.mjs b/scripts/generate-web-index.mjs
new file mode 100644
index 0000000..30109e2
--- /dev/null
+++ b/scripts/generate-web-index.mjs
@@ -0,0 +1,315 @@
+#!/usr/bin/env node
+/*
+ * generate-web-index — the data behind the page in web/.
+ *
+ * The three sample repositories each publish the answer to the question their
+ * corpus is actually asked. abap2UI5/samples publishes a learning path,
+ * because "where do I start" is what a newcomer arrives with.
+ * abap2UI5/samples-controls publishes a search box over 430 control ports,
+ * because "which one shows a Wizard" is what a control reference is asked.
+ *
+ * This corpus is asked something else again, and neither page answers it:
+ *
+ *     "my system is on 7.50 and on-premise — what of this can I even run?"
+ *     "is there a sample for WebSockets, and what do I have to set up first?"
+ *
+ * Both are questions about the SYSTEM, not about the sample: everything here
+ * needs something beyond an abap2UI5 installation, and which something is the
+ * one fact that decides whether a reader can use a sample at all. So the page
+ * is a search over the catalogue with two facets — the system you have, and
+ * the technology you came for — and every card says what it needs and what it
+ * costs before you click anything.
+ *
+ * There is no playground link, unlike the other two pages. The playground runs
+ * a class in a transpiled ABAP in the browser, with no system behind it — and
+ * a system is exactly what every sample here requires. A Gateway service, a
+ * RAP business object, an APC channel, a launchpad: none of it exists in that
+ * frame, so every one of these apps would open and then fail. A link that
+ * cannot work is worse than no link, so the cards link into the SOURCE and
+ * into the package README that says how to set the sample up.
+ *
+ * Where every fact comes from — no fact is restated here, all of them are read
+ * out of what the repository already keeps:
+ *
+ *   scripts/lib/scan-samples.mjs   which classes are apps, their title from
+ *                                  DESCRIPT, `@summary`, `@keywords` — the
+ *                                  same scan behind SAMPLES.md and
+ *                                  check-keywords, so the page and the
+ *                                  catalogue cannot disagree
+ *   .github/packages.json          the package index: directory, branch name,
+ *                                  title, the release the package needs
+ *   README.md, the package table   what the package plays together with, and
+ *                                  the one line describing it. That column is
+ *                                  written for a reader and there is nowhere
+ *                                  better to keep it; check-overview.mjs
+ *                                  already gates that every package has a row
+ *                                  carrying the release packages.json declares
+ *   the class's ABAP-Doc header    the long description, where a class has one
+ *
+ *   node scripts/generate-web-index.mjs           write web/apps.json
+ *   node scripts/generate-web-index.mjs --check   validate, write nothing
+ *   node scripts/generate-web-index.mjs --out X   write it elsewhere
+ *
+ * NOT committed — web/apps.json is a build output. deploy-web regenerates it on
+ * every deploy, so the page can never be staler than the tree it describes and
+ * a sample pull request carries no diff of derived data. `--check` is what CI
+ * runs (npm run check:web): it holds everything that can go wrong in a pull
+ * request — a package with no README row, a row whose cells cannot be read, an
+ * app whose package is unknown — without needing the output.
+ */
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { scanSamples, sampleTitle } from './lib/scan-samples.mjs';
+
+const ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const CHECK = process.argv.includes('--check');
+const argOut = process.argv.indexOf('--out');
+const OUT = argOut === -1
+  ? path.join(ROOT, 'web', 'apps.json')
+  : path.resolve(process.argv[argOut + 1]);
+
+/* The repository the links point into. The page is built from main, so that is
+ * the ref the blob links follow; the branch links point at the generated
+ * one-package branches, which is what a reader pulls with abapGit. */
+const REPO = 'abap2UI5/samples-stack';
+const REF = 'main';
+const SOURCE = `https://github.com/${REPO}/blob/${REF}/`;
+const TREE = `https://github.com/${REPO}/tree/`;
+
+/* The overview app sits in `src/` itself and is in no package, because it
+ * ships on EVERY generated branch (AGENTS.md section 3). It is still an app a
+ * reader starts, so it gets a group of its own rather than being dropped from
+ * the page.
+ *
+ * The release is not invented: the branch build lints the overview at its
+ * branch's own syntax version, and the lowest of those is v740sp08 — so
+ * 7.40 SP08 is measured, exactly like the numbers in packages.json. Cloud
+ * likewise: the overview resolves every sample by name at runtime and calls no
+ * on-premise API, which is what puts it on the cloud-capable branches. */
+const OVERVIEW_PKG = {
+  dir: '.',
+  branch: REF,
+  title: 'Overview',
+  topic: 'the catalogue of this repository, inside your system',
+  needs: 'nothing beyond abap2UI5 — it ships on every branch and resolves every sample at runtime',
+  runsOn: 'Cloud + Standard ≥ 7.40 SP08',
+  readme: 'README.md',
+};
+
+const die = (message) => {
+  console.error(`generate-web-index: ${message}`);
+  process.exit(1);
+};
+
+/* ------------------------------------------------------------- the packages */
+
+/**
+ * The `What is in here` table of the root README, by package directory.
+ *
+ * | [`src/01`](src/01) | **[OData](…)** — bind a table … | an activated … | Cloud + … |
+ *
+ * `topic` is the half of the second cell behind the em dash, `needs` the third
+ * cell — the "Plays together with" column, which is the answer to "what do I
+ * have to have before this sample does anything".
+ */
+function readmeTable() {
+  const rows = fs.readFileSync(path.join(ROOT, 'README.md'), 'utf8')
+    .split('\n')
+    .filter((line) => line.startsWith('| [`src/'));
+
+  const table = new Map();
+  let previous = '';
+  for (const line of rows) {
+    const cells = line.split('|').slice(1, -1).map((c) => c.trim());
+    const dir = (cells[0].match(/src\/(\S+?)`/) || [])[1];
+    if (!dir) die(`cannot read the package directory out of README row:\n    ${line}`);
+
+    const topic = (cells[1].split('—')[1] || '').trim();
+    if (!topic) die(`the README row for src/${dir} has no "— what it is" half in its Topic cell`);
+
+    /* `as above` is how the table says "the same as the row before" — a
+     * sentence for a reader, and nothing a card can show on its own. */
+    const needs = /^as above$/i.test(cells[2]) ? previous : cells[2];
+    if (!needs) die(`the README row for src/${dir} has an empty "Plays together with" cell`);
+    previous = needs;
+
+    table.set(dir, { topic, needs, runsOn: cells[3] });
+  }
+  return table;
+}
+
+/**
+ * The release floor of a `runsOn` string, as a number that sorts.
+ *
+ *   "Cloud + Standard ≥ 7.40 SP08"  ->  740.08, "7.40 SP08"
+ *   "Standard only, ≥ 7.54 (1909)"  ->  754,    "7.54 (1909)"
+ *
+ * SP as hundredths, so 7.40 SP08 sorts below 7.50 and above a bare 7.40 — the
+ * order the facet needs, and the only arithmetic on a release number anywhere.
+ */
+function release(runsOn) {
+  const m = runsOn.match(/≥\s*(\d)\.(\d\d)(?:\s*SP(\d+))?/);
+  if (!m) die(`cannot read a release out of "${runsOn}" — expected "≥ 7.40 SP08" or "≥ 7.54"`);
+  const platform = (runsOn.match(/\((\d{4})\)/) || [])[1] || '';
+  return {
+    num: Number(`${m[1]}${m[2]}`) + (m[3] ? Number(m[3]) / 100 : 0),
+    label: `${m[1]}.${m[2]}${m[3] ? ` SP${m[3]}` : ''}${platform ? ` (${platform})` : ''}`,
+  };
+}
+
+function packages() {
+  const declared = JSON.parse(fs.readFileSync(path.join(ROOT, '.github', 'packages.json'), 'utf8'));
+  const table = readmeTable();
+
+  const build = (entry, prose) => {
+    const { num, label } = release(entry.runsOn);
+    return {
+      dir: entry.dir,
+      branch: entry.branch,
+      title: entry.title,
+      topic: prose.topic,
+      needs: prose.needs,
+      runsOn: entry.runsOn,
+      /* "Cloud + Standard ≥ x" vs "Standard only, ≥ x" — the one fact that
+       * decides whether a BTP tenant can see the sample at all. */
+      cloud: /cloud/i.test(entry.runsOn),
+      release: label,
+      releaseNum: num,
+      note: entry.note || '',
+      readme: entry.readme || `src/${entry.dir}/README.md`,
+      count: 0,
+    };
+  };
+
+  const out = [build(OVERVIEW_PKG, OVERVIEW_PKG)];
+  for (const entry of declared) {
+    const prose = table.get(entry.dir);
+    /* check-overview.mjs fails on this too, and from the other side. Repeated
+     * here because this generator cannot describe a package it cannot read. */
+    if (!prose) die(`src/${entry.dir} is in .github/packages.json but has no row in the README table`);
+    if (prose.runsOn !== entry.runsOn) {
+      die(`src/${entry.dir}: README says "${prose.runsOn}", packages.json says "${entry.runsOn}"`);
+    }
+    out.push(build(entry, prose));
+  }
+  return out;
+}
+
+/* ------------------------------------------------------- the long description */
+
+/**
+ * The class's ABAP-Doc header, as blocks a page can render.
+ *
+ * Twelve of the app classes carry one and it is the fullest description this
+ * repository has of them — the EML statement, what the sample adds over the one
+ * before it, which surprise is worth a comment. Where there is none the card
+ * stops at `@summary`, which every app has.
+ *
+ * The `<p class="shorttext synchronized">` line is dropped: that is the
+ * DESCRIPT again, which the card already shows as its title.
+ *
+ * Blocks are what a blank `"!` line separates, and each one is classified by
+ * its FIRST line, because that is the only reading that does not confuse a
+ * wrapped bullet with a line of ABAP — both are indented by four:
+ *
+ *   `- …`      a list. The wrapped lines belong to the item above them.
+ *   indented   code (the EML statement). Dedented by the block's own margin,
+ *              and it keeps its line breaks — that shape IS the statement.
+ *   otherwise  prose, joined into one paragraph: the breaks in the source are
+ *              the 80-column margin, not the author's.
+ *
+ * ABAP Doc is HTML, so the source carries `&lt;no&gt;` where the author wrote
+ * `<no>`. Unescaped here, once — the page escapes everything it renders.
+ */
+function abapDoc(source) {
+  const lines = [];
+  for (const raw of source.split(/\r?\n/)) {
+    if (/^\s*$/.test(raw) || /^"(?!!)/.test(raw)) continue;   // blank, or a plain " comment
+    if (!raw.startsWith('"!')) break;                          // the CLASS statement — done
+    if (/<p class="shorttext/.test(raw)) continue;
+    lines.push(raw.slice(2).replace(/^ /, ''));
+  }
+
+  const unescape = (s) => s
+    .replace(/&lt;/g, '<').replace(/&gt;/g, '>')
+    .replace(/&quot;/g, '"').replace(/&apos;/g, "'")
+    .replace(/&amp;/g, '&');
+
+  /* the blank `"!` lines are the paragraph breaks */
+  const groups = [];
+  for (const line of lines) {
+    if (!line.trim()) { groups.push([]); continue; }
+    if (!groups.length) groups.push([]);
+    groups[groups.length - 1].push(line);
+  }
+
+  return groups.filter((g) => g.length).map((group) => {
+    if (/^\s*[-*]\s/.test(group[0])) {
+      const items = [];
+      for (const line of group) {
+        if (/^\s*[-*]\s/.test(line)) items.push(line.replace(/^\s*[-*]\s/, ''));
+        else if (items.length) items[items.length - 1] += ` ${line.trim()}`;
+      }
+      return { type: 'list', items: items.map(unescape) };
+    }
+    if (/^\s{3,}\S/.test(group[0])) {
+      const margin = Math.min(...group.map((l) => l.match(/^ */)[0].length));
+      return { type: 'code', text: unescape(group.map((l) => l.slice(margin)).join('\n')) };
+    }
+    return { type: 'p', text: unescape(group.map((l) => l.trim()).join(' ')) };
+  });
+}
+
+/* -------------------------------------------------------------------- build */
+
+const byDir = new Map(packages().map((p) => [p.dir, p]));
+const all = scanSamples(ROOT);
+const apps = [];
+
+for (const s of all.filter((x) => x.isApp)) {
+  const pkg = byDir.get(s.pkg);
+  /* A subpackage — src/03/01 holds the business object, not an app. If an app
+   * ever lands in one, the page would silently lose it, so say so instead. */
+  if (!pkg) die(`${s.cls} lives in src/${s.pkg}, which is no package of .github/packages.json`);
+
+  const { title, sub } = sampleTitle(s, s.section);
+  pkg.count += 1;
+  apps.push({
+    cls: s.cls.toUpperCase(),
+    file: s.rel,
+    pkg: s.pkg,
+    title,
+    sub,
+    summary: s.summary,
+    keywords: s.keywords ? s.keywords.split(/\s+/) : [],
+    doc: abapDoc(fs.readFileSync(path.join(ROOT, s.rel), 'utf8')),
+  });
+}
+
+const index = {
+  repo: REPO,
+  source: SOURCE,
+  tree: TREE,
+  overviewApp: OVERVIEW_PKG.dir,
+  packages: [...byDir.values()],
+  apps,
+};
+
+/* The two ways this page fails without failing: an app with nothing to search
+ * for, and a package nobody can be told how to set up. Both are gated
+ * elsewhere (check-keywords, check-overview) — checked again here because this
+ * generator is what turns them into a page, and a card missing its line is the
+ * silent kind of broken. */
+const mute = apps.filter((a) => !a.summary || !a.keywords.length).map((a) => a.cls);
+if (mute.length) die(`${mute.join(', ')} — no @summary or no @keywords, so nobody searching finds them`);
+if (!apps.length) die('no apps found under src/ — the scan came back empty');
+
+if (CHECK) {
+  const counts = index.packages.map((p) => `${p.title}: ${p.count}`).join(', ');
+  console.log(`check-web: ${apps.length} app(s) in ${index.packages.length} group(s) — ${counts}`);
+} else {
+  fs.mkdirSync(path.dirname(OUT), { recursive: true });
+  fs.writeFileSync(OUT, `${JSON.stringify(index, null, 1)}\n`);
+  console.log(`generate-web-index: wrote ${apps.length} app(s) in ${index.packages.length} group(s) to ${path.relative(ROOT, OUT)}`);
+}
diff --git a/scripts/lib/scan-samples.mjs b/scripts/lib/scan-samples.mjs
index e4086d4..ee5cd64 100644
--- a/scripts/lib/scan-samples.mjs
+++ b/scripts/lib/scan-samples.mjs
@@ -1,8 +1,9 @@
 /*
  * scan-samples — the one place that knows what a sample in this repository is.
  *
- * Two things read this: `check-keywords.mjs`, which insists every app says what
- * it is about, and `generate-samples-md.mjs`, which writes the catalogue. They
+ * Three things read this: `check-keywords.mjs`, which insists every app says
+ * what it is about, `generate-samples-md.mjs`, which writes the catalogue, and
+ * `generate-web-index.mjs`, which writes the data behind the page in web/. They
  * have to agree on which classes are apps, where a title comes from and which
  * section a sample belongs to — abap2UI5/samples learned that the hard way and
  * says so in its AGENTS.md: two copies of this drift silently, and then the
@@ -46,6 +47,27 @@ export function splitDescript(d) {
   return i === -1 ? { header: t, sub: '' } : { header: t.slice(0, i), sub: t.slice(i + 3) };
 }
 
+/**
+ * The title and the line under it, as a catalogue shows them.
+ *
+ * A DESCRIPT is `Titel - Kurzbeschreibung` and its first half often repeats
+ * the package heading — `OData - Two Models in One View` under the heading
+ * *OData*. Under that heading the useful title is the second half, and the
+ * first is noise the heading already carried.
+ *
+ * Both catalogues built from this scan need that decision (SAMPLES.md and the
+ * page in web/), and two copies of it would drift the way two copies of the
+ * scan itself once did. `fromSub` is for a renderer that emphasises a title
+ * differently when it is a substitute — SAMPLES.md does.
+ *
+ * @returns {{title: string, sub: string, fromSub: boolean}}
+ */
+export function sampleTitle(s, section) {
+  return s.header === section && s.sub
+    ? { title: s.sub, sub: '', fromSub: true }
+    : { title: s.header, sub: s.sub, fromSub: false };
+}
+
 function walk(dir, out = []) {
   for (const name of fs.readdirSync(dir)) {
     const full = path.join(dir, name);
diff --git a/web/README.md b/web/README.md
new file mode 100644
index 0000000..3764f9d
--- /dev/null
+++ b/web/README.md
@@ -0,0 +1,93 @@
+# `web/` — the page on GitHub Pages
+
+**<https://abap2ui5.github.io/samples-stack/>** — every sample of this
+repository, searchable by the technology it plays with and by the release your
+system actually runs. Published by the
+[`deploy-web`](../.github/workflows/deploy-web.yaml) workflow, which needs
+*Settings → Pages → Source = GitHub Actions*.
+
+```
+web/index.html   the page — one file, no framework
+web/stack.css    one stylesheet, light and dark off one set of custom properties
+web/stack.js     filtering and drawing — plain ES2020, no dependencies
+web/apps.json    generated, NOT committed (see below)
+```
+
+## What it answers
+
+It is the fourth view of the same catalogue, and the four are generated from
+one scan (`scripts/lib/scan-samples.mjs`) so they cannot disagree:
+
+| Where | For whom |
+|---|---|
+| `Z2UI5_CL_SMPS_APP_000`, the overview app | somebody who has this repository in a system |
+| [`SAMPLES.md`](../SAMPLES.md) | somebody reading the repository on GitHub |
+| the package READMEs | somebody who has already picked a technology |
+| this page | somebody who has installed nothing and is asking whether their system can run any of it |
+
+That last question is what makes this page different from the two next door.
+[samples](https://abap2ui5.github.io/samples/) publishes a learning path,
+because *"where do I start"* is what a newcomer arrives with;
+[samples-controls](https://abap2ui5.github.io/samples-controls/) publishes a
+search over 430 control ports, because *"which one shows a Wizard"* is what a
+control reference is asked. Here everything needs something **from the system**,
+so the two questions are:
+
+> *"my system is 7.50 and on-premise — what of this can I even run?"*
+> *"is there a sample for WebSockets, and what do I have to set up first?"*
+
+Both are answered by facts the repository already keeps. `.github/packages.json`
+declares each package's release and the branch it ships on; the README's package
+table says what it plays together with; the classes carry `@summary`,
+`@keywords` and — twelve of them — an ABAP-Doc header, which is the fullest
+description this repository has of a sample and goes on the card behind *What
+the class documents*.
+
+The **Your system** facet is one select for both halves of the release
+question: ABAP Cloud drops the three on-premise packages, a Standard release
+keeps every package at or below it. The counts are in the labels, so what an
+older system costs is visible before the click. Filters live in the URL, so a
+search is linkable.
+
+## There is no playground link
+
+The other two pages open a class in the
+[playground](https://abap2ui5.github.io/playground/) — the ABAP in an editor
+with the app running beside it, no system anywhere. That is exactly what cannot
+work here: a Gateway service, a RAP business object, an APC channel, a launchpad
+is what every sample in this repository needs, and none of it exists in that
+frame. Every app would open and then fail.
+
+So the cards link where a link can help: **Source** (one class, the whole
+sample), **Setup** (the package README's *What you need* section) and **Branch**
+(the generated one-package branch, which is what you give abapGit if you only
+want this package on your system).
+
+## `apps.json` is not committed
+
+It is derived from the tree, so committing it would put a diff of derived data
+on every sample pull request while adding a gate that can only restate what the
+generator already says. `deploy-web` regenerates it on every deploy instead, so
+it is never staler than the site serving it.
+
+```bash
+npm run web:index      # node scripts/generate-web-index.mjs
+npm run check:web      # what CI runs: validate, write nothing
+```
+
+`npm run check:web` is part of `npm run check` and has its own workflow. It
+holds what a pull request can break without touching this folder: a package
+with no README row, a row whose cells no longer parse, an app in a directory
+that is no package of `.github/packages.json`.
+
+## Running it locally
+
+Nothing to build:
+
+```bash
+npm run web:index
+python3 -m http.server 8099 --directory web    # any static server will do
+```
+
+`file://` does not work — the page `fetch`es `apps.json`. Every outgoing link is
+absolute (GitHub), so they work from a local server exactly as in production.
diff --git a/web/index.html b/web/index.html
new file mode 100644
index 0000000..1d1f361
--- /dev/null
+++ b/web/index.html
@@ -0,0 +1,150 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>abap2UI5 and your stack · samples-stack</title>
+<meta name="description" content="Every abap2UI5 sample that plays together with your stack — OData, Smart Controls, RAP, business events, stateful sessions, WebSockets, MIME, the Fiori Launchpad. Search them by technology and by the release your system runs, and see what each one needs before you install anything.">
+<link rel="icon" href="data:,">
+<link rel="stylesheet" href="stack.css">
+</head>
+<body>
+
+<header class="masthead">
+  <div class="inner">
+    <p class="brand"><a href="https://github.com/abap2UI5/samples-stack">abap2UI5 · samples-stack</a></p>
+    <h1>abap2UI5 and the rest of your stack</h1>
+    <p class="lede">
+      <strong id="total">…</strong> samples across
+      <strong id="pkgcount">…</strong> technologies — OData, Smart Controls, RAP with
+      and without draft, business events, stateful sessions and locks, WebSockets,
+      the MIME repository, the Fiori Launchpad. Every one of them is a single ABAP
+      class, and every one of them needs <em>something your system already has</em>.
+      This page tells you which something, and whether your release can run it —
+      before you install anything.
+    </p>
+    <p class="note">
+      There is no in-browser demo here, unlike on the
+      <a href="https://abap2ui5.github.io/samples/">samples</a> and
+      <a href="https://abap2ui5.github.io/samples-controls/">samples-controls</a>
+      pages: a Gateway service, a RAP business object, an APC channel or a
+      launchpad is exactly what the playground does not have, so each of these
+      apps would open there and then fail. The links go where they can help — into
+      the source, and into the setup the sample needs.
+    </p>
+  </div>
+</header>
+
+<main>
+  <form class="panel" id="filters" autocomplete="off" role="search">
+    <div class="q">
+      <label class="sr-only" for="q">Search the samples</label>
+      <input type="search" id="q" name="q" placeholder="websocket, draft, variant, lock, eml, smartfilterbar …" spellcheck="false">
+      <kbd class="hint">/</kbd>
+    </div>
+
+    <fieldset class="chips">
+      <legend class="sr-only">Technology</legend>
+      <div id="tech"></div>
+    </fieldset>
+
+    <p class="facet">
+      <label for="system">Your system</label>
+      <select id="system" name="system"></select>
+      <span class="note">what a sample needs is the package's floor — the release and the stack</span>
+    </p>
+
+    <p class="resultline">
+      <span id="count">…</span>
+      <button type="button" id="reset" class="linkish" hidden>clear filters</button>
+    </p>
+  </form>
+
+  <p id="pkgline" class="pkgline" hidden></p>
+
+  <section id="results" aria-live="polite"></section>
+
+  <p id="empty" hidden class="empty">
+    Nothing matches. <button type="button" id="reset2" class="linkish">Clear the filters</button>
+    — or look at <a href="https://github.com/abap2UI5/samples/blob/main/SAMPLES.md">abap2UI5/samples</a>,
+    which is where a sample that needs nothing but abap2UI5 lives.
+  </p>
+
+  <section class="how" id="how">
+    <h2>How to run one</h2>
+    <ol>
+      <li>
+        <b>Install <a href="https://github.com/abap2UI5/abap2UI5">abap2UI5</a>.</b>
+        This repository ships apps, not the framework.
+      </li>
+      <li>
+        <b>Pull this repository with <a href="https://abapgit.org">abapGit</a>.</b>
+        <code>main</code> carries all nine packages and asks for ABAP Platform ≥ 1909,
+        because RAP does. Every package also has a <b>branch of its own</b> — pick it
+        in the abapGit branch dropdown and only that package lands on your system, at
+        its own, often much lower, release. Each card links to its branch.
+      </li>
+      <li>
+        <b>Do the setup the package asks for</b> — activate the OData service, the ICF
+        node, the launchpad tile. It is one short section in every package README, and
+        the <b>Setup&nbsp;↗</b> link on a card goes straight to it.
+      </li>
+      <li>
+        <b>Start the app:</b> <code>&lt;your abap2UI5 endpoint&gt;?app_start=&lt;the class&gt;</code>.
+        Every card copies that for you. Or start
+        <code id="overviewapp">Z2UI5_CL_SMPS_APP_000</code>, the overview app — the same
+        catalogue inside your system, which lists what is installed and greys out what
+        is not.
+      </li>
+    </ol>
+  </section>
+
+  <section class="packages" id="packages">
+    <h2>The packages</h2>
+    <p class="lede small">
+      One directory per technology, one branch per directory. The release is the higher
+      of two floors: the ABAP the package is written in, and what the technology itself
+      asks for — measured with one abaplint run per release, not estimated.
+    </p>
+    <div id="pkgcards"></div>
+  </section>
+
+  <section class="ladder">
+    <h2>This is step 3 of 3</h2>
+    <ol class="steps">
+      <li>
+        <a href="https://abap2ui5.github.io/samples/">samples</a> — the abap2UI5
+        basics: bindings, events, popups, navigation, complete apps.
+      </li>
+      <li>
+        <a href="https://abap2ui5.github.io/samples-controls/">samples-controls</a> —
+        every UI5 control, the demo kit rebuilt in ABAP.
+      </li>
+      <li>
+        <b>samples-stack</b> — 📍 you are here: how abap2UI5 plays with what your
+        system already runs.
+      </li>
+    </ol>
+  </section>
+</main>
+
+<footer>
+  <p>
+    Built from the repository itself: the class tree, each class's abapGit short text,
+    its <code>@summary</code> and <code>@keywords</code> lines and its ABAP-Doc header,
+    plus <code>.github/packages.json</code> and the package table of the README — the
+    same scan behind
+    <a href="https://github.com/abap2UI5/samples-stack/blob/main/SAMPLES.md">SAMPLES.md</a>
+    and the overview app, so the three cannot disagree. Regenerated on every deploy.
+  </p>
+  <p>
+    <a href="https://github.com/abap2UI5/samples-stack">Repository</a> ·
+    <a href="https://github.com/abap2UI5/samples-stack/blob/main/SAMPLES.md">The catalogue as a page</a> ·
+    <a href="https://github.com/abap2UI5/abap2UI5">abap2UI5</a> ·
+    <a href="https://abap2ui5.github.io/docs/">Documentation</a>
+  </p>
+</footer>
+
+<script src="stack.js"></script>
+</body>
+</html>
diff --git a/web/stack.css b/web/stack.css
new file mode 100644
index 0000000..268520a
--- /dev/null
+++ b/web/stack.css
@@ -0,0 +1,504 @@
+/* The samples-stack page — no framework, no build step: this folder IS the
+   deployed site, uploaded as the Pages artefact unchanged.
+
+   The custom properties are the ones abap2UI5/samples-controls uses, on
+   purpose: three sibling repositories publish three pages, and a reader who
+   walks the learning path should not have to re-learn what a badge looks like
+   halfway up. Light and dark are both driven off this one set, so a colour is
+   decided once. */
+
+:root {
+  color-scheme: light dark;
+
+  --bg: #f6f7f9;
+  --panel: #ffffff;
+  --card: #ffffff;
+  --ink: #1c2126;
+  --ink-soft: #5b6771;
+  --ink-faint: #86929c;
+  --line: #dde3e9;
+  --line-soft: #eaeef2;
+  --accent: #0a6ed1;
+  --accent-ink: #ffffff;
+  --accent-soft: #eaf3fc;
+  --ok: #256f3a;
+  --ok-soft: #e6f3ea;
+  --warn: #8a5300;
+  --warn-soft: #fdf1de;
+  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+  --radius: 10px;
+  --wide: 64rem;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #14181c;
+    --panel: #1b2026;
+    --card: #1b2026;
+    --ink: #e6ebef;
+    --ink-soft: #a3b0ba;
+    --ink-faint: #7c8892;
+    --line: #2b333b;
+    --line-soft: #232a31;
+    --accent: #7cb6f0;
+    --accent-ink: #10151a;
+    --accent-soft: #1d2a38;
+    --ok: #7fca97;
+    --ok-soft: #1c2b22;
+    --warn: #e0b072;
+    --warn-soft: #2d2519;
+  }
+}
+
+* { box-sizing: border-box; }
+
+body {
+  margin: 0;
+  padding: 0 1.25rem 4rem;
+  background: var(--bg);
+  color: var(--ink);
+  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+}
+
+a { color: var(--accent); }
+
+code {
+  font-family: var(--mono);
+  font-size: .92em;
+  word-break: break-word;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px; height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}
+
+/* ------------------------------------------------------------- masthead */
+
+.masthead {
+  max-width: var(--wide);
+  margin: 0 auto;
+  padding: 2.5rem 0 1.5rem;
+}
+
+.brand {
+  margin: 0 0 .35rem;
+  font: 600 .8rem/1 var(--mono);
+  letter-spacing: .04em;
+  text-transform: uppercase;
+}
+.brand a { color: var(--ink-faint); text-decoration: none; }
+.brand a:hover { color: var(--accent); }
+
+.masthead h1 {
+  margin: 0 0 .5rem;
+  font-size: clamp(1.7rem, 4vw, 2.4rem);
+  line-height: 1.15;
+  letter-spacing: -.02em;
+}
+
+.lede {
+  max-width: 46rem;
+  margin: 0;
+  color: var(--ink-soft);
+}
+.lede.small { font-size: .9rem; }
+
+.masthead .note {
+  max-width: 46rem;
+  margin: .9rem 0 0;
+  font-size: .85rem;
+  color: var(--ink-faint);
+}
+
+/* --------------------------------------------------------------- panel */
+
+main { max-width: var(--wide); margin: 0 auto; }
+
+.panel {
+  position: sticky;
+  top: 0;
+  z-index: 5;
+  margin: 0 0 1.4rem;
+  padding: 1rem 1.1rem .6rem;
+  background: var(--panel);
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  box-shadow: 0 1px 2px rgb(0 0 0 / .04);
+}
+
+.q { position: relative; }
+
+.q input {
+  width: 100%;
+  padding: .75rem 2.6rem .75rem .9rem;
+  font-size: 1.05rem;
+  color: var(--ink);
+  background: var(--bg);
+  border: 1px solid var(--line);
+  border-radius: 8px;
+}
+.q input:focus {
+  outline: 2px solid var(--accent);
+  outline-offset: 1px;
+  background: var(--panel);
+}
+
+.q .hint {
+  position: absolute;
+  right: .7rem; top: 50%;
+  transform: translateY(-50%);
+  padding: .1rem .4rem;
+  font: 400 .75rem/1.4 var(--mono);
+  color: var(--ink-faint);
+  border: 1px solid var(--line);
+  border-radius: 4px;
+  pointer-events: none;
+}
+.q input:not(:placeholder-shown) ~ .hint { display: none; }
+
+/* The technology facet is chips rather than a select: ten values, and seeing
+   all ten at once IS half the answer to "what is in this repository". */
+.chips { margin: .8rem 0 0; padding: 0; border: 0; }
+.chips > div { display: flex; flex-wrap: wrap; gap: .35rem; }
+
+.chip {
+  padding: .25rem .6rem;
+  font: 500 .82rem/1.4 inherit;
+  color: var(--ink-soft);
+  background: var(--bg);
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  cursor: pointer;
+}
+.chip:hover { border-color: var(--accent); color: var(--accent); }
+.chip[aria-pressed="true"] {
+  color: var(--accent-ink);
+  background: var(--accent);
+  border-color: var(--accent);
+}
+.chip .n { font: 600 .74rem var(--mono); opacity: .75; }
+
+.facet { margin: .8rem 0 0; }
+
+.facet label {
+  display: block;
+  font-size: .78rem;
+  font-weight: 600;
+  letter-spacing: .02em;
+  text-transform: uppercase;
+  color: var(--ink-faint);
+}
+
+.facet select {
+  width: 100%;
+  max-width: 26rem;
+  margin-top: .15rem;
+  padding: .4rem .5rem;
+  font-size: .92rem;
+  color: var(--ink);
+  background: var(--bg);
+  border: 1px solid var(--line);
+  border-radius: 6px;
+}
+
+.facet .note {
+  display: block;
+  margin-top: .15rem;
+  font-size: .74rem;
+  color: var(--ink-faint);
+}
+
+.resultline {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: .4rem .9rem;
+  margin: .75rem 0 .4rem;
+  font-size: .85rem;
+  color: var(--ink-soft);
+}
+
+.linkish {
+  padding: 0;
+  font: inherit;
+  color: var(--accent);
+  background: none;
+  border: 0;
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+/* The line above the results when one technology is picked: what the package
+   is, what it plays with, where its branch is. */
+.pkgline {
+  margin: 0 0 1.2rem;
+  padding: .75rem .9rem;
+  font-size: .88rem;
+  color: var(--ink-soft);
+  background: var(--accent-soft);
+  border-radius: var(--radius);
+}
+.pkgline b { color: var(--ink); }
+
+/* --------------------------------------------------------------- cards */
+
+#results {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(23rem, 1fr));
+  gap: .9rem;
+}
+
+.card {
+  display: flex;
+  flex-direction: column;
+  padding: .95rem 1rem .8rem;
+  background: var(--card);
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+}
+
+.card h2 {
+  margin: 0;
+  font-size: 1.05rem;
+  line-height: 1.3;
+  letter-spacing: -.01em;
+}
+
+.card .sub {
+  margin: .2rem 0 0;
+  font-size: .88rem;
+  color: var(--ink-soft);
+}
+
+/* The class name, which is how a sample is NAMED here: a number on its own
+   does not qualify one — the three sample repositories reuse each other's
+   freely, and only the prefix separates them. */
+.card .cls {
+  margin: .25rem 0 0;
+  font: .78rem/1.4 var(--mono);
+  color: var(--ink-faint);
+  word-break: break-all;
+}
+
+.card .blurb {
+  margin: .5rem 0 0;
+  font-size: .88rem;
+  color: var(--ink-soft);
+}
+
+.badges {
+  display: flex;
+  flex-wrap: wrap;
+  gap: .3rem;
+  margin: .6rem 0 0;
+}
+
+.badge {
+  padding: .1rem .45rem;
+  font: 600 .72rem/1.6 var(--mono);
+  border-radius: 999px;
+  white-space: nowrap;
+}
+.badge.tech  { color: var(--accent); background: var(--accent-soft); }
+.badge.cloud { color: var(--ok);     background: var(--ok-soft); }
+.badge.std   { color: var(--warn);   background: var(--warn-soft); }
+.badge.plain { color: var(--ink-soft); background: var(--line-soft); }
+
+.facts {
+  margin: .7rem 0 0;
+  font-size: .82rem;
+}
+.facts > div {
+  display: grid;
+  grid-template-columns: 5.2rem 1fr;
+  gap: .5rem;
+  padding: .12rem 0;
+}
+.facts dt {
+  color: var(--ink-faint);
+  font-weight: 600;
+}
+.facts dd { margin: 0; color: var(--ink-soft); }
+.facts code { color: var(--ink); }
+
+.start {
+  display: flex;
+  align-items: baseline;
+  gap: .4rem;
+  flex-wrap: wrap;
+}
+.copy {
+  padding: 0 .3rem;
+  font: 500 .72rem/1.5 inherit;
+  color: var(--ink-faint);
+  background: var(--line-soft);
+  border: 1px solid var(--line);
+  border-radius: 4px;
+  cursor: pointer;
+}
+.copy:hover { color: var(--accent); border-color: var(--accent); }
+
+/* The keywords, as buttons: the line exists so somebody who does not know a
+   sample exists can still type their way to it — clicking one does the typing. */
+.tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: .25rem;
+  margin: .6rem 0 0;
+  padding: 0;
+  list-style: none;
+}
+.tags button {
+  padding: .05rem .4rem;
+  font: 400 .73rem/1.5 var(--mono);
+  color: var(--ink-faint);
+  background: none;
+  border: 1px solid var(--line-soft);
+  border-radius: 4px;
+  cursor: pointer;
+}
+.tags button:hover { color: var(--accent); border-color: var(--accent); }
+
+.card details { margin: .65rem 0 0; font-size: .85rem; }
+.card summary { color: var(--ink-faint); cursor: pointer; }
+.card details .doc { margin-top: .4rem; color: var(--ink-soft); }
+.card details .doc p { margin: .5rem 0; }
+.card details .doc ul { margin: .5rem 0; padding-left: 1.1rem; }
+.card details .doc li { margin: .25rem 0; }
+.card details .doc pre {
+  margin: .5rem 0;
+  padding: .5rem .6rem;
+  overflow-x: auto;
+  font-family: var(--mono);
+  font-size: .76rem;
+  line-height: 1.45;
+  color: var(--ink);
+  background: var(--bg);
+  border: 1px solid var(--line-soft);
+  border-radius: 6px;
+}
+
+.actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: .4rem;
+  margin-top: auto;
+  padding-top: .85rem;
+}
+
+.actions a {
+  padding: .32rem .6rem;
+  font-size: .82rem;
+  color: var(--ink);
+  text-decoration: none;
+  background: var(--bg);
+  border: 1px solid var(--line);
+  border-radius: 6px;
+}
+.actions a:hover { border-color: var(--accent); color: var(--accent); }
+.actions a.primary {
+  color: var(--accent-ink);
+  background: var(--accent);
+  border-color: var(--accent);
+}
+.actions a.primary:hover { color: var(--accent-ink); filter: brightness(1.08); }
+
+mark {
+  padding: 0 .1em;
+  color: inherit;
+  background: var(--accent-soft);
+  border-radius: 3px;
+}
+
+/* ---------------------------------------------------- the prose sections */
+
+.empty { margin: 2rem 0; color: var(--ink-soft); }
+
+.how, .packages, .ladder {
+  margin: 3rem 0 0;
+  padding-top: 1.4rem;
+  border-top: 1px solid var(--line);
+  /* the filter panel is sticky, so a jump to one of these has to clear it */
+  scroll-margin-top: 15rem;
+}
+
+.how h2, .packages h2, .ladder h2 {
+  margin: 0 0 .7rem;
+  font-size: 1.15rem;
+  letter-spacing: -.01em;
+}
+
+.how ol, .steps {
+  max-width: 46rem;
+  margin: 0;
+  padding-left: 1.2rem;
+  color: var(--ink-soft);
+  font-size: .92rem;
+}
+.how li, .steps li { margin: .45rem 0; }
+.how b, .steps b { color: var(--ink); }
+
+#pkgcards {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
+  gap: .7rem;
+  margin-top: 1rem;
+}
+
+.pkgcard {
+  padding: .8rem .9rem;
+  background: var(--card);
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  font-size: .85rem;
+  color: var(--ink-soft);
+}
+.pkgcard h3 {
+  margin: 0 0 .15rem;
+  font-size: .98rem;
+  color: var(--ink);
+}
+.pkgcard h3 button {
+  padding: 0;
+  font: inherit;
+  color: inherit;
+  background: none;
+  border: 0;
+  cursor: pointer;
+  text-align: left;
+}
+.pkgcard h3 button:hover { color: var(--accent); }
+.pkgcard p { margin: .35rem 0 0; }
+.pkgcard .meta {
+  margin-top: .5rem;
+  font: .74rem/1.5 var(--mono);
+  color: var(--ink-faint);
+}
+.pkgcard .note {
+  margin-top: .5rem;
+  padding: .4rem .5rem;
+  font-size: .78rem;
+  color: var(--warn);
+  background: var(--warn-soft);
+  border-radius: 6px;
+}
+
+footer {
+  max-width: var(--wide);
+  margin: 3rem auto 0;
+  padding-top: 1.2rem;
+  border-top: 1px solid var(--line);
+  font-size: .82rem;
+  color: var(--ink-faint);
+}
+footer p { margin: .4rem 0; }
+
+@media (max-width: 40rem) {
+  .panel { position: static; }
+  .facts > div { grid-template-columns: 1fr; gap: 0; }
+  .facts dt { font-size: .74rem; text-transform: uppercase; }
+}
diff --git a/web/stack.js b/web/stack.js
new file mode 100644
index 0000000..a62aeb9
--- /dev/null
+++ b/web/stack.js
@@ -0,0 +1,356 @@
+/*
+ * The samples-stack catalogue — plain ES2020, no dependencies, no build step.
+ *
+ * Everything it knows comes from apps.json (scripts/generate-web-index.mjs),
+ * regenerated on every Pages deploy. This file only filters and draws.
+ *
+ * Three decisions worth knowing before changing anything here:
+ *
+ *   THE SYSTEM FACET is the point of the page. Every sample in this repository
+ *   needs something from the system, so "will this run for me" is not a detail
+ *   on a card, it is the first question — and it has two halves, the stack
+ *   (ABAP Cloud or on-premise) and the release. One select answers both:
+ *   picking ABAP Cloud drops the three on-premise packages, picking a Standard
+ *   release keeps everything at or below it. The counts are in the labels, so
+ *   what an older system costs is visible before the click.
+ *
+ *   THERE IS NO PLAYGROUND LINK, unlike on the sibling pages. The playground
+ *   runs a class with no system behind it, and a system is precisely what
+ *   every sample here requires — a Gateway service, a RAP business object, an
+ *   APC channel, a launchpad. Each app would open there and fail, so the links
+ *   go to the source and to the package README that says how to set it up.
+ *
+ *   THE TECHNOLOGY FACET IS CHIPS, not a select: ten values, and seeing all
+ *   ten at once is half the answer to "what is even in this repository".
+ */
+
+/* ------------------------------------------------------------------ state */
+
+const $ = (id) => document.getElementById(id);
+
+const els = {
+  q: $('q'),
+  tech: $('tech'),
+  system: $('system'),
+  results: $('results'),
+  count: $('count'),
+  total: $('total'),
+  pkgcount: $('pkgcount'),
+  pkgline: $('pkgline'),
+  pkgcards: $('pkgcards'),
+  empty: $('empty'),
+  reset: $('reset'),
+  reset2: $('reset2'),
+};
+
+let DATA = null;      // the parsed apps.json
+let PKG = new Map();  // directory -> package
+let MATCHES = [];
+
+/* --------------------------------------------------------------- helpers */
+
+const esc = (s) => String(s == null ? '' : s)
+  .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+  .replace(/"/g, '&quot;');
+
+/** Escaped text with `backticks` turned into code — the only markup the
+ *  generated strings carry, because they come out of Markdown tables and
+ *  ABAP-Doc prose. */
+const md = (s) => esc(s).replace(/`([^`]+)`/g, '<code>$1</code>');
+
+/** Wrap every query token found in `text`. Escapes first, so the marks are the
+ *  only markup that reaches the card. */
+function highlight(text, tokens) {
+  const out = esc(text);
+  if (!tokens.length) return out;
+  const pattern = tokens
+    .map((t) => t.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'))
+    .sort((a, b) => b.length - a.length)
+    .join('|');
+  return out.replace(new RegExp(`(${pattern})`, 'gi'), '<mark>$1</mark>');
+}
+
+/** The one string a free-text query is matched against. The package title and
+ *  what it plays together with are in it on purpose: "websocket" is in no
+ *  class of src/07, it is in the package. */
+const haystack = (app, pkg) => [
+  app.cls,
+  app.title,
+  app.sub,
+  app.summary,
+  app.keywords.join(' '),
+  pkg.title,
+  pkg.topic,
+  pkg.needs,
+  app.doc.map((b) => b.text || (b.items || []).join(' ')).join(' '),
+].join(' ').toLowerCase();
+
+/* ----------------------------------------------------------------- facets */
+
+function buildFacets() {
+  els.tech.innerHTML = DATA.packages.map((p) => `
+    <button type="button" class="chip" data-tech="${esc(p.dir)}" aria-pressed="false"
+            title="${esc(p.topic)}">${esc(p.title)} <span class="n">${p.count}</span></button>`).join('');
+
+  /* One select, both halves of the question. A Standard release keeps every
+   * package at or below it — including the on-premise ones, which is the whole
+   * difference to the Cloud option. */
+  const cloud = DATA.apps.filter((a) => PKG.get(a.pkg).cloud).length;
+  const releases = [...new Set(DATA.packages.map((p) => p.releaseNum))].sort((a, b) => a - b);
+  const label = (num) => DATA.packages.find((p) => p.releaseNum === num).release;
+
+  els.system.innerHTML = [
+    `<option value="">any system — ${DATA.apps.length} samples</option>`,
+    `<optgroup label="ABAP Cloud">`,
+    `<option value="cloud">ABAP Cloud / BTP — ${cloud} samples</option>`,
+    `</optgroup>`,
+    `<optgroup label="ABAP Standard (on-premise)">`,
+    ...releases.map((num) => {
+      const n = DATA.apps.filter((a) => PKG.get(a.pkg).releaseNum <= num).length;
+      return `<option value="std:${num}">${esc(label(num))} — ${n} sample${n === 1 ? '' : 's'}</option>`;
+    }),
+    `</optgroup>`,
+  ].join('');
+}
+
+/* ----------------------------------------------------------------- filter */
+
+const currentFilters = () => ({
+  q: els.q.value.trim().toLowerCase(),
+  tech: [...els.tech.querySelectorAll('[aria-pressed="true"]')].map((b) => b.dataset.tech),
+  system: els.system.value,
+});
+
+function matches(app, f) {
+  const pkg = PKG.get(app.pkg);
+  if (f.tech.length && !f.tech.includes(app.pkg)) return false;
+  if (f.system === 'cloud' && !pkg.cloud) return false;
+  if (f.system.startsWith('std:') && pkg.releaseNum > Number(f.system.slice(4))) return false;
+  return true;
+}
+
+function apply() {
+  const f = currentFilters();
+  const tokens = f.q ? f.q.split(/\s+/).filter(Boolean) : [];
+
+  MATCHES = DATA.apps.filter((app) => matches(app, f) && tokens.every((t) => app.hay.includes(t)));
+
+  /* A query naming a class, a title or a keyword should put that sample first;
+   * otherwise the corpus order (package, then class number) is the stable one,
+   * and it is also the reading order. */
+  if (tokens.length) {
+    const score = (app) => {
+      const near = `${app.cls} ${app.title} ${app.sub} ${app.keywords.join(' ')}`.toLowerCase();
+      return tokens.reduce((acc, t) => acc + (near.includes(t) ? 1 : 0), 0);
+    };
+    MATCHES = MATCHES
+      .map((app, i) => ({ app, i, s: score(app) }))
+      .sort((a, b) => b.s - a.s || a.i - b.i)
+      .map((x) => x.app);
+  }
+
+  const n = MATCHES.length;
+  els.count.textContent = n === DATA.apps.length
+    ? `${n} samples`
+    : `${n} of ${DATA.apps.length} samples`;
+
+  const dirty = !!(f.q || f.tech.length || f.system);
+  els.reset.hidden = !dirty;
+  els.empty.hidden = n > 0;
+
+  drawPackageLine(f);
+  els.results.innerHTML = MATCHES.map((a) => card(a, tokens)).join('');
+  writeUrl(f);
+}
+
+/** With exactly one technology picked, say what that package is before the
+ *  cards — the description belongs where the reader has just asked for it. */
+function drawPackageLine(f) {
+  if (f.tech.length !== 1) { els.pkgline.hidden = true; return; }
+  const p = PKG.get(f.tech[0]);
+  els.pkgline.hidden = false;
+  els.pkgline.innerHTML = `
+    <b>${esc(p.title)}</b> — ${md(p.topic)}.
+    Plays together with ${md(p.needs)}. Runs on ${esc(p.runsOn)}.
+    ${p.dir === DATA.overviewApp ? '' : `
+      Install it alone from the branch
+      <a href="${esc(DATA.tree + p.branch)}" target="_blank" rel="noopener"><code>${esc(p.branch)}</code></a>,
+      or read <a href="${esc(DATA.source + p.readme)}" target="_blank" rel="noopener">its README</a>.`}
+    ${p.note ? `<br><em>${md(p.note)}</em>` : ''}`;
+}
+
+/* ----------------------------------------------------------------- render */
+
+/** The ABAP-Doc header, block by block — the fullest description a class has
+ *  of itself, where it carries one. */
+const doc = (blocks) => blocks.map((b) => {
+  if (b.type === 'code') return `<pre><code>${esc(b.text)}</code></pre>`;
+  if (b.type === 'list') return `<ul>${b.items.map((i) => `<li>${md(i)}</li>`).join('')}</ul>`;
+  return `<p>${md(b.text)}</p>`;
+}).join('');
+
+function card(app, tokens) {
+  const p = PKG.get(app.pkg);
+  const start = `?app_start=${app.cls.toLowerCase()}`;
+
+  const badges = [
+    `<span class="badge tech">${esc(p.title)}</span>`,
+    p.cloud
+      ? `<span class="badge cloud" title="Runs on ABAP Cloud and on-premise alike">Cloud + Standard</span>`
+      : `<span class="badge std" title="On-premise only — the technology it uses is no released ABAP Cloud API">Standard only</span>`,
+    `<span class="badge plain" title="${esc(p.runsOn)}">≥ ${esc(p.release)}</span>`,
+  ];
+
+  return `
+    <article class="card">
+      <h2>${highlight(app.title, tokens)}</h2>
+      ${app.sub ? `<p class="sub">${highlight(app.sub, tokens)}</p>` : ''}
+      <p class="cls">${highlight(app.cls, tokens)}</p>
+      ${app.summary ? `<p class="blurb">${highlight(app.summary, tokens)}</p>` : ''}
+      <div class="badges">${badges.join('')}</div>
+      <dl class="facts">
+        <div><dt>Needs</dt><dd>${md(p.needs)}</dd></div>
+        <div><dt>Start with</dt><dd class="start"><code>${highlight(start, tokens)}</code>
+          <button type="button" class="copy" data-copy="${esc(start)}">copy</button></dd></div>
+      </dl>
+      ${app.keywords.length ? `<ul class="tags">${app.keywords
+        .map((k) => `<li><button type="button" data-tag="${esc(k)}">${esc(k)}</button></li>`).join('')}</ul>` : ''}
+      ${app.doc.length ? `<details><summary>What the class documents</summary><div class="doc">${doc(app.doc)}</div></details>` : ''}
+      <div class="actions">
+        <a class="primary" href="${esc(DATA.source + app.file)}" target="_blank" rel="noopener">Source ↗</a>
+        <a href="${esc(DATA.source + p.readme)}" target="_blank" rel="noopener">Setup ↗</a>
+        ${app.pkg === DATA.overviewApp ? '' :
+          `<a href="${esc(DATA.tree + p.branch)}" target="_blank" rel="noopener" title="This package alone, for abapGit">Branch ↗</a>`}
+      </div>
+    </article>`;
+}
+
+/** The packages as a table of their own, below the results: the same nine
+ *  paragraphs the READMEs open with, for somebody who is browsing rather than
+ *  searching. The heading filters the list above. */
+function drawPackages() {
+  els.pkgcards.innerHTML = DATA.packages.map((p) => `
+    <article class="pkgcard">
+      <h3><button type="button" data-tech="${esc(p.dir)}">${esc(p.title)}</button></h3>
+      <p>${md(p.topic)}</p>
+      <p><b>Plays together with</b> ${md(p.needs)}</p>
+      <p class="meta">
+        ${p.dir === DATA.overviewApp ? 'src' : `src/${esc(p.dir)}`} ·
+        ${esc(p.runsOn)} ·
+        ${p.count} sample${p.count === 1 ? '' : 's'}
+        ${p.dir === DATA.overviewApp ? '' : ` · <a href="${esc(DATA.tree + p.branch)}" target="_blank" rel="noopener">${esc(p.branch)}</a>`}
+      </p>
+      ${p.note ? `<p class="note">${md(p.note)}</p>` : ''}
+    </article>`).join('');
+}
+
+/* -------------------------------------------------------------- url state */
+
+function writeUrl(f) {
+  const p = new URLSearchParams();
+  if (f.q) p.set('q', f.q);
+  if (f.tech.length) p.set('tech', f.tech.join(','));
+  if (f.system) p.set('system', f.system);
+  const query = p.toString();
+  history.replaceState(null, '', query ? `?${query}` : location.pathname);
+}
+
+function readUrl() {
+  const p = new URLSearchParams(location.search);
+  els.q.value = p.get('q') || '';
+  const tech = (p.get('tech') || '').split(',').filter(Boolean);
+  for (const button of els.tech.querySelectorAll('[data-tech]')) {
+    button.setAttribute('aria-pressed', String(tech.includes(button.dataset.tech)));
+  }
+  const system = p.get('system');
+  /* Only a value the current index still knows — a link from before a package
+   * was added must not leave a dead filter selected. */
+  if (system && [...els.system.options].some((o) => o.value === system)) els.system.value = system;
+}
+
+function reset() {
+  els.q.value = '';
+  els.system.value = '';
+  for (const button of els.tech.querySelectorAll('[data-tech]')) button.setAttribute('aria-pressed', 'false');
+  apply();
+  els.q.focus();
+}
+
+/** Filter by one technology, from a chip or from a package card below. */
+function pickTech(dir, toggle) {
+  for (const button of els.tech.querySelectorAll('[data-tech]')) {
+    const on = button.dataset.tech === dir;
+    if (!toggle && !on) button.setAttribute('aria-pressed', 'false');
+    if (on) button.setAttribute('aria-pressed', String(toggle ? button.getAttribute('aria-pressed') !== 'true' : true));
+  }
+  apply();
+}
+
+/* ------------------------------------------------------------------- boot */
+
+async function boot() {
+  try {
+    const res = await fetch('apps.json');
+    if (!res.ok) throw new Error(`HTTP ${res.status}`);
+    DATA = await res.json();
+  } catch (err) {
+    els.count.textContent = '';
+    els.results.innerHTML = `<p class="empty">The catalogue could not be loaded (${esc(err.message)}).
+      It is written by the deploy build; on a local checkout run
+      <code>node scripts/generate-web-index.mjs</code> first.</p>`;
+    return;
+  }
+
+  PKG = new Map(DATA.packages.map((p) => [p.dir, p]));
+  for (const app of DATA.apps) app.hay = haystack(app, PKG.get(app.pkg));
+
+  els.total.textContent = String(DATA.apps.length);
+  els.pkgcount.textContent = String(DATA.packages.filter((p) => p.dir !== DATA.overviewApp).length);
+
+  buildFacets();
+  drawPackages();
+  readUrl();
+  apply();
+
+  els.q.addEventListener('input', apply);
+  els.system.addEventListener('change', apply);
+  els.tech.addEventListener('click', (e) => {
+    const chip = e.target.closest('[data-tech]');
+    if (chip) pickTech(chip.dataset.tech, true);
+  });
+  els.pkgcards.addEventListener('click', (e) => {
+    const button = e.target.closest('[data-tech]');
+    if (!button) return;
+    pickTech(button.dataset.tech, false);
+    document.getElementById('filters').scrollIntoView({ behavior: 'smooth', block: 'start' });
+  });
+  els.results.addEventListener('click', (e) => {
+    const tag = e.target.closest('[data-tag]');
+    if (tag) {
+      els.q.value = tag.dataset.tag;
+      apply();
+      return;
+    }
+    const copy = e.target.closest('[data-copy]');
+    if (copy && navigator.clipboard) {
+      navigator.clipboard.writeText(copy.dataset.copy).then(() => {
+        copy.textContent = 'copied';
+        setTimeout(() => { copy.textContent = 'copy'; }, 1200);
+      }, () => { copy.textContent = 'press ⌘C'; });
+    }
+  });
+  els.reset.addEventListener('click', reset);
+  els.reset2.addEventListener('click', reset);
+  document.getElementById('filters').addEventListener('submit', (e) => e.preventDefault());
+
+  /* `/` focuses the search box, the way a documentation site does. */
+  document.addEventListener('keydown', (e) => {
+    if (e.key === '/' && !/^(INPUT|TEXTAREA|SELECT)$/.test(document.activeElement.tagName)) {
+      e.preventDefault();
+      els.q.focus();
+      els.q.select();
+    }
+  });
+}
+
+boot();