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

Voortgang - Webinterface

20-08-2026 - scans zijn geen weigeringen, en meer lucht tussen de kaders

De gebruiker vroeg wat een logregel refused ... status 500 met nul bytes betekende. Antwoord: een TLS-handdruk die niet is afgemaakt, en op een doorgestuurde poort vrijwel altijd een scanner. Dat is geen storing, maar het log liep er wel vol met rode regels die suggereerden dat de app iets geweigerd had.

Nu een eigen soort probe, en de grens ligt bij de bytes. Niet bij de duur en niet bij de status: een scan die tien seconden open blijft is nog steeds een scan, en een sessie die na een halve seconde omvalt maar wél verkeer had is nog steeds een storing. Dat de bytetellers niets over de handdruk zeggen, bleek uit de sessies van de gebruiker zelf: een mislukte verbinding kwam op 0 en 0 uit terwijl er wél een handdruk geprobeerd is. Rood is nu voorbehouden aan het geval waar je iets aan moet doen.

Verder de ruimte tussen de kaders van 1 naar 1,5rem. De kaders hebben 1,8rem binnenin, dus de ruimte ertussen was kleiner dan die erbinnen; dat is de reden dat het krap aanvoelde.

Geraakt: agent.py.template, index.html.template, umbrel-app.yml (0.0.14), PLAN.md §4e-tabel, tests/test_agent_certificates.py. Tests: 54 goed 0 fout en 39 goed 0 fout, niets overgeslagen; de indeling van de sessieregels is mutatie-getest met een grens op de duur in plaats van de bytes, en dat viel om zoals het moest.

20-08-2026 - de mobiele opmaak, en een tegel minder

De pagina liep op een telefoon buiten beeld. De oorzaak was één regel CSS: de clientlijst stond op minmax(420px, 1fr), en dat eist een track van minstens 420 pixels ook op een smaller scherm. Nu met min(420px, 100%) eromheen. Daarbij vouwen de lijstregels en de logregels onder de 700 pixels om, met de waarde onder de titel in plaats van ernaast.

Voor de logregels is dat een herziening van een eerdere keuze: die scrollen liever dan dat ze afkappen, omdat de kolomvorm dan blijft staan. Dat argument geldt op een breed scherm en daar blijft het zo, maar op een telefoon betekende het dat je de bytes nooit zag.

Verder is de tegel met het aantal dagen tot het certificaat verloopt eruit, op verzoek van de gebruiker. Dezelfde redenering als bij de badges: de kaart eronder zegt het al, en met een datum erbij. Backend response is nu twee kolommen breed, want de sparkline is het enige op die rij dat met breedte iets doet.

Diezelfde dag nagekeken op een telefoon en het ziet er goed uit. Eén regressie kwam eruit: door het omvouwen volgde de kopieerknop de tekst, en het ene adres is langer dan het andere, dus stonden de knoppen niet op één lijn. Verholpen in 0.0.11 met margin-left: auto op de knop, en niet met space-between op de rij: bij de gesplitste weergave staat er ook een notitie naast de waarde die daar tegenaan hoort te blijven staan.

Bijvangst die geen opmaak is: 0.0.10 na 0.0.9 leverde gewoon een update op. Daarmee is de aanname uit die release bevestigd en is een tekstvergelijking met groter-dan uitgesloten. Staat in de naslag, want het scheelt de volgende keer een omweg via 0.1.0.

Geraakt: index.html.template, umbrel-app.yml (0.0.10 en 0.0.11), CHANGELOG.md, Referenties/Umbrel-appstore-spec.md. Tests: 39 goed 0 fout op de manifest- en configuratietoetsen; aan de agent is niets geraakt.

20-08-2026 - nagekeken in de browser, en dit plan is nu tier A

Na de verse installatie van 0.0.9 heeft de gebruiker alles nagekeken wat alleen met de hand kan. 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; alleen de weigering bij een sleutel die niet bij het certificaat hoort is nog niet in een browser gezien.

Dit plan is naar tier A gegaan en van nummer 020 naar 005. Niet omdat er meer werk bij kwam, maar omdat het het enige plan is met werk dat nu te doen is: Appstore is in de kern af en wacht op een herstart die niet te plannen is, en Publicatie wacht op een publieke repo.

Eén nieuwe bevinding van de gebruiker om mee te beginnen: in mobiele weergave lopen de verbindingsregels met hun kopieerknoppen en de logregels buiten beeld. Dat laatste is een bewuste keuze geweest (de logregels scrollen liever dan dat ze afgekapt worden), maar op een telefoon is dat het verkeerde antwoord.

Geraakt: alleen documentatie. Tests: niet van toepassing.

20-08-2026 - uploaden gebouwd, en de pagina verder uitgekleed

Een certificaat uploaden kan nu via de pagina, open punt 6. Het echte werk zat niet in het formulier maar in de validatie: het paar gaat onder een .tmp-naam naar de doelmap en wordt daar door ssl.SSLContext.load_cert_chain geopend, dezelfde OpenSSL die nginx straks gebruikt. Zonder die controle levert een verkeerde sleutel een nginx die niet meer herlaadt, en dat is dezelfde klasse storing als waardoor 0.0.3 niet startte. De bestandsnaam komt uit het certificaat zelf, dus de hele klasse padtrucs is weg zonder invoerfiltering. Uploaden kiest niet: de nieuwe komt voorgeselecteerd in de lijst.

Twee dingen die bij het bouwen bijna fout gingen en het opschrijven waard zijn: os.replace uit /tmp naar /certs/own faalt met EXDEV omdat dat een bind-mount is, en -subj "/CN=../.." in openssl leest de schuine streep als scheidingsteken, waardoor de padtruc-toets zichzelf stil oversloeg.

Verder op verzoek van de gebruiker: het app-icoon in de kop in plaats van het schildje, de badges uit de hoek van álle kaders, "your choice" weg achter het actieve certificaat, en Trezor Suite is niet desktop-only. Die laatste is de tweede keer dat leveranciersdocumentatie het aflegt tegen één keer kijken. Bijgevangen: de teller zweeg over een wallet die al verbonden was voordat de agent begon, en dat is precies het geval waarin iemand komt kijken.

Aan het eind van de dag nog één tekstbesluit: de pagina had een andere tagline dan de appstore, en die van de appstore wint (0.0.8). Zie OPEN.md punt 8; de reden is dezelfde maatstaf als bij het hernoemen van de app, namelijk de opbrengst en niet het middel.

Geraakt: agent.py.template, index.html.template, nginx.conf.template, docker-compose.yml, umbrel-app.yml (0.0.7 en 0.0.8), OPEN.md punt 6 en 8, Referenties/Clients.md, beide testbestanden. Tests: 48 goed 0 fout en 24 goed 0 fout, niets overgeslagen; de sleutelcontrole en de beschrijfbare mount zijn mutatie-getest. Niet geverifieerd: het uploaden in een echte browser.

20-08-2026 - de pagina naast een werkende app, en §4e afgemaakt

Eerste sessie met een app die echt draait, en dat leverde meteen de bevinding op waar §4e om vroeg: de gebruiker zag van zijn verbonden wallet niets terug. Oorzaak is bekend en staat in het plan, namelijk dat nginx stream pas bij het sluiten van een sessie logt. Het open punt was hoe je de lopende verbinding dan wél afleest. Antwoord: /proc/net/tcp, geteld in de nginx-container, want dat bestand geldt per netwerk-namespace en de agent zit in een andere. Het aantal gaat via een bestand naar de agent, net als de herlaadvlag. traffic is daarbij vervallen: bytes van een lopende sessie zijn er niet af te lezen, en een schatting die als meting leest is precies wat §4c verbiedt.

Daarnaast een reeks verzoeken van de gebruiker, alle om dezelfde reden: de pagina was te druk. De certificaatkeuze is een dropdown geworden (met veertien certificaten was die lijst het drukste onderdeel van de pagina, voor iets wat je één keer doet), disconnected heet session ended met leesbare details erachter, en er zijn vijf stukken tekst geschrapt: de voetnoot onder het log, de regel bij Certificate, de stip in de badges, de zin over apps op de Umbrel zelf en de uitleg over één regel versus twee velden. Bijgevangen bij de dropdown: de oude keuzelijst zette zichzelf elke ronde terug, dus een keuze verdween binnen tien seconden weer. Verder heet Blockstream Green nu Blockstream; die app is omgedoopt.

Geraakt: index.html.template, agent.py.template, docker-compose.yml, umbrel-app.yml (0.0.6), PLAN.md §4e, OPEN.md punt 6 en 7, Referenties/Clients.md, tests/. Tests: 29 goed 0 fout en 19 goed 0 fout, niets overgeslagen; de teller en de logregel zijn mutatie-getest. Niet geverifieerd: alles in de browser, dus de dropdown, de hoogtes en de badge. Dat is handwerk van de gebruiker.

19-08-2026 - sessie afgesloten; plan zakt naar tier C

Laatste twee wijzigingen van de dag: certificaat en activiteitenlog omgedraaid, en het losse verbindingsadres met kopieerknop eruit samen met het label "tested clients". Het omdraaien pakte beter uit dan als voorkeur alleen, want de kolomgrens valt nu samen met die van de rij erboven (x=738 in beide rijen) en logregels hebben de breedte beter nodig dan keuzerondjes. Het adres verdween zonder verlies: het staat bij elke clientregel in de vorm die díe client wil, met kopieerknop.

Het plan zakt van A naar C, wachtend op de installatie. De pagina is af voor zover dat zonder de Umbrel kan; al het resterende werk hier begint met kijken of de agent doet wat hij zou moeten doen.

Geraakt: whatsnext-electrum-gate/index.html.template, de plannen, CONTINUE_HERE.md. Tests: 21 goed, 0 fout. Die raken de pagina niet. Niet geverifieerd: de agent heeft nooit gedraaid, en ik heb de pagina zelf nooit gezien; het browserpaneel bleef dicht, dus alles is gemeten in plaats van bekeken.

19-08-2026 - voetregel weg, certificaatlijst scrollt, kaders gelijk

De voetregel met "Last reading ... ago" en het versienummer is eruit; de gebruiker houdt van een rustige interface en de leeftijd stond al bij de waarden zelf. Het versienummer is op verzoek dezelfde dag teruggezet, klein achter de tagline als v0.0.3: dit project verloor een keer een dag aan een wijziging die niet uitrolde door een niet-verhoogde version, en dan is dat precies de vraag die je stelt. Het staat in --text-sec, want --text-ter is in de lichte variant #bbbbbb op wit en op die grootte niet te lezen.

De gebruiker vroeg of de certificaatlijst een scrollbalk moest krijgen of beter een dropdown werd, en of het logblok en het certificaatkader dan even hoog konden. Het is een scrollende lijst geworden en geen dropdown, want je kiest hier op de hostnaam waarop je wallet verbindt en dan wil je bron, naam en resterende dagen kunnen vergelijken; in een dropdown zie je er één per keer en kan een verlopen certificaat er niet rood in. De hoogtewinst kwam er met een scrollend vak toch, dus er hoefde niets ingeleverd te worden. Het aantal staat nu in de kop, want met een scrollbalk is niet meer te zien hoeveel er onder de rand staan.

Gemeten met negentien certificaten: 1062px inhoud in een vak van 360px, en de knop blijft eronder staan. Met vier: geen scrollbalk, dus geen leeg vak. In beide gevallen zijn de twee kaders exact even hoog, 773px respectievelijk 636px. Eerst stond het vak op 460px, maar dan werd de rij 873px en vulde die op een 1080p-scherm het hele beeld.

Geraakt: whatsnext-electrum-gate/index.html.template en de plannen. Tests: 21 goed, 0 fout; die raken de pagina niet. Nagemeten op 1760px en op mobiel, in beide gevallen zonder horizontale schuifbalk en zonder console-fouten.

19-08-2026 - kaders gelijkgetrokken, en een badge die niets zei

De drie statustegels hadden een eigen kleine grijze kop in kapitalen en de andere kaders een witte titel. Op verzoek is dat nu overal hetzelfde: een card-head met een titel in t-h3. Wel met de token --text-primary en niet met letterlijk wit, want in de lichte variant is wit onzichtbaar. Bij het nameten bleek het getal van "Backend response" 21px hoger te staan dan de andere twee, omdat daar een sparkline onder hangt in plaats van een tekstregel; de onderregel van een tegel heeft nu dezelfde hoogte als die sparkline.

De badge "Serving this page" is eruit. De gebruiker wees erop dat die niets zegt: de pagina wordt nooit getoond aan een wallet die op 50022 verbindt. Mijn gedachte erachter was dat de pagina en de TLS-terminatie in dezelfde container zitten en dat de een de ander dus bewijst, maar dat stond er niet en zo leest niemand het. Een badge waarvan de betekenis niet in één zin op te schrijven is, hoort er niet te staan.

Wat dat wel opleverde, en dat is als open punt 5 vastgelegd: de app controleert of de Electrum-server antwoordt, maar niet of hij zelf antwoordt, en dat is zijn enige taak. Een TLS-verbinding naar de eigen poort zou het luisteren, het certificaat en de doorverbinding in één keer bewijzen. Nog geen taak, want het raakt de agent en die heeft nog nooit gedraaid.

Geraakt: whatsnext-electrum-gate/index.html.template en de plannen. Tests: 21 goed, 0 fout; die raken de pagina niet. Gemeten in beide thema's en op 1760px: zeven identieke koppen, drie getallen op één lijn, geen horizontale schuifbalk, geen console-fouten.

19-08-2026 - de vervallen-melding eruit

De gebruiker vond de melding "Readings are out of date" niet nuttig, en dat klopt: dezelfde mededeling staat al onder de blokhoogte ("as of ... ago"), in de badge bij de Electrum-server die grijs wordt met "last answered", en in de voettekst met het tijdstip. De banner was een vierde keer hetzelfde en wel de hardste.

De berekening blijft staan, want die stuurt de badge; alleen de melding is weg. Gecontroleerd met een status.json van een uur oud: geen enkele melding zichtbaar, badge grijs met "last answered 2 hours ago", "as of 2 hours ago" onder de blokhoogte, en de voettekst met datum en tijd. Er gaat dus geen informatie verloren.

De afweging staat nu in PLAN.md §4a, omdat hij geldt voor elke volgende melding die iemand wil toevoegen: een banner is er voor iets wat je nergens anders ziet.

Wat de gebruiker zag was trouwens de preview en niet de app: die status.json is een vast bestand dat niets ververst, dus die verloopt altijd als je het tabblad open laat staan.

Geraakt: whatsnext-electrum-gate/index.html.template en de plannen. Tests: 21 goed, 0 fout; die raken de pagina niet.

19-08-2026 - de pagina opnieuw ingedeeld, breed en met kaders naast elkaar

De gebruiker zag dat "Point your wallet here" en "Setting up your wallet" dezelfde vraag stelden. Die zijn er één geworden, en dat kader is naar onderen verhuisd. De volgorde is nu: Electrum-server, de drie statustegels, het activiteitenlog, de certificaatkeuze, en onderaan het instellen. De regel erachter is de moeite van het opschrijven waard, want hij beslist waar een volgend kader komt: eerst waar je naar kijkt als je iets nakomt, onderaan waar je naar kijkt als je iets instelt.

Op verzoek ook breed, met kaders naast elkaar: twaalf kolommen, rijen die 5/7 en 7/5 afwisselen, afgekapt op 1760px omdat een kader van 2500px regels oplevert die niemand leest. Belangrijk detail dat bewust zo is gebouwd: er staat geen order in de CSS, dus de leesvolgorde in de HTML is de bedoelde volgorde en stapelen op een smal scherm geeft exact dezelfde reeks.

Twee dingen die het meten opleverde en die anders waren blijven staan. De statustegels waren 146px naast een kader van 293px, dus stond er een gat rechtsboven; ze rekken nu mee en zetten hun inhoud onderaan. En het logblok kapte op een smal scherm de bytes af met puntjes; het scrollt nu zelf horizontaal, want stil verbergen is dezelfde soort onwaarheid als een verzonnen statuswaarde.

Geraakt: whatsnext-electrum-gate/index.html.template en de plannen. Tests: de suite raakt de pagina niet; wel gedraaid en groen (21). Gecontroleerd via de afmetingen van de kaders op 1760px en op mobiel: volgorde gelijk, geen horizontale schuifbalk op de pagina, logblok scrollt zelf, geen console-fouten. Niet geverifieerd: ik heb de pagina niet met eigen ogen gezien; het browserpaneel stond dicht, dus dit is gemeten en niet bekeken.

19-08-2026 - een tweede container, en de eerste tests in dit project

De gebruiker vroeg of de WebDAV-truc de gebruikelijke manier is om een backend in een Umbrel-app te bouwen. Dat was hij niet, en het uitzoeken veranderde het ontwerp. umbrelOS biedt precies één instelling per app, de afhankelijkheidskeuze in AppSettingsSchema; apps met instelbare configuratie zijn zelf een backend, in hun eigen image. De gebruiker koos daarop een tweede container met een klein python-programma, uit een *.template zodat het bij een update meekomt, zonder eigen image.

Dat loste meer op dan de keuzelijst. De controles op openssl, nc en de WebDAV-module zijn alle drie vervallen, want de agent doet dat werk met de standaardbibliotheek. En het hardgecodeerde domein is weg uit docker-compose.yml en nginx.conf.template: de agent schrijft cert.conf en nginx doet daar een include op. Daarmee is dat deel van Configuratie fase 2 af.

Twee dingen die het bouwen opleverde. De standaardbibliotheek heeft geen X.509-parser, dus die is er nu: een DER-lezer voor de einddatum en de domeinnamen. Dat is precies het soort code dat niet faalt met een fout maar met een verkeerd antwoord, en een certificaatdatum die er een jaar naast zit valt nooit op. Daarom is hij getoetst tegen ssl op 74 echte CA-certificaten, op een levend servercertificaat voor de subjectAltName, en op beide tijdvormen met zelfgebouwde certificaten, want het CA-materiaal gebruikt uitsluitend UTCTime na 2000. Dit project had nog geen suite; die staat nu in tests/ en CLAUDE.md vertelt hoe je hem draait.

Het tweede: bij het schrijven van de compose bleek mijn eigen choose het plan Configuratie §4c tegen te spreken. Die koos bij meerdere certificaten "de langst geldige", terwijl daar uitdrukkelijk staat dat er niet gegokt mag worden. Nu weigert de app en noemt de kandidaten, en de pagina zet er een foutmelding boven, want geen certificaat betekent geen TLS.

Geraakt: nieuw whatsnext-electrum-gate/agent.py.template, nieuw tests/, nieuw CLAUDE.md, gewijzigd docker-compose.yml, nginx.conf.template, index.html.template, en de plannen. Tests: 21 goed, 0 fout. Mutatietest gedaan op de twee guards: de keuze-validatie en de verloopfilter, allebei met de juiste enkele test die omvalt. Niet geverifieerd: de agent heeft nog nooit op de Umbrel gedraaid. Alles over de echte werking, dus de certificaatscan op de Zoraxy-map, de Electrum-vraag, het herladen via de vlag en de keuze via de API, staat nog open.

19-08-2026 - certificaatkeuze op het dashboard

De gebruiker vroeg hoe je aanwijst welk certificaat van welke app je wilt gebruiken, en koos daarbij voor een keuzelijst op het dashboard boven een sleutel in een configuratiebestand. Dat draait het niet-doel "geen instellingenscherm in de web-UI" terug, en dat is opgeschreven als uitzondering met de reden erbij: dit is de enige instelling waarvan de app de mogelijke waarden zelf al kent, want hij kijkt in de gemounte mappen.

Terugschrijven kan zonder backend met de WebDAV-module van nginx: één location die een PUT van hooguit een kilobyte aanneemt, naar ${APP_DATA_DIR}/config/ zodat de keuze een herstart overleeft. Of die module in de image zit, is de eerste van drie controles die nu op de Umbrel moeten gebeuren.

Twee dingen bewust níet gedaan. De mount voor Nginx Proxy Manager staat uitgecommentarieerd, want het pad is een gok en Docker maakt een ontbrekend bind-mountpad aan; dat zou een lege maphierarchie neerzetten in de app-data van een app die er misschien niet is. En de pagina meldt geen succes na het opslaan: nginx moet het certificaat nog herladen, en dat blijkt pas uit de volgende status.json.

Geraakt: index.html.template, nginx.conf.template, docker-compose.yml, en de plannen Webinterface en Configuratie. Tests: geen suite. In de lokale render gecontroleerd dat de lijst vier certificaten toont met het verlopen exemplaar als zodanig, dat het actieve aangevinkt staat, en dat de knop pas aangaat bij een andere keuze. Het wegschrijven zelf is niet geprobeerd, want daar is de Umbrel voor nodig.

19-08-2026 - dashboard uitgedund na de eerste blik

De gebruiker heeft de pagina bekeken en er drie dingen af gehaald: de grafiek blokken per uur, de tegel blokken laatste uur, en het kader over Tor tegenover TLS. De eerste twee beantwoorden een vraag over de Electrum-server en niet over deze proxy; de derde is positionering en hoort in de winkelbeschrijving, waar iemand nog staat te kiezen. Er blijven drie tegels over. history in status.json hoeft daardoor alleen nog de reactietijd te bewaren.

De badge bij de Electrum-server zei answering, en op de vraag wat dat betekende was er geen goed antwoord: het liet in het midden of dat nú gold of ooit. Hij noemt nu de meting en het moment, dus answered 2 minutes ago, no answer 2 minutes ago of not checked yet.

De activiteitenkaart is omgebouwd tot logregels onder elkaar in monospace, nieuwste bovenaan. Daarbij hoort een grens die op de pagina zelf staat: een regel per protocolaanroep kan niet, want die verzoeken zitten in de versleutelde verbinding en ze tellen zou betekenen dat de app het verkeer van de gebruiker uitleest.

Kopieerknoppen in een lijstregel verschijnen nu bij hover. Met opacity en niet met display, zodat ze met de tab-toets bereikbaar blijven; op aanraakschermen staan ze altijd aan.

Geraakt: whatsnext-electrum-gate/index.html.template en de plannen. Tests: geen suite. In de lokale render gecontroleerd: drie tegels, zestien logregels, geen console-fouten, blokkengrafiek en Tor-kader weg.

19-08-2026 - plan werd actief, en de pagina is herbouwd

Gepromoveerd vanuit Plannen/Masterplannen/ omdat het werk begon. De oude pagina beweerde Online als platte tekst in de HTML, had een verzonnen logvenster en noemde een hardgecodeerd domein. Die is vervangen door een pagina die alles uit status.json haalt en elk veld dat hij niet kent zichtbaar op unknown laat staan.

Twee dingen die het ontwerp veranderd hebben ten opzichte van het masterplan. De pagina is verhuisd van web/index.html naar index.html.template in de app-root: umbreld ververst bij een update alleen een whitelist, dus onder web/ zou elke latere wijziging stilzwijgend niet aankomen en een herinstallatie kosten. En doordat de pagina niets meer hardgecodeerd heeft, is de afhankelijkheid van Configuratie vervallen; dat deel van Configuratie fase 2 is hiermee meteen af.

Op verzoek van de gebruiker zijn er drie dingen bijgekomen: verbindingsregels per client met een kopieerknop (uit Referenties/Clients.md §4), een korte eerlijke uitleg over Tor tegenover TLS, en een kaart voor wallet-activiteit die nu op no data staat zodat de vorm beoordeeld kan worden voordat er iets voor gebouwd wordt. Dat laatste is een herziening van het niet-doel "live logs", en de grens ligt bij een samenvatting per sessie zonder client-IP.

Geraakt: whatsnext-electrum-gate/index.html.template (was web/index.html), nginx.conf.template, docker-compose.yml, umbrel-app.yml. Tests: dit project heeft geen suite. Handmatig gecontroleerd in een lokale render met een voorbeeld-status.json: beide thema's, alle kaarten, geen console-fouten. Nog niet geverifieerd: alles wat een echte status.json vraagt, want die wordt nog niet geschreven (fase 2). De kopieerknop is niet achter de app-proxy van umbrelOS geprobeerd, en dat is juist het pad waar de terugval voor http gebruikt wordt.