B2CA-2702: Add web UI tol for backup & Restore

.github/workflows/coding_style_checks.yml

@@ -20,4 +20,3 @@ jobs:
     uses: LedgerHQ/ledger-app-workflows/.github/workflows/reusable_lint.yml@v1
     with:
       source: './src'
-      extensions: 'h,c'

.github/workflows/misspellings_checks.yml

@@ -15,14 +15,6 @@ on:
 jobs:
   misspell:
     name: Check misspellings
-    runs-on: ubuntu-latest
-    steps:
-      - name: Clone
-        uses: actions/checkout@v4
-
-      - name: Check misspellings
-        uses: codespell-project/actions-codespell@v2
-        with:
-          builtin: clear,rare
-          check_filenames: true
-          ignore_words_list: ontop
+    uses: LedgerHQ/ledger-app-workflows/.github/workflows/reusable_spell_check.yml@v1
+    with:
+      src_path: src, doc, client

.github/workflows/pages.yml

@@ -6,6 +6,7 @@ on:
       - develop
     paths:
       - 'doc/**'
+      - 'clients/wui/**'
   workflow_dispatch:
 
 concurrency:
@@ -31,6 +32,29 @@ jobs:
       - name: Generate HTML
         run: doc/generate_html.sh
 
+      # Build the backup/restore web UI and publish it under the same Pages
+      # site, at <pages-url>/wui/.
+      - name: Set up Node
+        uses: actions/setup-node@v6
+        with:
+          node-version: '20'
+
+      - name: Build the backup web UI
+        working-directory: clients/wui
+        env:
+          COREPACK_ENABLE_DOWNLOAD_PROMPT: '0'
+        run: |
+          # pnpm is provisioned by corepack from the "packageManager" field.
+          corepack enable
+          # --frozen-lockfile: install exactly what pnpm-lock.yaml pins (fail on drift).
+          pnpm install --frozen-lockfile
+          pnpm build
+
+      - name: Add the web UI to the Pages artifact
+        run: |
+          mkdir -p doc/html/build/wui
+          cp -r clients/wui/dist/. doc/html/build/wui/
+
       - name: Setup Pages
         uses: actions/configure-pages@v6
 

.pre-commit-config.yaml

@@ -7,39 +7,43 @@ repos:
     rev: v6.0.0
     hooks:
       - id: trailing-whitespace
+        args: ['--markdown-linebreak-ext=md']
       - id: end-of-file-fixer
       - id: mixed-line-ending
       - id: check-added-large-files
+        exclude: 'pnpm-lock\.yaml$'
       - id: check-merge-conflict
       - id: check-case-conflict
 
   - repo: https://github.com/codespell-project/codespell
-    rev: v2.4.1
+    rev: v2.4.2
     hooks:
       - id: codespell
         args: ['--ignore-words-list', 'ontop']
+        exclude: 'pnpm-lock\.yaml$'
 
   - repo: https://github.com/pre-commit/mirrors-clang-format
-    rev: v14.0.6
+    rev: v21.1.8
     hooks:
       - id: clang-format
         types_or: [c]
 
   - repo: https://github.com/Mateusz-Grzelinski/actionlint-py
-    rev: v1.7.7.24
+    rev: v1.7.12.24
     hooks:
       - id: actionlint
         types_or: [yaml]
         args: [-shellcheck='' -pyflakes='']
 
   - repo: https://github.com/DavidAnson/markdownlint-cli2
-    rev: v0.13.0
+    rev: v0.22.1
     hooks:
       - id: markdownlint-cli2
         types_or: [markdown]
+        exclude: CHANGELOG.md
 
   - repo: https://github.com/PyCQA/pylint
-    rev: v3.3.8
+    rev: v4.0.5
     hooks:
       - id: pylint
         name: Check python Client

clients/wui/.gitignore

@@ -0,0 +1,18 @@
+# dependencies
+/node_modules
+
+# production
+/dist
+
+# local tooling
+.mcp.json
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+pnpm-debug.log*

clients/wui/README.md

@@ -0,0 +1,96 @@
+# OpenPGP Backup — Web UI
+
+A browser-based tool to **backup and restore** the data of the Ledger OpenPGP App.
+Everything runs locally in your browser; the backup file never leaves your machine.
+
+Built with **Vite + React 18** and Ledger's **lumen** design system
+(`@ledgerhq/lumen-ui-react`, Tailwind CSS).
+
+## Why WebHID (and not WebUSB)
+
+The OpenPGP app exposes a USB **CCID** (smartcard) interface used by GPG, plus
+the standard Ledger **generic HID** APDU interface. WebUSB would collide with
+CCID on the same USB endpoint (`0x83`), so it is disabled in the app firmware.
+
+Instead this UI uses [`@ledgerhq/hw-transport-webhid`](https://www.npmjs.com/package/@ledgerhq/hw-transport-webhid),
+which talks to the **generic HID** interface (vendor id `0x2c97`, usage page
+`0xFFA0`) — the exact same channel the Python backup tool (`pytools/backup.py`)
+already uses. No firmware change is required.
+
+## Requirements
+
+- A **Chromium-based browser** (Chrome, Edge, Brave). WebHID is not available
+  in Firefox or Safari.
+- The OpenPGP app **open** on a connected Ledger device.
+- **No other client holding the device.** gpg/scdaemon and this page share the
+  USB device; a running scdaemon can break the WebHID connection ("Bad
+  interface"). Release it first with `gpgconf --kill scdaemon` (or `pkill
+  scdaemon`).
+
+## After a restore or factory reset
+
+The web UI talks to the device over **HID**, gpg over **CCID**. The app only
+signals a "card changed" to the CCID side when it (re)starts, so after a
+**restore** or a **factory reset** you must, before using gpg:
+
+1. **Restart the OpenPGP app** on the device (quit to the dashboard, reopen it).
+2. Reload scdaemon: `gpgconf --kill scdaemon`.
+
+Otherwise gpg keeps seeing the old card state. (A factory reset also resets the
+PINs to their defaults: `123456` / `12345678`.)
+
+## Develop
+
+This project uses **pnpm** (provisioned by corepack from the `packageManager`
+field — run `corepack enable` once if needed):
+
+```sh
+pnpm install
+pnpm dev        # Vite dev server on http://localhost:5173 (opens the browser)
+pnpm mock       # same, but opens at /?mock — see below
+pnpm build      # production bundle in dist/
+```
+
+Local testing of the device interaction requires a **physical device**:
+Speculos exposes APDUs over TCP, not WebHID.
+
+### Preview without a device (`?mock`)
+
+Append `?mock` to the URL (or run `pnpm mock`) to jump straight to the
+*connected* screen — Backup / Restore / Factory reset / Disconnect, with a
+placeholder AID — so the layout and dialogs can be reviewed without a Ledger.
+It is **dev-only**: `import.meta.env.DEV` gates it, so production builds ignore
+the flag. Submitting an action still fails (no device), but every screen and
+dialog renders.
+
+### Tests
+
+The pure-logic units (APDU framing / command chaining, TLV decoding) are
+covered by **Vitest** and run without a device:
+
+```sh
+pnpm test        # run once (CI)
+pnpm test:watch  # watch mode
+```
+
+Device interaction itself is not unit-tested.
+
+## Deployment
+
+Built as a static site and co-hosted on the project's existing GitHub Pages
+site: the `Generate GitHub Pages` workflow (`.github/workflows/pages.yml`)
+builds this app and copies `dist/` into `doc/html/build/wui/`, so it is served
+at **`https://ledgerhq.github.io/app-openpgp/wui/`** and linked from the docs
+landing page. The Vite `base` is `./` (relative asset paths), so the build
+works at that sub-path without a custom domain. A dedicated domain (e.g.
+`openpgp.ledger.com`) could be added later via a `CNAME`.
+
+## Known issues
+
+- **The app can occasionally crash during key regeneration.** Regenerating the
+  three keys from the seed runs heavy, variable-time operations on the device
+  (RSA prime search + key-pair generation); the OpenPGP app sometimes drops its
+  USB interface mid-operation. It is intermittent and **not fixable from this client**.
+  The keys are almost always regenerated successfully anyway.
+  Restart the OpenPGP app, reconnect, and verify the fingerprints.
+  The page detects this disconnect and shows a dedicated message.

clients/wui/index.html

@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="./logo.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="description" content="Backup and restore your OpenPGP keys" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
+    <title>OpenPGP Backup</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

clients/wui/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "openpgp-backup",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "homepage": ".",
+  "packageManager": "pnpm@11.7.0",
+  "scripts": {
+    "dev": "vite",
+    "mock": "vite --open '/?mock'",
+    "build": "vite build",
+    "preview": "vite preview",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "dependencies": {
+    "@base-ui/react": "1.5.0",
+    "@ledgerhq/hw-transport-webhid": "6.35.4",
+    "@ledgerhq/logs": "6.17.0",
+    "@ledgerhq/lumen-design-core": "0.1.17",
+    "@ledgerhq/lumen-ui-react": "0.1.40",
+    "@radix-ui/react-checkbox": "1.3.4",
+    "@radix-ui/react-dialog": "1.1.16",
+    "@radix-ui/react-slot": "1.2.5",
+    "@radix-ui/react-switch": "1.3.0",
+    "@radix-ui/react-tooltip": "1.2.9",
+    "@tanstack/react-table": "8.21.3",
+    "class-variance-authority": "0.7.1",
+    "clsx": "2.1.1",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "tailwind-merge": "2.6.1"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "6.9.1",
+    "@testing-library/react": "16.3.2",
+    "@vitejs/plugin-react": "6.0.2",
+    "autoprefixer": "10.5.0",
+    "jsdom": "29.1.1",
+    "postcss": "8.5.15",
+    "prettier": "3.8.4",
+    "tailwindcss": "3.4.19",
+    "vite": "8.0.16",
+    "vite-plugin-node-polyfills": "0.28.0",
+    "vitest": "4.1.9"
+  }
+}