UmbrelApps: community app store whatsnext

Electrum Gate, Evolu Relay en Atreides Assets, met de image-recepten in tools/ en de tests in tests/. Begonnen zonder voorgeschiedenis op 09-10-2026. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-09 10:40:25 +02:00
commit 85d85a1295
@@ -0,0 +1,193 @@
+// ═══════════════════════════════════════════════════════════════════════════════
+//  Maakt van een statuspagina een versie die je in een browser kunt openen.
+//
+//  Draaien:
+//
+//      node tools/voorbeeldpagina.mjs
+//      node tools/voorbeeldpagina.mjs whatsnext-electrum-gate
+//
+//  Het resultaat komt in `voorbeeld/<app>.html` en die map is gitignored.
+//
+//  ── Waarom dit bestaat ───────────────────────────────────────────────────────
+//
+//  Een statuspagina is niet zomaar te openen. Twee dingen staan in de weg, en ze
+//  zijn allebei fundamenteel en niet op te lossen door er anders naar te kijken:
+//
+//  1. in een `index.html.template` staan accolade-variabelen die umbreld invult.
+//     Onopgelost staat er letterlijk "v${APP_VERSION}" in de kop. Een pagina die
+//     in een eigen image zit heeft dit niet meer, maar haalt de versie dan uit
+//     status.json, dus zonder agent staat er niets;
+//  2. de pagina haalt al zijn gegevens bij een agent die alleen in de app bestaat.
+//     Zonder die agent zie je één foutmelding en verder een pagina vol "unknown":
+//     geen lijsten, geen teller, geen knoppen.
+//
+//  Dit script vult het eerste in en maakt het tweede na. Wat je dan ziet is de
+//  opmaak met plausibele gegevens erin, en dat is genoeg om te beoordelen of de
+//  twee apps naast elkaar hetzelfde ontwerp zijn.
+//
+//  ── Wat het NIET is ──────────────────────────────────────────────────────────
+//
+//  Geen test en geen bewijs. De gegevens zijn verzonnen, dus dit zegt niets over
+//  of de pagina de echte status juist weergeeft; dat blijft handwerk op het
+//  apparaat. Wat er wél mee te vinden is: alles wat met opmaak te maken heeft, en
+//  dat is precies waar deze pagina's steeds op aangepast worden.
+//
+//  Voor de fouten die je niet ziet staan er twee toetsen: `test_paginas_parsen.mjs`
+//  (loopt het script) en de dollarteken-toets in `test_appstore_vorm.py` (blijft
+//  het script heel na de invulling).
+// ═══════════════════════════════════════════════════════════════════════════════
+
+import { existsSync, mkdirSync, readFileSync, writeFileSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const HIER = dirname(fileURLToPath(import.meta.url));
+const REPO = join(HIER, '..');
+const UIT = join(REPO, 'voorbeeld');
+
+const app = process.argv[2] || 'whatsnext-evolu-relay';
+
+// De pagina staat op een van twee plekken: als *.template in de app-map, of als
+// gewoon bestand in het bouwrecept onder tools/ als hij in een eigen image zit.
+// Electrum Gate is sinds 0.1.0 het tweede geval. Alleen de eerste gaat door
+// envsubst; voor de tweede is de invulling hieronder een lege stap.
+const template = join(REPO, app, 'index.html.template');
+const kort = app.includes('-') ? app.slice(app.indexOf('-') + 1) : app;
+const inImage = join(REPO, 'tools', kort, 'index.html');
+const bron = existsSync(template) ? template : inImage;
+
+if (!existsSync(bron)) {
+  console.error(`FOUT: geen pagina gevonden op ${template} of ${inImage}`);
+  process.exit(1);
+}
+
+// De variabelen die umbreld invult. Alleen wat de pagina's gebruiken; de rest zou
+// op het apparaat leeg worden en dat gebeurt hieronder ook.
+const WAARDEN = {
+  APP_VERSION: leesVersie(app),
+};
+
+function leesVersie(appId) {
+  const manifest = readFileSync(join(REPO, appId, 'umbrel-app.yml'), 'utf8');
+  for (const regel of manifest.split('\n')) {
+    if (regel.startsWith('version:')) {
+      return regel.split(':')[1].trim().replace(/['"]/g, '');
+    }
+  }
+  return '0.0.0';
+}
+
+// ── De nagemaakte status van Evolu Relay ──────────────────────────────────────
+// Met opzet niet de gelukkige gevallen alleen: er staat een eigenaar met en zonder
+// label, een geblokkeerde, twee geweigerde pogingen waarvan één met veel pogingen,
+// en de teller loopt. Dat is de drukste toestand die de pagina kan hebben, en
+// daarin vind je de opmaakfouten.
+function relayStatus(nu) {
+  const iso = (msVanaf) => new Date(nu + msVanaf).toISOString();
+  return {
+    version: leesVersie('whatsnext-evolu-relay'),
+    relay: { reachable: true, checked: iso(-5000), publicPort: 3852 },
+    owners: {
+      problem: null,
+      learning: true,
+      learningUntil: iso(97000),
+      learningSecondsLeft: 97,
+      allowed: [
+        {
+          id: 'k7Qw2mZp9RtY4bVn6XsL1cHgJdFaEuOi',
+          allowed: true,
+          label: 'Trezor Suite, hoofdwallet',
+          firstSeen: iso(-86400000 * 2),
+          lastSeen: iso(-120000),
+        },
+        {
+          id: 'p3Ne8UyTr5WqAzXc2VbNm9KlJhGfDsAq',
+          allowed: true,
+          label: null,
+          firstSeen: iso(-3600000),
+          lastSeen: iso(-45000),
+        },
+      ],
+      blocked: [
+        {
+          id: 'zZ9YyXxWwVvUuTtSsRrQqPpOoNnMmLlK',
+          allowed: false,
+          label: 'Oude telefoon',
+          firstSeen: iso(-86400000 * 9),
+          lastSeen: iso(-86400000 * 3),
+        },
+      ],
+      rejected: [
+        {
+          id: 'aB1cD2eF3gH4iJ5kL6mN7oP8qR9sT0uV',
+          label: null,
+          firstSeen: iso(-1800000),
+          lastSeen: iso(-30000),
+          attempts: 7,
+        },
+        {
+          id: 'QqWwEeRrTtYyUuIiOoPpAaSsDdFfGgHh',
+          label: 'Laptop van de buren?',
+          firstSeen: iso(-600000),
+          lastSeen: iso(-600000),
+          attempts: 1,
+        },
+      ],
+    },
+    database: { bytes: 2374144, modified: iso(-120000) },
+    pendingCommand: false,
+  };
+}
+
+let html = readFileSync(bron, 'utf8');
+
+// Doet na wat envsubst doet: bekende variabelen krijgen hun waarde, onbekende
+// worden leeg. Dat laatste is geen slordigheid maar het gedrag op het apparaat.
+html = html.replace(/\$\{?([A-Za-z_][A-Za-z0-9_]*)\}?/g, (heel, naam) =>
+  Object.prototype.hasOwnProperty.call(WAARDEN, naam) ? WAARDEN[naam] : '',
+);
+
+// Het icoon staat naast de template en niet naast het resultaat.
+html = html.replace(
+  /src="icon\.png"/g,
+  `src="${join(REPO, app, 'icon.png').replace(/\\/g, '/')}"`,
+);
+
+// De agent nabootsen. Vóór het eigen script van de pagina, want dat begint meteen
+// met een ronde. Alleen voor Evolu Relay; Electrum Gate leest een ander bestand en
+// daarvoor is dit script (nog) niet uitgebreid, dus die pagina toont zijn eigen
+// melding dat er geen gegevens zijn. Dat is genoeg voor de kop en de dialoog.
+if (app === 'whatsnext-evolu-relay') {
+  const stub = [
+    '<script>',
+    '(function () {',
+    `  var status = ${JSON.stringify(relayStatus(Date.now()))};`,
+    '  window.fetch = function (url, opties) {',
+    "    if (String(url).indexOf('status') !== -1) {",
+    '      return Promise.resolve({ ok: true, json: function () { return Promise.resolve(status); } });',
+    '    }',
+    '    return Promise.resolve({ ok: true, json: function () { return Promise.resolve({}); } });',
+    '  };',
+    '})();',
+    '</script>',
+  ].join('\n');
+
+  const anker = '<script>\n(function () {';
+  if (html.indexOf(anker) === -1) {
+    // Hard falen en niet stil doorgaan: zonder de nabootsing is het resultaat een
+    // pagina vol "unknown", en dan denk je dat je naar de opmaak kijkt terwijl je
+    // naar een foutmelding kijkt.
+    console.error('FOUT: het ankerpunt voor het eigen script is niet gevonden');
+    process.exit(1);
+  }
+  html = html.replace(anker, `${stub}\n${anker}`);
+}
+
+mkdirSync(UIT, { recursive: true });
+const doel = join(UIT, `${app}.html`);
+writeFileSync(doel, html, 'utf8');
+
+console.log(`Geschreven: ${doel}`);
+console.log('');
+console.log('Openen kan met de voorbeeldserver uit .claude/launch.json, of door het');
+console.log('bestand rechtstreeks in een browser te slepen.');