wild-central/working/ui-refactor.md

Wild Central UI Refactor

Current Problems

1. DNS is three overlapping pages

• /central/dns — hybrid view showing both LAN DNS (dnsmasq) and DDNS (Cloudflare A records)
• /central/lan-dns — duplicates the LAN DNS portion of /dns
• /central/ddns — separate DDNS page

A user configuring DNS doesn't know where to go. Three pages, overlapping scope, no clear ownership.

2. Cloudflare is scattered across three pages

The Cloudflare API token is needed by DDNS, certificates, and tunnels — but each is configured in a different section. First-time setup requires hopping between Cloudflare, DDNS, and Certificates pages.

3. "Ingress Proxy" is jargon

Shows registered services and HAProxy config. "Ingress" is Kubernetes terminology. Most users think "reverse proxy" or just "services." The registered services display deserves to be the primary view — that's what consumers (Wild Cloud, Wild Works) care about, not HAProxy stats.

4. The sidebar order is arbitrary

No grouping by function. DNS next to Ingress next to Firewall next to VPN. A user doing initial setup can't follow a logical flow.

5. Overview is nearly empty

Just operator email and a restart button. Should be a status dashboard: are all daemons running? How many services registered? Any certs expiring? Any security alerts?

Current Navigation (9 items, flat)

Central
├── Overview           → operator email, restart button
├── Cloudflare         → API token verification
├── DNS                → LAN DNS + DDNS hybrid (confusing)
├── Ingress Proxy      → HAProxy + registered services (jargon)
├── Firewall           → nftables rules
├── VPN                → WireGuard server + peers
├── Certificates       → TLS cert provisioning
├── CrowdSec           → intrusion detection
└── DHCP               → DHCP server + leases

Hidden/redundant pages (routed but not in sidebar):

• /central/lan-dns — duplicate of DNS page
• /central/ddns — separate DDNS page

Proposed Navigation (9 items, better organized)

Central
├── Dashboard          → system health, daemon status, registered services count, cert warnings
├── Services           → registered services from Wild Cloud/Works (the primary consumer view)
├── DNS                → LAN DNS config (dnsmasq only, one page)
├── Cloudflare         → token + DDNS records + tunnel status (all in one place)
├── Certificates       → TLS cert status and provisioning
├── Firewall           → nftables rules
├── VPN                → WireGuard server + peers
├── CrowdSec           → security alerts + decisions
└── DHCP               → DHCP server config + leases

What Changes

Overview → Dashboard

Replace the empty overview with a status dashboard showing:

• All daemon statuses (dnsmasq, haproxy, nftables, wireguard, crowdsec) — green/red
• Registered services count + breakdown by source
• TLS cert warnings (expiring soon, missing)
• Recent security alerts (from CrowdSec)
• DDNS sync status
• Quick links to configure missing items

Ingress Proxy → Services

Rename and restructure:

• Primary view: list of registered service domains with status, reach, subdomains indicator
• Each service row shows: domain, backend, type (L4/L7), reach (internal/public), TLS mode
• Collapsible "Advanced" section for HAProxy raw config, stats, generate/restart
• Remove HAProxy jargon from the primary view

DNS consolidated

Kill /central/lan-dns (duplicate) and /central/ddns (moved to Cloudflare):

• One DNS page showing dnsmasq config: listen address, upstream servers, active DNS entries
• DHCP stays separate (it's dnsmasq too, but different concern)
• DDNS moves to Cloudflare page (it's a Cloudflare API concern)

Cloudflare becomes one-stop shop

Consolidate:

• API token management (from current Cloudflare page)
• DDNS records (from current DDNS page)
• Tunnel status (currently missing from UI entirely)
• All three share the same Cloudflare token — configure once, see all effects

First-time user flow

The navigation should support a linear setup flow:

1. Dashboard — see what's running, what needs attention
2. Cloudflare — set API token (enables DDNS + certs)
3. DNS — verify LAN DNS is configured
4. Certificates — provision TLS certs
5. Services — registered services appear as Wild Cloud/Works connect

Pages to delete

• LanDnsPage.tsx — duplicate, fold into DNS
• DdnsPage.tsx — fold into Cloudflare
• LanDnsComponent.tsx — duplicate component

Pages to rename

• CentralPage.tsx → DashboardPage.tsx
• IngressProxyPage.tsx → ServicesPage.tsx
• IngressProxyComponent.tsx → ServicesComponent.tsx
• CentralComponent.tsx → DashboardComponent.tsx

Sidebar items to rename

• "Overview" → "Dashboard"
• "Ingress Proxy" → "Services"

Sidebar icons

Item	Current Icon	Proposed Icon
Dashboard	Server	LayoutDashboard
Services	Network	Globe
DNS	Router	Router (keep)
Cloudflare	Cloud	Cloud (keep)
Certificates	ShieldCheck	ShieldCheck (keep)
Firewall	Shield	Shield (keep)
VPN	Lock	Lock (keep)
CrowdSec	ShieldAlert	ShieldAlert (keep)
DHCP	Wifi	Wifi (keep)