Mark-VIII/docs/superpowers/specs/2026-08-11-openap-markvii-settings-design.md

Design: Open AP tab — Mark VII "PineAP Settings" card

Date: 2026-08-11 Status: Approved

Problem

The PineAP Open AP tab (#/pineap/open) renders as a flat list of nine plain checkboxes inside a single .pineap-title-card. The Mark VII PineAP page's settings card ("PineAP") uses a titled card with a subtitle, iOS-style slide toggles (mat-slide-toggle) grouped into sections, and a Save button. The Open AP tab should be restyled to that anatomy, with behavior switched from immediate-apply to a batched Mk7-style Save.

Reference (Mark VII)

The Mk7 "PineAP" settings card (from the firmware bundle):

• 20px card title "PineAP" + muted subtitle "Quickly set the general behavior of PineAP"
• The Passive/Active/Advanced button group (already on our Overview tab — not duplicated here)
• Settings as mat-slide-toggle iOS switches
• A small accent save button (savePineAPSettings)

Design

Layout

A full-width .pineap-card-settings card containing:

• Title row (.pineap-card-title-flex): title "PineAP", muted subtitle "Quickly set the general behavior of PineAP", and a Save button on the right (accent/primary .btn).
• Grouped slide-toggle settings using the repo's existing .switch CSS (iOS-style slider; defined in app.css but currently unused):
  • Karma: Enable PineAP, Karma
  • SSID Pool: Capture SSIDs to Pool, Advertise AP Impersonation Pool
  • Logging: Log Handshakes, Log Partial Handshakes, Log PCAP, Log WiGLE, Log Recon
• Footer (muted): PineAP MAC: X Target MAC: Y

Behavior (Mk7-style Save, batched)

• Flipping a switch stages the value locally and marks the field dirty — no API call is made until Save.
• Save applies only the dirty fields, batched per backend route:
  • Logging + Capture SSIDs (set_config fields loghandshake, logpartialhandshake, logpcap, logwigle, logrecon, autossidpool) → one POST /api/pineap/set_config with the dirty fields. The backend merges over the current daemon config, so untouched settings keep their values.
  • pineap_disabled (Enable PineAP) → POST /api/pineap/enable {enable} if dirty.
  • karma → POST /api/pineap/mimic {enable} if dirty.
  • advertise → POST /api/pineap/ssidpool/advertise {enable} if dirty.
  • All dirty routes fire together (Promise.allSettled); toast "Settings saved" if all fulfilled, else "Some settings failed" (error).
• Dirty-only apply preserves the unreadable live Karma state: the Pager daemon cannot report Karma, so leaving the switch untouched means Save does not change it.
• load() runs once on entry and after a successful Save to populate the switches from the daemon (get_config, hostapd, wifi/get_ap). No polling on this tab (unchanged), so staged values are never clobbered.
• If nothing is dirty, Save toasts "No changes".

Mapping table (field → route, dirty-only)

Switch	Backend call	Dirty flag
Enable PineAP	POST /api/pineap/enable {enable}	pineap_disabled
Karma	POST /api/pineap/mimic {enable}	karma
Capture SSIDs to Pool	POST /api/pineap/set_config {autossidpool}	autossidpool
Advertise AP Impersonation Pool	POST /api/pineap/ssidpool/advertise {enable}	advertise
Log Handshakes	POST /api/pineap/set_config {loghandshake}	loghandshake
Log Partial Handshakes	POST /api/pineap/set_config {logpartialhandshake}	logpartialhandshake
Log PCAP	POST /api/pineap/set_config {logpcap}	logpcap
Log WiGLE	POST /api/pineap/set_config {logwigle}	logwigle
Log Recon	POST /api/pineap/set_config {logrecon}	logrecon

CSS additions (app.css)

• .pineap-card-subtitle — muted, ~13px subtitle under the card title.
• .pineap-settings-section — small muted group label (e.g. "Karma", "SSID Pool", "Logging"), 13px, with margin, used between the toggle groups.
• Reuse the existing .switch slider CSS (no change to it).

Files touched

• payload/user/general/pager-webui/www/css/app.css — two new classes.
• payload/user/general/pager-webui/www/js/views.js — rewrite views.pineap_open (layout + staged-save behavior).

No backend changes. No test-module changes.

Verification

1. JS delimiter balance check (Python checker; no node available).
2. All 13 backend unittest modules pass (unchanged).
3. Deploy via scripts/deploy.ps1 (password supplied securely), restart /etc/init.d/pagerwebui.
4. On-device: Open AP tab shows the titled settings card with grouped slide switches and Save; flipping a switch then Save applies the values (verify via get_config/hostapd after Save); untouched toggles are not sent; user walks the tab visually.