markup, which shell.js injects
+// automatically when includeScanner is on.
+// ─────────────────────────────────────────────────────────────────────────────
+(function () {
+ var stream = null
+ var field = ''
+ var fieldLabel = ''
+ var ctx = {}
+ var callback = null
+
+ function $ (id) { return document.getElementById(id) }
+ function esc (s) { return window._esc(s) }
+
+ function open (fieldKey, label, cb, context) {
+ field = fieldKey; fieldLabel = label; callback = cb; ctx = context || {}
+ $('fsLabel').textContent = 'Scanner : ' + label
+ $('fsResult').innerHTML = '
Cadrez l\'étiquette puis appuyez sur Capturer
'
+ $('fsOv').classList.add('open')
+ startCam()
+ }
+
+ function close () {
+ $('fsOv').classList.remove('open')
+ stopCam()
+ callback = null
+ }
+
+ function startCam () {
+ var v = $('fsVid')
+ if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
+ v.style.display = 'none'
+ $('fsResult').innerHTML = '
Caméra indisponible
'
+ return
+ }
+ navigator.mediaDevices.getUserMedia({
+ video: { facingMode: 'environment', width: { ideal: 1280 }, height: { ideal: 720 } }
+ }).then(function (s) {
+ stream = s
+ v.srcObject = s
+ v.style.display = 'block'
+ }).catch(function (e) {
+ $('fsResult').innerHTML = '
Caméra refusée: ' + (e.message || '') + '
'
+ })
+ }
+ function stopCam () {
+ if (stream) { stream.getTracks().forEach(function (t) { t.stop() }); stream = null }
+ var v = $('fsVid'); if (v) v.srcObject = null
+ }
+
+ function capture () {
+ var v = $('fsVid'), c = $('fsCnv')
+ if (!v.videoWidth) { window.toast('Caméra non prête', false); return }
+ c.width = v.videoWidth; c.height = v.videoHeight
+ var cctx = c.getContext('2d'); cctx.drawImage(v, 0, 0, c.width, c.height)
+ var b64 = c.toDataURL('image/jpeg', 0.85)
+
+ $('fsResult').innerHTML = '
🤖 Analyse par Gemini Vision…
'
+
+ var payload = { image: b64, field: field }
+ if (ctx.equipment_type) payload.equipment_type = ctx.equipment_type
+ if (ctx.brand) payload.brand = ctx.brand
+ if (ctx.model) payload.model = ctx.model
+ if (ctx.hint) payload.hint = ctx.hint
+
+ window.api.post('/field-scan', payload).then(function (r) {
+ var d = r.data || {}
+ if (!d.ok || !d.value) {
+ $('fsResult').innerHTML = '
❌ Non détecté — rapprochez-vous et réessayez.
'
+ return
+ }
+ var pct = Math.round((d.confidence || 0) * 100)
+ var color = pct >= 70 ? '#22c55e' : pct >= 40 ? '#f59e0b' : '#ef4444'
+ $('fsResult').innerHTML =
+ '
' +
+ '
' + esc(d.value) + '
' +
+ '
Confiance : ' + pct + '%
' +
+ '
' +
+ '
' +
+ '✓ Utiliser ' +
+ '↻ Réessayer ' +
+ '
' +
+ '
'
+ }).catch(function (e) {
+ $('fsResult').innerHTML = '
Erreur réseau : ' + (e.message || '') + '
'
+ })
+ }
+
+ function confirm (value) {
+ if (callback) callback(value)
+ close()
+ }
+
+ // Bind close button + ESC
+ window.addEventListener('load', function () {
+ var x = document.querySelector('#fsOv .fs-close')
+ if (x) x.addEventListener('click', close)
+ var cap = document.querySelector('#fsOv .fs-capture')
+ if (cap) cap.addEventListener('click', capture)
+ var can = document.querySelector('#fsOv .fs-cancel')
+ if (can) can.addEventListener('click', close)
+ })
+
+ window.scanner = { open: open, close: close, capture: capture, confirm: confirm }
+})()
diff --git a/services/targo-hub/lib/ui/shell.js b/services/targo-hub/lib/ui/shell.js
new file mode 100644
index 0000000..0c71617
--- /dev/null
+++ b/services/targo-hub/lib/ui/shell.js
@@ -0,0 +1,132 @@
+'use strict'
+// ─────────────────────────────────────────────────────────────────────────────
+// page() — HTML shell builder.
+// Inlines ui/design.css + ui/client.js (+ optionally scanner.js) into every
+// magic-link page so the client loads with zero extra requests and a server
+// crash can't leave a page partially styled.
+// ─────────────────────────────────────────────────────────────────────────────
+
+const fs = require('fs')
+const path = require('path')
+
+// Read assets once at module load. Changes on disk require a service restart.
+const DESIGN_CSS = fs.readFileSync(path.join(__dirname, 'design.css'), 'utf8')
+const CLIENT_JS = fs.readFileSync(path.join(__dirname, 'client.js'), 'utf8')
+const SCANNER_JS = fs.readFileSync(path.join(__dirname, 'scanner.js'), 'utf8')
+
+// Nested field-scan overlay markup — injected when includeScanner is true.
+const SCANNER_OVERLAY_HTML = `
+
+
+
📷 Scanner ✕
+
+
+
+
+ Annuler
+ 📸 Capturer
+
+
+
+`
+
+const HTML_HEADERS = { 'Content-Type': 'text/html; charset=utf-8', 'Cache-Control': 'no-cache, no-store' }
+
+function htmlHeaders () { return HTML_HEADERS }
+
+// Safe JSON embed — same as components.jsonScript but avoid circular dep.
+function jsonEmbed (v) { return JSON.stringify(v).replace(//g, '--\\u003e') }
+
+// ─────────────────────────────────────────────────────────────────────────
+// page(opts)
+//
+// title:
+ og title
+// themeColor: optional meta theme-color (default brand-dark)
+// lang: default 'fr'
+// head: extra HTML injected in <head> (meta, link, etc.)
+// body: page body HTML (required)
+// bootVars: object; each key becomes a top-level const in script,
+// e.g. { T: token, TODAY: 'yyyy-mm-dd' } ⇒ const T=...; const TODAY=...
+// cfg: object merged into window.UI_CFG for client.js
+// { token, hub, today, base }
+// script: page-specific JS (appended after client.js / scanner.js)
+// includeScanner: inject scanner.js + overlay markup
+// bodyClass: extra class on <body> (e.g. 'pad-body' to reserve tab-bar space)
+//
+// Returns a complete HTML document string.
+// ─────────────────────────────────────────────────────────────────────────
+function page (opts) {
+ const {
+ title = 'Targo',
+ themeColor = '#3f3d7a',
+ lang = 'fr',
+ head = '',
+ body = '',
+ bootVars = {},
+ cfg = {},
+ script = '',
+ includeScanner = false,
+ bodyClass = '',
+ } = opts
+
+ // bootVars → "const K=v;" lines; JSON-safe, no user escaping needed.
+ const bootLines = Object.keys(bootVars).map(k => `var ${k}=${jsonEmbed(bootVars[k])};`).join('\n')
+ const cfgLine = `window.UI_CFG=${jsonEmbed(cfg)};`
+
+ const scannerAssets = includeScanner ? `<script>${SCANNER_JS}</script>` : ''
+ const scannerMarkup = includeScanner ? SCANNER_OVERLAY_HTML : ''
+
+ return `<!DOCTYPE html>
+<html lang="${lang}">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
+<meta name="theme-color" content="${themeColor}">
+<title>${title}
+
+${head}
+
+
+${body}
+${scannerMarkup}
+
+
+
+${scannerAssets}
+
+