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

# Taken - Webinterface

> Prioriteit: **B** | Wacht op: –
>
> **Van A naar B op 27-08-2026, na fase 6.** De pagina is af en goedgekeurd door de gebruiker, op een breed
> scherm én op een telefoon: "helemaal zoals ik het gewild heb". Wat er nog staat is niet te plannen (een
> etmaal wachten op het log) of het is een beslissing van de gebruiker (Nginx Proxy Manager, Zoraxy als
> harde afhankelijkheid). Er is niets meer dat een sessie zelf kan oppakken, en dat is precies wat tier B
> betekent.
>
> **Eigenimage is dezelfde dag gepromoveerd naar `Actief/` en heeft tier A overgenomen**, zoals de
> gebruiker op 27-08-2026 besloot. Beantwoord daar eerst open punt 1: blijft het Gitea-register ook bij
> publicatie de bron. Dit plan houdt zijn nummer 005; alleen het gepromoveerde plan kreeg een nieuw
> tussennummer.
>
> **Bij het opruimen op 27-08-2026 zijn zes vinkjes rechtgezet** die door de gebeurtenissen ingehaald
> waren: open punt 5, fase 5, "draaien op de Umbrel", "verifiëren tegen een echte status.json", en het
> nakijken van de eerste indeling op een breed scherm, een indeling die niet meer bestaat.
>
> **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.

- [x] **Vervallen op verzoek van de gebruiker (27-08-2026): "de cert test met verkeerde key geloof ik
      wel."** Dit was het uploaden op het niet-gelukkige pad met een sleutel die niet bij het certificaat
      hoort. De guard zelf is met echte sleutelparen getoetst én mutatie-getest, dus wat hier ongezien
      blijft is alleen de weg van de melding naar de pagina. Dat is een bewuste keuze en geen vergetelheid:
      valt het ooit tegen, dan zit het in `accept_upload` naar `up-note` en nergens anders

- [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**

- [x] **Fase 6, de tweede indeling, gebouwd in 0.0.17 (27-08-2026).** Alles uit de opdracht zit erin; wat
      er nog staat is het nakijken in een browser, en dat is de helft van de verificatie bij een
      verbouwing van deze omvang. Zie de fase zelf voor wat er per punt gedaan is

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
- [x] **Open punt 5: gebouwd in 0.0.16 en bevestigd op het apparaat** (27-08-2026). Zie fase 6 voor wat de
      controle wel en niet bewijst
- [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
- [x] **Fase 5, het activiteitenlog: gebouwd en uitgerold** in 0.0.6, verfijnd in 0.0.14. Zie de fase zelf

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.

Hier stonden nog twee regels die naar fase 2 en fase 5 vooruitwezen. Allebei **vervallen op 27-08-2026 bij
het opruimen**: die fasen zijn af, en een vooruitwijzing naar afgerond werk leest als openstaand werk.

## 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
- [x] **Draait op de Umbrel sinds 20-08-2026.** Deze regel stond er nog van vóór de installatie

## 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
- [x] **Geverifieerd tegen een échte `status.json`** sinds de app draait (20-08-2026), en sindsdien bij
      elke release opnieuw

## 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
- [x] **Vervallen: deze indeling bestaat niet meer.** De regel ging over het nakijken van fase 4a op een
      breed scherm, en fase 6 heeft die indeling op 27-08-2026 vervangen. Wat er nagekeken is, staat daar

## 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. **Sinds 0.0.17 zijn het er twee in plaats van tien**, allebei in het dichtgeklapte
      instelkader, dus het is één klik om te proberen. **Eigenaar: gebruiker**

## 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.

- [x] **De zelfcontrole gebouwd in 0.0.16 (27-08-2026).** De agent verbindt met poort 50022 van de
      nginx-container ernaast, maakt de handdruk af en vergelijkt het getoonde certificaat byte voor byte
      met het gekozen bestand. Die vergelijking is het punt: een herlading die niet aankwam ziet er van
      buiten goed uit. Vier toestanden in `status.json` onder `tls.self_check`: `off`, `ok`,
      `wrong-certificate`, `failed`. Bij een wijziging komt er een regel in het activiteitenlog

      **Twee dingen die bij het bouwen anders liepen dan het plan zei.** Ten eerste bewijst de controle de
      doorverbinding naar de Electrum-server **niet**; zie §4a2 voor waarom dat een bewuste ruil is. Ten
      tweede bleek elke meting een sessieregel op te leveren, dus er zit nu een rem op (vijf minuten) en
      een filter die de eigen regels weglaat. Zonder die twee ging het activiteitenlog over onszelf

      Getest in `tests/test_agent_zelfcontrole.py`, 22 toetsen, met de nadruk op de niet-gelukkige paden:
      geen certificaat, dichte poort, iets dat luistert maar geen TLS spreekt, en een ander certificaat aan
      de lijn. Alle vier de beslissende regels zijn mutatie-getest
- [x] Rij 1 is vijf gelijke widgets: Electrum-server, blokhoogte, reactietijd, certificaat, zelfcontrole
- [x] **Een eigen raster van vijf kolommen, met expliciete stappen** (5 → 3 → 2 → 1). Niet aan `auto-fit`
      overgelaten: met vijf items levert elke stap een ongelijke laatste rij op, en dan wil je zelf bepalen
      wélke widget alleen komt te staan. Dat is steeds de laatste, de zelfcontrole, want die is als enige
      te begrijpen zonder buur
- [x] De Electrum-serverwidget kleiner: de naam als waarde, het adres als onderregel. "Last checked" is
      eruit, want dat stond al onder de blokhoogte als "as of ... ago"
- [x] De certificaatwidget toont de dagen tot vernieuwing, met de naam als onderregel. Bij een verlopen
      certificaat staat er `expired` in het rood, en zonder keuze `none` en niet `unknown`: er is niets
      onbekends aan
- [x] Kiezen, uploaden en de details naar een dialoog achter het menu, met het `dialog`-element
- [x] **De licht/donker-schakelaar het menu in, met de huidige stand als waarde.** Het menu toont drie
      punten en geen hamburger, op aanwijzing van de gebruiker: dat is wat umbrelOS bij zijn eigen apps
      doet. Als tekst en niet als SVG, zodat hij meeschaalt met de lettergrootte
- [x] **De foutmelding "geen certificaat actief" heeft de knop die de dialoog opent.** De harde eis van
      deze indeling, en hij staat als zodanig in de code
- [x] Het activiteitenlog over de volle breedte
- [x] "Setting up your wallet" dichtgeklapt met `details`/`summary`, en compacter
- [x] Twee kopieerknoppen, met de wallets gegroepeerd onder de vorm die ze vragen
- [x] Opgeruimd wat vervalt: de hoogtekoppeling van log en certificaatkader, het meerekken van de tegels,
      en `.col-5` en `.col-7` uit de CSS
- [x] **Op een breed scherm nagekeken (27-08-2026). Werkt goed volgens de gebruiker**, met een lijst
      bijstellingen die in 0.0.18 verwerkt is: menu zonder knoplook, `Settings…` zonder certificaatnaam,
      dialoog in het midden, hogere widgets met de waarde onderin, reactietijd en blokhoogte omgedraaid,
      log half zo hoog, en de widget heet nu `Status`

- [x] **En de widget vond meteen een echte fout.** `Not answering` met `[Errno 111] Connection refused` op
      een werkende gateway: `GATE_TLS_HOST` stond op de servicenaam `server`, die op een Umbrel met meer
      apps niet van ons alleen is. Nu de volledige containernaam. Verholpen in 0.0.18

- [x] **De zelfcontrole bevestigd op het apparaat (27-08-2026):** `Answering`, handdruk in 10 ms. Daarmee
      is de containernaam-verklaring uit 0.0.18 juist gebleken, en is de keten uit open punt 5 rond:
      gebouwd, getoond, en gezien dat hij klopt

- [x] Laatste bijstellingen in 0.0.19: de onderregels van de widgets staan onderin hun vak, gelijk met de
      sparkline ernaast, en de chevron van het instelkader staat links vóór de titel met accent bij hover

- [x] **Op een telefoon nagekeken (27-08-2026). In orde volgens de gebruiker**, inclusief de stappen van
      vijf naar drie naar twee kolommen en de dialoog op een smal scherm

- [x] **Meer diepte en contrast in het lichte thema (0.0.22)**, overgenomen uit AssetApp: een rand naast
      de schaduw op de kaders, en een steviger `--border`. Dezelfde wijziging is doorgevoerd in het
      gedeelde ontwerpdocument `HomeGit/Docs/website-design-system.html`, want anders neemt de volgende app
      die dat document volgt de oude waarden weer over

## Geblokkeerd / wacht op

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

Als platte regel en niet als vinkje (opgeruimd 27-08-2026): een leeg vakje bij het woord "niets" telt mee
als openstaand werk zodra iemand de vinkjes telt, en dat is precies wat deze kop moet uitsluiten.