Apply the approved "The Hub" redesign to the web admin while keeping every
existing mechanic intact (polling, service-detail modals, Matrix and system
password management, NWC wallet manager, update/rebuild/backup/security/
reboot flows, feature manager, onboarding, role handling).
Layout (templates/index.html):
- Old header bar + IP bar replaced by a sidebar + topbar app shell.
Sidebar carries the brand (The Hub / Sovran_SystemsOS version), category
navigation with live counts, the System actions (Update System, Tech
Support, Manual Backup, Security, node-only Upgrade), Feature Manager /
Preferences, and the role badge.
- Topbar carries the page title, a service search box, the LAN | WAN
network chip (external IP always visible, one line), Reboot and Sign Out.
- New widgets row: Systems Operational summary (opens the new Systems
Operational modal) and Bitcoin Core sync progress with block/ETA.
- New Systems Operational modal: service counts, router port-forwarding
steps (80/443 to this machine's LAN IP), the live domain diagnostics
checklist, and which services use those ports.
New static/js/dashboard.js (namespaced IIFE, no new globals) renders the
nav, search filtering, widgets, and the Systems Operational modal; it is
driven by the existing /api/services payloads via a
window.dashboardServicesUpdated() hook called from buildTiles/updateTiles.
Visual design (static/css/*):
- New token set (softer dark surfaces, lifted contrast, Sovran green
reserved for status and actions) with legacy variable names aliased so
every secondary sheet re-skins automatically.
- Tiles, dialogs, buttons, inputs, toggles, tables, forms, overlays and
the login page restyled to the GNOME/libadwaita-flavored surfaces:
20px cards, 26px dialogs, pill buttons, libadwaita switches, mono value
pills with Copy buttons, consistent modal anatomy.
- Inline SVG symbol set for chrome/nav icons (monochrome, currentColor);
service icons still load from /static/icons/*.svg as before.
- Sidebar system buttons now use vector glyphs instead of emoji.
Behavioral details:
- Service detail modal header gains a status pill next to the version
chip; credentials render with pre-wrap for multiline values.
- First-login security banner now renders as a card inside the content
area instead of a full-width strip above the app.
- Search + category filtering hide/show sections and tiles without
touching the polling or update logic.
Onboarding and login pages rebranded to "The Hub" with aligned palette.
The Element Call tile still appended a synthetic 'Step 4: Router Setup
Needed' to the domain diagnostic checklist, and every port table carried a
'Sovran_SystemsOS Status' column with Ready / Not ready yet verdicts.
Both were misleading: port forwarding happens on the router, which this
computer cannot inspect. A local ss/firewall probe can neither prove nor
disprove that forwarding works — and the LiveKit TURN relay range binds on
demand, so it reported 'Not ready yet' even on a perfectly working system.
- server.py: add ROUTER_FORWARD_ONLY_UNITS ({livekit.service}); skip the
local probe for those units, drop the step-4 append, replace extra_ports
with router_ports (no status field), and exclude router-only ports from
both tile health and /api/ports/health so they can't raise false alarms.
- helpers.js: new shared renderPortForwardGuideHtml() — one intro naming the
internal IP, explicit instructions (same internal/external port, match the
protocol, use port-range fields for 30000-40000), a colour-coded
TCP / UDP / TCP+UDP badge per row, and a closing note that the only real
test is loading the service from a phone on mobile data.
- features.js: enable-time modal uses the shared guide and now always lists
every port to forward (the old local pre-filter hid ports the user still
had to open).
- service-detail.js: tile port section uses the same guide; the SSH/non-domain
branch keeps a small 'not open on this computer yet' hint, which is a real
local fact, separate from router forwarding.
- onboarding.js: step 3 router note reworded to match (same number for
internal/external, notes that Element Call adds UDP ports).
- domain-setup.css: styles for the protocol badges and instruction list.
Co-authored-by: arena-agent <297053741+arena-agent@users.noreply.github.com>
naturallaw777
naturallaw777andarena-agent
copilot-swe-agent[bot]