From ca8081987d18fb753a18483e687d03d91e54fcb5 Mon Sep 17 00:00:00 2001
From: r-zakarya <82443831+r-zakarya@users.noreply.github.com>
Date: Sun, 5 Jul 2026 15:44:06 +0100
Subject: [PATCH] =?UTF-8?q?refactor(js):=20extract=20crypto=20module=20fro?=
 =?UTF-8?q?m=20app.js=20monofile=20(=C2=A73.1=20start)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

First slice of the app.js split. Approach: ordered classic-script files
loaded via separate <script> tags (argon2.js → app.crypto.js → app.js),
NOT ES modules / a bundler. Classic scripts share one global lexical
environment, so consts/functions cross-reference across files exactly as
in the monofile — zero call-site rewrites, near-zero risk. Chosen over the
audit's esbuild/ES-module suggestion because the code is written entirely
in global scope (functions call each other by bare name everywhere).

- js/app.crypto.js: KDF (PBKDF2 + Argon2id), verifier, AES-GCM encrypt/
  decrypt, key persist/restore. Verified byte-for-byte identical to the
  original block before removal; no duplicate const across the two scripts.
- index.html + BuildAssets whitelist + test harness updated for the load
  order. Harness CONCATENATES app.crypto.js + app.js (node:vm doesn't share
  top-level const across separate runInContext calls the way browsers share
  it across <script> tags); argon2.js stays a separate IIFE.
- Runtime-validated: rebuilt exe unlocks via quick-unlock and loads/decrypts
  entries — the extracted crypto (restoreCryptoKey, verifierFromKeyHex,
  decryptPwd) works from the separate file. 42/42 tests green.
- Docs: CLAUDE.md "Découpage frontend" (pattern + rules), file map, tests
  README, CODE_AUDIT §3.1.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 CLAUDE.md                             |  38 +++++-
 CODE_AUDIT.md                         |  26 ++--
 delphi-backend/assets/BuildAssets.ps1 |   1 +
 delphi-backend/assets/assets.inc      |   3 +-
 delphi-backend/assets/assets.rc       |   1 +
 delphi-backend/assets/assets.res      | Bin 704600 -> 705768 bytes
 index.html                            |   1 +
 js/app.crypto.js                      | 169 ++++++++++++++++++++++++++
 js/app.js                             | 157 +-----------------------
 js/tests/README.md                    |  14 ++-
 js/tests/harness.js                   |  12 +-
 11 files changed, 245 insertions(+), 177 deletions(-)
 create mode 100644 js/app.crypto.js

diff --git a/CLAUDE.md b/CLAUDE.md
index c7a5992..f51dc0d 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -22,6 +22,34 @@ Toute modif `index.html` / `js/` / `css/` nécessite :
 Sans étape 1, l'exe embarque l'ancienne version des assets — le bug le
 plus courant après modif frontend.
 
+### Découpage frontend (§3.1, en cours)
+
+`app.js` (~12k lignes) est **progressivement scindé** en fichiers classic-script
+chargés **dans l'ordre** via des `<script>` séparés (PAS de bundler, PAS d'ES
+modules) : les classic scripts partagent **un seul environnement lexical
+global** dans le navigateur, donc les `const`/fonctions d'un fichier sont
+visibles des suivants exactement comme dans le monofichier. Ordre actuel :
+
+```
+js/argon2.js  (IIFE, globalThis.NobleArgon2)
+js/app.crypto.js  (KDF, verifier, encrypt/decrypt — extrait §3.1)
+js/app.js  (le reste)
+```
+
+Règles pour extraire un nouveau module :
+- Il doit se charger **avant** ses consommateurs et **ne jamais redéclarer**
+  un `const` d'un autre fichier (un `const` dupliqué entre deux classic
+  scripts jette « already declared »).
+- Les corps de fonction peuvent référencer des globals d'un fichier chargé
+  après (`state` vit dans `app.js`) car résolus au **call-time**, jamais au
+  load-time. Ne pas mettre de code exécuté au top-level qui touche un global
+  pas encore déclaré.
+- Ajouter le fichier au whitelist `BuildAssets.ps1` **dans l'ordre de chargement**
+  + au `<script>` d'index.html + à `APP_PARTS` du harness de test.
+- `node:vm` ne partage PAS les `const` top-level entre `runInContext` séparés
+  (contrairement au navigateur) → le harness **concatène** `APP_PARTS` en un
+  seul script. `argon2.js` reste séparé (IIFE autonome).
+
 `BuildAssets.ps1` lance `node --check` sur chaque `.js` embarqué **avant**
 de générer `assets.res` : une erreur de syntaxe JS avorte le build (au
 lieu d'embarquer un bundle mort qui ne se révèle qu'après un rebuild
@@ -33,9 +61,9 @@ Ensuite (même gate, node requis) il lance la **suite de tests frontend**
 invariant crypto/merge cassé avorte le build comme une erreur de syntaxe.
 `PM_SKIP_TESTS=1` pour bypasser en itération rapide. Lancer manuellement
 via `npm test`. Voir [js/tests/README.md](js/tests/README.md) — le harness
-charge `app.js` (monofichier sans exports) dans un `node:vm` avec les
-globals navigateur stubbés, puis expose les internals via un épilogue
-d'export. Couvre : round-trip crypto + dérivation verifier (legacy vs -v2),
+concatène `APP_PARTS` (`app.crypto.js` + `app.js`) et les charge dans un
+`node:vm` avec les globals navigateur stubbés (`argon2.js` chargé à part,
+c'est un IIFE), puis expose les internals via un épilogue d'export. Couvre : round-trip crypto + dérivation verifier (legacy vs -v2),
 parsing CSV d'import, et l'arbitrage merge/tombstone de sync
 (`applyRemoteSnapshot`, seule `api()` est stubbée).
 
@@ -57,7 +85,9 @@ parsing CSV d'import, et l'arbitrage merge/tombstone de sync
 | Start with Windows (HKCU Run) | `delphi-backend/Source/PM.AutoStart.pas` |
 | Favicon proxy (DuckDuckGo, async THTTPClient/WinHTTP) | `delphi-backend/Source/PM.Favicon.pas` |
 | Handlers REST | `delphi-backend/Handlers/PM.Handler.*.pas` |
-| Frontend complet | `js/app.js` |
+| Frontend principal (en cours de découpage §3.1) | `js/app.js` |
+| Crypto frontend (KDF, verifier, AES-GCM) — extrait §3.1 | `js/app.crypto.js` |
+| Argon2id vendé (bundle `@noble/hashes`, IIFE) | `js/argon2.js` |
 | HTML racine | `index.html` |
 | Styles | `css/style.css` |
 
diff --git a/CODE_AUDIT.md b/CODE_AUDIT.md
index 3bd9bc8..61bf799 100644
--- a/CODE_AUDIT.md
+++ b/CODE_AUDIT.md
@@ -71,10 +71,11 @@ décplé). Détails dans le CLAUDE.md « Auth-hash schemes ».
 - Tests : 8 tests crypto Argon2 (vecteur RFC, branche KDF, contrat de
   params register↔login, sensibilité aux params). 42/42.
 
-**Reste** : dériver via `argon2idAsync` pour ne pas geler l'UI ~0.65 s
-(actuellement sync) ; option « migrer vers Argon2id sans changer de pw »
-(aujourd'hui il faut changer le master pw). **Non compilé/testé runtime
-Delphi dans cette session** — nécessite un rebuild `PMServer.dproj`.
+**Validé runtime** : un compte ayant tourné sa master pw affiche
+`hash_algo=argon2id-v2` (m=19456, t=2, p=1) et se reconnecte/déchiffre.
+
+**Reste (mineur)** : dériver via `argon2idAsync` pour ne pas geler l'UI
+~0.65 s (actuellement sync).
 
 ### 1.3 🟡 Métadonnées en clair
 
@@ -219,13 +220,16 @@ un edit malencontreux casse tout le parse (déjà arrivé cette session : une
 déclaration de fonction supprimée → app entièrement morte, découvert
 seulement au runtime).
 
-**Recommandations** :
-- Découper en modules ES (`crypto.js`, `sync.js`, `slideover.js`,
-  `quicksearch.js`, `settings.js`…) + un bundle simple (esbuild) dans
-  `BuildAssets.cmd`.
-- **Ajouter `node --check` (ou eslint) en pré-étape de `BuildAssets.cmd`**
-  → aurait attrapé le syntax error avant le rebuild. Gain immédiat, coût
-  quasi nul.
+**En cours (2026-07-05)** : découpage incrémental en fichiers classic-script
+chargés dans l'ordre via `<script>` séparés — **pas de bundler ES/esbuild**
+(les classic scripts partagent l'environnement lexical global, donc zéro
+réécriture des call-sites, risque quasi nul vs conversion en modules ES).
+- ✅ `js/app.crypto.js` extrait (KDF, verifier, AES-GCM) — vérifié
+  byte-for-byte identique à l'original, 42 tests verts, pas de `const`
+  dupliqué. Pattern + règles documentés dans CLAUDE.md « Découpage frontend ».
+- Reste à extraire (grosses sections cohésives) : sync, slideover,
+  settings, quicksearch, autofill…
+- ✅ `node --check` en pré-étape de `BuildAssets.ps1` : **déjà fait** (cf. §3.2).
 
 ### 3.2 🟡 Aucun test automatisé — **partiellement adressé (2026-07-04)**
 
diff --git a/delphi-backend/assets/BuildAssets.ps1 b/delphi-backend/assets/BuildAssets.ps1
index 8cf7eea..cfe7885 100644
--- a/delphi-backend/assets/BuildAssets.ps1
+++ b/delphi-backend/assets/BuildAssets.ps1
@@ -52,6 +52,7 @@ Log "Web root: $WebRoot"
 $patterns = @(
     'index.html',
     'js\argon2.js',
+    'js\app.crypto.js',
     'js\app.js',
     'css\style.css'
 )
diff --git a/delphi-backend/assets/assets.inc b/delphi-backend/assets/assets.inc
index 419e59e..5899de0 100644
--- a/delphi-backend/assets/assets.inc
+++ b/delphi-backend/assets/assets.inc
@@ -1,9 +1,10 @@
 // Auto-generated by BuildAssets.ps1 - do not edit by hand.
 const
-  EMBEDDED_ASSET_COUNT = 4;
+  EMBEDDED_ASSET_COUNT = 5;
   EMBEDDED_ASSETS: array[0..EMBEDDED_ASSET_COUNT-1] of TEmbeddedAsset = (
     (UrlPath: '/index.html'; ResName: 'INDEX_HTML'),
     (UrlPath: '/js/argon2.js'; ResName: 'JS_ARGON2_JS'),
+    (UrlPath: '/js/app.crypto.js'; ResName: 'JS_APP_CRYPTO_JS'),
     (UrlPath: '/js/app.js'; ResName: 'JS_APP_JS'),
     (UrlPath: '/css/style.css'; ResName: 'CSS_STYLE_CSS')
   );
diff --git a/delphi-backend/assets/assets.rc b/delphi-backend/assets/assets.rc
index fa04643..e080722 100644
--- a/delphi-backend/assets/assets.rc
+++ b/delphi-backend/assets/assets.rc
@@ -3,5 +3,6 @@
 
 INDEX_HTML RCDATA "Z:\\password-manager\\index.html"
 JS_ARGON2_JS RCDATA "Z:\\password-manager\\js\\argon2.js"
+JS_APP_CRYPTO_JS RCDATA "Z:\\password-manager\\js\\app.crypto.js"
 JS_APP_JS RCDATA "Z:\\password-manager\\js\\app.js"
 CSS_STYLE_CSS RCDATA "Z:\\password-manager\\css\\style.css"
diff --git a/delphi-backend/assets/assets.res b/delphi-backend/assets/assets.res
index 92446f128741f0f5361cbf6a7909de95ee0a7919..530668479a9220db2a1fcce3c8f0808e82bc8c39 100644
GIT binary patch
delta 1087
zcmY*Y&rcIU6yBC!%GE>F5c420v;mf&i3c&nw!lG=62Jsbbh`UW2WMwCGt<(Zibi9+
z8Dmn9-tZqFBwk327o&fGS3LO#c*i%}wZv>*b~F3toA3MHH$RVNe!rP{3z-kkCr>6b
zFLR@T?!;F0UgR>x)33SApXj!_<#`W1&%3x7_a1p$-kw+VHt5;&%HF28OJCbwrFWjo
zO!VG;%a)c{9Q%C~|G>bnqxVqW+}+r&K%~N^K*(d;Y8F@wp{`W~uK&Qy!k6Q_{z9R*
z@F`pFj?d4-nqndKFarz%!HnSnJTQUgv0Z}F%4%hE1rE%7e>>z^-J(tw^uCgJ2(sWi
zm~y(cztezeFpZ!j!oE;7CO}}D2lPhS;#$cFrR~mwQD7Sgfs)1&0~tE3dQ%3L(-MS8
zlr+(6AfY+L7B{>`@~lb~0k%n{=r{$34U~k(4G7-C1dB_-i3E4+NZv?Q=d|7VCA$iE
z6f14#vF%>7AQjY_G8CwNSWQ_#O@$ndBc`!VJY;}SHI`YdLVm!IPUw47a5A8}u83wa
zF^Srog9F1B9hPmVu0et{O0-Cu1#(A#<q^#;R>saPSDuuWv}9C&Mg`)BEpnfF1x+pK
zb>=&`typjinkIk0??56mYMQjShIQpEOj3|AjGA5gxn9{O4yg)S?>I13PaCHV86D3F
zI#&D}Ql3HBq|*X20IJF4s=xxRj2Q$dO+jC$R)+?rn9#_=&S0cd1%Dd05TU$Qe7d~i
zM<H3yMF=sEF`1cE7LC)_`#zjq?3J!(Z=CLpWKV7mdFMY)KflUMbh~bjmqDjcq*1-R
z8To$TXA{fPpgUd$W2T*iLD*A^lKeRLe0Yqp1=Xag{}-QRzf0~tif(d~$sBSwU=nHw
zlC}6gL5DB{rXwwD&jk$(p1IQnT?xO(&c;f;YiDES*E^7<8loDe8lf7c8l$>Gb@g}$
H#y|cAR}6FT

delta 102
zcmaFSsePkCdx8REexu@6MaCBK>F2~5<ro>ZzY%BrlFOv|eEXy&j577pCw4L#O#gJ4
yJz)CTIgFg!Z*?+mm6|Sln8~I6g$ff8GXpUT5VHa?8xXStF$WNHE`OoIwEzGp$teB+

diff --git a/index.html b/index.html
index 82c7cdb..c7562e1 100644
--- a/index.html
+++ b/index.html
@@ -1193,6 +1193,7 @@
 </div>
 
 <script src="js/argon2.js"></script>
+<script src="js/app.crypto.js"></script>
 <script src="js/app.js"></script>
 </body>
 </html>
diff --git a/js/app.crypto.js b/js/app.crypto.js
new file mode 100644
index 0000000..8320901
--- /dev/null
+++ b/js/app.crypto.js
@@ -0,0 +1,169 @@
+// ============================================================
+// app.crypto.js — CRYPTO module (extracted from app.js, §3.1)
+// ============================================================
+//
+// Loaded as a classic <script> BEFORE js/app.js (after js/argon2.js).
+// Classic scripts share one global lexical environment, so the consts and
+// functions declared here are visible to app.js exactly as when this lived
+// inline in the monofile — no import/export, no bundler. Function bodies
+// reference `state` (declared in app.js) and `NobleArgon2` (js/argon2.js);
+// those resolve at call time (post-DOMContentLoaded), never at load time.
+//
+// Split rule: this file must load before app.js and must NOT redeclare any
+// of app.js's top-level consts (a duplicate `const` across classic scripts
+// throws "already declared"). See CLAUDE.md build pipeline notes.
+//
+// CRYPTO (preserved from legacy app.js — DO NOT TOUCH)
+
+async function deriveKey(pwd, saltHex, iterations) {
+    // Iterations parameter is the per-user value returned by the server in
+    // the /login response (legacy users = 100000, modern = 600000). Falling
+    // back to 100000 keeps backwards compatibility with old code paths that
+    // didn't pass the value, but every new caller should pass it explicitly.
+    iterations = iterations || 100000;
+    const enc = new TextEncoder();
+    const km = await crypto.subtle.importKey('raw', enc.encode(pwd), 'PBKDF2', false, ['deriveKey']);
+    // saltHex is the same string that PHP/Delphi passed to PBKDF2 — use its bytes.
+    const sb = enc.encode(saltHex);
+    return crypto.subtle.deriveKey(
+        { name: 'PBKDF2', salt: sb, iterations: iterations, hash: 'SHA-256' },
+        km,
+        { name: 'AES-GCM', length: 256 },
+        true, ['encrypt', 'decrypt']
+    );
+}
+
+// ---- Zero-knowledge auth helpers --------------------------------
+//
+// Single PBKDF2 → both outputs at once:
+//   - cryptoKey: the AES-GCM key used to encrypt entries (= raw PBKDF2 bytes)
+//   - verifier:  the same 32 bytes in hex form, sent to the server in place
+//                of the plaintext master password. Server then SHA-256-wraps
+//                it (HASH_ALGO_CURRENT) or compares directly (LEGACY) without
+//                ever seeing the plaintext.
+//
+// Doing it together avoids running PBKDF2 twice. computeVerifier() is for
+// places that only need the hex (re-auth, current-pw verification on change,
+// etc.) and skips the AES-GCM importKey work.
+
+function bytesToHex(arr) {
+    if (arr instanceof ArrayBuffer) arr = new Uint8Array(arr);
+    let hex = '';
+    for (let i = 0; i < arr.length; i++)
+        hex += arr[i].toString(16).padStart(2, '0');
+    return hex;
+}
+
+// Decoupled-verifier scheme markers + domain separator. When the account's
+// hash_algo ends in '-v2', the verifier sent to the server is a one-way
+// SHA-256 of the key hex (domain-separated), NOT the key hex itself — so
+// intercepting the /login body no longer hands over the AES vault key.
+// The AES key (cryptoKey) is ALWAYS the raw KDF output regardless of algo, so
+// entries stay decryptable and legacy accounts are unaffected.
+const HASH_ALGO_V2 = 'pbkdf2-sha256-v2';         // PBKDF2 KDF + decoupled verifier
+const HASH_ALGO_ARGON2 = 'argon2id-v2';          // Argon2id KDF + decoupled verifier
+const AUTH_VERIFIER_DOMAIN = 'pmserver/auth-verifier/v2';
+
+// OWASP-recommended Argon2id baseline (m = 19 MiB, t = 2, p = 1). Stored
+// per-account (like kdfIterations for PBKDF2) so it's tunable later without
+// breaking existing accounts. dkLen is fixed at 32 (AES-256 key).
+const ARGON2_DEFAULT_PARAMS = { m: 19456, t: 2, p: 1 };
+
+// True for any scheme whose transmitted verifier is decoupled from the key
+// (all '-v2' markers: pbkdf2-sha256-v2, argon2id-v2). endsWith keeps it
+// future-proof for any later '-v2' KDF.
+function isDecoupledVerifierAlgo(algo) {
+    return typeof algo === 'string' && algo.endsWith('-v2');
+}
+
+async function sha256Hex(str) {
+    const buf = await crypto.subtle.digest('SHA-256', new TextEncoder().encode(str));
+    return bytesToHex(new Uint8Array(buf));
+}
+
+// Map the raw KDF key hex → the verifier to transmit, per account algo.
+// Decoupled ('-v2') → domain-separated SHA-256. Anything else → the key hex
+// verbatim (legacy behaviour, unchanged for existing pre-v2 accounts).
+async function verifierFromKeyHex(keyHex, algo) {
+    if (isDecoupledVerifierAlgo(algo)) return await sha256Hex(keyHex + AUTH_VERIFIER_DOMAIN);
+    return keyHex;
+}
+
+// Derive the 32 raw key bytes from the master password, per account KDF.
+// Argon2id (memory-hard) for argon2id-* accounts, else PBKDF2-SHA256. Both
+// feed the salt HEX STRING's UTF-8 bytes as the salt (historical quirk kept
+// identical across KDFs so a given pw+salt maps to one deterministic key).
+async function deriveKeyBytes(pwd, saltHex, algo, iterations, argonParams) {
+    const enc = new TextEncoder();
+    if (algo === HASH_ALGO_ARGON2) {
+        if (typeof NobleArgon2 === 'undefined' || !NobleArgon2 || !NobleArgon2.argon2id)
+            throw new Error('Argon2 library not loaded (js/argon2.js missing?)');
+        const p = argonParams || ARGON2_DEFAULT_PARAMS;
+        return NobleArgon2.argon2id(enc.encode(pwd), enc.encode(saltHex),
+            { t: p.t, m: p.m, p: p.p, dkLen: 32, version: 0x13 });
+    }
+    // PBKDF2-SHA256 (default / legacy).
+    iterations = iterations || 100000;
+    const km = await crypto.subtle.importKey(
+        'raw', enc.encode(pwd), 'PBKDF2', false, ['deriveBits']);
+    const bits = await crypto.subtle.deriveBits(
+        { name: 'PBKDF2', salt: enc.encode(saltHex),
+          iterations: iterations, hash: 'SHA-256' },
+        km, 256);   // 256 bits = 32 bytes — matches PBKDF2_SHA256_Hex output
+    return new Uint8Array(bits);
+}
+
+async function deriveKeyAndVerifier(pwd, saltHex, iterations, algo, argonParams) {
+    const keyBytes  = await deriveKeyBytes(pwd, saltHex, algo, iterations, argonParams);
+    const cryptoKey = await crypto.subtle.importKey(
+        'raw', keyBytes, { name: 'AES-GCM' }, true, ['encrypt', 'decrypt']);
+    const verifier  = await verifierFromKeyHex(bytesToHex(keyBytes), algo);
+    return { cryptoKey, verifier };
+}
+
+async function computeVerifier(pwd, saltHex, iterations, algo, argonParams) {
+    const r = await deriveKeyAndVerifier(pwd, saltHex, iterations, algo, argonParams);
+    return r.verifier;
+}
+
+async function encryptPwd(plain) {
+    const iv = crypto.getRandomValues(new Uint8Array(12));
+    const enc = await crypto.subtle.encrypt(
+        { name: 'AES-GCM', iv }, state.cryptoKey,
+        new TextEncoder().encode(plain)
+    );
+    return {
+        encrypted: btoa(String.fromCharCode(...new Uint8Array(enc))),
+        iv:        btoa(String.fromCharCode(...iv)),
+    };
+}
+
+async function decryptPwd(encB64, ivB64) {
+    try {
+        const enc = Uint8Array.from(atob(encB64), c => c.charCodeAt(0));
+        const iv  = Uint8Array.from(atob(ivB64),  c => c.charCodeAt(0));
+        const dec = await crypto.subtle.decrypt({ name: 'AES-GCM', iv }, state.cryptoKey, enc);
+        return new TextDecoder().decode(dec);
+    } catch (e) {
+        return '[ERROR]';
+    }
+}
+
+async function persistCryptoKey() {
+    const raw = await crypto.subtle.exportKey('raw', state.cryptoKey);
+    sessionStorage.setItem('cryptoKey', btoa(String.fromCharCode(...new Uint8Array(raw))));
+}
+
+async function restoreCryptoKey() {
+    const saved = sessionStorage.getItem('cryptoKey');
+    if (!saved) return false;
+    try {
+        const raw = Uint8Array.from(atob(saved), c => c.charCodeAt(0));
+        state.cryptoKey = await crypto.subtle.importKey(
+            'raw', raw, { name: 'AES-GCM' }, false, ['encrypt', 'decrypt']
+        );
+        return true;
+    } catch (e) {
+        return false;
+    }
+}
diff --git a/js/app.js b/js/app.js
index 92dc32d..264a79a 100644
--- a/js/app.js
+++ b/js/app.js
@@ -681,162 +681,11 @@ const state = {
 };
 
 // ============================================================
-// CRYPTO (preserved from legacy app.js — DO NOT TOUCH)
+// CRYPTO — extracted to js/app.crypto.js (§3.1), loaded as a
+// separate <script> before this file. Kept out of the monofile
+// so the crypto core can be navigated + syntax-checked alone.
 // ============================================================
 
-async function deriveKey(pwd, saltHex, iterations) {
-    // Iterations parameter is the per-user value returned by the server in
-    // the /login response (legacy users = 100000, modern = 600000). Falling
-    // back to 100000 keeps backwards compatibility with old code paths that
-    // didn't pass the value, but every new caller should pass it explicitly.
-    iterations = iterations || 100000;
-    const enc = new TextEncoder();
-    const km = await crypto.subtle.importKey('raw', enc.encode(pwd), 'PBKDF2', false, ['deriveKey']);
-    // saltHex is the same string that PHP/Delphi passed to PBKDF2 — use its bytes.
-    const sb = enc.encode(saltHex);
-    return crypto.subtle.deriveKey(
-        { name: 'PBKDF2', salt: sb, iterations: iterations, hash: 'SHA-256' },
-        km,
-        { name: 'AES-GCM', length: 256 },
-        true, ['encrypt', 'decrypt']
-    );
-}
-
-// ---- Zero-knowledge auth helpers --------------------------------
-//
-// Single PBKDF2 → both outputs at once:
-//   - cryptoKey: the AES-GCM key used to encrypt entries (= raw PBKDF2 bytes)
-//   - verifier:  the same 32 bytes in hex form, sent to the server in place
-//                of the plaintext master password. Server then SHA-256-wraps
-//                it (HASH_ALGO_CURRENT) or compares directly (LEGACY) without
-//                ever seeing the plaintext.
-//
-// Doing it together avoids running PBKDF2 twice. computeVerifier() is for
-// places that only need the hex (re-auth, current-pw verification on change,
-// etc.) and skips the AES-GCM importKey work.
-
-function bytesToHex(arr) {
-    if (arr instanceof ArrayBuffer) arr = new Uint8Array(arr);
-    let hex = '';
-    for (let i = 0; i < arr.length; i++)
-        hex += arr[i].toString(16).padStart(2, '0');
-    return hex;
-}
-
-// Decoupled-verifier scheme markers + domain separator. When the account's
-// hash_algo ends in '-v2', the verifier sent to the server is a one-way
-// SHA-256 of the key hex (domain-separated), NOT the key hex itself — so
-// intercepting the /login body no longer hands over the AES vault key.
-// The AES key (cryptoKey) is ALWAYS the raw KDF output regardless of algo, so
-// entries stay decryptable and legacy accounts are unaffected.
-const HASH_ALGO_V2 = 'pbkdf2-sha256-v2';         // PBKDF2 KDF + decoupled verifier
-const HASH_ALGO_ARGON2 = 'argon2id-v2';          // Argon2id KDF + decoupled verifier
-const AUTH_VERIFIER_DOMAIN = 'pmserver/auth-verifier/v2';
-
-// OWASP-recommended Argon2id baseline (m = 19 MiB, t = 2, p = 1). Stored
-// per-account (like kdfIterations for PBKDF2) so it's tunable later without
-// breaking existing accounts. dkLen is fixed at 32 (AES-256 key).
-const ARGON2_DEFAULT_PARAMS = { m: 19456, t: 2, p: 1 };
-
-// True for any scheme whose transmitted verifier is decoupled from the key
-// (all '-v2' markers: pbkdf2-sha256-v2, argon2id-v2). endsWith keeps it
-// future-proof for any later '-v2' KDF.
-function isDecoupledVerifierAlgo(algo) {
-    return typeof algo === 'string' && algo.endsWith('-v2');
-}
-
-async function sha256Hex(str) {
-    const buf = await crypto.subtle.digest('SHA-256', new TextEncoder().encode(str));
-    return bytesToHex(new Uint8Array(buf));
-}
-
-// Map the raw KDF key hex → the verifier to transmit, per account algo.
-// Decoupled ('-v2') → domain-separated SHA-256. Anything else → the key hex
-// verbatim (legacy behaviour, unchanged for existing pre-v2 accounts).
-async function verifierFromKeyHex(keyHex, algo) {
-    if (isDecoupledVerifierAlgo(algo)) return await sha256Hex(keyHex + AUTH_VERIFIER_DOMAIN);
-    return keyHex;
-}
-
-// Derive the 32 raw key bytes from the master password, per account KDF.
-// Argon2id (memory-hard) for argon2id-* accounts, else PBKDF2-SHA256. Both
-// feed the salt HEX STRING's UTF-8 bytes as the salt (historical quirk kept
-// identical across KDFs so a given pw+salt maps to one deterministic key).
-async function deriveKeyBytes(pwd, saltHex, algo, iterations, argonParams) {
-    const enc = new TextEncoder();
-    if (algo === HASH_ALGO_ARGON2) {
-        if (typeof NobleArgon2 === 'undefined' || !NobleArgon2 || !NobleArgon2.argon2id)
-            throw new Error('Argon2 library not loaded (js/argon2.js missing?)');
-        const p = argonParams || ARGON2_DEFAULT_PARAMS;
-        return NobleArgon2.argon2id(enc.encode(pwd), enc.encode(saltHex),
-            { t: p.t, m: p.m, p: p.p, dkLen: 32, version: 0x13 });
-    }
-    // PBKDF2-SHA256 (default / legacy).
-    iterations = iterations || 100000;
-    const km = await crypto.subtle.importKey(
-        'raw', enc.encode(pwd), 'PBKDF2', false, ['deriveBits']);
-    const bits = await crypto.subtle.deriveBits(
-        { name: 'PBKDF2', salt: enc.encode(saltHex),
-          iterations: iterations, hash: 'SHA-256' },
-        km, 256);   // 256 bits = 32 bytes — matches PBKDF2_SHA256_Hex output
-    return new Uint8Array(bits);
-}
-
-async function deriveKeyAndVerifier(pwd, saltHex, iterations, algo, argonParams) {
-    const keyBytes  = await deriveKeyBytes(pwd, saltHex, algo, iterations, argonParams);
-    const cryptoKey = await crypto.subtle.importKey(
-        'raw', keyBytes, { name: 'AES-GCM' }, true, ['encrypt', 'decrypt']);
-    const verifier  = await verifierFromKeyHex(bytesToHex(keyBytes), algo);
-    return { cryptoKey, verifier };
-}
-
-async function computeVerifier(pwd, saltHex, iterations, algo, argonParams) {
-    const r = await deriveKeyAndVerifier(pwd, saltHex, iterations, algo, argonParams);
-    return r.verifier;
-}
-
-async function encryptPwd(plain) {
-    const iv = crypto.getRandomValues(new Uint8Array(12));
-    const enc = await crypto.subtle.encrypt(
-        { name: 'AES-GCM', iv }, state.cryptoKey,
-        new TextEncoder().encode(plain)
-    );
-    return {
-        encrypted: btoa(String.fromCharCode(...new Uint8Array(enc))),
-        iv:        btoa(String.fromCharCode(...iv)),
-    };
-}
-
-async function decryptPwd(encB64, ivB64) {
-    try {
-        const enc = Uint8Array.from(atob(encB64), c => c.charCodeAt(0));
-        const iv  = Uint8Array.from(atob(ivB64),  c => c.charCodeAt(0));
-        const dec = await crypto.subtle.decrypt({ name: 'AES-GCM', iv }, state.cryptoKey, enc);
-        return new TextDecoder().decode(dec);
-    } catch (e) {
-        return '[ERROR]';
-    }
-}
-
-async function persistCryptoKey() {
-    const raw = await crypto.subtle.exportKey('raw', state.cryptoKey);
-    sessionStorage.setItem('cryptoKey', btoa(String.fromCharCode(...new Uint8Array(raw))));
-}
-
-async function restoreCryptoKey() {
-    const saved = sessionStorage.getItem('cryptoKey');
-    if (!saved) return false;
-    try {
-        const raw = Uint8Array.from(atob(saved), c => c.charCodeAt(0));
-        state.cryptoKey = await crypto.subtle.importKey(
-            'raw', raw, { name: 'AES-GCM' }, false, ['encrypt', 'decrypt']
-        );
-        return true;
-    } catch (e) {
-        return false;
-    }
-}
-
 // ============================================================
 // HTTP HELPERS
 // ============================================================
diff --git a/js/tests/README.md b/js/tests/README.md
index eb6d8fd..819ab60 100644
--- a/js/tests/README.md
+++ b/js/tests/README.md
@@ -18,12 +18,16 @@ Zero dependencies — uses the Node built-in test runner (`node:test`) and
 
 ## How it works — `harness.js`
 
-`app.js` is a ~12k-line browser monofile with **no module exports** and one
-top-level side effect (a `DOMContentLoaded` listener). The harness loads the
-file's source into a `node:vm` context with browser globals stubbed
+The frontend is a large browser script with **no module exports** and one
+top-level side effect (a `DOMContentLoaded` listener). It's being split into
+ordered classic-script files (§3.1); the harness **concatenates** the app
+parts in load order (`APP_PARTS` = `app.crypto.js` + `app.js`) into one
+source — node:vm doesn't share top-level `const`/`let` across separate
+`runInContext` calls the way the browser shares them across `<script>` tags.
+`argon2.js` is a self-contained IIFE and loads separately first. The
+concatenated source runs in a `node:vm` context with browser globals stubbed
 (`crypto`, `localStorage`, `document`, `location`, …) so `init()` never
-fires, then appends an export epilogue that surfaces the internals on
-`globalThis.__test`.
+fires, then an export epilogue surfaces the internals on `globalThis.__test`.
 
 Two gotchas the harness works around, both documented inline:
 
diff --git a/js/tests/harness.js b/js/tests/harness.js
index 771c975..86c99c7 100644
--- a/js/tests/harness.js
+++ b/js/tests/harness.js
@@ -25,7 +25,12 @@ const path = require('node:path');
 const vm = require('node:vm');
 const { webcrypto } = require('node:crypto');
 
-const APP_JS = path.join(__dirname, '..', 'app.js');
+// The frontend is split into ordered classic-script files (§3.1). In the
+// browser they share one global lexical environment; node:vm does NOT share
+// top-level const/let across separate runInContext calls, so we CONCATENATE
+// the app.* parts (in <script> load order) into one script. argon2.js is a
+// self-contained IIFE and loads separately (see below).
+const APP_PARTS = ['app.crypto.js', 'app.js'].map(f => path.join(__dirname, '..', f));
 
 // In-memory Storage stub (Web Storage API surface used by app.js).
 function makeStorage() {
@@ -119,7 +124,10 @@ function loadApp(overrides = {}) {
     const ARGON2_JS = path.join(__dirname, '..', 'argon2.js');
     vm.runInContext(fs.readFileSync(ARGON2_JS, 'utf8'), sandbox, { filename: 'argon2.js' });
 
-    let src = fs.readFileSync(APP_JS, 'utf8');
+    // Concatenate the app.* parts in load order (see APP_PARTS). Newline
+    // separators keep line-based errors legible; shared global scope is
+    // preserved because it's a single script run.
+    let src = APP_PARTS.map(p => fs.readFileSync(p, 'utf8')).join('\n;\n');
 
     // Export epilogue — surface the lexical (const) symbols we test, plus a
     // couple of function-decl seams for convenience. Kept in one place so the