SPA is a black screen on any plain-HTTP origin: crypto.randomUUID is secure-context only #138

Reported from a phone: Daily entry renders a black screen.

Cause

crypto.randomUUID() exists only in a secure context — HTTPS, or localhost. A phone opening the dev server at http://192.168.x.x:5173, or any LAN deployment without a certificate, gets a plain-HTTP origin where the function is undefined.

Two screens call it during render, in a useRef initialiser:

• DailyEntryPage.tsx:63-64 — saveKey, flockKey
• CustomersPage.tsx:26 — createKey

So they throw before painting. There is no error boundary, so React unmounts the tree and the page is blank with nothing in the UI to explain it.

The other ten screens call it lazily inside handlers, so they load fine and then fail the moment you save.

Reproduced

Chromium at 390×844 with delete Crypto.prototype.randomUUID — exactly what an insecure origin presents:

secure=true   /daily-entry  431 chars
secure=false  /daily-entry    0 chars   <-- BLANK
secure=false  /customers      0 chars   <-- BLANK
secure=false  /flocks       429 chars
errors: crypto.randomUUID is not a function

Why it matters beyond the dev server

This app is for a phone in a barn. Any deployment reached over plain HTTP — a LAN box, an IP address, a self-hosted install someone has not fronted with TLS — is dead on arrival on two screens and silently unable to save on the rest.

Fix

crypto.getRandomValues() has no secure-context restriction, so a proper version-4 UUID is still buildable at full strength — this is not a downgrade to Math.random. A newId() helper in lib/ids.ts prefers randomUUID where it exists and falls back otherwise; all 18 call sites go through it.

Related

Found while testing #134 on a phone. Pre-existing — the two render-time calls predate that work.