UmbrelApps/Docs/Plannen/Actief/005-Webinterface/TAKEN.md

# Taken - Webinterface

> Prioriteit: **A** | Wacht op: –
>
> **Wat hierna komt, besloten door de gebruiker op 27-08-2026: het masterplan Eigenimage.** Dat is geen
> afhankelijkheid maar een volgordekeuze, en de reden staat aan die kant: een eigen image maakt van elke
> wijziging een bouwronde, en dat remt precies het itereren op de pagina dat dit plan nog doet. Rond je dit
> plan af, promoveer **Eigenimage** dan naar `Actief/` met een nieuw tussennummer, en beantwoord eerst open
> punt 1 daar: blijft het Gitea-register ook bij publicatie de bron. **Eigenaar van die vraag: gebruiker**
>
> **Van C naar B naar A op 20-08-2026, op één dag.** Eerst verviel de blokkade "de app geïnstalleerd en de
> agent draaiend". Aan het eind van die dag is dit het enige plan met werk dat nú te doen is: **Appstore**
> heeft alleen nog een herstart nodig die niet te plannen is, en **Publicatie** wacht op een publieke repo.
> Het nummer is daarom van 020 naar 005 gegaan; alleen dit plan kreeg een nieuw nummer, Appstore houdt 010.
>
> Afgezakt van A naar C op 19-08-2026 bij het afsluiten van de sessie. De pagina is af voor zover dat
> zonder de Umbrel kan; al het resterende werk in dit plan begint met kijken of de agent doet wat hij zou
> moeten doen, en dat kan niet vóór de installatie.

## Volgende stap

- [x] **0.0.10 op een telefoon nagekeken. In orde (20-08-2026).** De gebruiker meldt dat het er goed uitziet
      op mobiel. Eén ding kwam eruit: de kopieerknoppen stonden niet op één lijn, omdat de knop door het
      omvouwen de lengte van het adres volgde. Verholpen in 0.0.11 met `margin-left: auto` op de knop.
      Bijvangst: `0.0.10` na `0.0.9` levert wél een update op, dus tweecijferige versiedelen zijn veilig

- [x] **De agent zien draaien. Gelukt op 20-08-2026, over drie versies.** De agent start en luistert, de
      pagina laadt, hij vond veertien certificaten in `/certs/zoraxy` en weigerde daarom te kiezen, een
      keuze op de pagina werd aangenomen, en daarna verbindt een wallet over 50022. De keten waar dit plan
      op wachtte is dus rond.

- [ ] **Het uploaden op het niet-gelukkige pad proberen**, het enige stuk van 0.0.7 dat nog niet in een
      browser gezien is: een sleutel die niet bij het certificaat hoort. Verwacht: een weigering met een
      leesbare reden, en niets dat achterblijft in `data/certs`. De guard is met echte sleutelparen getoetst
      en mutatie-getest, dus dit gaat over de weg van de melding naar de pagina en niet over de controle
      zelf. **Eigenaar: gebruiker**

- [x] **0.0.7 en 0.0.9 in de browser nagekeken. Gelukt (20-08-2026):** uploaden werkt, kiezen werkt, ook
      met de certificaten uit Zoraxy, de keuzelijst bij het installeren zag er goed uit en het
      versienummer op de pagina klopt. Daarmee is het uploadpad uit 0.0.7 bewezen op het gelukkige pad

- [x] **0.0.6 in de browser nagekeken (20-08-2026).** Ziet er goed uit volgens de gebruiker. Wat eruit
      kwam: de badges konden weg, "your choice" zei niets, Trezor Suite is niet desktop-only, en
      Blockstream Green heet Blockstream

- [x] **De pagina naast een werkende app gelegd (20-08-2026).** Blokhoogte en backend-reactietijd komen
      binnen. Wat eruit kwam: van een verbonden wallet was niets te zien, de keuzelijst was te druk, en
      een reeks uitleg-teksten kon weg. Alles verwerkt in 0.0.6

- [ ] **Het activiteitenlog een etmaal laten lopen** en dan kijken of het klopt: komt er een
      `connected`-regel bij een nieuwe wallet, en wat staat er na een nacht in. De teller is nieuw en is
      alleen tegen tijdelijke bestanden getoetst, niet tegen een echte wallet. **Loopt sinds 27-08-2026 bij
      de gebruiker; hij kijkt er na een etmaal naar. Eigenaar: gebruiker**

- [ ] **Fase 6, de tweede indeling.** Opgegeven door de gebruiker op 27-08-2026 en het grootste blok werk
      dat er in dit plan nog ligt. Begint met de zelfcontrole, want dat is het enige echte nieuwe werk en
      het levert de vijfde widget van de bovenste rij

Daarna, en niet eerder:

- [ ] Uitzoeken waar Nginx Proxy Manager op umbrelOS zijn certificaten neerzet. De mount staat
      uitgecommentarieerd in `docker-compose.yml`: een gok invullen zou Docker een lege maphierarchie
      laten aanmaken in de app-data van een app die er misschien niet eens is
- [ ] Open punt 5: laten controleren of de TLS-poort zélf antwoordt. Dat is nu het enige wat de app niet
      over zichzelf weet, en het is zijn enige taak
- [x] **Open punt 6: een certificaat uploaden via de pagina. Gebouwd in 0.0.7** (20-08-2026). Beschrijfbare
      mount voor de agent, een eigen nginx-locatie met een grotere limiet, en validatie met
      `load_cert_chain` voordat er iets geplaatst wordt. De bestandsnaam komt uit het certificaat zelf,
      dus padtrucs kunnen niet. **Nog niet in een browser geprobeerd**
- [ ] Open punt 7: beslissen of Zoraxy een harde afhankelijkheid wordt. "Zoraxy of NPM" kan niet, en dat
      is op 20-08-2026 in de bron nagetrokken; alleen de wens staat nog open. Zie [OPEN.md](OPEN.md)
      punt 7
- [ ] Fase 5, het activiteitenlog, als de gebruiker het wil

De drie controles op `openssl`, `nc` en de WebDAV-module zijn **vervallen** met de komst van de agent: die
doet dat werk zelf met de standaardbibliotheek. Zie [PLAN.md](PLAN.md) §4a0.

Daarna, in deze volgorde:

- [ ] Fase 2 bouwen op de uitkomst van die controle
- [ ] Fase 5, als de gebruiker de wallet-activiteit wil

## Fase 1 - Het liegen eruit

- [x] De verzonnen statusblokken (`Online`, `Online`) en het verzonnen logvenster weg
- [x] Het hardgecodeerde domein weg. De pagina bevat geen enkele installatiespecifieke waarde meer
- [x] Taal naar Engels, zie [OPEN.md](OPEN.md) punt 2
- [x] Opnieuw opgebouwd op het design-systeem: tokens, `card`, `badge`, `alert`, `list-item`, `btn`,
      donker met een lichte variant en een schakelaar
- [x] **De pagina verhuisd naar `index.html.template` in de app-root.** Onder `web/` zou elke latere
      wijziging een herinstallatie kosten: umbreld ververst bij een update alleen een whitelist en die
      kijkt niet in submappen. Als template zit hij in de whitelist én wordt hij bij elke start ingevuld

## Fase 2 - De agent schrijft `status.json`

Herzien 19-08-2026: dit is een tweede container met een python-programma geworden in plaats van een
shell-lus in de compose. Onderbouwing in [PLAN.md](PLAN.md) §4a0.

- [x] `agent.py.template`, met de instellingen uit de omgeving in plaats van uit template-invulling.
      Daardoor staat er geen accolade-variabele in en blijft het geldige Python, dus is het te importeren
      in een test. De eerste toets in `tests/` controleert precies die aanname
- [x] Schrijft `status.json` atomair via een tijdelijk bestand en `os.replace`, want de pagina leest het
      elke minuut en een half geschreven bestand geeft een lege pagina
- [x] Einddatum van het certificaat met een eigen DER-lezer. Getoetst tegen `ssl` op 74 echte
      CA-certificaten, op een levend servercertificaat, en op beide tijdvormen
- [x] Blokhoogte en reactietijd via `blockchain.headers.subscribe` over een verse socket
- [x] Een `history`-reeks bijhouden, afgekapt op 24 uur, met alléén de reactietijd. De sparkline is sinds
      19-08-2026 de enige afnemer
- [x] Herkennen welke backend het is aan de hand van het adres, en `unknown` als hij niet in de tabel
      staat. Zie [PLAN.md](PLAN.md) §4c: liever minder informatief dan onwaar
- [x] De lus valt nooit stil: een mislukte ronde wordt gelogd en overgeslagen. Stoppen zou de pagina op
      oude gegevens bevriezen, en dat is precies het liegen dat dit plan moest afschaffen
- [ ] Draaien op de Umbrel. Niets hiervan is buiten de tests uitgevoerd

## Fase 3 - De pagina vult zichzelf

- [x] `fetch` op `status.json`, elke minuut
- [x] Elk veld heeft een zichtbare onbekend-toestand; nooit een leeg veld, want dat leest als "in orde"
- [x] "Laatst bijgewerkt" tonen, en oude gegevens als zodanig laten zien zodra ze ouder zijn dan twee
      schrijfronden. **Bijgesteld 19-08-2026 op verzoek van de gebruiker:** dat gebeurt niet meer met een
      melding bovenaan de pagina maar alleen bij de waarden zelf, want die melding zei voor de vierde keer
      wat er al onder de blokhoogte, in de badge bij de Electrum-server en in de voettekst stond
- [x] Leesbare melding als het bestand ontbreekt, zonder dat het op een fout lijkt.
      Zie [OPEN.md](OPEN.md) punt 1
- [ ] Verifiëren tegen een échte `status.json` in plaats van tegen de voorbeeldversie uit de preview

## Fase 4a - De indeling

Vastgesteld door de gebruiker op 19-08-2026 na het bekijken van de eerste versie. Ontwerp in
[PLAN.md](PLAN.md) §4a1.

- [x] Volgorde: Electrum-server, drie statustegels, activiteitenlog, certificaatkeuze, instellen van je
      wallet
- [x] "Point your wallet here" opgegaan in "Setting up your wallet"; het waren dezelfde kaders
- [x] Breed met een raster van twaalf kolommen, rijen die 5/7 en 7/5 afwisselen, afgekapt op 1760px
- [x] De leesvolgorde in de HTML is de bedoelde volgorde, zonder `order` in de CSS, zodat stapelen op een
      smal scherm dezelfde volgorde geeft. Gecontroleerd op 1760px en op mobiel
- [x] Statustegels rekken mee met de hoogte van hun buur, anders staat er een gat rechtsboven
- [x] Het logblok scrollt zelf horizontaal in plaats van de regel met puntjes af te kappen
- [x] **Alle kaders hetzelfde opgebouwd** (19-08-2026): een `card-head` met een titel in `t-h3`, dan de
      inhoud. De drie statustegels hadden een eigen kleine grijze kop in kapitalen. De titel gebruikt de
      token `--text-primary`, niet letterlijk wit, anders is hij onzichtbaar in de lichte variant
- [x] De onderregel van een statustegel is even hoog als de sparkline, zodat de drie getallen op één lijn
      staan. Gecontroleerd: koppen op y=153, getallen op y=311
- [x] **De badge "Serving this page" verwijderd** (19-08-2026, op aanwijzing van de gebruiker). Zie
      [OPEN.md](OPEN.md) punt 5 voor wat er wél op die plek zou horen
- [x] **De voetregel verwijderd** (19-08-2026). Daarin stond "Last reading ... ago" plus het versienummer;
      het eerste stond al bij de waarden zelf
- [x] **Het versienummer teruggezet**, klein achter de tagline als `v0.0.3`. Dezelfde dag op verzoek van de
      gebruiker. In `--text-sec` en niet in `--text-ter`, want die laatste is in de lichte variant `#bbbbbb`
      op wit en op deze grootte onleesbaar
- [x] **De certificaatlijst scrollt**, met het aantal in de kop. Een gedeelde certificatenmap kan er
      tientallen bevatten. Gecontroleerd met 19 certificaten: 1062px inhoud in een vak van 360px, knop
      blijft eronder staan
- [x] **Het logblok en het certificaatkader zijn even hoog.** Het langste kader van de rij bepaalt de
      hoogte, en wat mag meegroeien zegt dat zelf met flex. Gemeten: 636px bij vier certificaten, 773px bij
      negentien, in beide gevallen allebei gelijk
- [x] **Certificaat en activiteitenlog omgedraaid** (19-08-2026, op verzoek). Certificaat links en smal,
      log rechts en breed. Dat pakt twee kanten goed uit: de kolomgrens valt nu samen met die van de rij
      erboven (gemeten: x=738 in beide rijen), en monospace logregels hebben de breedte beter nodig
- [x] **Het losse verbindingsadres met kopieerknop eruit**, plus het label "tested clients". Zonder
      verlies: hetzelfde adres staat bij elke clientregel, in de vorm die díe client wil, met een
      kopieerknop erbij. Het instelkader werd daarmee 533px in plaats van 610px
- [ ] Nog niet met eigen ogen gezien op een echt breed scherm; gecontroleerd via de afmetingen van de
      kaders, niet visueel, want het browserpaneel stond dicht

## Fase 4 - Bruikbaar in plaats van alleen eerlijk

- [x] Verloopwaarschuwing onder de dertig dagen, en een foutmelding als het certificaat verlopen is
- [x] Kopieerknop op het verbindingsadres, met terugval voor http zonder de clipboard-API
- [x] Verbindingsregels per client, met kopieerknop per regel. Bron: `Referenties/Clients.md` §4
- [x] Kopieerknoppen verschijnen bij hover over de regel. Met `opacity` en niet met `display`, zodat ze
      met de tab-toets bereikbaar blijven, plus `focus-within` en altijd zichtbaar op aanraakschermen
- [ ] De kopieerknop echt uitproberen achter de app-proxy van umbrelOS. Die draait over http, dus de
      terugval met `execCommand` is daar het pad dat gebruikt wordt en niet de uitzondering. Wat op
      19-08-2026 lokaal wél bewezen is: de **faalroute** meldt "Press Ctrl+C" in plaats van stil niets te
      doen. De geslaagde route vraagt een echte muisklik, want de clipboard-API weigert een klik die uit
      een script komt

## Fase 4b - De certificaatkeuze

Besloten 19-08-2026 door de gebruiker: een keuzelijst op het dashboard in plaats van een sleutel in het
configuratiebestand. Het ontwerp hoort bij het plan **Configuratie** §4e en §4f; hier staat alleen wat de
pagina en de compose ervoor doen.

- [x] Keuzelijst op de pagina, met per certificaat de bron, de bestandsnaam, het domein en het aantal
      resterende dagen. Een verlopen certificaat staat er rood bij en wordt niet verborgen: het bestaat,
      en het kiezen ervan moet een zichtbare vergissing zijn en geen onvindbare
- [x] `PUT` naar `api/certificate`, doorgestuurd naar de agent. De WebDAV-truc is vervallen: de agent
      neemt de keuze aan en kan hem ook controleren, wat WebDAV niet kon
- [x] De pagina meldt níet zelf dat het gelukt is. Nginx moet het certificaat nog herladen, en dat blijkt
      pas uit de volgende `status.json`
- [x] De Zoraxy-mount van `/certs` naar `/certs/zoraxy`, en `/certs/own` erbij, zodat er per bron een map
      is. Beide containers hebben ze nodig: de agent om te kiezen, nginx om het bestand te openen
- [x] `certificates` in `status.json`, met per certificaat de bron, de naam, het domein uit het
      certificaat en de einddatum
- [x] **De guard: een id die de agent niet zelf gevonden heeft, wordt geweigerd.** Zowel bij de `PUT` als
      bij het kiezen. Getest, inclusief de mutatietest
- [x] **Bij meerdere kandidaten kiest de app niet.** Bijgesteld nadat bleek dat mijn eerste versie "de
      langst geldige" pakte, wat het plan **Configuratie** §4c uitdrukkelijk verbiedt: een verkeerd
      certificaat geeft een verbinding die het lijkt te doen en bij de wallet stukloopt op
      naamverificatie. De pagina toont dan een foutmelding met de kandidaten erin
- [x] De pagina toont bovenaan een foutmelding als er geen certificaat actief is, want dan is er geen TLS
      en dat is het ergste wat deze app kan overkomen

## Fase 5 - Het activiteitenlog

Voorstel, nog niet besloten. Ontwerp in [PLAN.md](PLAN.md) §4e. De kaart staat al op de pagina en toont
`no data`, zodat de vorm te beoordelen is voordat er iets voor gebouwd wordt.

- [x] Vorm: logregels onder elkaar, monospace, nieuwste bovenaan, met de grens erbij vermeld dat een
      regel per protocolaanroep niet kan zonder het verkeer van de gebruiker uit te lezen
- [x] **Gelukt, precies langs de weg die hier voorgesteld werd** (opgemerkt 27-08-2026, het vinkje bleef
      staan terwijl het werk gedaan was). Het `command`-blok schrijft `/var/lib/gate/stream-log.conf` met
      `$$` ontsnapt, en `stream.conf.template` haalt dat op met een `include`. Daarmee is het `log_format`
      langs de template-invulling gekomen zonder dat umbreld de dollartekens leegmaakte
- [ ] **Bytes van een lópende verbinding: nog steeds niet, en dat is een bewuste halve oplossing.** nginx
      logt een stream-sessie pas bij het sluiten, dus een wallet die uren openstaat levert geen regel op.
      Wat er in plaats daarvan kwam is een **teller** uit `/proc/net/tcp` in het `command`-blok: die ziet
      dat er verbindingen zijn, maar niet hoeveel er doorheen gaat. Voor "is mijn wallet verbonden" is dat
      genoeg; wie bytes wil, moet iets anders verzinnen
- [x] **`log` in `status.json`, zonder client-IP en zonder bronpoort. Gebouwd** (vinkje bleef staan). De
      agent leest `stream.log`, voegt de vorige regels samen en houdt de laatste 200 aan

## Fase 6 - De tweede indeling

Opgegeven door de gebruiker op 27-08-2026, na het zien en testen van alles uit de eerste indeling. Ontwerp
in [PLAN.md](PLAN.md) §4a2, inclusief de twee besluiten die hier bewust teruggedraaid worden en de eis die
deze indeling zelf oproept.

**Volgorde: eerst de zelfcontrole, dan de opmaak.** Die eerste is het enige echte nieuwe werk en hij levert
de vijfde widget; de rest is de pagina verbouwen om wat er dan staat.

- [ ] **De zelfcontrole bouwen (open punt 5, goedgekeurd 27-08-2026).** De agent zet een TLS-verbinding naar
      zijn eigen poort 50022 op en maakt de handdruk af. Dat bewijst luisteren, certificaat en
      doorverbinding in één keer. Raakt de agent, dus **mét test, en de test gaat over het niet-gelukkige
      pad**: geen certificaat, poort niet open, handdruk geweigerd. Wat de widget bij een mislukking toont,
      hoort bij het bouwen bedacht te worden en niet erna
- [ ] Rij 1 wordt vijf gelijke widgets: Electrum-server, blokhoogte, reactietijd, certificaat, zelfcontrole
- [ ] Een eigen raster van vijf kolommen voor die rij, en beslissen wat er tussen "vijf naast elkaar" en
      "gestapeld op mobiel" gebeurt. Vijf valt niet netjes in twaalf kolommen; dit is nieuw werk
- [ ] De Electrum-serverwidget kleiner, met minder onderteksten
- [ ] De certificaatwidget toont het gekozen certificaat: naam en dagen tot vernieuwing. Niet de keuze
- [ ] Kiezen, uploaden en afhandelen naar een dialoog achter een hamburger- of puntjesmenu rechtsboven.
      Met het `dialog`-element, want focus en Escape zitten erin. De lijst blijft een lijst, zie §4a2
- [ ] **De foutmelding "geen certificaat actief" blijft bovenaan staan en krijgt de knop die de dialoog
      opent.** Dit is de harde eis van deze indeling: een verse installatie heeft geen certificaat, en de
      pagina is de enige plek waar je er een kiest. Zie §4a2 en de klem van 0.0.3
- [ ] Het activiteitenlog over de volle breedte
- [ ] "Setting up your wallet" dichtgeklapt met `details`/`summary`, en compacter
- [ ] Twee kopieerknoppen in plaats van één per clientregel, **met de wallets gegroepeerd onder de vorm die
      ze willen.** Niet één platte lijst naast twee losse knoppen: dan is het adres er nog wel, maar niet
      meer bij welke wallet welk adres hoort. Bron blijft `Referenties/Clients.md` §4
- [ ] Opruimen wat vervalt: de statustegels hoeven niet meer mee te rekken met hun buur, en het logblok en
      de certificaatlijst hoeven niet meer samen te groeien. Dat laatste was de hele inhoud van 0.0.13
- [ ] Na afloop op mobiel nakijken, net als bij 0.0.10. De leesvolgorde in de HTML blijft de bedoelde
      volgorde, zonder `order` in de CSS

## Geblokkeerd / wacht op

- [ ] Niets. De afhankelijkheid van **Configuratie** is vervallen, zie [PLAN.md](PLAN.md)