Skip to content

Add mocked UI dev mode (make dev-ui) for backend-free UI development#1008

Open
tehelsper wants to merge 11 commits into
masterfrom
claude/ui-mocking-strategy-15394d
Open

Add mocked UI dev mode (make dev-ui) for backend-free UI development#1008
tehelsper wants to merge 11 commits into
masterfrom
claude/ui-mocking-strategy-15394d

Conversation

@tehelsper

@tehelsper tehelsper commented Jul 15, 2026 •
edited
Loading

Copy link
Copy Markdown
Collaborator

What

Adds a Docker-based mocked UI dev mode: run the real myNode web UI locally with no device, bitcoind, LND, or systemd, for fast iteration on templates/CSS/JS.

make dev-ui    # http://localhost:8888, password: bolt

Everything lives in a new dev/dev-ui/ directory (see its README for full docs). The only existing files touched are the root Makefile (new dev-ui* targets) and a small template URL fix (below).

How it works

Zero changes to production code — no "ui mode" checks. The container wraps the unmodified app in three mock layers:

  1. PYTHONPATH shim (dev/dev-ui/mock_pynode/) — sits before /var/www/mynode and /var/pynode on the python path. Each mock exec's the real module and patches only the outside-world touchpoints into the real namespace (fake bitcoind RPC client, fixture-backed lnd_get, mock systemctl_info, mock pam, simulated reboot/upgrade). The real update/caching/formatting code runs unchanged against fixture data.
  2. Fixture filesystem — recreates a provisioned device's paths in the container (/mnt/hdd as a real tmpfs mount, settings/marker/version files), since the code reads inline absolute paths.
  3. Fake binaries — installed to /usr/bin in-container; fake systemctl shares state files with the python mock so shell and python views stay consistent.

Features

  • Floating DEV panel on every page (dev-only after_request injection, no template changes): switch device state (stable, drive_missing, quicksync_*, upgrading, shutting_down, ...), bitcoin sync progress, LND ready/wallet, warnings (undervoltage/fsck/usb), drive-full, upgrade banner, community/premium edition, simulated reboot, and one-click reset. Also scriptable via curl localhost:8888/dev/....
  • Apps install/uninstall appear to work end-to-end: real "Installing..." page with fake live log, simulated reboot (uptime-reset trick the real reboot page detects), marker files flipped — no real install.
  • Hot reload: repo source is volume-mounted read-only; template/python edits on the host apply immediately, and git status stays clean.
  • Sample data (block height, peers, channels, invoices, price, service states) is editable in dev/ui-dev/fixtures/*.json and reloads live.

Template fix (second commit)

main.html and lnd_watchtower.html built same-origin URLs with location.hostname, which drops the port — the pin and expand/collapse icons (and remove-tower link) 404 whenever the UI is served on a non-80/443 port (direct Flask on 8000, this dev container on 8888). Switched to relative URLs; the many URLs that intentionally target other ports (:8443, :3021, ':'+port) are untouched.

Verification

  • Clean-slate make dev-ui: login (real flow, mocked PAM), fully populated homepage, all major pages (/bitcoin, /lnd, /apps, /marketplace, /settings, /status, /electrum-server, /tor in premium mode) render with zero tracebacks/500s across ~800 requests.
  • Every device state flipped via the panel renders its real template; marketplace install/uninstall + simulated reboot flows verified in the browser.
  • Host edits hot-reload; repo tree stays clean after a full session.

Note: the UI publishes on host port 8888 because the repo's release file server tooling uses 8000.

🤖 Generated with Claude Code

tehelsper and others added 9 commits July 14, 2026 20:47
@tehelsper @claude
Add mocked UI dev mode (make ui-dev)
bb9ddc0 
Run the real web UI in a Docker container with a fully mocked backend so
UI developers can iterate on templates/CSS/JS without a device, bitcoind,
LND, or systemd. Zero changes to production code: a PYTHONPATH shim layer
mocks the external touchpoints, a fixture filesystem recreates device
paths, and fake binaries absorb shell-outs. Includes a floating dev panel
to switch device states (syncing, upgrading, drive missing, ...), toggle
warnings, and install/uninstall apps via marker files.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@tehelsper @claude
Fix same-origin image/page URLs dropping the port
f0cdb4a 
main.html and lnd_watchtower.html built same-origin URLs with
location.hostname, which drops the port, so the pin and expand/collapse
icons (and the remove-tower link) 404 whenever the UI is served on a
port other than 80/443. Use relative URLs instead. URLs that
intentionally target other ports are unchanged.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@tehelsper @claude
ui-dev: fix reboot Starting-screen limbo and default service states
04b3fee 
- Simulated reboot now lands on ~300s uptime instead of 0, so after an
  app install the homepage goes straight to stable rather than sitting on
  the 'Starting...' page for the full 180s just-booted window.
- Default lndhub service state is now 'running' (green) instead of
  'stopped' (red) so the out-of-box status page is coherent.
- Fake journalctl reflects the service's mock state, so a service shown
  red (failed/stopped) has a matching error log instead of 'everything
  is fine'.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@tehelsper @claude
ui-dev: rename target to dev-ui, default premium, tweak reboot + panel
eb6447e 
- Rename the make target ui-dev -> dev-ui (+ dev-ui-build/-shell/-clean) so
  future dev helpers group under 'make dev-*'.
- Dev panel label 'myNode' -> 'MyNode' (proper capitalization); serve
  /dev/overlay.js with no-store so panel edits aren't masked by the app's
  24h asset cache.
- Default the container to premium edition (product key + healthy check-in)
  instead of community edition; /dev/edition and /dev/reset go through the
  shared seed_edition() helper.
- Simulated reboot now lands at 170s uptime so the real 'Starting...' screen
  shows briefly (~10s) before auto-advancing to the stable homepage.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@tehelsper @claude
ui-dev: default bitcoin/lightning detail panels to unpinned
3906f7e 
The homepage expandable detail panels started pinned (shown by default);
seed ui.json with pinned_bitcoin_details/pinned_lightning_details = false
so they stay collapsed until the user clicks expand.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@tehelsper @claude
ui-dev: add dev-panel toggle for the Premium+ expiration warning
10d88ef 
New /dev/premium_plus_warning endpoint and a 'Premium+ warning' panel
section with expiring soon / expired / none buttons. It sets the
premium_plus days_remaining in the mocked check-in data so the homepage
subscription-expiration banner (expiring vs expired) can be previewed,
and clears any prior dismissal so the banner is not suppressed.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@tehelsper @claude
ui-dev: move edition control to its own section with clear on/off state
5faa4d5 
The Community/Premium control was a single button whose label was the
target edition while its highlight tracked the current one, so premium
mode showed a highlighted 'community edition' button - reading as if
community were stuck on. Replace it with a dedicated 'Edition' section
(above Warnings) holding two buttons that highlight whichever edition is
actually active.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@tehelsper @claude
ui-dev: stop the panel reading stale state from cached /dev responses
cb4aa93 
The app applies a 24h Cache-Control to all 200 responses, which also hit
the /dev/* JSON endpoints - so the browser served /dev/status (and the
action endpoints) from cache and the panel highlighted stale choices
(e.g. 'synced' stayed lit after switching to syncing). Add a blueprint
after_request that forces no-store on every /dev/* response, and fetch
panel data with cache:'no-store' so already-cached entries are bypassed
too. Drops the now-redundant per-route header on /dev/overlay.js.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@tehelsper @claude
ui-dev: keep the dev panel open across setting changes
33855a4 
Panel actions reload the page to re-render server content, which closed
the panel each time. Persist the panel's open state and scroll position
in sessionStorage (per-tab) and auto-reopen on load, so the panel appears
to stay open while tweaking settings. Closing the panel clears the state
so it stays closed across reloads.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@tehelsper tehelsper changed the title Add mocked UI dev mode (make ui-dev) for backend-free UI development Add mocked UI dev mode (make dev-ui) for backend-free UI development Jul 15, 2026
tehelsper and others added 2 commits July 14, 2026 23:59
@tehelsper @claude
ui-dev: rename dev/ui-dev -> dev/dev-ui for naming consistency
3ad21ae 
Match the folder and docker compose service/container names to the
'make dev-ui' target (dev-* convention). No behavior change.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@tehelsper
Update price.json
daa98c3
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

1 more reviewer
@Besthuvelraju Besthuvelraju Besthuvelraju approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@tehelsper @Besthuvelraju