@mostajs/orm-copy-data-ui-html 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+@mostajs/mjs-unit
+Copyright (C) 2026 Dr Hamid MADANI <drmdh@msn.com>
+
+SPDX-License-Identifier: AGPL-3.0-or-later
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+The complete text of the GNU Affero General Public License version 3 is
+available at the URL above and must accompany any distribution of this
+software.

package/README.md

@@ -0,0 +1,92 @@
+# @mostajs/orm-copy-data-ui-html
+
+**Auteur** : Dr Hamid MADANI <drmdh@msn.com> · **Licence** : AGPL-3.0-or-later
+**Niveau** : N2 (composé / UI) · **Zéro dépendance runtime**
+
+IHM de [`@mostajs/orm-copy-data`](../mosta-orm-copy-data) : copier, migrer, exporter et
+sauvegarder les données d'une application `@mostajs` **sans ligne de commande**.
+
+Couvre **toutes** les capacités du moteur :
+
+| | |
+|---|---|
+| **Sources** | `db` (13 dialectes) · `csv` · `json` · `sql` |
+| **Destinations** *(multiples)* | `db` · `csv` · `json` · `sql-dump` |
+| **Options** | entités à copier · `batchSize` · progression · journal |
+| **Résultat** | copiés / erreurs / durée **par entité**, première erreur |
+
+## Architecture — qui exécute quoi
+
+Ce module est une **bibliothèque de rendu pure** : des fonctions `état → chaîne HTML`.
+Elle **ne copie rien**, **n'ouvre aucune connexion**, et est donc testable sous Node sans
+navigateur ni base de données.
+
+L'exécution appartient à l'**application hôte**, qui implémente un contrat HTTP de 4 routes.
+C'est délibéré : cette IHM manipule des **URI de bases de production**. L'authentification et
+les droits doivent rester chez l'hôte, pas dans une couche de présentation.
+
+```
+GET  /copy                   → l'IHM              (copyPage)
+POST /copy/inspect           → teste la source, liste les entités
+POST /copy/run               → lance la copie     → { jobId }
+GET  /copy/events/:jobId     → SSE : progress · log · result
+```
+
+`examples/server.mjs` implémente ce contrat de bout en bout : c'est **la démo ET le modèle
+à recopier**.
+
+## Garde-fous
+
+1. **Simulation (`dry-run`) par défaut** — l'écriture réelle est un choix explicite, confirmé.
+2. **Mots de passe masqués** dans *tout* rendu et *tout* journal (`postgres://user:***@hôte/base`).
+3. **Confirmation obligatoire** avant d'écrire vers une base de destination.
+4. **Aucune URI persistée** par le module : l'hôte décide s'il les stocke, et où.
+
+## Installation
+
+```bash
+npm i @mostajs/orm-copy-data-ui-html
+# peer (côté hôte, pour exécuter) : @mostajs/orm-copy-data >= 0.3.1
+```
+
+## Exemple
+
+```js
+import { copyPage } from '@mostajs/orm-copy-data-ui-html';
+
+app.get('/copy', (req, res) => {
+  res.send(copyPage({
+    source: { type: 'db', dialect: 'sqljs', uri: './data/app.sqlite' },
+    dests:  [{ type: 'db', dialect: 'postgres', uri: process.env.PG_URI }],
+    dryRun: true,
+  }));
+});
+```
+
+## Démo
+
+```bash
+npm run example   # http://localhost:8788
+```
+
+Copie un JSON vers JSON + CSV — une **vraie** copie par le vrai moteur, sans exiger de base
+de données. Basculer vers PostgreSQL ne change qu'un champ du formulaire.
+
+## Tests
+
+```bash
+npm test                          # 17 tests de rendu (mjs-unit, §11.1.bis)
+node test-scripts/e2e-demo.mjs    # E2E : contrat HTTP + SSE + copie réelle sur disque
+```
+
+Les tests couvrent en priorité ce qui fait mal : **fuite de mot de passe** dans le HTML/le
+journal/le rapport, injection HTML, simulation qui écrirait par erreur, et rapport qui
+présenterait une copie partiellement en erreur comme un succès.
+
+## API
+
+`copyPage` · `sourceForm` · `destForm` · `entityPicker` · `progressPanel` · `logPanel` ·
+`resultReport` · `dryRunBadge` · `maskUri` · `escapeHtml` · `CSS` · `SOURCE_TYPES` ·
+`DEST_TYPES` · `DIALECTS`.
+
+Voir `llms.txt` pour les signatures.

package/demo.html

@@ -0,0 +1,151 @@
+<!doctype html><html lang="fr"><head><meta charset="utf-8"/>
+<meta name="viewport" content="width=device-width,initial-scale=1"/>
+<title>Copie de données — MostaJS (démo statique)</title><style>
+:root{--blue:#1E88E5;--teal:#00838F;--red:#C62828;--green:#43A047;--ink:#1a2b45;--bg:#f4f7fb;--line:#e3e9f2;--card:#ffffff;--amber:#FBC02D}
+*{box-sizing:border-box}body{margin:0;font:15px/1.5 system-ui,Arial,sans-serif;color:var(--ink);background:var(--bg)}
+.wrap{max-width:980px;margin:0 auto;padding:24px}
+h1{margin:0 0 4px}h2{margin:0 0 12px;font-size:1.05rem;color:var(--teal)}
+.panel{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px;margin:0 0 16px}
+.panel-ok{border-color:var(--green)}.panel-err{border-color:var(--red)}
+label{display:block;margin:0 0 10px}label.inline{display:inline-flex;align-items:center;gap:6px;margin-right:14px}
+input[type=text],input[type=number],select{width:100%;padding:8px;border:1px solid var(--line);border-radius:6px;font:inherit}
+label.inline input{width:auto}
+button{padding:9px 14px;border:0;border-radius:6px;background:var(--blue);color:#fff;font:inherit;cursor:pointer}
+button.danger{background:var(--red)}button:disabled{opacity:.5;cursor:not-allowed}
+.badge{display:inline-block;padding:4px 10px;border-radius:999px;font-size:.85rem;font-weight:600}
+.badge-dry{background:#e3f2fd;color:var(--blue)}.badge-live{background:#ffebee;color:var(--red)}
+.dest-row{border-top:1px dashed var(--line);padding-top:12px;margin-top:12px}.dest-row:first-of-type{border-top:0;padding-top:0;margin-top:0}
+.bar-row{display:flex;align-items:center;gap:10px;margin:6px 0}
+.bar-label{flex:0 0 160px;font-weight:600}.bar{flex:1;height:10px;background:var(--line);border-radius:6px;overflow:hidden}
+.bar-fill{display:block;height:100%;background:var(--teal);transition:width .2s}.bar-num{flex:0 0 90px;text-align:right;font-variant-numeric:tabular-nums}
+.log{background:#0f172a;color:#e2e8f0;padding:12px;border-radius:6px;max-height:260px;overflow:auto;font-size:.85rem;white-space:pre-wrap}
+table.stats{width:100%;border-collapse:collapse}table.stats th,table.stats td{padding:6px 8px;border-bottom:1px solid var(--line);text-align:left}
+td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}tr.row-err td{background:#fff5f5}
+.muted{color:#64748b}[hidden]{display:none!important}
+</style></head>
+<body><div class="wrap">
+  <h1>Copie de données — MostaJS (démo statique)</h1>
+  <p><span class="badge badge-dry" title="Aucune écriture ne sera effectuée">🛡️ Simulation (dry-run)</span></p>
+  <form id="copy-form">
+    <section class="panel" id="panel-source">
+  <h2>1 · Source</h2>
+  <label>Type
+    <select name="source.type" data-role="source-type"><option value="db" selected>db</option><option value="csv">csv</option><option value="json">json</option><option value="sql">sql</option></select>
+  </label>
+  <div class="field-db">
+    <label>Dialecte
+      <select name="source.dialect"><option value="sqljs" selected>sqljs</option><option value="sqlite">sqlite</option><option value="postgres">postgres</option><option value="mysql">mysql</option><option value="mariadb">mariadb</option><option value="mssql">mssql</option><option value="oracle">oracle</option><option value="mongo">mongo</option><option value="duckdb">duckdb</option><option value="clickhouse">clickhouse</option><option value="cockroachdb">cockroachdb</option><option value="firebird">firebird</option><option value="hsqldb">hsqldb</option></select>
+    </label>
+    <label>URI de connexion
+      <input name="source.uri" type="text" value="sqljs:///data/ticketflow.sqlite"
+             placeholder="postgres://utilisateur:motdepasse@hote:5432/base" />
+    </label>
+  </div>
+  <div class="field-file" hidden>
+    <label>Fichier
+      <input name="source.file" type="text" value="" placeholder="./export.json" />
+    </label>
+  </div>
+  <button type="button" data-action="inspect">Tester &amp; lister les entités</button>
+</section>
+    <section class="panel" id="panel-dest">
+  <h2>2 · Destinations</h2>
+  <div class="dest-row" data-index="0">
+    <label>Type
+      <select name="dest.0.type" data-role="dest-type"><option value="db" selected>db</option><option value="csv">csv</option><option value="json">json</option><option value="sql-dump">sql-dump</option></select>
+    </label>
+    <div class="field-db">
+      <label>Dialecte
+        <select name="dest.0.dialect"><option value="sqljs">sqljs</option><option value="sqlite">sqlite</option><option value="postgres" selected>postgres</option><option value="mysql">mysql</option><option value="mariadb">mariadb</option><option value="mssql">mssql</option><option value="oracle">oracle</option><option value="mongo">mongo</option><option value="duckdb">duckdb</option><option value="clickhouse">clickhouse</option><option value="cockroachdb">cockroachdb</option><option value="firebird">firebird</option><option value="hsqldb">hsqldb</option></select>
+      </label>
+      <label>URI
+        <input name="dest.0.uri" type="text" value="postgres://ticket:***@10.0.0.7:5432/ticketflow"
+               placeholder="postgres://utilisateur:motdepasse@hote:5432/base" />
+      </label>
+      <label class="inline"><input type="checkbox" name="dest.0.createDb"/> Créer la base</label>
+      <label class="inline"><input type="checkbox" name="dest.0.createTables" checked/> Créer les tables</label>
+    </div>
+    <div class="field-file" hidden>
+      <label>Fichier
+        <input name="dest.0.file" type="text" value="" placeholder="./dump.sql" />
+      </label>
+    </div>
+    <button type="button" data-action="dest-remove" data-index="0">Retirer</button>
+  </div><div class="dest-row" data-index="1">
+    <label>Type
+      <select name="dest.1.type" data-role="dest-type"><option value="db">db</option><option value="csv">csv</option><option value="json">json</option><option value="sql-dump" selected>sql-dump</option></select>
+    </label>
+    <div class="field-db" hidden>
+      <label>Dialecte
+        <select name="dest.1.dialect"><option value="sqljs">sqljs</option><option value="sqlite">sqlite</option><option value="postgres" selected>postgres</option><option value="mysql">mysql</option><option value="mariadb">mariadb</option><option value="mssql">mssql</option><option value="oracle">oracle</option><option value="mongo">mongo</option><option value="duckdb">duckdb</option><option value="clickhouse">clickhouse</option><option value="cockroachdb">cockroachdb</option><option value="firebird">firebird</option><option value="hsqldb">hsqldb</option></select>
+      </label>
+      <label>URI
+        <input name="dest.1.uri" type="text" value=""
+               placeholder="postgres://utilisateur:motdepasse@hote:5432/base" />
+      </label>
+      <label class="inline"><input type="checkbox" name="dest.1.createDb"/> Créer la base</label>
+      <label class="inline"><input type="checkbox" name="dest.1.createTables" checked/> Créer les tables</label>
+    </div>
+    <div class="field-file">
+      <label>Fichier
+        <input name="dest.1.file" type="text" value="./sauvegarde.sql" placeholder="./dump.sql" />
+      </label>
+    </div>
+    <button type="button" data-action="dest-remove" data-index="1">Retirer</button>
+  </div>
+  <button type="button" data-action="dest-add">+ Ajouter une destination</button>
+</section>
+    <section class="panel" id="panel-entities">
+  <h2>3 · Entités &amp; options</h2>
+  <div class="entities"><label class="inline"><input type="checkbox" name="entity" value="Ticket" checked/> Ticket <span class="muted">(12480)</span></label><label class="inline"><input type="checkbox" name="entity" value="Counter" checked/> Counter <span class="muted">(6)</span></label><label class="inline"><input type="checkbox" name="entity" value="User" checked/> User <span class="muted">(14)</span></label></div>
+  <label>Taille de lot (batchSize)
+    <input name="batchSize" type="number" min="1" value="500" />
+  </label>
+  <label class="inline">
+    <input type="checkbox" name="dryRun" checked/>
+    Simulation — ne rien écrire
+  </label>
+</section>
+    <p>
+      <button type="button" data-action="run" class="">
+        ▶ Lancer la simulation
+      </button>
+    </p>
+  </form>
+  <section class="panel" id="panel-progress"><h2>Progression</h2><div class="bar-row">
+      <span class="bar-label">Ticket</span>
+      <span class="bar"><span class="bar-fill" style="width:66%"></span></span>
+      <span class="bar-num">8200/12480</span>
+    </div><div class="bar-row">
+      <span class="bar-label">Counter</span>
+      <span class="bar"><span class="bar-fill" style="width:100%"></span></span>
+      <span class="bar-num">6/6</span>
+    </div></section>
+  <section class="panel" id="panel-log"><h2>Journal</h2><pre class="log">▶ Loading from db (sqljs)...
+  Ticket : 12480 rows
+connexion à postgres://ticket:***@10.0.0.7:5432/ticketflow</pre></section>
+  <section class="panel panel-err" id="panel-result">
+  <h2>⚠️ Terminé avec 3 erreurs</h2>
+  <p>
+    <strong>12483</strong> enregistrement(s) copié(s) ·
+    <strong>3</strong> erreur(s) · 4390 ms<br/>
+    <span class="muted">sqljs:///data/ticketflow.sqlite → postgres://ticket:***@10.0.0.7:5432/ticketflow</span>
+  </p>
+  <table class="stats">
+    <thead><tr><th>Entité</th><th class="num">Copiés</th><th class="num">Erreurs</th><th class="num">Durée</th><th>1ʳᵉ erreur</th></tr></thead>
+    <tbody><tr class="row-err">
+    <td>Ticket</td>
+    <td class="num">12477</td>
+    <td class="num">3</td>
+    <td class="num">4210 ms</td>
+    <td>null value in column &quot;serviceType&quot;</td>
+  </tr><tr class="">
+    <td>Counter</td>
+    <td class="num">6</td>
+    <td class="num">0</td>
+    <td class="num">12 ms</td>
+    <td></td>
+  </tr></tbody>
+  </table>
+</section>
+</div></body></html>

package/llms.txt

@@ -0,0 +1,47 @@
+# @mostajs/orm-copy-data-ui-html — 0.1.0
+Auteur : Dr Hamid MADANI <drmdh@msn.com> · AGPL-3.0-or-later · Niveau N2 · zéro dépendance runtime
+
+RÔLE
+  IHM de @mostajs/orm-copy-data (moteur, peer). Bibliothèque de RENDU PURE : état → chaîne HTML.
+  Ne copie rien, n'ouvre aucune connexion. L'HÔTE exécute (contrat HTTP ci-dessous).
+
+API (import { … } from '@mostajs/orm-copy-data-ui-html')
+  copyPage(state) -> string            page complète (compose tous les blocs + CSS embarquée)
+  sourceForm(state) -> string          source : db | csv | json | sql
+  destForm(state) -> string            destinations MULTIPLES : db | csv | json | sql-dump
+  entityPicker(state) -> string        entités à copier + batchSize + case « simulation »
+  progressPanel(progress) -> string    progress = { <entité>: { copied, total } }   (onProgress)
+  logPanel(lines) -> string            lignes de journal                            (onLog)
+  resultReport(result) -> string       CopyResult : stats/entité, totalCopied, totalErrors, durée
+  dryRunBadge(state) -> string         bandeau simulation / écriture réelle
+  maskUri(uri) -> string               postgres://u:pass@h/db → postgres://u:***@h/db
+  escapeHtml(s) -> string
+  CSS, THEME, SOURCE_TYPES, DEST_TYPES, DIALECTS, moduleInfo
+
+ÉTAT (sérialisable)
+  { title, source:{type,dialect,uri,file}, dests:[{type,dialect,uri,file,createDb,createTables}],
+    entities:[{name,count}|string], selectedEntities:[string]|null, batchSize, dryRun,
+    progress:{entité:{copied,total}}, log:[string], result:CopyResult }
+
+CONTRAT HTTP (implémenté par l'hôte ; référence = examples/server.mjs)
+  GET  /copy                 → copyPage(state)
+  POST /copy/inspect         → { ok, entities:[{name,count}] }   teste la source
+  POST /copy/run             → { ok, jobId }                     lance la copie
+  GET  /copy/events/:jobId   → SSE : {type:'progress'|'log'|'result'|'end', data}
+
+GARDE-FOUS (une copie est destructrice)
+  1. dryRun ACTIF par défaut (state.dryRun !== false) — l'écriture réelle est explicite + confirmée.
+  2. Mots de passe MASQUÉS dans tout rendu et tout journal (maskUri appliqué partout).
+  3. Confirmation obligatoire avant écriture réelle.
+  4. Aucune URI persistée par le module.
+
+DÉPENDANCES
+  runtime : AUCUNE · peer : @mostajs/orm-copy-data >= 0.3.1 (l'hôte l'exécute) · dev : @mostajs/mjs-unit
+
+TESTS
+  npm test                       17 tests de rendu (mjs-unit)
+  node test-scripts/e2e-demo.mjs E2E : contrat HTTP + SSE + copie RÉELLE écrite sur disque
+
+NOTE ÉCOSYSTÈME
+  orm-copy-data 0.3.0 déclarait `onProgress` sans jamais l'appeler (rappel mort) : corrigé en
+  0.3.1, d'où le peer >= 0.3.1 pour que la progression soit réellement alimentée.

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@mostajs/orm-copy-data-ui-html",
+  "version": "0.1.0",
+  "description": "IHM zéro-dépendance de @mostajs/orm-copy-data : source/destinations, entités, progression et journal en direct, rapport de copie. Rendu pur (état → HTML), l'hôte exécute.",
+  "license": "AGPL-3.0-or-later",
+  "author": "Dr Hamid MADANI <drmdh@msn.com>",
+  "type": "module",
+  "exports": {
+    ".": "./src/index.js"
+  },
+  "files": [
+    "src",
+    "demo.html",
+    "README.md",
+    "llms.txt",
+    "LICENSE"
+  ],
+  "scripts": {
+    "test": "bash test-scripts/run-tests.sh",
+    "example": "node examples/server.mjs"
+  },
+  "keywords": [
+    "orm",
+    "copy",
+    "migration",
+    "etl",
+    "ui",
+    "html",
+    "zero-dep",
+    "mostajs"
+  ],
+  "peerDependencies": {
+    "@mostajs/orm-copy-data": ">=0.3.0"
+  },
+  "peerDependenciesMeta": {
+    "@mostajs/orm-copy-data": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@mostajs/mjs-unit": "^0.3.1",
+    "@mostajs/orm-copy-data": "^0.3.1"
+  }
+}

package/src/index.js

@@ -0,0 +1,280 @@
+/**
+ * @mostajs/orm-copy-data-ui-html — IHM ZÉRO-DÉPENDANCE de @mostajs/orm-copy-data.
+ * @author Dr Hamid MADANI <drmdh@msn.com>
+ * Licence : AGPL-3.0-or-later
+ *
+ * Bibliothèque de RENDU pure : des fonctions `état → chaîne HTML`, donc testables sous
+ * Node, sans navigateur ni base de données. Elle NE COPIE RIEN et n'ouvre aucune
+ * connexion — le moteur `@mostajs/orm-copy-data` (peer) reste seul responsable de
+ * l'exécution, et l'application hôte de son authentification (cf. docs §4, variante A).
+ *
+ * Surface couverte = TOUTES les capacités du moteur :
+ *   sources      db · csv · json · sql
+ *   destinations db · csv · json · sql-dump   (multiples)
+ *   options      entities · batchSize · onProgress · onLog
+ *   résultat     CopyStats par entité · totalCopied · totalErrors · durée · firstError
+ *
+ * GARDE-FOUS (une copie est destructrice) :
+ *   1. `dryRun` par DÉFAUT — l'écriture réelle est un choix explicite.
+ *   2. Les mots de passe des URI sont MASQUÉS dans tout rendu et tout journal.
+ *   3. Écriture vers une base de destination NON VIDE → confirmation exigée.
+ *   4. Le module ne persiste AUCUNE URI.
+ */
+
+export const moduleInfo = { name: '@mostajs/orm-copy-data-ui-html', version: '0.1.0' };
+
+/** Capacités du moteur — la source unique dont dérivent les listes déroulantes. */
+export const SOURCE_TYPES = ['db', 'csv', 'json', 'sql'];
+export const DEST_TYPES = ['db', 'csv', 'json', 'sql-dump'];
+export const DIALECTS = [
+  'sqljs', 'sqlite', 'postgres', 'mysql', 'mariadb', 'mssql', 'oracle',
+  'mongo', 'duckdb', 'clickhouse', 'cockroachdb', 'firebird', 'hsqldb',
+];
+
+export const THEME = {
+  blue: '#1E88E5', teal: '#00838F', amber: '#FBC02D', red: '#C62828',
+  green: '#43A047', ink: '#1a2b45', bg: '#f4f7fb', line: '#e3e9f2', card: '#ffffff',
+};
+
+export function escapeHtml(s) {
+  return String(s ?? '').replace(/[&<>"']/g, (c) => (
+    { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]
+  ));
+}
+
+/**
+ * Masque le mot de passe d'une URI de connexion.
+ * `postgres://alice:s3cr3t@hote:5432/base` → `postgres://alice:***@hote:5432/base`
+ *
+ * Appliqué à TOUT ce qui part vers le navigateur : champs, journal, rapport. Un mot de
+ * passe de base de production ne doit jamais transiter dans une page ni dans un log.
+ */
+export function maskUri(uri) {
+  const s = String(uri ?? '');
+  if (!s) return '';
+  return s.replace(/(:\/\/[^:@/\s]+):[^@\s]*@/g, '$1:***@');
+}
+
+/** Masque les URI présentes dans une ligne de journal quelconque. */
+export function maskLine(line) {
+  return maskUri(String(line ?? ''));
+}
+
+const pct = (copied, total) => (total > 0 ? Math.min(100, Math.round((copied / total) * 100)) : 0);
+const opt = (v, sel) => `<option value="${escapeHtml(v)}"${v === sel ? ' selected' : ''}>${escapeHtml(v)}</option>`;
+
+/** Bandeau du mode simulation. `dryRun` vaut vrai par défaut (absent = simulation). */
+export function dryRunBadge(state = {}) {
+  const dry = state.dryRun !== false;
+  return dry
+    ? `<span class="badge badge-dry" title="Aucune écriture ne sera effectuée">🛡️ Simulation (dry-run)</span>`
+    : `<span class="badge badge-live" title="Les données seront réellement écrites">⚠️ Écriture RÉELLE</span>`;
+}
+
+/**
+ * Formulaire de la SOURCE. `db` demande dialecte + URI ; `csv`/`json`/`sql` demandent un fichier.
+ * L'URI est ré-affichée MASQUÉE : la page ne réexpose jamais un mot de passe déjà saisi.
+ */
+export function sourceForm(state = {}) {
+  const src = state.source || {};
+  const type = src.type || 'db';
+  const isDb = type === 'db';
+  return `<section class="panel" id="panel-source">
+  <h2>1 · Source</h2>
+  <label>Type
+    <select name="source.type" data-role="source-type">${SOURCE_TYPES.map((t) => opt(t, type)).join('')}</select>
+  </label>
+  <div class="field-db"${isDb ? '' : ' hidden'}>
+    <label>Dialecte
+      <select name="source.dialect">${DIALECTS.map((d) => opt(d, src.dialect || 'sqljs')).join('')}</select>
+    </label>
+    <label>URI de connexion
+      <input name="source.uri" type="text" value="${escapeHtml(maskUri(src.uri))}"
+             placeholder="postgres://utilisateur:motdepasse@hote:5432/base" />
+    </label>
+  </div>
+  <div class="field-file"${isDb ? ' hidden' : ''}>
+    <label>Fichier
+      <input name="source.file" type="text" value="${escapeHtml(src.file || '')}" placeholder="./export.json" />
+    </label>
+  </div>
+  <button type="button" data-action="inspect">Tester &amp; lister les entités</button>
+</section>`;
+}
+
+/**
+ * Formulaire des DESTINATIONS (le moteur en accepte PLUSIEURS : on peut copier vers une
+ * base ET produire un dump SQL dans la même passe).
+ */
+export function destForm(state = {}) {
+  const dests = Array.isArray(state.dests) && state.dests.length ? state.dests : [{ type: 'db' }];
+  const row = (d, i) => {
+    const isDb = (d.type || 'db') === 'db';
+    return `<div class="dest-row" data-index="${i}">
+    <label>Type
+      <select name="dest.${i}.type" data-role="dest-type">${DEST_TYPES.map((t) => opt(t, d.type || 'db')).join('')}</select>
+    </label>
+    <div class="field-db"${isDb ? '' : ' hidden'}>
+      <label>Dialecte
+        <select name="dest.${i}.dialect">${DIALECTS.map((x) => opt(x, d.dialect || 'postgres')).join('')}</select>
+      </label>
+      <label>URI
+        <input name="dest.${i}.uri" type="text" value="${escapeHtml(maskUri(d.uri))}"
+               placeholder="postgres://utilisateur:motdepasse@hote:5432/base" />
+      </label>
+      <label class="inline"><input type="checkbox" name="dest.${i}.createDb"${d.createDb ? ' checked' : ''}/> Créer la base</label>
+      <label class="inline"><input type="checkbox" name="dest.${i}.createTables"${d.createTables !== false ? ' checked' : ''}/> Créer les tables</label>
+    </div>
+    <div class="field-file"${isDb ? ' hidden' : ''}>
+      <label>Fichier
+        <input name="dest.${i}.file" type="text" value="${escapeHtml(d.file || '')}" placeholder="./dump.sql" />
+      </label>
+    </div>
+    ${dests.length > 1 ? `<button type="button" data-action="dest-remove" data-index="${i}">Retirer</button>` : ''}
+  </div>`;
+  };
+  return `<section class="panel" id="panel-dest">
+  <h2>2 · Destinations</h2>
+  ${dests.map(row).join('')}
+  <button type="button" data-action="dest-add">+ Ajouter une destination</button>
+</section>`;
+}
+
+/**
+ * Choix des entités (`CopyOptions.entities`) et de la taille de lot (`batchSize`).
+ * Tant que la source n'a pas été inspectée, la liste est vide : on le DIT, plutôt que
+ * d'afficher un bloc vide qui laisserait croire qu'il n'y a rien à copier.
+ */
+export function entityPicker(state = {}) {
+  const all = state.entities || [];
+  const selected = state.selectedEntities || null; // null = toutes
+  const body = all.length === 0
+    ? `<p class="muted">Aucune entité connue — testez d'abord la source (« Tester &amp; lister les entités »).</p>`
+    : all.map((e) => {
+      const name = typeof e === 'string' ? e : e.name;
+      const count = typeof e === 'object' && e.count != null ? ` <span class="muted">(${e.count})</span>` : '';
+      const on = selected === null || selected.includes(name);
+      return `<label class="inline"><input type="checkbox" name="entity" value="${escapeHtml(name)}"${on ? ' checked' : ''}/> ${escapeHtml(name)}${count}</label>`;
+    }).join('');
+  return `<section class="panel" id="panel-entities">
+  <h2>3 · Entités &amp; options</h2>
+  <div class="entities">${body}</div>
+  <label>Taille de lot (batchSize)
+    <input name="batchSize" type="number" min="1" value="${Number(state.batchSize) > 0 ? Number(state.batchSize) : 500}" />
+  </label>
+  <label class="inline">
+    <input type="checkbox" name="dryRun"${state.dryRun !== false ? ' checked' : ''}/>
+    Simulation — ne rien écrire
+  </label>
+</section>`;
+}
+
+/** Progression PAR ENTITÉ, alimentée par `onProgress(entity, copied, total)`. */
+export function progressPanel(progress = {}) {
+  const rows = Object.entries(progress);
+  if (rows.length === 0) return `<section class="panel" id="panel-progress"><h2>Progression</h2><p class="muted">En attente…</p></section>`;
+  const bars = rows.map(([entity, p]) => {
+    const copied = p.copied || 0;
+    const total = p.total || 0;
+    const v = pct(copied, total);
+    return `<div class="bar-row">
+      <span class="bar-label">${escapeHtml(entity)}</span>
+      <span class="bar"><span class="bar-fill" style="width:${v}%"></span></span>
+      <span class="bar-num">${copied}/${total || '?'}</span>
+    </div>`;
+  }).join('');
+  return `<section class="panel" id="panel-progress"><h2>Progression</h2>${bars}</section>`;
+}
+
+/** Journal en direct (`onLog`) — chaque ligne passe par le masquage des URI. */
+export function logPanel(lines = []) {
+  const body = lines.length === 0
+    ? '<p class="muted">—</p>'
+    : `<pre class="log">${lines.map((l) => escapeHtml(maskLine(l))).join('\n')}</pre>`;
+  return `<section class="panel" id="panel-log"><h2>Journal</h2>${body}</section>`;
+}
+
+/**
+ * Rapport final (`CopyResult`). Met en avant les ERREURS : une copie « terminée » avec
+ * 12 000 lignes copiées et 3 en erreur n'est PAS un succès, et le rapport doit le dire.
+ */
+export function resultReport(result) {
+  if (!result) return '';
+  const stats = result.stats || [];
+  const errs = result.totalErrors || 0;
+  const rows = stats.map((s) => `<tr class="${s.errors > 0 ? 'row-err' : ''}">
+    <td>${escapeHtml(s.entity)}</td>
+    <td class="num">${s.copied}</td>
+    <td class="num">${s.errors}</td>
+    <td class="num">${s.durationMs} ms</td>
+    <td>${s.firstError ? escapeHtml(maskLine(s.firstError)) : ''}</td>
+  </tr>`).join('');
+  return `<section class="panel ${errs > 0 ? 'panel-err' : 'panel-ok'}" id="panel-result">
+  <h2>${errs > 0 ? `⚠️ Terminé avec ${errs} erreur${errs > 1 ? 's' : ''}` : '✅ Copie terminée'}</h2>
+  <p>
+    <strong>${result.totalCopied || 0}</strong> enregistrement(s) copié(s) ·
+    <strong>${errs}</strong> erreur(s) · ${result.durationMs || 0} ms<br/>
+    <span class="muted">${escapeHtml(maskUri(result.source))} → ${(result.destinations || []).map((d) => escapeHtml(maskUri(d))).join(', ')}</span>
+  </p>
+  <table class="stats">
+    <thead><tr><th>Entité</th><th class="num">Copiés</th><th class="num">Erreurs</th><th class="num">Durée</th><th>1ʳᵉ erreur</th></tr></thead>
+    <tbody>${rows}</tbody>
+  </table>
+</section>`;
+}
+
+/** Feuille de style embarquée (zéro-dép : aucune CSS externe à charger). */
+export const CSS = `
+:root{--blue:${THEME.blue};--teal:${THEME.teal};--red:${THEME.red};--green:${THEME.green};--ink:${THEME.ink};--bg:${THEME.bg};--line:${THEME.line};--card:${THEME.card};--amber:${THEME.amber}}
+*{box-sizing:border-box}body{margin:0;font:15px/1.5 system-ui,Arial,sans-serif;color:var(--ink);background:var(--bg)}
+.wrap{max-width:980px;margin:0 auto;padding:24px}
+h1{margin:0 0 4px}h2{margin:0 0 12px;font-size:1.05rem;color:var(--teal)}
+.panel{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px;margin:0 0 16px}
+.panel-ok{border-color:var(--green)}.panel-err{border-color:var(--red)}
+label{display:block;margin:0 0 10px}label.inline{display:inline-flex;align-items:center;gap:6px;margin-right:14px}
+input[type=text],input[type=number],select{width:100%;padding:8px;border:1px solid var(--line);border-radius:6px;font:inherit}
+label.inline input{width:auto}
+button{padding:9px 14px;border:0;border-radius:6px;background:var(--blue);color:#fff;font:inherit;cursor:pointer}
+button.danger{background:var(--red)}button:disabled{opacity:.5;cursor:not-allowed}
+.badge{display:inline-block;padding:4px 10px;border-radius:999px;font-size:.85rem;font-weight:600}
+.badge-dry{background:#e3f2fd;color:var(--blue)}.badge-live{background:#ffebee;color:var(--red)}
+.dest-row{border-top:1px dashed var(--line);padding-top:12px;margin-top:12px}.dest-row:first-of-type{border-top:0;padding-top:0;margin-top:0}
+.bar-row{display:flex;align-items:center;gap:10px;margin:6px 0}
+.bar-label{flex:0 0 160px;font-weight:600}.bar{flex:1;height:10px;background:var(--line);border-radius:6px;overflow:hidden}
+.bar-fill{display:block;height:100%;background:var(--teal);transition:width .2s}.bar-num{flex:0 0 90px;text-align:right;font-variant-numeric:tabular-nums}
+.log{background:#0f172a;color:#e2e8f0;padding:12px;border-radius:6px;max-height:260px;overflow:auto;font-size:.85rem;white-space:pre-wrap}
+table.stats{width:100%;border-collapse:collapse}table.stats th,table.stats td{padding:6px 8px;border-bottom:1px solid var(--line);text-align:left}
+td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}tr.row-err td{background:#fff5f5}
+.muted{color:#64748b}[hidden]{display:none!important}
+`;
+
+/** Page complète, prête à servir. Compose tous les blocs. */
+export function copyPage(state = {}) {
+  const title = state.title || 'Copie de données — MostaJS';
+  return `<!doctype html><html lang="fr"><head><meta charset="utf-8"/>
+<meta name="viewport" content="width=device-width,initial-scale=1"/>
+<title>${escapeHtml(title)}</title><style>${CSS}</style></head>
+<body><div class="wrap">
+  <h1>${escapeHtml(title)}</h1>
+  <p>${dryRunBadge(state)}</p>
+  <form id="copy-form">
+    ${sourceForm(state)}
+    ${destForm(state)}
+    ${entityPicker(state)}
+    <p>
+      <button type="button" data-action="run" class="${state.dryRun === false ? 'danger' : ''}">
+        ${state.dryRun === false ? '⚠️ Lancer la copie RÉELLE' : '▶ Lancer la simulation'}
+      </button>
+    </p>
+  </form>
+  ${progressPanel(state.progress)}
+  ${logPanel(state.log)}
+  ${resultReport(state.result)}
+</div></body></html>`;
+}
+
+export default {
+  moduleInfo, SOURCE_TYPES, DEST_TYPES, DIALECTS, THEME, CSS,
+  escapeHtml, maskUri, maskLine,
+  dryRunBadge, sourceForm, destForm, entityPicker, progressPanel, logPanel, resultReport, copyPage,
+};