UI

What people see and do. The client is a plain-HTML/JS progressive web app; UI code lives in app/ui-modules/ (one folder per page or component, co-locating its JS/HTML/CSS) with shared helpers in app/js/ui/.

Main pages

• Tally — the home view: your overall position and quick actions.
• Friends — the friend list, each row showing the running tally and a presence icon (green = direct peer connection, amber = via relay, grey = offline).
• Logs — a readable history of activity.
• Settings — display name, relays, STUN servers, notifications, account transfer and removal, and the app-update banner when a new version is waiting.
• Welcome — first-run onboarding: create an identity, restore one, or connect an external signer.

Flows (subpages)

Task-focused subpages under app/ui-modules/subpage/: record a transaction, request a payment, set a trust limit, add a friend (QR / key), and transfer the account to another device.

Send and Request share one friend picker. Opened from a friend's page (#record/<id>, #request/<id>) that friend is preselected; opened from the Tally page the picker starts on "Choose friend…". Either way the submit button stays gray until a friend is chosen and the amount is positive. Request also offers a Create QR code tab for payers who aren't friends yet.

How it connects to the rest

The UI is a pure read/act surface: it renders a sanitised view derived from state (never touching private keys), and user actions call commands, which update the ledger and propagate over the transport. How a change to that state becomes a repainted screen — and how pages slide, scroll and route — is Render flow.