v0.4.63: SSO row alignment, themed checkbox, dropdown affordance

Three UI nits the operator caught on v0.4.62, plus the queued PXE-theme
research note for the next release.

- SSO header grid is now a 4-column form-row matching the Administrator
  account card column-for-column (display name / logo URL / metadata
  source / metadata URL). Switching to XML mode collapses column 4 and
  drops the multi-line textarea on its own full-width row below.
- Native form chrome (checkboxes, scroll bars) follows the active
  OpenPXE theme via CSS `color-scheme`; the inline meta tag was forcing
  dark form controls in light mode, which is why the "Enable single
  sign-on" checkbox rendered as an opaque black square against the
  light panel.
- Checkbox itself is now custom-styled (16x16 rounded square, accent
  fill + tick on :checked) so the chrome reads identically across both
  palettes and browsers, not just on whichever WebKit happens to honor
  `accent-color`.
- <select> dropdowns get a hand-drawn chevron via background-image SVG;
  with `-webkit-appearance: none` the native arrow had disappeared,
  making "Metadata source" look squished next to the inputs beside it.
- Update credentials + Save SSO settings buttons get explicit top
  margins so they sit clearly under their input rows instead of butting
  against the field beneath.
- `docs/queued/ipxe-pxe-menu-theme-research.md` captures findings on
  how iVentoy paints its boot menu (iPXE `console --picture` with
  baked-in per-resolution PNGs, no EDID auto-detect) and the
  recommended Rust architecture for the follow-up release.

Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]>

Cargo.lock

@@ -1140,7 +1140,7 @@ checksum = "384b8ab6d37215f3c5301a95a4accb5d64aa607f1fcb26a11b5303878451b4fe"
 
 [[package]]
 name = "openpxe"
-version = "0.4.62"
+version = "0.4.63"
 dependencies = [
  "anyhow",
  "axum",
@@ -1162,7 +1162,7 @@ dependencies = [
 
 [[package]]
 name = "openpxe-core"
-version = "0.4.62"
+version = "0.4.63"
 dependencies = [
  "anyhow",
  "bcrypt",
@@ -1181,7 +1181,7 @@ dependencies = [
 
 [[package]]
 name = "openpxe-dhcp-proxy"
-version = "0.4.62"
+version = "0.4.63"
 dependencies = [
  "anyhow",
  "bytes",
@@ -1195,7 +1195,7 @@ dependencies = [
 
 [[package]]
 name = "openpxe-http-api"
-version = "0.4.62"
+version = "0.4.63"
 dependencies = [
  "anyhow",
  "axum",
@@ -1226,7 +1226,7 @@ dependencies = [
 
 [[package]]
 name = "openpxe-ipxe-assets"
-version = "0.4.62"
+version = "0.4.63"
 dependencies = [
  "openpxe-core",
  "rust-embed",
@@ -1236,7 +1236,7 @@ dependencies = [
 
 [[package]]
 name = "openpxe-iso-store"
-version = "0.4.62"
+version = "0.4.63"
 dependencies = [
  "anyhow",
  "bcrypt",
@@ -1260,7 +1260,7 @@ dependencies = [
 
 [[package]]
 name = "openpxe-tftp"
-version = "0.4.62"
+version = "0.4.63"
 dependencies = [
  "anyhow",
  "bytes",
@@ -1274,7 +1274,7 @@ dependencies = [
 
 [[package]]
 name = "openpxe-webui"
-version = "0.4.62"
+version = "0.4.63"
 
 [[package]]
 name = "parking_lot"

Cargo.toml

@@ -12,7 +12,7 @@ members = [
 ]
 
 [workspace.package]
-version = "0.4.62"
+version = "0.4.63"
 edition = "2021"
 rust-version = "1.95"
 license = "MIT OR Apache-2.0"

crates/webui/src/app.css

@@ -34,9 +34,18 @@
   --topbar-h:   56px;
   --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
   --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
+  /* v0.4.63: tie native form-control rendering (checkboxes, scroll bars,
+     date pickers) to the active OpenPXE theme. Without this, the inline
+     `<meta name="color-scheme" content="dark light">` in index.html forces
+     dark form chrome in *both* themes — so the SSO "Enable single sign-on"
+     checkbox renders as an opaque black square against the light-mode
+     panel, ignoring our accent-color hint. CSS `color-scheme` overrides
+     the meta and tracks `data-theme` correctly. */
+  color-scheme: dark;
 }
 
 :root[data-theme="light"] {
+  color-scheme: light;
   /* Light palette — high-contrast neutral, accent unchanged for brand
      consistency. Designed against Netbox Labs's reference screenshot:
      near-white surfaces, soft grey dividers, dark text. */
@@ -304,6 +313,23 @@ label.field textarea {
   font-size: 14px; line-height: 1.4;
   box-shadow: none; -webkit-appearance: none; appearance: none;
 }
+/* v0.4.63: with `appearance: none`, the native <select> dropdown arrow
+   disappears, which makes the "Metadata source" pick-list look like a
+   plain (and slightly squished) text input. Paint our own chevron via
+   background-image so the control still reads as a dropdown, and reserve
+   right-padding for it. The data-URI SVG inherits currentColor via the
+   `stroke` attribute so the arrow follows light/dark theme without a
+   second declaration. */
+label.field select {
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%239aa0a6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='1.5,1.5 6,6 10.5,1.5'/></svg>");
+  background-repeat: no-repeat;
+  background-position: right 10px center;
+  background-size: 11px 7px;
+  padding-right: 30px;
+}
+:root[data-theme="light"] label.field select {
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%235a6377' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='1.5,1.5 6,6 10.5,1.5'/></svg>");
+}
 label.field input:focus, label.field select:focus, label.field textarea:focus {
   outline: none; border-color: var(--accent);
   box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
@@ -313,7 +339,40 @@ label.check {
   padding: 8px 10px; margin-bottom: 6px;
   border: 1px solid var(--border-soft); border-radius: var(--radius);
 }
-label.check input { accent-color: var(--accent); }
+/* v0.4.63: native checkboxes used to render as opaque black squares in
+   light mode because the page meta declares `color-scheme: dark light`
+   and `accent-color` alone only repaints the *check mark* (not the
+   container). Take full control of the chrome so the box reads cleanly
+   on both palettes and the checked state lights up in our accent. */
+label.check input[type="checkbox"] {
+  appearance: none; -webkit-appearance: none;
+  width: 16px; height: 16px; flex: none;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 3px;
+  display: inline-grid; place-content: center;
+  cursor: pointer; margin: 0;
+  transition: background 0.1s ease, border-color 0.1s ease;
+}
+label.check input[type="checkbox"]:hover { border-color: var(--accent); }
+label.check input[type="checkbox"]:checked {
+  background: var(--accent);
+  border-color: var(--accent);
+}
+label.check input[type="checkbox"]:checked::after {
+  /* Classic ✓ glyph built from a rotated rectangle border. Colour is
+     #002923 (the same near-black we use on solid-accent buttons) so the
+     tick stays legible against the teal fill in both themes. */
+  content: '';
+  width: 4px; height: 8px;
+  border: solid #002923;
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg) translate(-1px, -1px);
+}
+label.check input[type="checkbox"]:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent);
+}
 
 /* ── Drop zone ────────────────────────────────────────────────────── */
 

crates/webui/src/app.js

@@ -1025,7 +1025,11 @@
       const newPwConfirm = el('input', {type:'password', autocomplete:'new-password',
         placeholder: 'confirm new password'});
       const accountMsg = el('div', {class:'msg', style:'margin-top:8px'});
-      const accountSave = el('button', {onclick: async () => {
+      // v0.4.63: explicit top margin so the action button sits clearly
+      // beneath the input row instead of butting against the password
+      // fields. Mirrors the `Save SSO settings` button below for visual
+      // parity between the two settings cards.
+      const accountSave = el('button', {style:'margin-top:6px', onclick: async () => {
         accountMsg.textContent = ''; accountMsg.className = 'msg';
         if (!currentPw.value) {
           accountMsg.textContent = 'Current password is required.';
@@ -1130,29 +1134,39 @@
         el('option', {value:'xml'}, 'Metadata XML'),
       ]);
       ssoMode.value = sso.metadata && !sso.metadata_url ? 'xml' : 'url';
+      // v0.4.63: the IdP metadata URL now sits inside the 4-col header
+      // grid as column 4, so the SSO row is column-for-column aligned with
+      // the Administrator account row above. When the operator switches
+      // to XML mode, column 4 collapses (display:none) and the multi-line
+      // XML textarea takes its own full-width row below — there's no way
+      // to fit a 6-row textarea into a single grid cell without making
+      // the rest of the row look stretched.
       const urlWrap = el('label', {class:'field'}, [
         el('span', {class:'name'}, 'IdP metadata URL'),
         ssoUrl,
-        el('span', {class:'hint'},
-          'OpenPXE will fetch this URL once SSO sign-in lands; v0.4.6 just stores it.'),
       ]);
-      const xmlWrap = el('label', {class:'field'}, [
+      const xmlWrap = el('label', {class:'field', style:'margin-top:14px'}, [
         el('span', {class:'name'}, 'IdP metadata XML'),
         ssoXml,
         el('span', {class:'hint'},
           'Paste the raw <EntityDescriptor>…</EntityDescriptor> document from your IdP.'),
       ]);
+      // Hint that used to live under the URL field; surfaced once below
+      // the whole row so it doesn't compete with the in-grid layout.
+      const urlHint = el('p', {class:'msg', style:'margin-top:10px;margin-bottom:0'},
+        'OpenPXE will fetch the metadata URL once SSO sign-in lands; v0.4.63 stores it.');
       const refreshSsoFields = () => {
         if (ssoMode.value === 'url') {
           urlWrap.style.display = ''; xmlWrap.style.display = 'none';
+          urlHint.style.display = '';
         } else {
           urlWrap.style.display = 'none'; xmlWrap.style.display = '';
+          urlHint.style.display = 'none';
         }
       };
       ssoMode.onchange = refreshSsoFields;
-      refreshSsoFields();
       const ssoMsg = el('div', {class:'msg', style:'margin-top:8px'});
-      const ssoSave = el('button', {onclick: async () => {
+      const ssoSave = el('button', {style:'margin-top:16px', onclick: async () => {
         ssoMsg.textContent = ''; ssoMsg.className = 'msg';
         const payload = {
           enabled: ssoEnabled.checked,
@@ -1193,32 +1207,35 @@
             ssoEnabled,
             el('span', {}, 'Enable single sign-on'),
           ]),
-          // 3-column header strip: display name, logo URL, metadata
+          // v0.4.63: 4-column form-row that matches the Administrator
-          // source. All three controls inherit the same border/padding/
+          // account card above column-for-column — display name / logo
-          // focus chrome from the global `label.field input/select`
+          // URL / metadata source / metadata URL. All four controls share
-          // rule, so they line up cleanly. Below: the active source
+          // the same `label.field` chrome so they line up cleanly. When
-          // field (URL or XML) spans the full width.
+          // the operator picks "Metadata XML" the URL column collapses
-          el('div', {class:'form-row cols-3'}, [
+          // and the multi-line textarea drops below the row.
+          el('div', {class:'form-row'}, [
             el('label', {class:'field'}, [
               el('span', {class:'name'}, 'IdP display name'),
               ssoName,
-              el('span', {class:'hint'}, '"Sign in with X" label on the login screen.'),
             ]),
             el('label', {class:'field'}, [
               el('span', {class:'name'}, 'IdP logo URL'),
               ssoLogo,
-              el('span', {class:'hint'}, 'Optional. Shown next to the IdP name on the login button.'),
             ]),
             el('label', {class:'field'}, [
               el('span', {class:'name'}, 'Metadata source'),
               ssoMode,
             ]),
+            urlWrap,
           ]),
-          urlWrap,
           xmlWrap,
+          urlHint,
           ssoSave, ssoMsg,
         ]),
       ]);
+      // Wire up + paint the initial visibility now that all elements
+      // referenced by `refreshSsoFields` are attached.
+      refreshSsoFields();
 
       // ── Custom logo upload.
       // Single-file drop-zone; PNG/SVG/JPEG/WebP/GIF up to 2 MB.

crates/webui/src/index.html

@@ -66,7 +66,7 @@
       <!-- The brand badge at the top can be overridden by operator-uploaded
            logos; keep "OpenPXE v…" pinned in the footer so the backend
            identity is always visible regardless of branding. -->
-      <div class="footer-version">OpenPXE&nbsp;v<span data-bind="version">0.4.61</span></div>
+      <div class="footer-version">OpenPXE&nbsp;v<span data-bind="version">0.4.63</span></div>
     </div>
   </aside>
 

docs/queued/ipxe-pxe-menu-theme-research.md

@@ -0,0 +1,106 @@
+# PXE menu theme — research for next-release follow-up
+
+Status: queued. v0.4.63 keeps the ASCII-banner fallback + `console --picture`
+compositor wired; this note captures the design for the menu-theming work
+that lands once iPXE rebuilt with `IMAGE_PNG` is published.
+
+## How iVentoy actually does it
+
+iVentoy is closed-source for its menu, but the supporting bits are
+public at https://github.com/ventoy/PXE — a vanilla iPXE snapshot
+(`iPXE/ipxe-bd13697`) used to produce the loader binaries iVentoy
+serves over TFTP (`pxeboot.efi`, `iventoy_loader_16000`,
+`iventoy_loader_16000_uefi`).
+
+The graphical menu itself is rendered by iPXE's framebuffer console
+with a baked-in PNG background via `console --picture` — same
+primitive OpenPXE already uses in `crates/http-api/src/ipxe_script.rs`.
+Evidence:
+
+- The iPXE build in `ventoy/PXE` is configured with `CONSOLE_FRAMEBUFFER`
+  + `IMAGE_PNG` + `CONSOLE_CMD` (the three flags `console --picture`
+  needs).
+- iVentoy issue #11 confirms "iventoy using default 1024x768"; users
+  report 800x600 / 1024x768 / 1280x720 / 1280x1024 / 1920x1080 as
+  selectable resolutions from the iVentoy web UI **Configuration tab**,
+  not via EDID auto-detect. iPXE has no EDID parsing; the daemon writes
+  a resolution-tagged script per boot and serves the matching PNG.
+- iVentoy docs explicitly state both Free and Pro editions **do not
+  support** modifying the boot background/title — it's baked into the
+  shipped PNG assets.
+- Chrome is iPXE's native `menu` / `item` / `choose` widgets (single
+  highlight bar, no borders) painted on top of the PNG, with margins
+  set via `console --left/--right/--top/--bottom` to keep the text off
+  the logo. Not GRUB, not syslinux — UEFI iVentoy uses iPXE's
+  `snponly.efi` / `pxeboot.efi`, and `--picture` does work under UEFI
+  GOP despite older folklore.
+
+Do not conflate this with Ventoy-USB, which is a separate codebase and
+uses GRUB2 themes (`theme.txt`, `background_ventoy.png`, `select_c.png`).
+
+## Rust ingredients to replicate / surpass
+
+Most of these already exist in the workspace.
+
+1. **Compositor (extend, don't replace)** — extend
+   `crates/iso-store/src/pxe_logo.rs` to emit per-resolution PNGs
+   (1024x768, 1280x1024, 1920x1080 as the v1 set). `image` +
+   `imageproc` crates handle scaling; `ab_glyph` / `fontdue` for raster
+   text (subtitle, hostname, version). One source SVG/logo, three to
+   five rendered PNGs cached on disk.
+2. **Script generator** — `ipxe_script.rs` already emits
+   `console --picture … || console`. Add a `?res=` query param (or
+   per-MAC client hint persisted in `hosts.json`) and serve the matching
+   PNG plus matching `console --x --y` line. Keep the text-console
+   fallback already in place.
+3. **Resolution selection** — iPXE exposes `${vesa-x}` / `${vesa-y}` on
+   BIOS; UEFI side we can probe firmware vars at chain-time. The simpler
+   v1 is a "low-res / hi-res" toggle in Settings plus a per-host
+   override — mirrors iVentoy's UX, no kernel helper needed. True EDID
+   parsing is overkill for the first cut.
+4. **Chrome upgrades over iVentoy** — iPXE menus are limited (single
+   highlight, no borders). To look distinctly cooler without leaving
+   iPXE: paint border / title / footer **into the PNG**, leave a window
+   in the middle, then `console --left/--right/--top/--bottom` to inset
+   the iPXE menu exactly into that window. ASCII box-drawing inside the
+   menu remains fragile (iPXE mangles non-ASCII on some builds — already
+   noted in `ipxe_script.rs`).
+
+## Recommended architecture for the next OpenPXE release
+
+- Build a `pxe_theme` module beside `pxe_logo.rs`: takes operator logo
+  + theme tokens (accent colour, title, footer) and renders a layered
+  PNG (background gradient → framing chrome → logo → title bar → footer
+  with `${hostname}` / `${version}` / `${ip}`) at the three target
+  resolutions. Cache by hash of inputs.
+- Serve at `/branding/pxe-menu-{w}x{h}.png`. Default 1024x768; expose a
+  Settings dropdown.
+- In `ipxe_script.rs`, emit
+  `console --picture …/pxe-menu-1024x768.png --left 80 --right 80 --top 180 --bottom 60 || console`,
+  then the existing `menu` / `item` / `choose` block — text now lands
+  inside the framed window.
+- Compile iPXE with `CONSOLE_FRAMEBUFFER`, `IMAGE_PNG`, `CONSOLE_CMD`,
+  `CONSOLE_VESAFB` (BIOS) and `CONSOLE_EFIFB` (UEFI). The v0.4.61 image
+  attempted this in-Docker via QEMU emulation and hit `cc1` segfaults.
+  The follow-up will use a Gitea Actions runner pinned to native
+  `linux/amd64` (an Unraid host already exists for this).
+- Stretch goal: a second "theme pack" that ships a layered PNG with
+  subtle scanlines / grid — iPXE can't animate, but a well-designed
+  static composite beats iVentoy's plain centered logo handily.
+
+## Source URLs
+
+- https://github.com/ventoy/PXE
+- https://github.com/ventoy/PXE/tree/master/iPXE
+- https://github.com/ventoy/PXE/issues/11 — 1024x768 default
+- https://github.com/ventoy/PXE/issues/59 — iVentoy iPXE EFI loader
+- https://ipxe.org/cmd/console — `--picture` and compile flags
+- https://github.com/ipxe/ipxe/discussions/945 — background image how-to
+- https://github.com/ipxe/ipxe/discussions/802 — `CONSOLE_FRAMEBUFFER`
+  requirement
+- https://github.com/ipxe/ipxe/discussions/1006 — picture resolution
+  behaviour
+- https://www.iventoy.com/en/doc_edition.html — background / title not
+  user-customisable
+- https://kingtam.win/archives/iventoy.html — third-party iPXE-based
+  iVentoy alternative