feat(web): consolidate paired devices, self-contained sections, docs + lint

Web console
- Pairing/Library/Stats refactored into self-contained subsections that each own
  their own queries + mutations; a shared slot-based layout (view.tsx) is filled by
  the live page (containers) and Storybook (pure cards + fixtures) so the layout can't
  drift.
- All paired devices in one list on Pairing with a protocol column (punktfunk/1 +
  Moonlight), routing each unpair to the right endpoint; the redundant Clients page is
  removed.
- Library: overview grid split from the add/edit form into separate files.
- Login screen links out to the docs.

Docs
- "Console login password" section on every host page (apt/RPM/Bazzite/SteamOS/Windows)
  plus a new "Forgot your Password?" troubleshooting page, linked from the login screen.
- Console served as HTTP/1.1 over TLS (drop the unusable HTTP/3 advertising) across the
  Bun entry, launchers, systemd units, and packaging.

Tooling
- Biome now respects .gitignore (stops linting generated code), config migrated to
  2.5.1; all lint issues fixed cleanly.

Also includes this branch's in-progress host, Apple client, packaging, and CI changes.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

.gitea/workflows/deb.yml

@@ -87,12 +87,13 @@ jobs:
           git config --global --add safe.directory "$PWD"
           cargo build --release -p punktfunk-host -p punktfunk-client-linux --locked
 
-      - name: Build + smoke-boot web console (node-server preset)
-        # Gate the .deb on a real node boot: the punktfunk-web .deb runs `node .output/server`,
-        # so prove the node-server build exists, isn't a bun bundle, and actually serves /login.
+      - name: Build + smoke-boot web console (bun preset)
+        # Gate the .deb on a real bun boot: the punktfunk-web .deb runs the Nitro `bun` preset
+        # (our Bun.serve TLS entry), so prove the build IS a bun bundle and serves /login.
+        # No TLS env here, so the custom entry binds plain HTTP — the smoke curl stays simple.
         run: |
-          # bun builds the console. It's baked into the rust-ci image, but bootstrap it here too so
-          # the job stays green against the PREVIOUS image (docker.yml bootstrap lag).
+          # bun builds AND runs the console. Baked into the rust-ci image; bootstrap here too so the
+          # job stays green against the PREVIOUS image (docker.yml bootstrap lag).
           command -v bun >/dev/null || {
             apt-get install -y --no-install-recommends unzip
             curl -fsSL https://bun.sh/install | bash
@@ -101,21 +102,23 @@ jobs:
           cd web
           bun install --frozen-lockfile
           bun run build
-          if grep -q 'Bun\.serve' .output/server/index.mjs; then
-            echo "ERROR: web build is a bun bundle (Bun.serve) — need the node-server preset"; exit 1
+          if ! grep -q 'Bun\.serve' .output/server/index.mjs; then
+            echo "ERROR: web build is not a bun bundle — need the 'bun' preset + custom entry"; exit 1
           fi
-          PORT=3009 HOST=127.0.0.1 PUNKTFUNK_UI_PASSWORD=ci node .output/server/index.mjs &
+          PORT=3009 HOST=127.0.0.1 PUNKTFUNK_UI_PASSWORD=ci bun .output/server/index.mjs &
           NP=$!; sleep 3
           code=$(curl -s -o /dev/null -w '%{http_code}' http://127.0.0.1:3009/login || echo 000)
           kill "$NP" 2>/dev/null || true
           echo "web console smoke: /login -> $code"
-          [ "$code" = 200 ] || { echo "ERROR: web console failed to boot under node"; exit 1; }
+          [ "$code" = 200 ] || { echo "ERROR: web console failed to boot under bun"; exit 1; }
 
       - name: Build .debs
         run: |
+          export PATH="$HOME/.bun/bin:$PATH"
           VERSION="$VERSION" bash packaging/debian/build-deb.sh
           VERSION="$VERSION" bash packaging/debian/build-client-deb.sh
-          VERSION="$VERSION" bash packaging/debian/build-web-deb.sh
+          # Reuse CI's bun for the vendored runtime (matches the amd64 runner) instead of downloading.
+          VERSION="$VERSION" BUN_BIN="$(command -v bun || true)" bash packaging/debian/build-web-deb.sh
 
       - name: Publish to the Gitea apt registry
         env:

.gitea/workflows/windows-host.yml

@@ -171,8 +171,8 @@ jobs:
           Push-Location web
           & $bun install --frozen-lockfile; if ($LASTEXITCODE) { throw "bun install failed ($LASTEXITCODE)" }
           & $bun run build; if ($LASTEXITCODE) { throw "web build failed ($LASTEXITCODE)" }
-          if (Select-String -Path .output\server\index.mjs -Pattern 'Bun\.serve' -Quiet) {
-            throw "web build is a bun bundle (Bun.serve) - need the node-server preset"
+          if (-not (Select-String -Path .output\server\index.mjs -Pattern 'Bun\.serve' -Quiet)) {
+            throw "web build is not a bun bundle - need the 'bun' preset + custom entry"
           }
           Pop-Location
           # Gate the installer on a real boot under the BUNDLED bun (the runtime it ships), serving /login.

ci/fedora-rpm.Dockerfile

@@ -16,8 +16,9 @@ RUN dnf -y install \
       "https://mirrors.rpmfusion.org/free/fedora/rpmfusion-free-release-$(rpm -E %fedora).noarch.rpm" \
       "https://mirrors.rpmfusion.org/nonfree/fedora/rpmfusion-nonfree-release-$(rpm -E %fedora).noarch.rpm" \
   && dnf -y install \
-      # rpmbuild + source-tarball tooling; nodejs runs the Gitea Actions JS (checkout/cache)
-      # AND the punktfunk-web .output at runtime; unzip is for the bun installer below.
+      # rpmbuild + source-tarball tooling; nodejs runs the Gitea Actions JS (checkout/cache) only
+      # — the punktfunk-web console builds AND runs on bun (installed below); unzip is for the bun
+      # installer.
       rpm-build rpmdevtools systemd-rpm-macros git tar gzip nodejs unzip \
       # build toolchain + bindgen
       gcc gcc-c++ clang clang-devel cmake nasm pkgconf-pkg-config curl ca-certificates \
@@ -28,9 +29,10 @@ RUN dnf -y install \
       gtk4-devel libadwaita-devel SDL3-devel \
   && dnf clean all
 
-# bun — the build tool for the punktfunk-web console (`bun run build` -> the node-server .output
-# the punktfunk-web RPM ships and runs with plain node). Not in Fedora repos; install the official
-# standalone binary to a system PATH dir so the rpmbuild `%build` (run as any uid) finds it.
+# bun — both the BUILD tool and the RUNTIME for the punktfunk-web console (`bun run build` -> the
+# Nitro `bun`-preset .output, served by `Bun.serve` with TLS — HTTP/1.1 over TLS). The
+# RPM vendors THIS bun binary. Not in Fedora repos; install the official standalone binary to a
+# system PATH dir so the rpmbuild `%build`/`%install` (run as any uid) find it.
 RUN curl -fsSL https://bun.sh/install | bash \
     && install -m0755 /root/.bun/bin/bun /usr/local/bin/bun \
     && bun --version

clients/apple/Sources/PunktfunkClient/SettingsView.swift

@@ -711,8 +711,8 @@ struct SettingsView: View {
         } footer: {
             Text("Adds a “Browse Library…” action to each host that lists its games "
                 + "(Steam + custom) via the host's management API; tap a title to launch it. "
-                + "The host must expose that API on the LAN with a token "
-                + "(serve --mgmt-bind 0.0.0.0 --mgmt-token …).")
+                + "Works once you've paired with the host — the library is authorized by this "
+                + "device's certificate, with no extra host setup.")
                 .font(.geist(12, relativeTo: .caption))
                 .foregroundStyle(.secondary)
         }

clients/apple/Sources/PunktfunkKit/LibraryClient.swift

@@ -3,10 +3,11 @@
 // /library page renders. Read-only on the client for now; launching a chosen title is a later
 // step. Gated behind `DefaultsKey.libraryEnabled` in the UI.
 //
-// The management API is HTTP on a port distinct from the punktfunk/1 data plane (default 47990),
-// binds loopback unless started with a token, and REQUIRES a bearer token for any non-loopback
-// bind. So to browse a host's library remotely the host must expose the mgmt API on the LAN with
-// `--mgmt-token`; the client carries that token per host. This mirrors the GameEntry/Artwork/
+// The management API serves HTTPS on a port distinct from the punktfunk/1 data plane (default
+// 47990, also advertised in the host's mDNS `mgmt` TXT). A paired client is authorized for the
+// read-only library route by its **mTLS certificate** — no bearer token. The host binds this read
+// surface to the LAN by DEFAULT (the bearer-gated admin surface stays loopback-only), so a paired
+// client browses a host's library with no operator step. This mirrors the GameEntry/Artwork/
 // LaunchSpec schema in `crates/punktfunk-host/src/library.rs`.
 
 import Foundation
@@ -56,8 +57,9 @@ public enum LibraryError: LocalizedError {
         case .http(let code):
             return "The management API returned HTTP \(code)."
         case .unreachable(let why):
-            return "Couldn't reach the host's management API: \(why). The host must expose it on "
-                + "the LAN (serve --mgmt-bind 0.0.0.0)."
+            return "Couldn't reach the host's management API: \(why). It binds the LAN by default, "
+                + "so check the host is updated and reachable (a host pinned to "
+                + "`--mgmt-bind 127.0.0.1` is loopback-only and can't be browsed remotely)."
         }
     }
 }

crates/punktfunk-host/src/discovery.rs

@@ -11,7 +11,10 @@
 //!   lets a picker show the fingerprint and pre-pin a chosen host;
 //! - `pair` — `required` or `optional`, so a client can tell up front whether it must run the PIN
 //!   pairing ceremony before it can stream;
-//! - `id` — the stable host uniqueid (dedup across IPs / re-advertises).
+//! - `id` — the stable host uniqueid (dedup across IPs / re-advertises);
+//! - `mgmt` — the management API's TCP port (when it serves one), so a client can fetch the host's
+//!   game library (`GET /api/v1/library`, mTLS) on the SAME IP without assuming the default port.
+//!   Omitted by a host with no mgmt API (the standalone `punktfunk1-host`).
 
 use anyhow::{Context, Result};
 use mdns_sd::{ServiceDaemon, ServiceInfo};
@@ -30,7 +33,9 @@ pub struct Advert {
 }
 
 /// Advertise the native host on the LAN. `fingerprint` is the host cert SHA-256 (lowercase hex);
-/// `require_pairing` tells a discovering client whether it must pair before it can stream.
+/// `require_pairing` tells a discovering client whether it must pair before it can stream;
+/// `mgmt_port` is the management API's port (`Some` when this host serves one — the client browses
+/// the library there over mTLS on the advertised IP), `None` for a host with no mgmt API.
 pub fn advertise_native(
     hostname: &str,
     ip: IpAddr,
@@ -38,6 +43,7 @@ pub fn advertise_native(
     fingerprint: &str,
     require_pairing: bool,
     uniqueid: &str,
+    mgmt_port: Option<u16>,
 ) -> Result<Advert> {
     let daemon = ServiceDaemon::new().context("create mDNS daemon")?;
     let host_name = format!("{hostname}.local.");
@@ -54,6 +60,9 @@ pub fn advertise_native(
         .into(),
     );
     props.insert("id".into(), uniqueid.to_string());
+    if let Some(mgmt) = mgmt_port {
+        props.insert("mgmt".into(), mgmt.to_string());
+    }
     let service = ServiceInfo::new(NATIVE_SERVICE, hostname, &host_name, ip, port, props)
         .context("build native mDNS ServiceInfo")?;
     daemon

crates/punktfunk-host/src/gamestream/mod.rs

@@ -238,7 +238,7 @@ pub fn serve(
             tokio::try_join!(
                 nvhttp::run(state.clone()),
                 crate::mgmt::run(state.clone(), mgmt, Some(np.clone()), stats.clone()),
-                crate::punktfunk1::serve(native_opts, np, stats.clone()),
+                crate::punktfunk1::serve(native_opts, native.mgmt_port, np, stats.clone()),
             )?;
         } else {
             // Secure default: native punktfunk/1 + management API only (no GameStream surface).
@@ -249,7 +249,7 @@ pub fn serve(
             );
             tokio::try_join!(
                 crate::mgmt::run(state.clone(), mgmt, Some(np.clone()), stats.clone()),
-                crate::punktfunk1::serve(native_opts, np, stats.clone()),
+                crate::punktfunk1::serve(native_opts, native.mgmt_port, np, stats.clone()),
             )?;
         }
         Ok(())

crates/punktfunk-host/src/gamestream/rtsp.rs

@@ -350,7 +350,17 @@ fn stream_config(map: &HashMap<String, String>) -> Option<StreamConfig> {
     let fps = parse_u("x-nv-video[0].maxFPS")
         .filter(|&f| f > 0)
         .unwrap_or(60);
-    let bitrate_kbps = parse_u("x-nv-vqos[0].bw.maximumBitrateKbps").unwrap_or(20_000);
+    // Bitrate: Moonlight caps the legacy `x-nv-vqos[0].bw.*` fields at 100 Mbps for old-GFE
+    // compatibility and carries the user's REAL (uncapped) configured bitrate in the moonlight-specific
+    // `x-ml-video.configuredBitrateKbps`. Read that first — exactly like Sunshine — so a 500 Mbps client
+    // setting isn't silently floored to 100. Fall back to the legacy max for clients that don't send it,
+    // then a conservative default; clamp to a sane ceiling (the RTSP ANNOUNCE is attacker-controlled).
+    const MAX_BITRATE_KBPS: u32 = 1_000_000; // 1 Gbps — well above Moonlight's 500 Mbps slider
+    let bitrate_kbps = parse_u("x-ml-video.configuredBitrateKbps")
+        .filter(|&b| b > 0)
+        .or_else(|| parse_u("x-nv-vqos[0].bw.maximumBitrateKbps").filter(|&b| b > 0))
+        .unwrap_or(20_000)
+        .min(MAX_BITRATE_KBPS);
     // Client codec choice (moonlight-common-c SdpGenerator.c): 0=H264, 1=HEVC, 2=AV1.
     let codec = match map.get("x-nv-vqos[0].bitStreamFormat").map(|s| s.trim()) {
         Some("1") => Codec::H265,
@@ -496,6 +506,26 @@ mod tests {
         }
     }
 
+    /// Bitrate precedence: the moonlight-specific `x-ml-video.configuredBitrateKbps` (the user's real,
+    /// uncapped setting) wins over the legacy `x-nv-vqos[0].bw.maximumBitrateKbps` (which Moonlight floors
+    /// at 100 Mbps for old-GFE compat). Without this a 500 Mbps client streamed at 100.
+    #[test]
+    fn announce_prefers_configured_bitrate() {
+        // Real Moonlight shape: legacy max floored at 100 Mbps, configured carrying the true 500 Mbps.
+        let map = announce(&[
+            ("x-nv-vqos[0].bw.maximumBitrateKbps", "100000"),
+            ("x-ml-video.configuredBitrateKbps", "500000"),
+        ]);
+        assert_eq!(stream_config(&map).unwrap().bitrate_kbps, 500_000);
+        // No configured field (older client) → fall back to the legacy max (the base announce's 40 Mbps).
+        assert_eq!(stream_config(&announce(&[])).unwrap().bitrate_kbps, 40_000);
+        // A zero configured value is ignored (falls back), and an absurd value is clamped to the ceiling.
+        let zero = announce(&[("x-ml-video.configuredBitrateKbps", "0")]);
+        assert_eq!(stream_config(&zero).unwrap().bitrate_kbps, 40_000);
+        let huge = announce(&[("x-ml-video.configuredBitrateKbps", "9000000")]);
+        assert_eq!(stream_config(&huge).unwrap().bitrate_kbps, 1_000_000);
+    }
+
     /// Missing required video keys → no config (the PLAY handler then refuses to stream).
     #[test]
     fn announce_missing_required_keys() {

crates/punktfunk-host/src/main.rs

@@ -472,6 +472,10 @@ fn parse_serve(args: &[String]) -> Result<(mgmt::Options, punktfunk1::NativeServ
     let mut native_port: u16 = 9777; // the native plane always runs now
     let mut open = false;
     let mut gamestream = false;
+    // Did the operator pin the mgmt bind themselves? If not, we LAN-expose the read surface below so
+    // paired clients can browse the game library out of the box (the bearer admin surface stays
+    // loopback-gated in `mgmt::require_auth` regardless of the bind).
+    let mut mgmt_bind_explicit = false;
     let mut i = 0;
     while i < args.len() {
         let arg = args[i].as_str();
@@ -485,7 +489,8 @@ fn parse_serve(args: &[String]) -> Result<(mgmt::Options, punktfunk1::NativeServ
             "--mgmt-bind" => {
                 opts.bind = next()?
                     .parse()
-                    .map_err(|_| anyhow::anyhow!("bad --mgmt-bind (want IP:PORT)"))?
+                    .map_err(|_| anyhow::anyhow!("bad --mgmt-bind (want IP:PORT)"))?;
+                mgmt_bind_explicit = true;
             }
             "--mgmt-token" => {
                 let token = next()?;
@@ -526,9 +531,20 @@ fn parse_serve(args: &[String]) -> Result<(mgmt::Options, punktfunk1::NativeServ
     if opts.token.is_none() {
         opts.token = Some(crate::mgmt_token::load_or_generate()?);
     }
+    // Default the mgmt listener to ALL interfaces (not just loopback) so a paired native client can
+    // fetch the game library over mTLS with no operator step — the whole point of "browse works by
+    // default". This only LAN-exposes the read-only cert allowlist; the bearer-token admin surface
+    // is confined to loopback peers in `mgmt::require_auth`, so binding wide adds no admin exposure.
+    // An operator who pinned `--mgmt-bind` (e.g. `127.0.0.1:47990` to restore loopback-only) keeps it.
+    if !mgmt_bind_explicit {
+        opts.bind = std::net::SocketAddr::from(([0, 0, 0, 0], mgmt::DEFAULT_PORT));
+    }
     let native = punktfunk1::NativeServe {
         port: native_port,
         require_pairing: !open,
+        // Advertise the mgmt port over mDNS so clients learn where to browse the library (rather than
+        // assuming the default). `opts.bind.port()` is the real port even if the operator moved it.
+        mgmt_port: opts.bind.port(),
     };
     Ok((opts, native, gamestream))
 }
@@ -643,9 +659,13 @@ USAGE:
     punktfunk-host spike [OPTIONS]            capture→encode→file pipeline spike (dev tool)
 
 SERVE OPTIONS:
-    --mgmt-bind <IP:PORT>        management API address (default: 127.0.0.1:47990)
-    --mgmt-token <TOKEN>         bearer token for the management API (or PUNKTFUNK_MGMT_TOKEN);
-                                 required when --mgmt-bind is not loopback
+    --mgmt-bind <IP:PORT>        management API address (default: 0.0.0.0:47990 — paired clients
+                                 reach the read-only surface, incl. the game library, over mTLS;
+                                 the bearer admin API stays loopback-only. Pin 127.0.0.1:47990 to
+                                 bind loopback only)
+    --mgmt-token <TOKEN>         bearer token for the management API (or PUNKTFUNK_MGMT_TOKEN); the
+                                 admin endpoints it guards are honored only from a loopback peer
+                                 (the co-located web console), never over the LAN
     --gamestream  (--moonlight)  ALSO run the GameStream/Moonlight-compat planes (nvhttp pairing,
                                  RTSP, ENet control, _nvstream mDNS). OFF by default — they carry
                                  inherent on-path weaknesses (plain-HTTP pairing + legacy GCM nonce

crates/punktfunk-host/src/mgmt.rs

@@ -9,15 +9,20 @@
 //! and a copy is checked in at `api/openapi.json` (a test fails if it drifts, like the
 //! cbindgen header).
 //!
-//! Security: binds loopback by default, serves HTTPS with the host's identity cert, and requires
-//! auth on every `/api/v1` route except `/api/v1/health` — **always**, even on loopback. A paired
-//! native client authenticates by its mTLS cert; everyone else by a bearer token (`--mgmt-token` /
-//! `PUNKTFUNK_MGMT_TOKEN`, else auto-generated + persisted to `~/.config/punktfunk/mgmt-token`). The
-//! OpenAPI document and docs UI are served unauthenticated (the spec is public — it lives in this repo).
+//! Security: serves HTTPS with the host's identity cert and requires auth on every `/api/v1` route
+//! except `/api/v1/health` — **always**, even on loopback. The listener binds **all interfaces by
+//! default** so a paired native client can reach the read-only surface (host/status/clients and the
+//! **game library**) over the LAN with no operator step — authenticated by its mTLS cert (the
+//! `cert_may_access` allowlist). The **bearer-token admin surface** (pairing, unpair, session
+//! control, library mutation, stats) is honored **only from a loopback peer**, so it is never
+//! LAN-exposed: the web console BFF — the sole token holder (`--mgmt-token` / `PUNKTFUNK_MGMT_TOKEN`,
+//! else auto-generated + persisted to `~/.config/punktfunk/mgmt-token`) — always connects over
+//! loopback. Restore the old loopback-only listener with `--mgmt-bind 127.0.0.1:47990`. The OpenAPI
+//! document and docs UI are served unauthenticated (the spec is public — it lives in this repo).
 
 use crate::encode::Codec;
 use crate::gamestream::{
-    tls::{serve_https, PeerCertFingerprint},
+    tls::{serve_https, PeerAddr, PeerCertFingerprint},
     AppState, APP_VERSION, AUDIO_PORT, CONTROL_PORT, GFE_VERSION, RTSP_PORT, VIDEO_PORT,
 };
 use crate::stats_recorder::{Capture, CaptureMeta, StatsStatus};
@@ -474,8 +479,11 @@ where
 // Auth
 // ---------------------------------------------------------------------------------------
 
-/// Auth gate on the `/api/v1` routes: a paired client cert (mTLS) or the bearer token — required
-/// always (the host runs with a token by construction). `/api/v1/health` stays open for probes.
+/// Auth gate on the `/api/v1` routes: a paired client cert (mTLS, from anywhere) or the bearer token
+/// (from a **loopback** peer only) — required always (the host runs with a token by construction).
+/// `/api/v1/health` stays open for probes. The cert path authorizes only the read-only allowlist
+/// ([`cert_may_access`]); the bearer path authorizes the full admin surface and is therefore confined
+/// to loopback so it is never LAN-exposed even when the listener binds all interfaces by default.
 async fn require_auth(State(st): State<Arc<MgmtState>>, req: Request, next: Next) -> Response {
     if req.uri().path() == "/api/v1/health" {
         return next.run(req).await; // liveness probe is always open
@@ -493,8 +501,25 @@ async fn require_auth(State(st): State<Arc<MgmtState>>, req: Request, next: Next
             return next.run(req).await;
         }
     }
-    // Otherwise require the bearer token (the web console / admin). `run` always passes a token, so
-    // no-token means a misconfigured caller (e.g. a test constructing `app` directly) — deny.
+    // Otherwise require the bearer token (the web console / admin) — but only from a LOOPBACK peer.
+    // The token authorizes the full admin surface, so confining it to loopback keeps that surface off
+    // the LAN even though the listener now binds all interfaces by default (so paired clients can
+    // browse the library). The web console BFF — the sole token holder — always connects over
+    // loopback, so nothing first-party is affected; a LAN caller must use a paired client cert and is
+    // limited to the read-only allowlist above. (No PeerAddr ⇒ a non-`serve_https` caller, e.g. a unit
+    // test → treat as loopback so handler tests still authenticate by token.)
+    let from_loopback = req
+        .extensions()
+        .get::<PeerAddr>()
+        .is_none_or(|a| a.0.ip().is_loopback());
+    if !from_loopback {
+        return api_error(
+            StatusCode::UNAUTHORIZED,
+            "the admin API is loopback-only — a LAN client must present a paired client certificate",
+        );
+    }
+    // `run` always passes a token, so no-token means a misconfigured caller (e.g. a test constructing
+    // `app` directly) — deny.
     let Some(expected) = st.token.as_deref() else {
         return api_error(StatusCode::UNAUTHORIZED, "authentication required");
     };
@@ -1605,6 +1630,72 @@ mod tests {
         );
     }
 
+    /// The bearer-token (admin) path is honored only from a LOOPBACK peer: the same token from a LAN
+    /// peer is rejected, so binding the listener to all interfaces (so paired clients can browse the
+    /// library by default) never LAN-exposes the admin surface. A paired *cert*, by contrast, reaches
+    /// the read-only allowlist from anywhere.
+    #[tokio::test]
+    async fn bearer_admin_is_loopback_only() {
+        let lan: SocketAddr = "192.168.1.50:54321".parse().unwrap();
+        let loopback: SocketAddr = "127.0.0.1:33333".parse().unwrap();
+        let bearer = |peer: SocketAddr| {
+            let mut req = get_req("/api/v1/stats/recordings"); // a bearer-only (admin) route
+            req.extensions_mut().insert(PeerAddr(peer));
+            req.headers_mut().insert(
+                axum::http::header::AUTHORIZATION,
+                axum::http::HeaderValue::from_static("Bearer test-secret"),
+            );
+            req
+        };
+
+        let app = test_app(test_state(), None);
+        // A valid bearer from a LAN peer → rejected on the admin API.
+        assert_eq!(
+            app.clone()
+                .oneshot(bearer(lan))
+                .await
+                .expect("infallible")
+                .status(),
+            StatusCode::UNAUTHORIZED,
+            "a bearer token from a LAN peer must be rejected on the admin API"
+        );
+        // The SAME token from a loopback peer (the web console BFF) → accepted.
+        assert_ne!(
+            app.clone()
+                .oneshot(bearer(loopback))
+                .await
+                .expect("infallible")
+                .status(),
+            StatusCode::UNAUTHORIZED,
+            "the bearer token must be accepted from a loopback peer"
+        );
+
+        // A paired cert from a LAN peer still reaches the read-only library (the feature this enables).
+        let np = Arc::new(
+            crate::native_pairing::NativePairing::load_with(
+                Some(
+                    std::env::temp_dir()
+                        .join(format!("pf-mgmt-lanlib-{}.json", std::process::id())),
+                ),
+                None,
+                false,
+            )
+            .unwrap(),
+        );
+        let fp = "deadbeefcafe";
+        np.add("lan-client", fp).unwrap();
+        let app = test_app_native(test_state(), np);
+        let mut req = get_req("/api/v1/library");
+        req.extensions_mut().insert(PeerAddr(lan));
+        req.extensions_mut()
+            .insert(PeerCertFingerprint(Some(fp.to_string())));
+        assert_ne!(
+            app.clone().oneshot(req).await.expect("infallible").status(),
+            StatusCode::UNAUTHORIZED,
+            "a paired cert must reach the library from a LAN peer"
+        );
+    }
+
     #[tokio::test]
     async fn health_is_open_and_versioned() {
         let app = test_app(test_state(), None);

crates/punktfunk-host/src/punktfunk1.rs

@@ -121,7 +121,8 @@ pub fn run(opts: Punktfunk1Options) -> Result<()> {
     // (harmless — the loops' `is_armed()` gate is always false). The unified `serve` shares one
     // recorder across mgmt + both streaming paths instead.
     let stats = StatsRecorder::new(crate::stats_recorder::default_dir());
-    rt.block_on(serve(opts, np, stats))
+    // Standalone `punktfunk1-host` runs no management API, so advertise no `mgmt` port (0).
+    rt.block_on(serve(opts, 0, np, stats))
 }
 
 fn fingerprint_hex(fp: &[u8; 32]) -> String {
@@ -139,6 +140,9 @@ pub(crate) struct NativeServe {
     /// insecure; `serve --open` turns it off (trusted single-user setups). Pairing is armed on
     /// demand from the web console (arm → PIN); paired devices persist.
     pub require_pairing: bool,
+    /// The management API's TCP port, advertised over mDNS so a client browses the game library on
+    /// the same host IP (the unified `serve` always runs the mgmt API, so this is its bind port).
+    pub mgmt_port: u16,
 }
 
 /// Options for the native host when the unified `serve --native` runs it: real virtual capture,
@@ -166,6 +170,7 @@ pub(crate) fn native_serve_opts(cfg: &NativeServe) -> Punktfunk1Options {
 
 pub(crate) async fn serve(
     opts: Punktfunk1Options,
+    mgmt_port: u16,
     np: Arc<NativePairing>,
     stats: Arc<StatsRecorder>,
 ) -> Result<()> {
@@ -198,6 +203,8 @@ pub(crate) async fn serve(
             &fingerprint_hex(&fingerprint),
             opts.require_pairing,
             &h.uniqueid,
+            // 0 = standalone `punktfunk1-host` (no mgmt API) → don't advertise an `mgmt` port.
+            (mgmt_port != 0).then_some(mgmt_port),
         )
         .map_err(|e| tracing::warn!(error = %format!("{e:#}"), "native mDNS advertise failed (continuing)"))
         .ok(),
@@ -3864,6 +3871,7 @@ mod tests {
                     pairing_pin: None,
                     paired_store: None, // unused: the shared `np` IS the store handle
                 },
+                0, // no mgmt API in this test → advertise no `mgmt` mDNS port
                 np_host,
                 StatsRecorder::new(
                     std::env::temp_dir().join(format!("pf-approval-stats-{}", std::process::id())),

crates/punktfunk-host/src/windows/install.rs

@@ -226,7 +226,8 @@ fn web_setup(args: &[String]) -> Result<()> {
         bail!("web launcher missing: {}", cmd.display());
     }
     register_web_task(&cmd)?;
-    // 4. firewall: inbound TCP 3000
+    // 4. firewall: inbound TCP 3000. The console serves HTTPS (HTTP/1.1 over TLS) with the host's
+    //    identity cert. (No UDP/HTTP-3: browsers won't use QUIC against a self-signed/no-SAN cert.)
     if !run_quiet(
         "netsh",
         &[
@@ -251,7 +252,7 @@ fn web_setup(args: &[String]) -> Result<()> {
         std::thread::sleep(std::time::Duration::from_secs(1));
     }
     run_quiet("schtasks", &["/run", "/tn", WEB_TASK]);
-    println!("web console set up + started (http://<host-ip>:3000)");
+    println!("web console set up + started (https://<host-ip>:3000)");
     Ok(())
 }
 

docs-site/content/docs/bazzite.md

@@ -92,6 +92,21 @@ systemctl --user enable --now punktfunk-web
 journalctl --user -u punktfunk-web-init | sed -n 's/.*password generated: //p'
 ```
 
+### Console login password
+
+The console is password-protected. On first start `punktfunk-web-init` generates a random login
+password and saves it to `~/.config/punktfunk/web-password` (as `PUNKTFUNK_UI_PASSWORD=…`). Read it
+back at any time — from the init service's journal, or straight from the file:
+
+```sh
+journalctl --user -u punktfunk-web-init | sed -n 's/.*password generated: //p'
+sed -n 's/^PUNKTFUNK_UI_PASSWORD=//p' ~/.config/punktfunk/web-password
+```
+
+To set your own password, edit that file (`PUNKTFUNK_UI_PASSWORD=<your-password>`) and restart the
+console: `systemctl --user restart punktfunk-web`. Forgot it? This is the recovery path linked from
+the console login screen — see [Forgot your Password?](/docs/forgot-password).
+
 ## Good to know
 
 - **gamescope 3.16.22 or newer is required.** Older versions can deadlock during capture. Bazzite's

docs-site/content/docs/fedora-kde.md

@@ -111,6 +111,30 @@ journalctl --user -u punktfunk-host -f          # watch a client connect
 The host now listens on `9777` (native punktfunk/1) + the GameStream ports, and advertises over
 mDNS. It requires **PIN pairing** by default (secure on a LAN); pair once from your client.
 
+### Web console
+
+The console (status, paired devices, arm pairing) ships as `punktfunk-web` — enable it, then open
+`http://<host-ip>:3000`:
+
+```sh
+systemctl --user enable --now punktfunk-web
+```
+
+#### Console login password
+
+The console is password-protected. On first start `punktfunk-web-init` generates a random login
+password and saves it to `~/.config/punktfunk/web-password` (as `PUNKTFUNK_UI_PASSWORD=…`). Read it
+back at any time — from the init service's journal, or straight from the file:
+
+```sh
+journalctl --user -u punktfunk-web-init | sed -n 's/.*password generated: //p'
+sed -n 's/^PUNKTFUNK_UI_PASSWORD=//p' ~/.config/punktfunk/web-password
+```
+
+To set your own password, edit that file (`PUNKTFUNK_UI_PASSWORD=<your-password>`) and restart the
+console: `systemctl --user restart punktfunk-web`. Forgot it? This is the recovery path linked from
+the console login screen — see [Forgot your Password?](/docs/forgot-password).
+
 ## 4. Connect a client
 
 From any [client](/docs/clients) — `punktfunk-client --discover` finds the host on the LAN. On

docs-site/content/docs/forgot-password.md

@@ -0,0 +1,60 @@
+---
+title: Forgot your Password?
+description: Where the punktfunk web console login password lives — and how to read or reset it — on each host platform.
+---
+
+The punktfunk **web console** (status, paired devices, PIN pairing) is protected by a login
+password. That password is generated — or, on Windows, chosen — when the console is first set up, and
+it lives on the **host**. So if you can't get past the login screen, you recover or change it on the
+host machine itself, not from the browser.
+
+> This is **only** the web console login. It is **not** your client/device pairing — if a client
+> won't connect, that's [Pairing](/docs/pairing), not this password.
+
+## Find your host
+
+Jump to your host platform for exactly where the password lives and how to read or reset it:
+
+| Host | Where the password lives | Section |
+|------|--------------------------|---------|
+| **Ubuntu — GNOME** | `~/.config/punktfunk/web-password` | [Console login password](/docs/ubuntu-gnome#console-login-password) |
+| **Ubuntu — KDE Plasma** | `~/.config/punktfunk/web-password` | [Console login password](/docs/ubuntu-kde#console-login-password) |
+| **Fedora — KDE Plasma** | `~/.config/punktfunk/web-password` | [Console login password](/docs/fedora-kde#console-login-password) |
+| **Bazzite — gamescope** | `~/.config/punktfunk/web-password` | [Console login password](/docs/bazzite#console-login-password) |
+| **SteamOS (host)** | `~/.config/punktfunk/web.env` | [Console login password](/docs/steamos-host#console-login-password) |
+| **Windows host** | `%ProgramData%\punktfunk\web-password` | [Console login password](/docs/windows-host#console-login-password) |
+
+## The short version
+
+**Linux packages (apt / RPM / Bazzite).** The password is generated on first start and saved to
+`~/.config/punktfunk/web-password`. Read it back:
+
+```sh
+# from the init service's journal (printed once, when it was generated):
+journalctl --user -u punktfunk-web-init | sed -n 's/.*password generated: //p'
+# …or straight from the file:
+sed -n 's/^PUNKTFUNK_UI_PASSWORD=//p' ~/.config/punktfunk/web-password
+```
+
+Change it by editing that file (`PUNKTFUNK_UI_PASSWORD=<your-password>`) and restarting the console:
+`systemctl --user restart punktfunk-web`.
+
+**SteamOS / Steam Deck.** Same idea, but the installer writes it to `~/.config/punktfunk/web.env`
+and prints it at the end of the install run:
+
+```sh
+sed -n 's/^PUNKTFUNK_UI_PASSWORD=//p' ~/.config/punktfunk/web.env
+```
+
+Edit that file and `systemctl --user restart punktfunk-web` to change it.
+
+**Windows.** You pick the password during install (a secure random default is pre-filled and shown
+on the installer's final page). It lives in `%ProgramData%\punktfunk\web-password`. To change it,
+edit the file and restart the **PunktfunkWeb** task — in an **elevated** PowerShell:
+
+```powershell
+notepad "$env:ProgramData\punktfunk\web-password"   # set PUNKTFUNK_UI_PASSWORD=<your-password>
+schtasks /End /TN PunktfunkWeb; schtasks /Run /TN PunktfunkWeb
+```
+
+Still stuck? See [Troubleshooting](/docs/troubleshooting).

docs-site/content/docs/meta.json

@@ -23,7 +23,9 @@
     "---Configuration---",
     "configuration",
     "host-cli",
+    "---Troubleshooting---",
     "troubleshooting",
+    "forgot-password",
     "---Project---",
     "roadmap",
     "channels",

docs-site/content/docs/steamos-host.md

@@ -91,6 +91,20 @@ By default the host **requires PIN pairing** (secure). Two ways to pair:
 
 On a trusted home LAN you can instead install with `--open` and skip pairing entirely.
 
+### Console login password
+
+The installer generates a random console login password and writes it to
+`~/.config/punktfunk/web.env` (as `PUNKTFUNK_UI_PASSWORD=…`); it's also printed at the end of the
+install run (step 2). Read it back with:
+
+```sh
+sed -n 's/^PUNKTFUNK_UI_PASSWORD=//p' ~/.config/punktfunk/web.env
+```
+
+To set your own password, edit that file and restart the console:
+`systemctl --user restart punktfunk-web`. Forgot it? This is the recovery path linked from the
+console login screen — see [Forgot your Password?](/docs/forgot-password).
+
 ## 4. Verify
 
 ```sh

docs-site/content/docs/ubuntu-gnome.md

@@ -107,6 +107,21 @@ systemctl --user enable --now punktfunk-web
 journalctl --user -u punktfunk-web-init | sed -n 's/.*password generated: //p'
 ```
 
+#### Console login password
+
+The console is password-protected. On first start `punktfunk-web-init` generates a random login
+password and saves it to `~/.config/punktfunk/web-password` (as `PUNKTFUNK_UI_PASSWORD=…`). Read it
+back at any time — from the init service's journal, or straight from the file:
+
+```sh
+journalctl --user -u punktfunk-web-init | sed -n 's/.*password generated: //p'
+sed -n 's/^PUNKTFUNK_UI_PASSWORD=//p' ~/.config/punktfunk/web-password
+```
+
+To set your own password, edit that file (`PUNKTFUNK_UI_PASSWORD=<your-password>`) and restart the
+console: `systemctl --user restart punktfunk-web`. Forgot it? This is the recovery path linked from
+the console login screen — see [Forgot your Password?](/docs/forgot-password).
+
 To run the host automatically at boot — including on a **headless** machine with no monitor — see
 [Running as a Service](/docs/running-as-a-service).
 

docs-site/content/docs/ubuntu-kde.md

@@ -80,6 +80,21 @@ systemctl --user enable --now punktfunk-web
 journalctl --user -u punktfunk-web-init | sed -n 's/.*password generated: //p'
 ```
 
+#### Console login password
+
+The console is password-protected. On first start `punktfunk-web-init` generates a random login
+password and saves it to `~/.config/punktfunk/web-password` (as `PUNKTFUNK_UI_PASSWORD=…`). Read it
+back at any time — from the init service's journal, or straight from the file:
+
+```sh
+journalctl --user -u punktfunk-web-init | sed -n 's/.*password generated: //p'
+sed -n 's/^PUNKTFUNK_UI_PASSWORD=//p' ~/.config/punktfunk/web-password
+```
+
+To set your own password, edit that file (`PUNKTFUNK_UI_PASSWORD=<your-password>`) and restart the
+console: `systemctl --user restart punktfunk-web`. Forgot it? This is the recovery path linked from
+the console login screen — see [Forgot your Password?](/docs/forgot-password).
+
 To run it at boot — including fully **headless**, with KWin brought up automatically and no login —
 see [Running as a Service](/docs/running-as-a-service); the headless appliance is built around KDE.
 

docs-site/content/docs/windows-host.md

@@ -51,10 +51,24 @@ Packaging internals live in
 ### Web console & pairing
 
 The installer also sets up the **web management console** (status, paired devices, the PIN pairing
-flow): it bundles the console plus its own runtime and runs it as the **`PunktfunkWeb`** service on
-**`http://<this-PC>:3000`**, starting at boot. During setup you choose the console **login password**
-(pre-filled with a secure random default and shown again on the final page); change it later in
-`%ProgramData%\punktfunk\web-password`.
+flow): it bundles the console plus its own runtime and runs it as the **`PunktfunkWeb`** task on
+**`http://<this-PC>:3000`**, starting at boot.
+
+#### Console login password
+
+During setup you choose the console **login password** — it's pre-filled with a secure random default
+and shown again on the installer's final page. It's stored in `%ProgramData%\punktfunk\web-password`
+(as `PUNKTFUNK_UI_PASSWORD=…`), readable only by Administrators and SYSTEM.
+
+To change it, edit that file and restart the console task. In an **elevated** PowerShell:
+
+```powershell
+notepad "$env:ProgramData\punktfunk\web-password"   # set PUNKTFUNK_UI_PASSWORD=<your-password>
+schtasks /End /TN PunktfunkWeb; schtasks /Run /TN PunktfunkWeb
+```
+
+Forgot it? This is the recovery path linked from the console login screen — see
+[Forgot your Password?](/docs/forgot-password).
 
 The host **requires PIN pairing** by default (secure on a LAN). To connect the first time, open the
 console from any browser on the LAN, log in, go to **Devices → arm pairing**, and enter the PIN on

packaging/README.md

@@ -96,11 +96,11 @@ systemctl --user enable --now punktfunk-host
 # Management web console (pairing + status) — pulled in by default (the host RPM Recommends it;
 # `--no-install-recommends` / headless-only boxes can skip it). Enable it and read the login password:
 systemctl --user enable --now punktfunk-web
-journalctl --user -u punktfunk-web-init | sed -n 's/.*password generated: //p'   # then open http://<host-ip>:3000
+journalctl --user -u punktfunk-web-init | sed -n 's/.*password generated: //p'   # then open https://<host-ip>:3000
 ```
 
 Pair a stock Moonlight client (mDNS-discovered), or connect the native punktfunk/1 client — via the
-web console at `http://<host-ip>:3000` or directly.
+web console at `https://<host-ip>:3000` or directly.
 
 > ⚠️ **COPR caveat:** COPR's mock chroot has no `bun`, so a COPR build produces only
 > `punktfunk` + `punktfunk-client` — **not** `punktfunk-web`. For the console on a COPR/bootc host,

packaging/arch/PKGBUILD

@@ -30,7 +30,7 @@ license=('MIT OR Apache-2.0')
 makedepends=('rust' 'cargo' 'clang' 'cmake' 'nasm' 'pkgconf' 'git'
              'gtk4' 'libadwaita' 'sdl3' 'ffmpeg' 'pipewire' 'wayland' 'libxkbcommon' 'opus' 'libei')
 
-# Opt-in punktfunk-web: only then is bun (build tool; the console runs on plain nodejs) required.
+# Opt-in punktfunk-web: only then is bun (the build tool AND the vendored runtime) required.
 if [ "${PF_WITH_WEB:-0}" = 1 ]; then
   pkgname+=('punktfunk-web')
   makedepends+=('bun')   # `bun-bin` from the AUR if bun isn't in your configured repos
@@ -51,7 +51,8 @@ build() {
   # NVIDIA builder. On a GPU-less builder symlink the CUDA stub into the link path first (same
   # caveat the RPM documents): ln -s "$(find / -name libcuda.so -path '*stubs*'|head -1)" /usr/lib/
   cargo build --release --locked -p punktfunk-host -p punktfunk-client-linux
-  # Management web console (opt-in): the node-server .output bundle (built with bun, run with node).
+  # Management web console (opt-in): the Nitro `bun`-preset .output bundle (Bun.serve TLS),
+  # built AND run with bun.
   if [ "${PF_WITH_WEB:-0}" = 1 ]; then
     ( cd web && bun install --frozen-lockfile && bun run build )
   fi
@@ -138,19 +139,21 @@ package_punktfunk-client() {
 }
 
 package_punktfunk-web() {
-  pkgdesc="punktfunk management web console (Nitro/Node SSR) — pairing + status in the browser"
-  arch=('any')
-  # Runtime is plain node (the .output is portable JS — bun was only the build tool). Auto-wired to
-  # the host's mgmt token via the systemd --user units; enable with `systemctl --user enable --now punktfunk-web`.
-  depends=('nodejs')
+  pkgdesc="punktfunk management web console (Nitro SSR on bun, HTTPS/HTTP-1.1 over TLS) — pairing + status in the browser"
+  # bun is the runtime (Bun.serve), and it's a native binary we vendor, so this package is
+  # arch-specific (not 'any'). Auto-wired to the host's mgmt token + identity cert via the systemd
+  # --user units; enable with `systemctl --user enable --now punktfunk-web`. No nodejs/bun dependency.
   local R; R="$(_repo)"
 
-  # Pre-built node-server bundle (from build()) + a PATH-stable launcher (matches the .deb/.rpm).
+  # Pre-built bun-preset bundle (from build()) + a PATH-stable launcher (matches the .deb/.rpm).
   install -d "$pkgdir/usr/share/punktfunk-web/.output"
   cp -r "$R/web/.output/server" "$pkgdir/usr/share/punktfunk-web/.output/server"
   cp -r "$R/web/.output/public" "$pkgdir/usr/share/punktfunk-web/.output/public"
+  # Vendor the build env's bun into a private dir so it never collides with a
+  # system-wide bun on PATH.
+  install -Dm0755 "$(command -v bun)" "$pkgdir/usr/lib/punktfunk-web/bun"
   install -d "$pkgdir/usr/bin"
-  printf '%s\n' '#!/bin/sh' 'exec /usr/bin/node /usr/share/punktfunk-web/.output/server/index.mjs "$@"' \
+  printf '%s\n' '#!/bin/sh' 'exec /usr/lib/punktfunk-web/bun /usr/share/punktfunk-web/.output/server/index.mjs "$@"' \
     > "$pkgdir/usr/bin/punktfunk-web-server"
   chmod 0755 "$pkgdir/usr/bin/punktfunk-web-server"
   # systemd USER units: the console runs per-user; web-init generates the login password on first start.

packaging/arch/README.md

@@ -14,8 +14,9 @@ scripts. On a **Steam Deck used as a client you want `punktfunk-client`** (it's
 
 A third member, **`punktfunk-web`** (the browser management console — pairing + status), is
 **opt-in**: build it by setting `PF_WITH_WEB=1`, which requires **`bun`** at build time (`bun-bin`
-from the AUR if it isn't in your repos; the console then runs on plain `nodejs`). A default
-`makepkg` builds only host+client with no JS tooling — mirroring the RPM spec's `%bcond_with web`.
+from the AUR if it isn't in your repos). bun is also the **runtime** — the console serves HTTPS
+(HTTP/1.1 over TLS) via `Bun.serve`, so the package vendors the bun binary (no `nodejs` dependency). A
+default `makepkg` builds only host+client with no JS tooling — mirroring the RPM spec's `%bcond_with web`.
 
 > **Host encode: NVENC on NVIDIA, VAAPI on AMD/Intel** (`PUNKTFUNK_ENCODER=auto` picks one). The host
 > now has a VAAPI encoder + zero-copy dmabuf path alongside NVENC/CUDA, so `punktfunk-host` works on
@@ -41,7 +42,7 @@ cp /usr/share/punktfunk/host.env.bazzite ~/.config/punktfunk/host.env   # gamesc
 systemctl --user enable --now punktfunk-host
 # Web console (if you installed the punktfunk-web package): enable it + read the login password.
 systemctl --user enable --now punktfunk-web
-journalctl --user -u punktfunk-web-init | sed -n 's/.*password generated: //p'   # open http://<host-ip>:3000
+journalctl --user -u punktfunk-web-init | sed -n 's/.*password generated: //p'   # open https://<host-ip>:3000
 ```
 NVENC/EGL come from the NVIDIA driver: `sudo pacman -S --needed nvidia-utils`. Arch's stock
 `ffmpeg` already has NVENC built in — no RPM-Fusion-style swap needed (unlike Fedora).

packaging/bazzite/README.md

@@ -223,7 +223,7 @@ systemctl --user enable --now punktfunk-host
 # Management web console (pairing + status), if you installed punktfunk-web (it ships in the Gitea
 # RPM registry / bootc image — COPR can't build it; see ../rpm/README.md). Read the login password:
 systemctl --user enable --now punktfunk-web
-journalctl --user -u punktfunk-web-init | sed -n 's/.*password generated: //p'   # then open http://<host-ip>:3000
+journalctl --user -u punktfunk-web-init | sed -n 's/.*password generated: //p'   # then open https://<host-ip>:3000
 ```
 
 Check health and logs:

packaging/copr/README.md

@@ -36,10 +36,11 @@ parallelism with `CARGO_BUILD_JOBS` in the spec's `%build`.
 
 ## The web console subpackage (`punktfunk-web`)
 
-The spec can also build the management web console as a noarch `punktfunk-web` subpackage, but it's
-gated behind `%bcond_with web` and **OFF by default** — building the Nitro/Node SSR bundle needs
-`bun`, which COPR's mock chroot does not provide. So a stock COPR build produces only `punktfunk`
-+ `punktfunk-client`.
+The spec can also build the management web console as a `punktfunk-web` subpackage, but it's
+gated behind `%bcond_with web` and **OFF by default** — building (and now *running*) the Nitro
+console needs `bun`, which COPR's mock chroot does not provide. The package vendors the build env's
+bun binary (the console serves HTTPS — HTTP/1.1 over TLS — via `Bun.serve`), so it is arch-specific, not noarch.
+A stock COPR build produces only `punktfunk` + `punktfunk-client`.
 
 Two ways to get the console:
 - **Recommended:** install it from the Gitea RPM registry (`packaging/rpm/README.md`, Option A),

packaging/debian/README.md

@@ -45,7 +45,7 @@ sudo usermod -aG input "$USER"          # virtual gamepads (re-login to take eff
 mkdir -p ~/.config/punktfunk
 cp /usr/share/punktfunk-host/host.env.example ~/.config/punktfunk/host.env   # then edit
 systemctl --user enable --now punktfunk-host
-# Web console — enable it and read the auto-generated login password (then open http://<host-ip>:3000):
+# Web console — enable it and read the auto-generated login password (then open https://<host-ip>:3000):
 systemctl --user enable --now punktfunk-web
 journalctl --user -u punktfunk-web-init | sed -n 's/.*password generated: //p'
 ```

packaging/debian/build-web-deb.sh

@@ -1,13 +1,15 @@
 #!/usr/bin/env bash
-# Build the punktfunk-web .deb — the management web console (Nitro/Node SSR + React).
+# Build the punktfunk-web .deb — the management web console (Nitro SSR on bun + React).
 #
-# Architecture: all — the .output is pre-built JS (no compiled binary, so NO dpkg-shlibdeps).
-# Runtime is apt-native: Depends on nodejs (>= 20). The host's punktfunk-host .deb Recommends this,
-# so a default `apt install punktfunk-host` pulls the console too. It is auto-wired to the host's
-# mgmt token via the systemd --user units (no env editing on a packaged install).
+# Runtime is BUN: the console is built with Nitro's `bun` preset + a custom Bun.serve entry that
+# serves HTTPS (HTTP/1.1 over TLS) with the host's identity cert (web/nitro-entry/bun-https.mjs). Bun
+# isn't in apt, so we VENDOR a bun binary into the package — which makes the
+# package per-arch (amd64/arm64), NOT `all`. The host's punktfunk-host .deb Recommends this, so a
+# default `apt install punktfunk-host` pulls the console too; it is auto-wired to the host's mgmt
+# token + identity cert via the systemd --user units (no env editing on a packaged install).
 #
-# Usage: VERSION=0.0.1~ci42.gdeadbee bash packaging/debian/build-web-deb.sh
-# Output: dist/punktfunk-web_<version>_all.deb
+# Usage: VERSION=0.0.1~ci42.gdeadbee [DEB_ARCH=amd64] [BUN_BIN=/path/to/bun] bash packaging/debian/build-web-deb.sh
+# Output: dist/punktfunk-web_<version>_<arch>.deb
 set -euo pipefail
 
 VERSION="${VERSION:?set VERSION (e.g. 0.0.1 or 0.0.1~ci42.gdeadbee)}"
@@ -15,14 +17,23 @@ PKG="punktfunk-web"
 ROOTDIR="$(cd "$(dirname "$0")/../.." && pwd)"
 cd "$ROOTDIR"
 
+# Per-arch: vendor bun for the target Debian arch. Map deb arch → bun's release arch tag.
+DEB_ARCH="${DEB_ARCH:-$(dpkg --print-architecture)}"
+BUN_VERSION="${BUN_VERSION:-1.3.14}" # pinned bun build vendored into the package
+case "$DEB_ARCH" in
+  amd64) BUN_ARCH=x64 ;;
+  arm64) BUN_ARCH=aarch64 ;;
+  *) echo "ERROR: unsupported DEB_ARCH=$DEB_ARCH (want amd64 or arm64)" >&2; exit 1 ;;
+esac
+
 # Build the console if not already built (.output is gitignored — CI builds it each run).
 if [ ! -f web/.output/server/index.mjs ]; then
   echo "==> building web console"
   (cd web && bun install --frozen-lockfile && bun run build)
 fi
-# The build MUST be the node-server preset (runnable by apt-native node) — never bun.
-if grep -rq 'Bun\.serve' web/.output/server/index.mjs 2>/dev/null; then
-  echo "ERROR: web/.output contains Bun.serve — wrong nitro preset (need 'node-server')" >&2
+# The build MUST be the bun preset (our Bun.serve TLS entry) — node can't run Bun.serve.
+if ! grep -rq 'Bun\.serve' web/.output/server/index.mjs 2>/dev/null; then
+  echo "ERROR: web/.output has no Bun.serve — wrong nitro preset (need 'bun' + the custom entry)" >&2
   exit 1
 fi
 
@@ -30,6 +41,24 @@ STAGE="$(mktemp -d)"
 trap 'rm -rf "$STAGE"' EXIT
 SHAREDIR="$STAGE/usr/share/$PKG"
 DOCDIR="$STAGE/usr/share/doc/$PKG"
+LIBDIR="$STAGE/usr/lib/$PKG"
+
+# --- vendor the bun runtime --------------------------------------------------
+# Honor a pre-fetched bun (CI may cache it) via BUN_BIN; else download the pinned release.
+mkdir -p "$LIBDIR"
+if [ -n "${BUN_BIN:-}" ]; then
+  echo "==> vendoring bun from BUN_BIN=$BUN_BIN"
+  install -m0755 "$BUN_BIN" "$LIBDIR/bun"
+else
+  url="https://github.com/oven-sh/bun/releases/download/bun-v${BUN_VERSION}/bun-linux-${BUN_ARCH}.zip"
+  echo "==> downloading bun $BUN_VERSION ($BUN_ARCH) from $url"
+  tmp="$(mktemp -d)"
+  curl -fsSL "$url" -o "$tmp/bun.zip"
+  unzip -q "$tmp/bun.zip" -d "$tmp"
+  install -m0755 "$tmp/bun-linux-${BUN_ARCH}/bun" "$LIBDIR/bun"
+  rm -rf "$tmp"
+fi
+"$LIBDIR/bun" --version
 
 # --- file layout -------------------------------------------------------------
 mkdir -p "$SHAREDIR/.output"
@@ -39,7 +68,9 @@ cp -r web/.output/public "$SHAREDIR/.output/public"
 install -d "$STAGE/usr/bin"
 cat > "$STAGE/usr/bin/punktfunk-web-server" <<'WRAP'
 #!/bin/sh
-exec /usr/bin/node /usr/share/punktfunk-web/.output/server/index.mjs "$@"
+# The console runs on the vendored bun (Bun.serve TLS); bun lives privately under
+# /usr/lib/punktfunk-web so it never collides with a system-wide bun on PATH.
+exec /usr/lib/punktfunk-web/bun /usr/share/punktfunk-web/.output/server/index.mjs "$@"
 WRAP
 chmod 0755 "$STAGE/usr/bin/punktfunk-web-server"
 install -Dm0644 scripts/punktfunk-web.service      "$STAGE/usr/lib/systemd/user/punktfunk-web.service"
@@ -71,18 +102,19 @@ install -d "$STAGE/DEBIAN"
 cat > "$STAGE/DEBIAN/control" <<EOF
 Package: $PKG
 Version: $VERSION
-Architecture: all
+Architecture: $DEB_ARCH
 Maintainer: unom <noreply@anthropic.com>
 Installed-Size: $INSTALLED_KB
 Section: net
 Priority: optional
 Homepage: https://git.unom.io/unom/punktfunk
-Depends: nodejs (>= 20)
-Description: punktfunk management web console (Nitro/Node SSR + React)
+Description: punktfunk management web console (Nitro SSR on bun + React)
  The browser console for a punktfunk streaming host: status, paired devices, and the
  SPAKE2 PIN pairing flow every client needs. Runs as a systemd --user service on port
- 3000, login-gated (a password generated on first start), proxying the host's loopback
- HTTPS management API with a bearer token injected server-side (never sent to the browser).
+ 3000 over HTTPS (HTTP/1.1 over TLS, with the host's own identity cert), login-gated (a
+ password generated on first start), proxying the host's loopback HTTPS management API
+ with a bearer token injected server-side (never sent to the browser). Bundles its own
+ bun runtime (no system nodejs/bun dependency).
  .
  Auto-wired to the host on a packaged install: it sources the host's
  ~/.config/punktfunk/mgmt-token and a generated login password — no env editing. Enable
@@ -98,14 +130,14 @@ if [ "$1" = "configure" ]; then
     echo "A login password is generated on first start — read it with:"
     echo "    journalctl --user -u punktfunk-web-init | sed -n 's/.*password generated: //p'"
     echo "    (or: sed -n 's/^PUNKTFUNK_UI_PASSWORD=//p' ~/.config/punktfunk/web-password)"
-    echo "Then open http://<host-ip>:3000"
+    echo "Then open https://<host-ip>:3000 (self-signed host cert — trust it once)"
 fi
 exit 0
 EOF
 chmod 0755 "$STAGE/DEBIAN/postinst"
 
 mkdir -p dist
-OUT="dist/${PKG}_${VERSION}_all.deb"
+OUT="dist/${PKG}_${VERSION}_${DEB_ARCH}.deb"
 dpkg-deb --root-owner-group --build "$STAGE" "$OUT" >/dev/null
 echo "built $OUT"
 dpkg-deb -I "$OUT" | sed -n 's/^/  /p' | grep -E 'Version|Installed-Size|Depends' || true

packaging/rpm/punktfunk.spec

@@ -16,7 +16,7 @@
 # only new runtime bits are ffmpeg-libs (RPM Fusion) + opus + libei.
 ################################################################################
 
-Name:           punktfunk
+Name:           Punktfunk
 # Version/Release are overridable so CI can stamp a rolling snapshot: a canary main build passes
 #   --define "pf_version 0.3.0" --define "pf_release 0.ci42.gdeadbee"
 # (Release starting "0." sorts BEFORE the eventual "1" release; the canary base stays one minor
@@ -42,11 +42,11 @@ ExclusiveArch:  x86_64
 # Recommends). Drop it from the auto-Requires, mirroring the Debian package's NVIDIA filter.
 %global __requires_exclude ^libcuda\\.so.*$
 
-# Management web console subpackage (punktfunk-web). OFF by default: building the Nitro/Node SSR
-# bundle needs `bun`, which a plain rpmbuild / COPR mock chroot does NOT have. CI's builder image
-# (ci/fedora-rpm.Dockerfile) DOES have bun and builds with `--with web`, so the Gitea RPM registry
-# carries punktfunk-web. COPR (no bun) builds host+client only — use the Gitea registry for the
-# console, or enable bun + `--with web` in the COPR project. Mirrors the Debian punktfunk-web .deb.
+# Management web console subpackage (punktfunk-web). OFF by default: building the Nitro SSR bundle
+# (and running it) needs `bun`, which a plain rpmbuild / COPR mock chroot does NOT have. CI's builder
+# image (ci/fedora-rpm.Dockerfile) DOES have bun and builds with `--with web`, so the Gitea RPM
+# registry carries punktfunk-web. COPR (no bun) builds host+client only — use the Gitea registry for
+# the console, or enable bun + `--with web` in the COPR project. Mirrors the Debian punktfunk-web .deb.
 %bcond_with web
 
 # --- Build toolchain ---------------------------------------------------------
@@ -135,19 +135,19 @@ virtual output at exactly this client's resolution and refresh rate — no scali
 
 %if %{with web}
 %package web
-Summary:        punktfunk management web console (Nitro/Node SSR + React)
-BuildArch:      noarch
-# Runtime is plain node (the .output is portable JS — bun is only the build tool). Fedora 41+
-# ships nodejs >= 20, which the node-server build needs.
-Requires:       nodejs
+Summary:        punktfunk management web console (Nitro SSR on bun + React)
+# Runtime is BUN (the console uses Nitro's `bun` preset + a Bun.serve TLS entry — node can't
+# run it). Bun isn't in Fedora repos, so we VENDOR a bun binary into the package, which makes this
+# subpackage arch-specific (it can no longer be noarch). No system nodejs/bun dependency.
 
 %description web
 The browser console for a punktfunk streaming host: status, paired devices, and the SPAKE2
-PIN pairing flow every client needs. Runs as a systemd --user service on port 3000, login-gated
-(a password generated on first start), proxying the host's loopback HTTPS management API with a
-bearer token injected server-side (never sent to the browser). Auto-wired to the host on a
-packaged install — it sources the host's mgmt token and a generated login password, no env
-editing. Enable with `systemctl --user enable --now punktfunk-web`.
+PIN pairing flow every client needs. Runs as a systemd --user service on port 3000 over HTTPS
+(HTTP/1.1 over TLS, with the host's own identity cert), login-gated (a password generated on first
+start), proxying the host's loopback HTTPS management API with a bearer token injected server-side
+(never sent to the browser). Auto-wired to the host on a packaged install — it sources the host's
+mgmt token, identity cert, and a generated login password, no env editing. Bundles its own bun
+runtime. Enable with `systemctl --user enable --now punktfunk-web`.
 %endif
 
 %prep
@@ -163,11 +163,11 @@ export PUNKTFUNK_BUILD_VERSION="%{version}-%{release}"
 cargo build --release --locked -p punktfunk-host -p punktfunk-client-linux
 
 %if %{with web}
-# Management web console: build the Nitro/Node SSR bundle (node-server preset) with bun. The
-# .output is portable JS run at runtime by plain node; bun is only the build tool (CI image).
+# Management web console: build the Nitro SSR bundle with bun (the `bun` preset + our Bun.serve
+# TLS entry). bun is both the build tool AND the runtime (vendored in %%install below).
 (cd web && bun install --frozen-lockfile && bun run build)
-if grep -q 'Bun\.serve' web/.output/server/index.mjs; then
-  echo "ERROR: web build is a bun bundle (Bun.serve) — need the node-server preset" >&2
+if ! grep -q 'Bun\.serve' web/.output/server/index.mjs; then
+  echo "ERROR: web build is not a bun bundle — need the 'bun' preset + custom entry" >&2
   exit 1
 fi
 %endif
@@ -247,10 +247,14 @@ install -Dm0644 api/openapi.json                  %{buildroot}%{_datadir}/%{name
 install -d %{buildroot}%{_datadir}/punktfunk-web/.output
 cp -r web/.output/server %{buildroot}%{_datadir}/punktfunk-web/.output/server
 cp -r web/.output/public %{buildroot}%{_datadir}/punktfunk-web/.output/public
-# PATH-stable launcher (matches the .deb's /usr/bin/punktfunk-web-server).
+# Vendor the bun runtime (the build env's bun — the CI rpm image) into
+# a private libexec dir so it never collides with a system-wide bun on PATH. This is why the web
+# subpackage is arch-specific (above): bun is a native binary.
+install -Dm0755 "$(command -v bun)" %{buildroot}%{_libexecdir}/punktfunk-web/bun
+# PATH-stable launcher (matches the .deb's /usr/bin/punktfunk-web-server) — runs on the vendored bun.
 cat > %{buildroot}%{_bindir}/punktfunk-web-server <<'WRAP'
 #!/bin/sh
-exec /usr/bin/node /usr/share/punktfunk-web/.output/server/index.mjs "$@"
+exec /usr/libexec/punktfunk-web/bun /usr/share/punktfunk-web/.output/server/index.mjs "$@"
 WRAP
 chmod 0755 %{buildroot}%{_bindir}/punktfunk-web-server
 # systemd --user units: the console runs per-user; web-init generates the login password.
@@ -286,6 +290,8 @@ install -Dm0644 web/web.env.example                %{buildroot}%{_datadir}/punkt
 %files web
 %license LICENSE-MIT LICENSE-APACHE THIRD-PARTY-NOTICES.txt
 %{_bindir}/punktfunk-web-server
+%dir %{_libexecdir}/punktfunk-web
+%{_libexecdir}/punktfunk-web/bun
 %dir %{_datadir}/punktfunk-web
 %{_datadir}/punktfunk-web/.output
 %{_datadir}/punktfunk-web/web-init.sh

packaging/windows/punktfunk-host.iss

@@ -202,7 +202,7 @@ Filename: "{app}\punktfunk-host.exe"; Parameters: "service uninstall"; Flags: ru
 ; Stop + remove the PunktfunkWeb task and its firewall rule (leaves %ProgramData%\punktfunk config,
 ; like the host uninstall does).
 Filename: "powershell.exe"; \
-  Parameters: "-NoProfile -ExecutionPolicy Bypass -Command ""Stop-ScheduledTask -TaskName PunktfunkWeb -ErrorAction SilentlyContinue; Get-NetTCPConnection -LocalPort 3000 -State Listen -ErrorAction SilentlyContinue | ForEach-Object {{ Stop-Process -Id $_.OwningProcess -Force -ErrorAction SilentlyContinue }; Unregister-ScheduledTask -TaskName PunktfunkWeb -Confirm:$false -ErrorAction SilentlyContinue; Get-NetFirewallRule -Name 'PunktfunkWeb-TCP-3000' -ErrorAction SilentlyContinue | Remove-NetFirewallRule"""; \
+  Parameters: "-NoProfile -ExecutionPolicy Bypass -Command ""Stop-ScheduledTask -TaskName PunktfunkWeb -ErrorAction SilentlyContinue; Get-NetTCPConnection -LocalPort 3000 -State Listen -ErrorAction SilentlyContinue | ForEach-Object {{ Stop-Process -Id $_.OwningProcess -Force -ErrorAction SilentlyContinue }; Unregister-ScheduledTask -TaskName PunktfunkWeb -Confirm:$false -ErrorAction SilentlyContinue; Get-NetFirewallRule -DisplayName 'punktfunk web console (*' -ErrorAction SilentlyContinue | Remove-NetFirewallRule"""; \
   Flags: runhidden waituntilterminated; RunOnceId: "PunktfunkWebCleanup"
 #endif
 

scripts/punktfunk-web.service

@@ -1,9 +1,10 @@
-# punktfunk management web console — systemd USER unit (Nitro/Node SSR, port 3000).
+# punktfunk management web console — systemd USER unit (Nitro SSR on bun, port 3000, HTTPS).
 #
 # Installed by the punktfunk-web .deb to /usr/lib/systemd/user/. AUTO-WIRED — no env editing:
-# it sources the host's mgmt token + the generated login password, and points at the host's
-# loopback HTTPS mgmt API (self-signed cert → NODE_TLS_REJECT_UNAUTHORIZED for the proxy's only
-# outbound hop, which is loopback). Enable per user:
+# it sources the host's mgmt token + the generated login password, serves HTTPS (HTTP/1.1 over TLS)
+# with the host's own identity cert (~/.config/punktfunk/{cert,key}.pem), and points the /api proxy
+# at the host's loopback HTTPS mgmt API (self-signed cert → NODE_TLS_REJECT_UNAUTHORIZED for the
+# proxy's only outbound hop, which is loopback). Enable per user:
 #   systemctl --user enable --now punktfunk-web
 [Unit]
 Description=punktfunk management web console
@@ -22,6 +23,12 @@ Environment=PUNKTFUNK_MGMT_URL=https://127.0.0.1:47990
 Environment=NODE_TLS_REJECT_UNAUTHORIZED=0
 Environment=PORT=3000
 Environment=HOST=0.0.0.0
+# Serve HTTPS (HTTP/1.1 over TLS) with the host's own identity cert; mark the
+# session cookie Secure. The host's `serve` writes these PEMs; if absent at start the unit fails and
+# Restart retries (same as the mgmt-token wait above) rather than silently serving plain HTTP.
+Environment=PUNKTFUNK_UI_TLS_CERT=%h/.config/punktfunk/cert.pem
+Environment=PUNKTFUNK_UI_TLS_KEY=%h/.config/punktfunk/key.pem
+Environment=PUNKTFUNK_UI_SECURE=1
 ExecStart=/usr/bin/punktfunk-web-server
 Restart=on-failure
 RestartSec=2

scripts/steamdeck/README.md

@@ -22,10 +22,10 @@ is only the build environment; `punktfunk-host` is launched directly, not via `d
 rebuild always matches the running OS. Encode is **VAAPI** on the Deck's AMD GPU (NVENC on NVIDIA),
 auto-selected by `PUNKTFUNK_ENCODER=auto`.
 
-The web console is the one part that stays in the container at runtime: it's a Nitro **node-server**
-build (`bun` builds it; **`node` runs it** — bun mis-resolves Nitro's externalized server deps like
-`srvx` at request time), so its service does `distrobox enter pf2 -- … node .output/server/index.mjs`.
-Both `bun` and `nodejs` are provisioned in the container.
+The web console is the one part that stays in the container at runtime: it's a Nitro **`bun`**
+build (`bun` both builds **and runs** it — the bun-preset output uses `Bun.serve` with TLS,
+serving HTTPS (HTTP/1.1 over TLS) with the host's identity cert), so its service does
+`distrobox enter pf2 -- … bun .output/server/index.mjs`. `bun` is provisioned in the container.
 
 ## Scripts
 

scripts/steamdeck/install.sh

@@ -92,8 +92,8 @@ sudo apt-get install -y -qq --no-install-recommends \
     nodejs >/dev/null
 command -v rustc >/dev/null 2>&1 || command -v ~/.cargo/bin/rustc >/dev/null 2>&1 || \
     curl --proto =https --tlsv1.2 -sSf https://sh.rustup.rs | sh -s -- -y --no-modify-path >/dev/null
-# bun builds the web console; node runs it (the node-server preset; bun mis-resolves the Nitro
-# externalized server deps like srvx at request time).
+# bun builds AND runs the web console now (the Nitro `bun` preset + our Bun.serve TLS entry —
+# bun-native output, so the old srvx mis-resolution that forced node no longer applies).
 command -v bun >/dev/null 2>&1 || command -v ~/.bun/bin/bun >/dev/null 2>&1 || \
     curl -fsSL https://bun.sh/install | bash >/dev/null
 '
@@ -199,8 +199,8 @@ EOF
 ok "punktfunk-host.service ($SERVE_ARGS)"
 
 if [ "$WITH_WEB" = 1 ]; then
-    # The console is a Nitro/Node server run by bun; it lives in the build container (bun + node
-    # libs) and proxies to the host's loopback HTTPS mgmt API.
+    # The console is a Nitro server run by bun (Bun.serve, HTTPS — HTTP/1.1 over TLS — with the host's
+    # identity cert); it lives in the build container and proxies to the host's loopback HTTPS mgmt API.
     cat > "$UNITS/punktfunk-web.service" <<EOF
 # Generated by scripts/steamdeck/install.sh — punktfunk web console (bun in the '$BOX' distrobox).
 [Unit]
@@ -208,7 +208,7 @@ Description=punktfunk management web console
 After=punktfunk-host.service
 
 [Service]
-ExecStart=$DISTROBOX enter $BOX -- bash -lc 'cd $SRC/web; set -a; . $CONFIG/mgmt-token; . $CONFIG/web.env; set +a; export PUNKTFUNK_MGMT_URL=https://127.0.0.1:$MGMT_PORT NODE_TLS_REJECT_UNAUTHORIZED=0 PORT=$WEB_PORT HOST=0.0.0.0 NITRO_PORT=$WEB_PORT NITRO_HOST=0.0.0.0; exec node .output/server/index.mjs'
+ExecStart=$DISTROBOX enter $BOX -- bash -lc 'cd $SRC/web; set -a; . $CONFIG/mgmt-token; . $CONFIG/web.env; set +a; export PUNKTFUNK_MGMT_URL=https://127.0.0.1:$MGMT_PORT NODE_TLS_REJECT_UNAUTHORIZED=0 PORT=$WEB_PORT HOST=0.0.0.0 NITRO_PORT=$WEB_PORT NITRO_HOST=0.0.0.0 PUNKTFUNK_UI_TLS_CERT=$CONFIG/cert.pem PUNKTFUNK_UI_TLS_KEY=$CONFIG/key.pem PUNKTFUNK_UI_SECURE=1; exec bun .output/server/index.mjs'
 Restart=on-failure
 RestartSec=3
 

scripts/windows/web-run.cmd

@@ -4,21 +4,29 @@ rem
 rem Lays out next to the installed payload: {app}\web\web-run.cmd, {app}\web\.output\... and
 rem {app}\bun\bun.exe (so %~dp0 = {app}\web\). Auto-wires the console the same way the Linux
 rem systemd unit does: it sources the host's mgmt bearer token + the console login password from
-rem %ProgramData%\punktfunk\, points the /api proxy at the host's loopback HTTPS mgmt API, and runs
-rem the (self-contained, no-node_modules) Nitro server on :3000 with the bundled bun. No env editing.
+rem %ProgramData%\punktfunk\, points the /api proxy at the host's loopback HTTPS mgmt API, and serves
+rem the (self-contained, no-node_modules) Nitro console over HTTPS (HTTP/1.1 over TLS) on :3000 with the
+rem bundled bun, using the host's OWN identity cert. No env editing.
 setlocal EnableExtensions
 
 set "PFDATA=%ProgramData%\punktfunk"
 set "TOKENFILE=%PFDATA%\mgmt-token"
 set "PWFILE=%PFDATA%\web-password"
+set "CERTFILE=%PFDATA%\cert.pem"
+set "KEYFILE=%PFDATA%\key.pem"
 
-rem The host's `serve` writes the mgmt token on first run. Until it exists the proxy has no
-rem credential, so fail and let the task's restart-on-failure retry (mirrors the Linux unit's
-rem Restart=on-failure waiting for the host to create it).
+rem The host's `serve` writes the mgmt token + its identity cert/key on first run. Until they exist
+rem we have no credential and no TLS material, so fail and let the task's restart-on-failure retry
+rem (mirrors the Linux unit's Restart=on-failure waiting for the host to create them) rather than
+rem silently downgrading to plain HTTP.
 if not exist "%TOKENFILE%" (
   echo [punktfunk-web] mgmt token not present yet at "%TOKENFILE%" - waiting for the host service.
   exit /b 1
 )
+if not exist "%CERTFILE%" (
+  echo [punktfunk-web] host identity cert not present yet at "%CERTFILE%" - waiting for the host service.
+  exit /b 1
+)
 
 rem Both files are single KEY=VALUE lines (LF), written 0600/ACL'd: PUNKTFUNK_MGMT_TOKEN=... and
 rem PUNKTFUNK_UI_PASSWORD=... . Split on the first '=' and import each into the environment.
@@ -30,6 +38,10 @@ set "PORT=3000"
 set "HOST=0.0.0.0"
 set "PUNKTFUNK_MGMT_URL=https://127.0.0.1:47990"
 set "NODE_TLS_REJECT_UNAUTHORIZED=0"
+rem Serve HTTPS (HTTP/1.1 over TLS) with the host's identity cert; mark the session cookie Secure.
+set "PUNKTFUNK_UI_TLS_CERT=%CERTFILE%"
+set "PUNKTFUNK_UI_TLS_KEY=%KEYFILE%"
+set "PUNKTFUNK_UI_SECURE=1"
 
 set "BUN=%~dp0..\bun\bun.exe"
 set "SERVER=%~dp0.output\server\index.mjs"

web/.env.example

@@ -1,7 +1,8 @@
-# punktfunk web — management console (Nitro/Node server) configuration.
-# Copy to `.env` (gitignored) or set these in the environment of `node .output/server/index.mjs`.
+# punktfunk web — management console (Nitro server on bun) configuration.
+# Copy to `.env` (gitignored) or set these in the environment of `bun .output/server/index.mjs`.
 # NOTE: on a packaged install (the punktfunk-web .deb) you edit NOTHING — the systemd --user units
-# auto-wire these from the host's ~/.config/punktfunk/{mgmt-token,web-password}. See web.env.example.
+# auto-wire these from the host's ~/.config/punktfunk/{mgmt-token,web-password,cert.pem,key.pem}.
+# See web.env.example.
 
 # REQUIRED in production: the shared login password for the console. The built Nitro
 # server fails CLOSED (503 on every request) if this is unset, so a LAN-exposed server
@@ -27,6 +28,17 @@ NODE_TLS_REJECT_UNAUTHORIZED=0
 # from PUNKTFUNK_UI_PASSWORD (changing the password then invalidates sessions).
 # PUNKTFUNK_UI_SECRET=
 
+# TLS: serve the console over HTTPS (HTTP/1.1 over TLS) using the HOST's own identity cert (the cert
+# native clients already pin). Point these at the host's PEM files; BOTH set ⇒ HTTPS. Unset ⇒ plain
+# HTTP (local dev only). (No HTTP/2 or HTTP/3: Bun.serve has no HTTP/2 server, and a browser won't
+# speak HTTP/3/QUIC against this self-signed, no-SAN host cert.)
+PUNKTFUNK_UI_TLS_CERT=/home/you/.config/punktfunk/cert.pem
+PUNKTFUNK_UI_TLS_KEY=/home/you/.config/punktfunk/key.pem
+
+# REQUIRED when serving over TLS: mark the session cookie Secure (browsers drop a Secure cookie over
+# plain http://, so it is OFF by default; turn it ON whenever PUNKTFUNK_UI_TLS_* is set).
+PUNKTFUNK_UI_SECURE=1
+
 # The Bun server binds these (standard Nitro env):
 # PORT=3000
 # HOST=0.0.0.0

web/.storybook/preview.tsx

@@ -4,10 +4,11 @@ import "../src/styles.css";
 // The console loads its brand typeface separately (in __root.tsx); do the same
 // here or every story falls back to system-ui and looks off.
 import "@fontsource-variable/geist";
-import { useEffect } from "react";
 import { definePreview } from "@storybook/react-vite";
-import { MaterialProvider, defaultMaterialTheme } from "@unom/ui/material";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { defaultMaterialTheme, MaterialProvider } from "@unom/ui/material";
+import Section from "@unom/ui/section";
+import { useEffect } from "react";
 
 // React Query is present so any query-backed component mounts without a real
 // host. Stories should feed mock data rather than fetch — retries are off so a
@@ -51,11 +52,13 @@ export default definePreview({
 				<QueryClientProvider client={queryClient}>
 					<MaterialProvider theme={defaultMaterialTheme}>
 						<div className={dark ? "dark" : ""}>
+							<Section maxWidth={false}>
 								<div
 									className={`min-h-screen bg-background text-foreground ${fullscreen ? "" : "p-6"}`}
 								>
 									<Story />
 								</div>
+							</Section>
 						</div>
 					</MaterialProvider>
 				</QueryClientProvider>

web/README.md

@@ -40,19 +40,30 @@ If the host runs with `--mgmt-token`, set it under **Settings → API token** (s
 
 ## Build & run (Nitro + Bun)
 
+The console runs on **bun** (`Bun.serve` is a Bun API — node can't run it): Nitro's `bun` preset
+plus a custom entry (`nitro-entry/bun-https.mjs`) that calls `Bun.serve({ tls })`, so it serves
+**HTTPS (HTTP/1.1 over TLS)** with the **host's own identity cert** (the cert native clients already
+pin). One trust anchor across the data plane, the mgmt API, and this console. (No HTTP/2 — `Bun.serve`
+has no h2 server — and no HTTP/3, which a browser won't speak against this self-signed, no-SAN host
+cert; a browser-trusted, SAN-matching cert + a fronting server would be needed, out of scope for a
+LAN console.)
+
 ```sh
-bun run build             # → .output/  (Nitro server, `bun` preset, + .output/public assets)
+bun run build             # → .output/  (Nitro `bun` preset + our Bun.serve TLS entry)
 PORT=3000 HOST=0.0.0.0 \
   PUNKTFUNK_UI_PASSWORD=… PUNKTFUNK_MGMT_TOKEN=… \
   PUNKTFUNK_MGMT_URL=https://127.0.0.1:47990 NODE_TLS_REJECT_UNAUTHORIZED=0 \
+  PUNKTFUNK_UI_TLS_CERT=~/.config/punktfunk/cert.pem \
+  PUNKTFUNK_UI_TLS_KEY=~/.config/punktfunk/key.pem PUNKTFUNK_UI_SECURE=1 \
   bun run start           # = bun run .output/server/index.mjs
-# (the mgmt API is HTTPS w/ the host's self-signed cert on loopback → the proxy's fetch needs
-#  NODE_TLS_REJECT_UNAUTHORIZED=0; it makes no other outbound TLS calls. See .env.example.)
+# PUNKTFUNK_UI_TLS_* unset ⇒ plain HTTP (local dev); both set ⇒ HTTPS (HTTP/1.1 over TLS).
+# NODE_TLS_REJECT_UNAUTHORIZED=0 is only for the proxy's loopback fetch to the host's self-signed
+# mgmt cert; the console makes no other outbound TLS calls. See .env.example.
 bun run lint              # tsc --noEmit
 ```
 
-The built **Nitro Bun server** SSR-renders the app and is the only thing exposed on the LAN.
-Run it on the same box as the host; it serves the console on `:3000` (or `$PORT`).
+The built **Nitro bun server** SSR-renders the app and is the only thing exposed on the LAN.
+Run it on the same box as the host; it serves the console over HTTPS on `:3000` (or `$PORT`).
 
 ## Auth (backend-for-frontend)
 
@@ -62,10 +73,14 @@ Single-user, login-gated. Config via env (see `.env.example`):
   **sealed session cookie** (h3 `useSession`, AES-GCM). `server/middleware/auth.ts` gates
   *every* request — pages redirect to `/login`, `/api` returns 401 — and **fails closed**
   (503) if `PUNKTFUNK_UI_PASSWORD` is unset, so a misconfigured LAN server admits no one.
-- The **management API stays loopback-only + token** — never LAN-exposed. The web server
+- The **bearer-token admin surface of the management API is loopback-only** — the host honors a
+  bearer token only from a loopback peer, so the admin API is never LAN-exposed. The web server
   holds `PUNKTFUNK_MGMT_TOKEN` server-side and injects it when proxying `/api/**` →
-  `PUNKTFUNK_MGMT_URL` (`server/routes/api/[...].ts`). **The token never reaches the
-  browser**; the browser only ever holds the session cookie.
+  `PUNKTFUNK_MGMT_URL` (loopback; `server/routes/api/[...].ts`). **The token never reaches the
+  browser**; the browser only ever holds the session cookie. (The host *also* binds the
+  **read-only** surface — host status + the game library — to the LAN so paired native clients can
+  fetch it directly over mTLS; that path uses client certs, not the token, and never touches this
+  console.)
 
 So: `browser ──password──▶ web server (session cookie) ──mgmt token, server-side──▶ mgmt API`.
 Run the host with a matching token: `cargo run -rp punktfunk-host -- serve` +

web/biome.json

@@ -1,15 +1,13 @@
 {
-	"$schema": "https://biomejs.dev/schemas/2.4.10/schema.json",
+	"$schema": "https://biomejs.dev/schemas/2.5.1/schema.json",
 	"vcs": {
-		"enabled": false,
+		"enabled": true,
 		"clientKind": "git",
-		"useIgnoreFile": false
+		"useIgnoreFile": true
 	},
 	"files": {
 		"ignoreUnknown": false,
-		"includes": [
-			"**"
-		]
+		"includes": ["**"]
 	},
 	"css": {
 		"parser": {
@@ -30,7 +28,7 @@
 	"linter": {
 		"enabled": true,
 		"rules": {
-			"recommended": true,
+			"preset": "recommended",
 			"suspicious": {
 				"noUnknownAtRules": "off",
 				"noArrayIndexKey": "off"
@@ -41,5 +39,17 @@
 		"formatter": {
 			"quoteStyle": "double"
 		}
+	},
+	"overrides": [
+		{
+			"includes": ["server/**", "nitro-entry/**"],
+			"linter": {
+				"rules": {
+					"correctness": {
+						"useHookAtTopLevel": "off"
 					}
 				}
+			}
+		}
+	]
+}

web/messages/de.json

@@ -59,6 +59,9 @@
 	"pairing_native_devices": "Gekoppelte Geräte",
 	"pairing_native_empty": "Noch keine Geräte gekoppelt.",
 	"pairing_native_unpair_confirm": "Dieses Gerät entkoppeln? Es muss sich erneut koppeln, um zu verbinden.",
+	"pairing_protocol": "Protokoll",
+	"pairing_protocol_native": "punktfunk/1",
+	"pairing_protocol_moonlight": "Moonlight",
 	"pairing_pending_title": "Warten auf Freigabe",
 	"pairing_pending_desc": "Diese Geräte haben versucht, sich zu verbinden. Eine Freigabe koppelt das Gerät sofort — ohne PIN.",
 	"pairing_pending_approve": "Freigeben",
@@ -100,7 +103,8 @@
 	"common_cancel": "Abbrechen",
 	"common_unauthorized": "Sitzung abgelaufen — Weiterleitung zur Anmeldung…",
 	"login_title": "Anmelden",
-	"login_subtitle": "Gib das Verwaltungspasswort ein, um fortzufahren.",
+	"login_subtitle": "Gib das Verwaltungspasswort ein, um fortzufahren. Du weißt nicht weiter?",
+	"login_docs_link": "Besuche die Dokumentation",
 	"login_password": "Passwort",
 	"login_submit": "Anmelden",
 	"login_error": "Falsches Passwort.",

web/messages/en.json

@@ -59,6 +59,9 @@
 	"pairing_native_devices": "Paired devices",
 	"pairing_native_empty": "No devices paired yet.",
 	"pairing_native_unpair_confirm": "Unpair this device? It will need to pair again to connect.",
+	"pairing_protocol": "Protocol",
+	"pairing_protocol_native": "punktfunk/1",
+	"pairing_protocol_moonlight": "Moonlight",
 	"pairing_pending_title": "Waiting for approval",
 	"pairing_pending_desc": "These devices tried to connect. Approving pairs a device immediately — no PIN needed.",
 	"pairing_pending_approve": "Approve",
@@ -100,7 +103,8 @@
 	"common_cancel": "Cancel",
 	"common_unauthorized": "Session expired — redirecting to sign in…",
 	"login_title": "Sign in",
-	"login_subtitle": "Enter the management password to continue.",
+	"login_subtitle": "Enter the management password to continue. Don't know what to do?",
+	"login_docs_link": "Visit the documentation",
 	"login_password": "Password",
 	"login_submit": "Sign in",
 	"login_error": "Wrong password.",

web/nitro-entry/bun-https.mjs

@@ -0,0 +1,69 @@
+// Custom Nitro server entry for the punktfunk web console.
+//
+// It is the stock Nitro `bun` preset entry
+// (node_modules/nitropack/dist/presets/bun/runtime/bun.mjs) plus **TLS**, so the console is served
+// over **HTTPS (HTTP/1.1 over TLS)** using the HOST's own identity cert (the cert native clients
+// already pin). One trust anchor across the data plane, the management API, and this console. Wired
+// in via `entry:` in vite.config.ts on top of Nitro's `bun` preset (which bundles the handler in).
+//
+// NOTE on HTTP/2 + HTTP/3: NOT offered here, on purpose. `Bun.serve` has no HTTP/2 server, and
+// HTTP/3 (which Bun *can* do) is useless to a browser against this cert: QUIC refuses any cert error,
+// and the host identity cert is a CN-only, no-SAN, self-signed cert (correct for native fingerprint
+// PINNING, rejected by browsers). So browsers stay on HTTP/1.1 regardless — advertising h3 would just
+// dangle an `Alt-Svc` no browser can use. Real h2/h3 would need a browser-TRUSTED, SAN-matching cert
+// (a local CA installed per device) fronted by a server that speaks them (e.g. Caddy) — deliberately
+// out of scope for a LAN console; TLS (no cleartext login/session) is the win.
+//
+// Env (set by the launchers / the systemd unit — see web.env.example):
+//   PUNKTFUNK_UI_TLS_CERT / _KEY   PEM file paths (the host's cert.pem / key.pem). BOTH set ⇒ HTTPS.
+//                                  Unset ⇒ plain HTTP (local dev only).
+//   PORT / HOST                    standard Nitro bind (3000 / 0.0.0.0).
+import "#nitro-internal-pollyfills";
+import wsAdapter from "crossws/adapters/bun";
+import { useNitroApp } from "nitropack/runtime";
+import { startScheduleRunner } from "nitropack/runtime/internal";
+
+const nitroApp = useNitroApp();
+const ws = import.meta._websocket
+	? wsAdapter(nitroApp.h3App.websocket)
+	: undefined;
+
+// TLS from the host's identity cert (file PATHS → Bun.file, not PEM-in-env). Absent ⇒ plain HTTP.
+const certPath = process.env.PUNKTFUNK_UI_TLS_CERT;
+const keyPath = process.env.PUNKTFUNK_UI_TLS_KEY;
+const tls =
+	certPath && keyPath
+		? { cert: Bun.file(certPath), key: Bun.file(keyPath) }
+		: undefined;
+
+const server = Bun.serve({
+	port: process.env.NITRO_PORT || process.env.PORT || 3000,
+	host: process.env.NITRO_HOST || process.env.HOST,
+	idleTimeout:
+		Number.parseInt(process.env.NITRO_BUN_IDLE_TIMEOUT, 10) || undefined,
+	// `tls: undefined` ⇒ plain HTTP (dev); otherwise HTTPS over HTTP/1.1.
+	tls,
+	websocket: import.meta._websocket ? ws.websocket : undefined,
+	async fetch(req, server) {
+		if (import.meta._websocket && req.headers.get("upgrade") === "websocket") {
+			return ws.handleUpgrade(req, server);
+		}
+		const url = new URL(req.url);
+		let body;
+		if (req.body) {
+			body = await req.arrayBuffer();
+		}
+		return nitroApp.localFetch(url.pathname + url.search, {
+			host: url.hostname,
+			protocol: url.protocol,
+			headers: req.headers,
+			method: req.method,
+			redirect: req.redirect,
+			body,
+		});
+	},
+});
+console.log(`punktfunk web console listening on ${server.url} (tls=${!!tls})`);
+if (import.meta._tasks) {
+	startScheduleRunner();
+}

web/server/middleware/auth.ts

@@ -11,9 +11,9 @@ import {
 } from "h3";
 import {
 	isPublicPath,
+	type SessionData,
 	sessionConfig,
 	uiPassword,
-	type SessionData,
 } from "../util/auth";
 
 export default defineEventHandler(async (event) => {

web/server/routes/_auth/login.post.ts

@@ -1,12 +1,12 @@
 // POST /_auth/login {password} — verify the shared password (constant-time), then seal an
 // authenticated session cookie. Public (allowlisted in the gate) so an unauthenticated user
 // can actually log in.
-import { defineEventHandler, readBody, createError, useSession } from "h3";
+import { createError, defineEventHandler, readBody, useSession } from "h3";
 import {
+	type SessionData,
 	sessionConfig,
 	timingSafeEqual,
 	uiPassword,
-	type SessionData,
 } from "../../util/auth";
 
 export default defineEventHandler(async (event) => {

web/server/routes/_auth/logout.post.ts

@@ -1,6 +1,6 @@
 // POST /_auth/logout — clear the session cookie.
 import { defineEventHandler, useSession } from "h3";
-import { sessionConfig, type SessionData } from "../../util/auth";
+import { type SessionData, sessionConfig } from "../../util/auth";
 
 export default defineEventHandler(async (event) => {
 	const session = await useSession<SessionData>(event, sessionConfig());

web/server/util/auth.ts

@@ -87,7 +87,7 @@ export function isPublicPath(pathname: string): boolean {
 /** Validate a post-login redirect target: a same-origin path only. Rejects protocol-
  * relative (`//evil.com`) and absolute URLs to prevent an open redirect. */
 export function safeNextPath(next: string | undefined): string {
-	if (!next || !next.startsWith("/") || next.startsWith("//")) return "/";
+	if (!next?.startsWith("/") || next.startsWith("//")) return "/";
 	return next;
 }
 

web/src/components/app-shell.tsx

@@ -6,7 +6,6 @@ import {
 	LibraryBig,
 	Server,
 	Settings,
-	Users,
 } from "lucide-react";
 import { motion, stagger } from "motion/react";
 import type { ReactNode } from "react";
@@ -23,17 +22,10 @@ const NAV = [
 	{ to: "/host", icon: Server, label: () => m.nav_host() },
 	{ to: "/library", icon: LibraryBig, label: () => m.nav_library() },
 	{ to: "/stats", icon: GaugeCircle, label: () => m.nav_stats() },
-	{ to: "/clients", icon: Users, label: () => m.nav_clients() },
 	{ to: "/pairing", icon: KeyRound, label: () => m.nav_pairing() },
 	{ to: "/settings", icon: Settings, label: () => m.nav_settings() },
 ] as const;
 
-// Staggered entrance for the sidebar nav: each item fans in from the left a beat
-// after the previous. Per-item delays (rather than a parent stagger) keep every
-// item independent, so none can be left mid-orchestration / invisible.
-const NAV_ENTER_DELAY = 0.08;
-const NAV_ENTER_STEP = 0.06;
-
 export function AppShell({ children }: { children: ReactNode }) {
 	// Read the locale so the whole shell re-renders on a language switch.
 	useLocale();
@@ -58,7 +50,7 @@ export function AppShell({ children }: { children: ReactNode }) {
 					variants={{ enter: {}, from: {} }}
 					className="flex flex-col gap-1"
 				>
-					{NAV.map(({ to, icon: Icon, label }, i) => (
+					{NAV.map(({ to, icon: Icon, label }) => (
 						<MLink
 							key={to}
 							variants={{
@@ -103,7 +95,7 @@ export function AppShell({ children }: { children: ReactNode }) {
 
 				<main className="flex-1">
 					{/* pb-24 leaves room for the fixed bottom nav on mobile. */}
-					<div className="mx-auto max-w-5xl p-6 pb-24 sm:p-10 sm:pb-10">
+					<div className="mx-auto max-w-[1700px] p-6 pb-24 sm:p-10 sm:pb-10">
 						{children}
 					</div>
 				</main>
@@ -138,10 +130,12 @@ export function AppShell({ children }: { children: ReactNode }) {
 function LanguageSwitcher() {
 	const current = useLocale();
 	return (
+		// biome-ignore lint/a11y/useSemanticElements: an aria-labelled role="group" is the right pattern for this small control cluster — no single semantic element fits.
 		<div className="flex gap-1" role="group" aria-label="Language">
 			{locales.map((l: Locale) => (
 				<button
 					key={l}
+					type="button"
 					onClick={() => changeLocale(l)}
 					className={cn(
 						"rounded px-2 py-1 text-xs uppercase transition-colors",

web/src/components/section.tsx

@@ -1,40 +0,0 @@
-import { motion, useReducedMotion } from "motion/react";
-import { Children, type ReactNode } from "react";
-import { cn } from "@/lib/utils";
-
-/**
- * Page content wrapper that animates in on mount — so the content fans up into
- * place every time you navigate or load a route (the route remounts, this
- * remounts). Each direct child is staggered a beat after the previous (the same
- * on-mount-delay pattern the sidebar nav uses). Honours prefers-reduced-motion.
- */
-export function Section({
-	children,
-	className,
-}: {
-	children: ReactNode;
-	className?: string;
-}) {
-	const reduce = useReducedMotion();
-	return (
-		<div className={cn("flex flex-col gap-6", className)}>
-			{Children.map(children, (child, i) =>
-				reduce ? (
-					child
-				) : (
-					<motion.div
-						initial={{ opacity: 0, y: 16 }}
-						animate={{ opacity: 1, y: 0 }}
-						transition={{
-							delay: 0.03 + i * 0.07,
-							duration: 0.42,
-							ease: [0.16, 1, 0.3, 1],
-						}}
-					>
-						{child}
-					</motion.div>
-				),
-			)}
-		</div>
-	);
-}

web/src/components/ui/table.tsx

@@ -57,7 +57,7 @@ const TableHead = React.forwardRef<
 	<th
 		ref={ref}
 		className={cn(
-			"h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+			"h-10 px-card text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
 			className,
 		)}
 		{...props}
@@ -71,7 +71,10 @@ const TableCell = React.forwardRef<
 >(({ className, ...props }, ref) => (
 	<td
 		ref={ref}
-		className={cn("p-2 align-middle [&:has([role=checkbox])]:pr-0", className)}
+		className={cn(
+			"p-card py-2 align-middle [&:has([role=checkbox])]:pr-0",
+			className,
+		)}
 		{...props}
 	/>
 ));

web/src/lib/utils.ts

@@ -1,7 +1,15 @@
 import { type ClassValue, clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
+import { m } from "@/paraglide/messages";
 
 /** shadcn/ui's class combiner: merge conditional classes, dedupe Tailwind conflicts. */
 export function cn(...inputs: ClassValue[]) {
 	return twMerge(clsx(inputs));
 }
+
+/** Seconds since a knock → a short relative label. */
+export function fmtAge(secs: number): string {
+	if (secs < 10) return m.pairing_pending_age_just_now();
+	if (secs < 60) return m.pairing_pending_age_secs({ s: Math.floor(secs) });
+	return m.pairing_pending_age_mins({ min: Math.floor(secs / 60) });
+}

web/src/routes/clients.tsx

@@ -1,4 +0,0 @@
-import { createFileRoute } from "@tanstack/react-router";
-import { SectionClients } from "@/sections/Clients";
-
-export const Route = createFileRoute("/clients")({ component: SectionClients });

web/src/sections/Clients/index.tsx

@@ -1,36 +0,0 @@
-import { useQueryClient } from "@tanstack/react-query";
-import type { FC } from "react";
-import {
-	getListPairedClientsQueryKey,
-	useListPairedClients,
-	useUnpairClient,
-} from "@/api/gen/clients/clients";
-import { useLocale } from "@/lib/i18n";
-import { m } from "@/paraglide/messages";
-import { ClientsView } from "./view";
-
-export const SectionClients: FC = () => {
-	useLocale();
-	const qc = useQueryClient();
-	const clients = useListPairedClients();
-	const unpair = useUnpairClient();
-
-	const onUnpair = (fingerprint: string) => {
-		if (!confirm(m.clients_unpair_confirm())) return;
-		unpair.mutate(
-			{ fingerprint },
-			{
-				onSuccess: () =>
-					qc.invalidateQueries({ queryKey: getListPairedClientsQueryKey() }),
-			},
-		);
-	};
-
-	return (
-		<ClientsView
-			clients={clients}
-			onUnpair={onUnpair}
-			isUnpairing={unpair.isPending}
-		/>
-	);
-};

web/src/sections/Clients/view.tsx

@@ -1,80 +0,0 @@
-import { Trash2 } from "lucide-react";
-import type { FC } from "react";
-import type { PairedClient } from "@/api/gen/model/pairedClient";
-import { QueryState } from "@/components/query-state";
-import { Section } from "@/components/section";
-import { Button } from "@/components/ui/button";
-import { Card, CardContent } from "@/components/ui/card";
-import {
-	Table,
-	TableBody,
-	TableCell,
-	TableHead,
-	TableHeader,
-	TableRow,
-} from "@/components/ui/table";
-import type { Loadable } from "@/lib/query";
-import { m } from "@/paraglide/messages";
-
-export const ClientsView: FC<{
-	clients: Loadable<PairedClient[]>;
-	onUnpair: (fingerprint: string) => void;
-	isUnpairing: boolean;
-}> = ({ clients, onUnpair, isUnpairing }) => {
-	const rows = clients.data ?? [];
-	return (
-		<Section>
-			<h1 className="text-2xl font-semibold">{m.clients_title()}</h1>
-			<QueryState
-				isLoading={clients.isLoading}
-				error={clients.error}
-				refetch={clients.refetch}
-			>
-				{rows.length === 0 ? (
-					<Card>
-						<CardContent className="p-8 text-center text-sm text-muted-foreground">
-							{m.clients_empty()}
-						</CardContent>
-					</Card>
-				) : (
-					<Card>
-						<CardContent className="p-0">
-							<Table>
-								<TableHeader>
-									<TableRow>
-										<TableHead>{m.clients_name()}</TableHead>
-										<TableHead>{m.clients_fingerprint()}</TableHead>
-										<TableHead className="w-12" />
-									</TableRow>
-								</TableHeader>
-								<TableBody>
-									{rows.map((c) => (
-										<TableRow key={c.fingerprint}>
-											<TableCell className="font-medium">
-												{c.subject || "—"}
-											</TableCell>
-											<TableCell className="font-mono text-xs text-muted-foreground">
-												{c.fingerprint.slice(0, 16)}…
-											</TableCell>
-											<TableCell>
-												<Button
-													variant="ghost"
-													size="icon"
-													aria-label={m.action_unpair()}
-													disabled={isUnpairing}
-													onClick={() => onUnpair(c.fingerprint)}
-												>
-													<Trash2 className="size-4 text-destructive" />
-												</Button>
-											</TableCell>
-										</TableRow>
-									))}
-								</TableBody>
-							</Table>
-						</CardContent>
-					</Card>
-				)}
-			</QueryState>
-		</Section>
-	);
-};

web/src/sections/Dashboard/view.tsx

@@ -1,8 +1,8 @@
+import Section from "@unom/ui/section";
 import { MonitorPlay, RefreshCw, Video, Volume2, ZapOff } from "lucide-react";
 import type { FC, ReactNode } from "react";
 import type { RuntimeStatus } from "@/api/gen/model/runtimeStatus";
 import { QueryState } from "@/components/query-state";
-import { Section } from "@/components/section";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
@@ -18,7 +18,8 @@ export const DashboardView: FC<{
 }> = ({ status, onStopSession, onRequestIdr, isStopping, isRequestingIdr }) => {
 	const s = status.data;
 	return (
-		<Section>
+		<Section maxWidth={false}>
+			<div className="flex flex-col gap-card">
 				<h1 className="text-2xl font-semibold">{m.status_title()}</h1>
 				<QueryState
 					isLoading={status.isLoading}
@@ -26,8 +27,8 @@ export const DashboardView: FC<{
 					refetch={status.refetch}
 				>
 					{s && (
-					<div className="flex flex-col gap-6">
-						<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+						<div className="flex flex-col gap-card">
+							<div className="grid gap-card sm:grid-cols-2 lg:grid-cols-4">
 								<StatCard
 									icon={<Video className="size-4" />}
 									label={m.status_video()}
@@ -117,6 +118,7 @@ export const DashboardView: FC<{
 						</div>
 					)}
 				</QueryState>
+			</div>
 		</Section>
 	);
 };

web/src/sections/Host/view.tsx

@@ -1,8 +1,8 @@
+import Section from "@unom/ui/section";
 import type { FC } from "react";
 import type { AvailableCompositor } from "@/api/gen/model/availableCompositor";
 import type { HostInfo } from "@/api/gen/model/hostInfo";
 import { QueryState } from "@/components/query-state";
-import { Section } from "@/components/section";
 import { Badge } from "@/components/ui/badge";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import type { Loadable } from "@/lib/query";
@@ -14,7 +14,8 @@ export const HostView: FC<{
 }> = ({ host, compositors }) => {
 	const h = host.data;
 	return (
-		<Section>
+		<Section maxWidth={false}>
+			<div className="flex flex-col gap-card">
 				<h1 className="text-2xl font-semibold">{m.nav_host()}</h1>
 
 				<QueryState
@@ -23,7 +24,7 @@ export const HostView: FC<{
 					refetch={host.refetch}
 				>
 					{h && (
-					<div className="grid gap-4 lg:grid-cols-2">
+						<div className="grid gap-card lg:grid-cols-2">
 							<Card>
 								<CardHeader>
 									<CardTitle>{m.host_identity()}</CardTitle>
@@ -41,7 +42,7 @@ export const HostView: FC<{
 									</dl>
 								</CardContent>
 							</Card>
-						<div className="space-y-4">
+							<div className="space-y-card">
 								<Card>
 									<CardHeader>
 										<CardTitle>{m.host_codecs()}</CardTitle>
@@ -62,7 +63,9 @@ export const HostView: FC<{
 										<dl className="grid grid-cols-2 gap-x-6 gap-y-2 text-sm tabular-nums">
 											{Object.entries(h.ports).map(([k, v]) => (
 												<div key={k} className="flex justify-between">
-												<dt className="text-muted-foreground uppercase">{k}</dt>
+													<dt className="text-muted-foreground uppercase">
+														{k}
+													</dt>
 													<dd className="font-medium">{v as number}</dd>
 												</div>
 											))}
@@ -117,6 +120,7 @@ export const HostView: FC<{
 						</QueryState>
 					</CardContent>
 				</Card>
+			</div>
 		</Section>
 	);
 };

web/src/sections/Library/GameCard.tsx

@@ -0,0 +1,108 @@
+import { Pencil, Trash2 } from "lucide-react";
+import { type FC, useState } from "react";
+import type { GameEntry } from "@/api/gen/model/gameEntry";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { m } from "@/paraglide/messages";
+
+/**
+ * Display label for a store badge. Steam and custom keep their localized strings; every other store
+ * (lutris, heroic, epic, …) is a proper noun shown capitalized, so new providers surface correctly
+ * without a translation per store.
+ */
+function storeLabel(store: string): string {
+	switch (store) {
+		case "custom":
+			return m.library_store_custom();
+		case "steam":
+			return m.library_store_steam();
+		default:
+			return store.charAt(0).toUpperCase() + store.slice(1);
+	}
+}
+
+export interface GameCardProps {
+	game: GameEntry;
+	onEdit: () => void;
+	onDelete: () => void;
+	deleting: boolean;
+}
+
+/**
+ * A poster tile. The cover prefers the 2:3 portrait capsule; on a load error it
+ * falls back to the wide header, then to a text placeholder. Custom entries get
+ * edit/delete affordances.
+ */
+export const GameCard: FC<GameCardProps> = ({
+	game,
+	onEdit,
+	onDelete,
+	deleting,
+}) => {
+	const isCustom = game.store === "custom";
+	// Track which sources have failed so the <img> can step down portrait → header → placeholder.
+	const [failed, setFailed] = useState<Record<string, boolean>>({});
+
+	const candidates = [game.art.portrait, game.art.header].filter(
+		(u): u is string => !!u && !failed[u],
+	);
+	const src = candidates[0];
+
+	return (
+		<Card className="group relative overflow-hidden">
+			<div className="relative aspect-[2/3] bg-muted">
+				{src ? (
+					<img
+						src={src}
+						alt={game.title}
+						loading="lazy"
+						className="size-full object-cover"
+						onError={() => setFailed((prev) => ({ ...prev, [src]: true }))}
+					/>
+				) : (
+					<div className="flex size-full items-center justify-center p-3 text-center text-sm font-medium text-muted-foreground">
+						{game.title}
+					</div>
+				)}
+				<div className="absolute left-2 top-2">
+					<Badge
+						variant={isCustom ? "secondary" : "outline"}
+						className="bg-background/80 backdrop-blur"
+					>
+						{storeLabel(game.store)}
+					</Badge>
+				</div>
+				{isCustom && (
+					<div className="absolute right-2 top-2 flex gap-1 opacity-0 transition-opacity group-hover:opacity-100 focus-within:opacity-100">
+						<Button
+							variant="secondary"
+							size="icon"
+							className="size-7 bg-background/80 backdrop-blur"
+							aria-label={m.library_edit()}
+							onClick={onEdit}
+						>
+							<Pencil className="size-3.5" />
+						</Button>
+						<Button
+							variant="secondary"
+							size="icon"
+							className="size-7 bg-background/80 backdrop-blur"
+							aria-label={m.library_delete()}
+							disabled={deleting}
+							onClick={onDelete}
+						>
+							<Trash2 className="size-3.5 text-destructive" />
+						</Button>
+					</div>
+				)}
+			</div>
+			<div
+				className="truncate px-card pb-card pt-4 text-sm font-medium"
+				title={game.title}
+			>
+				{game.title}
+			</div>
+		</Card>
+	);
+};

web/src/sections/Library/GameForm.tsx

@@ -0,0 +1,205 @@
+import { useQueryClient } from "@tanstack/react-query";
+import { X } from "lucide-react";
+import { type FC, type FormEvent, useState } from "react";
+import {
+	getGetLibraryQueryKey,
+	useCreateCustomGame,
+	useUpdateCustomGame,
+} from "@/api/gen/library/library";
+import type { CustomInput } from "@/api/gen/model/customInput";
+import type { GameEntry } from "@/api/gen/model/gameEntry";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { m } from "@/paraglide/messages";
+import { customId } from "./helpers";
+
+interface FormState {
+	title: string;
+	portrait: string;
+	hero: string;
+	header: string;
+	command: string;
+}
+
+const emptyForm: FormState = {
+	title: "",
+	portrait: "",
+	hero: "",
+	header: "",
+	command: "",
+};
+
+function formFrom(entry: GameEntry): FormState {
+	return {
+		title: entry.title,
+		portrait: entry.art.portrait ?? "",
+		hero: entry.art.hero ?? "",
+		header: entry.art.header ?? "",
+		command: entry.launch?.kind === "command" ? entry.launch.value : "",
+	};
+}
+
+/** Map the form to the API body — only attach `launch` when a command was given. */
+function toInput(f: FormState): CustomInput {
+	const trim = (s: string) => {
+		const t = s.trim();
+		return t ? t : undefined;
+	};
+	const command = f.command.trim();
+	return {
+		title: f.title.trim(),
+		art: {
+			portrait: trim(f.portrait),
+			hero: trim(f.hero),
+			header: trim(f.header),
+		},
+		launch: command ? { kind: "command", value: command } : null,
+	};
+}
+
+/** What the form targets: an existing custom entry to edit, or "new" for a fresh add. */
+export type FormTarget = GameEntry | "new";
+
+/**
+ * Container: the add/edit form — owns the create + update mutations and derives the
+ * initial field state from the target. Kept entirely separate from the overview grid
+ * (own file, own queries) so the two concerns don't share a component.
+ */
+export const GameFormSection: FC<{
+	target: FormTarget;
+	onClose: () => void;
+}> = ({ target, onClose }) => {
+	const qc = useQueryClient();
+	const create = useCreateCustomGame();
+	const update = useUpdateCustomGame();
+	const invalidate = () =>
+		qc.invalidateQueries({ queryKey: getGetLibraryQueryKey() });
+
+	const onSubmit = async (data: CustomInput) => {
+		if (target === "new") await create.mutateAsync({ data }).then(invalidate);
+		else
+			await update.mutateAsync({ id: customId(target), data }).then(invalidate);
+		onClose();
+	};
+
+	return (
+		<GameForm
+			initial={target === "new" ? emptyForm : formFrom(target)}
+			mode={target === "new" ? "add" : "edit"}
+			onSubmit={onSubmit}
+			onCancel={onClose}
+			isSaving={create.isPending || update.isPending}
+		/>
+	);
+};
+
+/**
+ * The add/edit form card. Owns only its own field state (re-seeded per mount — the
+ * parent keys it by target); reports a ready-to-send `CustomInput` on submit.
+ */
+export const GameForm: FC<{
+	initial: FormState;
+	mode: "add" | "edit";
+	onSubmit: (data: CustomInput) => void;
+	onCancel: () => void;
+	isSaving: boolean;
+}> = ({ initial, mode, onSubmit, onCancel, isSaving }) => {
+	const [form, setForm] = useState<FormState>(initial);
+
+	const handleSubmit = (e: FormEvent) => {
+		e.preventDefault();
+		const data = toInput(form);
+		if (!data.title) return;
+		onSubmit(data);
+	};
+
+	return (
+		<Card className="max-w-xl">
+			<CardHeader className="flex-row items-center justify-between space-y-0">
+				<CardTitle>
+					{mode === "edit" ? m.library_edit_title() : m.library_add_title()}
+				</CardTitle>
+				<Button
+					variant="ghost"
+					size="icon"
+					aria-label={m.library_cancel()}
+					onClick={onCancel}
+				>
+					<X className="size-4" />
+				</Button>
+			</CardHeader>
+			<CardContent>
+				<form onSubmit={handleSubmit} className="space-y-4">
+					<div className="space-y-2">
+						<Label htmlFor="lib-title">{m.library_field_title()}</Label>
+						<Input
+							id="lib-title"
+							required
+							value={form.title}
+							onChange={(e) =>
+								setForm((f) => ({ ...f, title: e.target.value }))
+							}
+						/>
+					</div>
+					<div className="space-y-2">
+						<Label htmlFor="lib-portrait">{m.library_field_portrait()}</Label>
+						<Input
+							id="lib-portrait"
+							type="url"
+							inputMode="url"
+							value={form.portrait}
+							onChange={(e) =>
+								setForm((f) => ({ ...f, portrait: e.target.value }))
+							}
+						/>
+					</div>
+					<div className="space-y-2">
+						<Label htmlFor="lib-hero">{m.library_field_hero()}</Label>
+						<Input
+							id="lib-hero"
+							type="url"
+							inputMode="url"
+							value={form.hero}
+							onChange={(e) => setForm((f) => ({ ...f, hero: e.target.value }))}
+						/>
+					</div>
+					<div className="space-y-2">
+						<Label htmlFor="lib-header">{m.library_field_header()}</Label>
+						<Input
+							id="lib-header"
+							type="url"
+							inputMode="url"
+							value={form.header}
+							onChange={(e) =>
+								setForm((f) => ({ ...f, header: e.target.value }))
+							}
+						/>
+					</div>
+					<div className="space-y-2">
+						<Label htmlFor="lib-command">{m.library_field_command()}</Label>
+						<Input
+							id="lib-command"
+							value={form.command}
+							onChange={(e) =>
+								setForm((f) => ({ ...f, command: e.target.value }))
+							}
+						/>
+						<p className="text-xs text-muted-foreground">
+							{m.library_field_command_help()}
+						</p>
+					</div>
+					<div className="flex gap-2">
+						<Button type="submit" disabled={isSaving || !form.title.trim()}>
+							{mode === "edit" ? m.library_save() : m.library_create()}
+						</Button>
+						<Button type="button" variant="outline" onClick={onCancel}>
+							{m.library_cancel()}
+						</Button>
+					</div>
+				</form>
+			</CardContent>
+		</Card>
+	);
+};

web/src/sections/Library/LibraryGrid.tsx

@@ -0,0 +1,87 @@
+import { useQueryClient } from "@tanstack/react-query";
+import { motion, stagger } from "motion/react";
+import type { FC } from "react";
+import {
+	getGetLibraryQueryKey,
+	useDeleteCustomGame,
+	useGetLibrary,
+} from "@/api/gen/library/library";
+import type { GameEntry } from "@/api/gen/model/gameEntry";
+import { QueryState } from "@/components/query-state";
+import { Card, CardContent } from "@/components/ui/card";
+import type { Loadable } from "@/lib/query";
+import { m } from "@/paraglide/messages";
+import { GameCard } from "./GameCard";
+import { customId } from "./helpers";
+
+/**
+ * Container: the library OVERVIEW — owns the listing query and per-card delete.
+ * Editing is escalated to the parent (it opens the separate add/edit form), so
+ * this subsection knows nothing about the form beyond firing `onEdit`.
+ */
+export const LibraryGridSection: FC<{ onEdit: (entry: GameEntry) => void }> = ({
+	onEdit,
+}) => {
+	const qc = useQueryClient();
+	const library = useGetLibrary();
+	const remove = useDeleteCustomGame();
+
+	const onDelete = async (entry: GameEntry) => {
+		if (!confirm(m.library_delete_confirm())) return;
+		await remove
+			.mutateAsync({ id: customId(entry) })
+			.then(() => qc.invalidateQueries({ queryKey: getGetLibraryQueryKey() }));
+	};
+
+	return (
+		<LibraryGrid
+			library={library}
+			onEdit={onEdit}
+			onDelete={onDelete}
+			isDeleting={remove.isPending}
+		/>
+	);
+};
+
+/** The poster grid (with empty + loading/error states). */
+export const LibraryGrid: FC<{
+	library: Loadable<GameEntry[]>;
+	onEdit: (entry: GameEntry) => void;
+	onDelete: (entry: GameEntry) => void;
+	isDeleting: boolean;
+}> = ({ library, onEdit, onDelete, isDeleting }) => {
+	const games = library.data ?? [];
+	return (
+		<QueryState
+			isLoading={library.isLoading}
+			error={library.error}
+			refetch={library.refetch}
+		>
+			{games.length === 0 ? (
+				<Card>
+					<CardContent className="p-8 text-center text-sm text-muted-foreground">
+						{m.library_empty()}
+					</CardContent>
+				</Card>
+			) : (
+				<div className="@container">
+					<motion.div
+						transition={{ delayChildren: stagger(0.1) }}
+						variants={{ enter: {}, from: {} }}
+						className="grid grid-cols-1 gap-card @sm:grid-cols-2 @md:grid-cols-2 @lg:grid-cols-3 @2xl:grid-cols-4 @4xl:grid-cols-5"
+					>
+						{games.map((game) => (
+							<GameCard
+								key={game.id}
+								game={game}
+								onEdit={() => onEdit(game)}
+								onDelete={() => onDelete(game)}
+								deleting={isDeleting}
+							/>
+						))}
+					</motion.div>
+				</div>
+			)}
+		</QueryState>
+	);
+};

web/src/sections/Library/helpers.ts

@@ -0,0 +1,8 @@
+import type { GameEntry } from "@/api/gen/model/gameEntry";
+
+/** The custom-CRUD path param is the raw id without the `custom:` prefix. */
+export function customId(entry: GameEntry): string {
+	return entry.id.startsWith("custom:")
+		? entry.id.slice("custom:".length)
+		: entry.id;
+}

web/src/sections/Library/index.tsx

@@ -1,37 +1,44 @@
-import { useQueryClient } from "@tanstack/react-query";
-import type { FC } from "react";
-import {
-	getGetLibraryQueryKey,
-	useCreateCustomGame,
-	useDeleteCustomGame,
-	useGetLibrary,
-	useUpdateCustomGame,
-} from "@/api/gen/library/library";
-import type { CustomInput } from "@/api/gen/model/customInput";
+import Section from "@unom/ui/section";
+import { Plus } from "lucide-react";
+import { type FC, useState } from "react";
+import { Button } from "@/components/ui/button";
 import { useLocale } from "@/lib/i18n";
-import { LibraryView } from "./view";
+import { m } from "@/paraglide/messages";
+import { type FormTarget, GameFormSection } from "./GameForm";
+import { LibraryGridSection } from "./LibraryGrid";
 
+// Library = an OVERVIEW grid + a SEPARATE add/edit form, deliberately split into their own files
+// (LibraryGrid / GameForm) so the two concerns never share a component. This container owns only the
+// shared "is the form open, and for what" UI state; the grid and form each own their own data.
 export const SectionLibrary: FC = () => {
 	useLocale();
-	const qc = useQueryClient();
-	const library = useGetLibrary();
-	const create = useCreateCustomGame();
-	const update = useUpdateCustomGame();
-	const remove = useDeleteCustomGame();
-
-	const invalidate = () =>
-		qc.invalidateQueries({ queryKey: getGetLibraryQueryKey() });
+	// null = form hidden; "new" = adding; a GameEntry = editing that custom entry. Keying the form
+	// by the target re-seeds its fields when switching add → edit (or between entries).
+	const [target, setTarget] = useState<FormTarget | null>(null);
 
 	return (
-		<LibraryView
-			library={library}
-			onCreate={(data: CustomInput) =>
-				create.mutateAsync({ data }).then(invalidate)
-			}
-			onUpdate={(id, data) => update.mutateAsync({ id, data }).then(invalidate)}
-			onDelete={(id) => remove.mutateAsync({ id }).then(invalidate)}
-			isSaving={create.isPending || update.isPending}
-			isDeleting={remove.isPending}
+		<Section maxWidth={false}>
+			<div className="flex flex-col gap-card">
+				<div className="flex items-center justify-between gap-4">
+					<h1 className="text-2xl font-semibold">{m.library_title()}</h1>
+					{target === null && (
+						<Button onClick={() => setTarget("new")}>
+							<Plus className="size-4" />
+							{m.library_add_button()}
+						</Button>
+					)}
+				</div>
+
+				{target !== null && (
+					<GameFormSection
+						key={target === "new" ? "new" : target.id}
+						target={target}
+						onClose={() => setTarget(null)}
 					/>
+				)}
+
+				<LibraryGridSection onEdit={(entry) => setTarget(entry)} />
+			</div>
+		</Section>
 	);
 };

web/src/sections/Library/view.tsx

@@ -1,327 +0,0 @@
-import { Pencil, Plus, Trash2, X } from "lucide-react";
-import { type FC, useState } from "react";
-import type { CustomInput } from "@/api/gen/model/customInput";
-import type { GameEntry } from "@/api/gen/model/gameEntry";
-import { QueryState } from "@/components/query-state";
-import { Section } from "@/components/section";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import type { Loadable } from "@/lib/query";
-import { m } from "@/paraglide/messages";
-
-/** The custom-CRUD path param is the raw id without the `custom:` prefix. */
-function customId(entry: GameEntry): string {
-	return entry.id.startsWith("custom:")
-		? entry.id.slice("custom:".length)
-		: entry.id;
-}
-
-/**
- * Display label for a store badge. Steam and custom keep their localized strings; every other store
- * (lutris, heroic, epic, …) is a proper noun shown capitalized, so new providers surface correctly
- * without a translation per store.
- */
-function storeLabel(store: string): string {
-	switch (store) {
-		case "custom":
-			return m.library_store_custom();
-		case "steam":
-			return m.library_store_steam();
-		default:
-			return store.charAt(0).toUpperCase() + store.slice(1);
-	}
-}
-
-interface FormState {
-	title: string;
-	portrait: string;
-	hero: string;
-	header: string;
-	command: string;
-}
-
-const emptyForm: FormState = {
-	title: "",
-	portrait: "",
-	hero: "",
-	header: "",
-	command: "",
-};
-
-function formFrom(entry: GameEntry): FormState {
-	return {
-		title: entry.title,
-		portrait: entry.art.portrait ?? "",
-		hero: entry.art.hero ?? "",
-		header: entry.art.header ?? "",
-		command: entry.launch?.kind === "command" ? entry.launch.value : "",
-	};
-}
-
-/** Map the form to the API body — only attach `launch` when a command was given. */
-function toInput(f: FormState): CustomInput {
-	const trim = (s: string) => {
-		const t = s.trim();
-		return t ? t : undefined;
-	};
-	const command = f.command.trim();
-	return {
-		title: f.title.trim(),
-		art: {
-			portrait: trim(f.portrait),
-			hero: trim(f.hero),
-			header: trim(f.header),
-		},
-		launch: command ? { kind: "command", value: command } : null,
-	};
-}
-
-export const LibraryView: FC<{
-	library: Loadable<GameEntry[]>;
-	onCreate: (data: CustomInput) => Promise<unknown>;
-	onUpdate: (id: string, data: CustomInput) => Promise<unknown>;
-	onDelete: (id: string) => Promise<unknown>;
-	isSaving: boolean;
-	isDeleting: boolean;
-}> = ({ library, onCreate, onUpdate, onDelete, isSaving, isDeleting }) => {
-	// null = form hidden; "" = adding a new entry; an id = editing that custom entry.
-	const [editing, setEditing] = useState<string | null>(null);
-	const [form, setForm] = useState<FormState>(emptyForm);
-
-	const games = library.data ?? [];
-
-	const openAdd = () => {
-		setForm(emptyForm);
-		setEditing("");
-	};
-	const openEdit = (entry: GameEntry) => {
-		setForm(formFrom(entry));
-		setEditing(customId(entry));
-	};
-	const closeForm = () => setEditing(null);
-
-	const handleSubmit = async (e: React.FormEvent) => {
-		e.preventDefault();
-		const data = toInput(form);
-		if (!data.title) return;
-		await (editing ? onUpdate(editing, data) : onCreate(data));
-		closeForm();
-	};
-
-	const handleDelete = async (entry: GameEntry) => {
-		if (!confirm(m.library_delete_confirm())) return;
-		await onDelete(customId(entry));
-	};
-
-	return (
-		<Section>
-			<div className="flex items-center justify-between gap-4">
-				<h1 className="text-2xl font-semibold">{m.library_title()}</h1>
-				{editing === null && (
-					<Button onClick={openAdd}>
-						<Plus className="size-4" />
-						{m.library_add_button()}
-					</Button>
-				)}
-			</div>
-
-			{editing !== null && (
-				<Card className="max-w-xl">
-					<CardHeader className="flex-row items-center justify-between space-y-0">
-						<CardTitle>
-							{editing ? m.library_edit_title() : m.library_add_title()}
-						</CardTitle>
-						<Button
-							variant="ghost"
-							size="icon"
-							aria-label={m.library_cancel()}
-							onClick={closeForm}
-						>
-							<X className="size-4" />
-						</Button>
-					</CardHeader>
-					<CardContent>
-						<form onSubmit={handleSubmit} className="space-y-4">
-							<div className="space-y-2">
-								<Label htmlFor="lib-title">{m.library_field_title()}</Label>
-								<Input
-									id="lib-title"
-									required
-									value={form.title}
-									onChange={(e) =>
-										setForm((f) => ({ ...f, title: e.target.value }))
-									}
-								/>
-							</div>
-							<div className="space-y-2">
-								<Label htmlFor="lib-portrait">
-									{m.library_field_portrait()}
-								</Label>
-								<Input
-									id="lib-portrait"
-									type="url"
-									inputMode="url"
-									value={form.portrait}
-									onChange={(e) =>
-										setForm((f) => ({ ...f, portrait: e.target.value }))
-									}
-								/>
-							</div>
-							<div className="space-y-2">
-								<Label htmlFor="lib-hero">{m.library_field_hero()}</Label>
-								<Input
-									id="lib-hero"
-									type="url"
-									inputMode="url"
-									value={form.hero}
-									onChange={(e) =>
-										setForm((f) => ({ ...f, hero: e.target.value }))
-									}
-								/>
-							</div>
-							<div className="space-y-2">
-								<Label htmlFor="lib-header">{m.library_field_header()}</Label>
-								<Input
-									id="lib-header"
-									type="url"
-									inputMode="url"
-									value={form.header}
-									onChange={(e) =>
-										setForm((f) => ({ ...f, header: e.target.value }))
-									}
-								/>
-							</div>
-							<div className="space-y-2">
-								<Label htmlFor="lib-command">{m.library_field_command()}</Label>
-								<Input
-									id="lib-command"
-									value={form.command}
-									onChange={(e) =>
-										setForm((f) => ({ ...f, command: e.target.value }))
-									}
-								/>
-								<p className="text-xs text-muted-foreground">
-									{m.library_field_command_help()}
-								</p>
-							</div>
-							<div className="flex gap-2">
-								<Button type="submit" disabled={isSaving || !form.title.trim()}>
-									{editing ? m.library_save() : m.library_create()}
-								</Button>
-								<Button type="button" variant="outline" onClick={closeForm}>
-									{m.library_cancel()}
-								</Button>
-							</div>
-						</form>
-					</CardContent>
-				</Card>
-			)}
-
-			<QueryState
-				isLoading={library.isLoading}
-				error={library.error}
-				refetch={library.refetch}
-			>
-				{games.length === 0 ? (
-					<Card>
-						<CardContent className="p-8 text-center text-sm text-muted-foreground">
-							{m.library_empty()}
-						</CardContent>
-					</Card>
-				) : (
-					<div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
-						{games.map((game) => (
-							<GameCard
-								key={game.id}
-								game={game}
-								onEdit={() => openEdit(game)}
-								onDelete={() => handleDelete(game)}
-								deleting={isDeleting}
-							/>
-						))}
-					</div>
-				)}
-			</QueryState>
-		</Section>
-	);
-};
-
-interface GameCardProps {
-	game: GameEntry;
-	onEdit: () => void;
-	onDelete: () => void;
-	deleting: boolean;
-}
-
-/**
- * A poster tile. The cover prefers the 2:3 portrait capsule; on a load error it
- * falls back to the wide header, then to a text placeholder. Custom entries get
- * edit/delete affordances.
- */
-const GameCard: FC<GameCardProps> = ({ game, onEdit, onDelete, deleting }) => {
-	const isCustom = game.store === "custom";
-	// Track which sources have failed so the <img> can step down portrait → header → placeholder.
-	const [failed, setFailed] = useState<Record<string, boolean>>({});
-
-	const candidates = [game.art.portrait, game.art.header].filter(
-		(u): u is string => !!u && !failed[u],
-	);
-	const src = candidates[0];
-
-	return (
-		<Card className="group relative overflow-hidden">
-			<div className="relative aspect-[2/3] bg-muted">
-				{src ? (
-					<img
-						src={src}
-						alt={game.title}
-						loading="lazy"
-						className="size-full object-cover"
-						onError={() => setFailed((prev) => ({ ...prev, [src]: true }))}
-					/>
-				) : (
-					<div className="flex size-full items-center justify-center p-3 text-center text-sm font-medium text-muted-foreground">
-						{game.title}
-					</div>
-				)}
-				<div className="absolute left-2 top-2">
-					<Badge
-						variant={isCustom ? "secondary" : "outline"}
-						className="bg-background/80 backdrop-blur"
-					>
-						{storeLabel(game.store)}
-					</Badge>
-				</div>
-				{isCustom && (
-					<div className="absolute right-2 top-2 flex gap-1 opacity-0 transition-opacity group-hover:opacity-100 focus-within:opacity-100">
-						<Button
-							variant="secondary"
-							size="icon"
-							className="size-7 bg-background/80 backdrop-blur"
-							aria-label={m.library_edit()}
-							onClick={onEdit}
-						>
-							<Pencil className="size-3.5" />
-						</Button>
-						<Button
-							variant="secondary"
-							size="icon"
-							className="size-7 bg-background/80 backdrop-blur"
-							aria-label={m.library_delete()}
-							disabled={deleting}
-							onClick={onDelete}
-						>
-							<Trash2 className="size-3.5 text-destructive" />
-						</Button>
-					</div>
-				)}
-			</div>
-			<div className="truncate p-2 text-sm font-medium" title={game.title}>
-				{game.title}
-			</div>
-		</Card>
-	);
-};

web/src/sections/Login/index.tsx

@@ -23,8 +23,7 @@ export const SectionLogin: FC<{ next?: string }> = ({ next }) => {
 			}
 			// Full reload to the target so SSR re-runs WITH the new session cookie. Only a
 			// same-origin path — reject protocol-relative/absolute URLs (open-redirect guard).
-			const safe =
-				next && next.startsWith("/") && !next.startsWith("//") ? next : "/";
+			const safe = next?.startsWith("/") && !next.startsWith("//") ? next : "/";
 			window.location.href = safe;
 		} catch {
 			setError(true);

web/src/sections/Login/view.tsx

@@ -1,3 +1,5 @@
+import { ease } from "@unom/style";
+import { motion } from "motion/react";
 import { type FC, useState } from "react";
 import Logo from "@/components/logo";
 import { Button } from "@/components/ui/button";
@@ -13,14 +15,28 @@ export const LoginView: FC<{
 }> = ({ onSubmit, error, busy }) => {
 	const [password, setPassword] = useState("");
 	return (
-		<div className="flex min-h-screen items-center justify-center p-6">
-			<Card className="w-full max-w-sm">
-				<CardHeader className="items-center text-center">
-					<div className="mb-2 flex w-[80px] items-center gap-2">
+		<div className="flex flex-col min-h-screen items-center justify-center p-6">
+			<motion.div
+				transition={ease.quint(0.9).out}
+				variants={{ enter: { scale: 1, y: 0 }, from: { scale: 0, y: 100 } }}
+				className="mb-8 flex w-[120px]"
+			>
 				<Logo />
-					</div>
-					<CardTitle>{m.login_title()}</CardTitle>
-					<p className="text-sm text-muted-foreground">{m.login_subtitle()}</p>
+			</motion.div>
+			<Card className="w-full max-w-sm h-fit grow-0">
+				<CardHeader className="items-start text-left">
+					<CardTitle className="text-xl">{m.login_title()}</CardTitle>
+					<p className="text-sm text-muted-foreground">
+						{m.login_subtitle()}{" "}
+						<a
+							href="https://docs.punktfunk.unom.io/docs/forgot-password"
+							target="_blank"
+							rel="noreferrer"
+							className="underline underline-offset-4 hover:text-foreground"
+						>
+							{m.login_docs_link()}
+						</a>
+					</p>
 				</CardHeader>
 				<CardContent>
 					<form
@@ -35,7 +51,6 @@ export const LoginView: FC<{
 							<Input
 								id="pw"
 								type="password"
-								// biome-ignore lint/a11y/noAutofocus: the login screen is the sole focus target.
 								autoFocus
 								autoComplete="current-password"
 								value={password}

web/src/sections/Pairing/MoonlightPairingCard.tsx

@@ -0,0 +1,126 @@
+import { useQueryClient } from "@tanstack/react-query";
+import { CheckCircle2, KeyRound } from "lucide-react";
+import { type FC, useState } from "react";
+import type { PairingStatus } from "@/api/gen/model/pairingStatus";
+import {
+	getGetPairingStatusQueryKey,
+	useGetPairingStatus,
+	useSubmitPairingPin,
+} from "@/api/gen/pairing/pairing";
+import { QueryState } from "@/components/query-state";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import type { Loadable } from "@/lib/query";
+import { m } from "@/paraglide/messages";
+
+/** Container: GameStream/Moonlight pairing — poll status, own the PIN entry, submit it. */
+export const MoonlightPairingSection: FC = () => {
+	const qc = useQueryClient();
+	const [pin, setPin] = useState("");
+	const pairing = useGetPairingStatus({ query: { refetchInterval: 2_000 } });
+	const submit = useSubmitPairingPin();
+
+	const onSubmit = () =>
+		submit.mutate(
+			{ data: { pin } },
+			{
+				onSuccess: () => {
+					setPin("");
+					qc.invalidateQueries({ queryKey: getGetPairingStatusQueryKey() });
+				},
+			},
+		);
+
+	return (
+		<MoonlightPairing
+			pairing={pairing}
+			pin={pin}
+			onPinChange={setPin}
+			onSubmit={onSubmit}
+			isSubmitting={submit.isPending}
+			isSuccess={submit.isSuccess}
+			isError={submit.isError}
+		/>
+	);
+};
+
+/** GameStream/Moonlight pairing: the client shows a PIN, the operator submits it here. */
+export const MoonlightPairing: FC<{
+	pairing: Loadable<PairingStatus>;
+	pin: string;
+	onPinChange: (v: string) => void;
+	onSubmit: () => void;
+	isSubmitting: boolean;
+	isSuccess: boolean;
+	isError: boolean;
+}> = ({
+	pairing,
+	pin,
+	onPinChange,
+	onSubmit,
+	isSubmitting,
+	isSuccess,
+	isError,
+}) => {
+	const pending = pairing.data?.pin_pending ?? false;
+	return (
+		<QueryState
+			isLoading={pairing.isLoading}
+			error={pairing.error}
+			refetch={pairing.refetch}
+		>
+			<Card>
+				<CardHeader>
+					<CardTitle className="flex items-center gap-2">
+						<KeyRound className="size-4" />
+						{m.pairing_moonlight_title()}
+					</CardTitle>
+				</CardHeader>
+				<CardContent>
+					{!pending ? (
+						<p className="text-sm text-muted-foreground">{m.pairing_idle()}</p>
+					) : (
+						<form
+							onSubmit={(e) => {
+								e.preventDefault();
+								onSubmit();
+							}}
+							className="space-y-4"
+						>
+							<p className="text-sm">{m.pairing_waiting()}</p>
+							<div className="space-y-2">
+								<Label htmlFor="pin">{m.pairing_pin_label()}</Label>
+								<Input
+									id="pin"
+									inputMode="numeric"
+									autoComplete="off"
+									maxLength={8}
+									value={pin}
+									onChange={(e) =>
+										onPinChange(e.target.value.replace(/\D/g, ""))
+									}
+									placeholder="0000"
+									className="font-mono text-lg tracking-widest"
+								/>
+							</div>
+							<Button type="submit" disabled={pin.length < 4 || isSubmitting}>
+								{m.pairing_submit()}
+							</Button>
+							{isSuccess && (
+								<p className="flex items-center gap-1.5 text-sm text-[var(--success)]">
+									<CheckCircle2 className="size-4" />
+									{m.pairing_success()}
+								</p>
+							)}
+							{isError && (
+								<p className="text-sm text-destructive">{m.pairing_failed()}</p>
+							)}
+						</form>
+					)}
+				</CardContent>
+			</Card>
+		</QueryState>
+	);
+};

web/src/sections/Pairing/NativePairingCard.tsx

@@ -0,0 +1,115 @@
+import { useQueryClient } from "@tanstack/react-query";
+import { KeyRound, Smartphone, Timer } from "lucide-react";
+import type { FC } from "react";
+import type { NativePairStatus } from "@/api/gen/model/nativePairStatus";
+import {
+	getGetNativePairingQueryKey,
+	useArmNativePairing,
+	useDisarmNativePairing,
+	useGetNativePairing,
+} from "@/api/gen/native/native";
+import { QueryState } from "@/components/query-state";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import type { Loadable } from "@/lib/query";
+import { m } from "@/paraglide/messages";
+
+/** Seconds → `m:ss`. */
+function fmtTime(secs: number): string {
+	const s = Math.max(0, Math.floor(secs));
+	return `${Math.floor(s / 60)}:${(s % 60).toString().padStart(2, "0")}`;
+}
+
+/**
+ * Container: native (punktfunk/1) pairing — arm a window, poll fast while armed
+ * for the live countdown, slow otherwise.
+ */
+export const NativePairingSection: FC = () => {
+	const qc = useQueryClient();
+	const native = useGetNativePairing({
+		query: { refetchInterval: (q) => (q.state.data?.armed ? 1_000 : 4_000) },
+	});
+	const arm = useArmNativePairing();
+	const disarm = useDisarmNativePairing();
+
+	const refresh = () =>
+		qc.invalidateQueries({ queryKey: getGetNativePairingQueryKey() });
+	const onArm = () =>
+		arm.mutate({ data: { ttl_secs: 120 } }, { onSuccess: refresh });
+	const onDisarm = () => disarm.mutate(undefined, { onSuccess: refresh });
+
+	return (
+		<NativePairingCard
+			status={native}
+			onArm={onArm}
+			onDisarm={onDisarm}
+			isArming={arm.isPending}
+			isDisarming={disarm.isPending}
+		/>
+	);
+};
+
+/** Native (punktfunk/1) pairing: arm a window → DISPLAY the PIN the user enters on their device. */
+export const NativePairingCard: FC<{
+	status: Loadable<NativePairStatus>;
+	onArm: () => void;
+	onDisarm: () => void;
+	isArming: boolean;
+	isDisarming: boolean;
+}> = ({ status, onArm, onDisarm, isArming, isDisarming }) => {
+	const d = status.data;
+	return (
+		<QueryState
+			isLoading={status.isLoading}
+			error={status.error}
+			refetch={status.refetch}
+		>
+			<Card>
+				<CardHeader>
+					<CardTitle className="flex items-center gap-2">
+						<Smartphone className="size-4" />
+						{m.pairing_native_title()}
+					</CardTitle>
+				</CardHeader>
+				<CardContent className="space-y-4">
+					{!d?.enabled ? (
+						<p className="text-sm text-muted-foreground">
+							{m.pairing_native_disabled()}
+						</p>
+					) : d.armed && d.pin ? (
+						<div className="space-y-3">
+							<p className="text-sm">{m.pairing_native_enter()}</p>
+							<div className="rounded-lg border bg-muted/40 py-5 text-center font-mono text-4xl font-semibold tracking-[0.3em]">
+								{d.pin}
+							</div>
+							{d.expires_in_secs != null && (
+								<p className="flex items-center justify-center gap-1.5 text-sm text-muted-foreground">
+									<Timer className="size-4" />
+									{m.pairing_native_expires()} {fmtTime(d.expires_in_secs)}
+								</p>
+							)}
+							<Button
+								variant="outline"
+								className="w-full"
+								disabled={isDisarming}
+								onClick={onDisarm}
+							>
+								{m.pairing_native_cancel()}
+							</Button>
+						</div>
+					) : (
+						<>
+							<p className="text-sm text-muted-foreground">
+								{m.pairing_native_desc()}
+							</p>
+							<Button disabled={isArming} onClick={onArm}>
+								<KeyRound className="size-4" />
+								{m.pairing_native_arm()}
+							</Button>
+						</>
+					)}
+				</CardContent>
+			</Card>
+		</QueryState>
+	);
+};

web/src/sections/Pairing/PairedDevices.tsx

@@ -0,0 +1,169 @@
+import { useQueryClient } from "@tanstack/react-query";
+import { Trash2 } from "lucide-react";
+import type { FC } from "react";
+import {
+	getListPairedClientsQueryKey,
+	useListPairedClients,
+	useUnpairClient,
+} from "@/api/gen/clients/clients";
+import {
+	getListNativeClientsQueryKey,
+	useListNativeClients,
+	useUnpairNativeClient,
+} from "@/api/gen/native/native";
+import { QueryState } from "@/components/query-state";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "@/components/ui/table";
+import { m } from "@/paraglide/messages";
+
+/** The two pairing protocols a device can be paired over. */
+export type PairedProtocol = "native" | "moonlight";
+
+/** One paired device, normalized across the native + Moonlight lists. */
+export interface PairedRow {
+	protocol: PairedProtocol;
+	fingerprint: string;
+	/** Native devices carry a name; Moonlight clients carry a cert subject; either may be empty. */
+	name: string;
+}
+
+/**
+ * Container: ALL paired devices in one list. Merges the native (punktfunk/1) clients and the
+ * GameStream/Moonlight clients — two separate host endpoints — into a single table tagged by
+ * protocol, and routes each unpair back to the right endpoint.
+ */
+export const PairedDevicesSection: FC = () => {
+	const qc = useQueryClient();
+	const native = useListNativeClients();
+	const moonlight = useListPairedClients();
+	const unpairNative = useUnpairNativeClient();
+	const unpairMoonlight = useUnpairClient();
+
+	const rows: PairedRow[] = [
+		...(native.data ?? []).map(
+			(c): PairedRow => ({
+				protocol: "native",
+				fingerprint: c.fingerprint,
+				name: c.name,
+			}),
+		),
+		...(moonlight.data ?? []).map(
+			(c): PairedRow => ({
+				protocol: "moonlight",
+				fingerprint: c.fingerprint,
+				name: c.subject ?? "",
+			}),
+		),
+	];
+
+	const onUnpair = (protocol: PairedProtocol, fingerprint: string) => {
+		if (!confirm(m.pairing_native_unpair_confirm())) return;
+		if (protocol === "native") {
+			unpairNative.mutate(
+				{ fingerprint },
+				{
+					onSuccess: () =>
+						qc.invalidateQueries({ queryKey: getListNativeClientsQueryKey() }),
+				},
+			);
+		} else {
+			unpairMoonlight.mutate(
+				{ fingerprint },
+				{
+					onSuccess: () =>
+						qc.invalidateQueries({ queryKey: getListPairedClientsQueryKey() }),
+				},
+			);
+		}
+	};
+
+	return (
+		<PairedDevices
+			rows={rows}
+			isLoading={native.isLoading || moonlight.isLoading}
+			error={native.error ?? moonlight.error}
+			refetch={() => {
+				native.refetch();
+				moonlight.refetch();
+			}}
+			onUnpair={onUnpair}
+			isUnpairing={unpairNative.isPending || unpairMoonlight.isPending}
+		/>
+	);
+};
+
+/** All paired devices (native + Moonlight) in one table, differentiated by a protocol badge. */
+export const PairedDevices: FC<{
+	rows: PairedRow[];
+	isLoading: boolean;
+	error: unknown;
+	refetch: () => void;
+	onUnpair: (protocol: PairedProtocol, fingerprint: string) => void;
+	isUnpairing: boolean;
+}> = ({ rows, isLoading, error, refetch, onUnpair, isUnpairing }) => (
+	<Card>
+		<CardHeader>
+			<h2 className="text-lg font-medium">{m.pairing_native_devices()}</h2>
+		</CardHeader>
+
+		<CardContent className="p-6">
+			<QueryState isLoading={isLoading} error={error} refetch={refetch}>
+				{rows.length === 0 ? (
+					m.pairing_native_empty()
+				) : (
+					<Table>
+						<TableHeader>
+							<TableRow>
+								<TableHead>{m.clients_name()}</TableHead>
+								<TableHead>{m.pairing_protocol()}</TableHead>
+								<TableHead>{m.clients_fingerprint()}</TableHead>
+								<TableHead className="w-12" />
+							</TableRow>
+						</TableHeader>
+						<TableBody>
+							{rows.map((r) => (
+								<TableRow key={`${r.protocol}:${r.fingerprint}`}>
+									<TableCell className="font-medium">{r.name || "—"}</TableCell>
+									<TableCell>
+										<Badge
+											variant={
+												r.protocol === "native" ? "default" : "secondary"
+											}
+										>
+											{r.protocol === "native"
+												? m.pairing_protocol_native()
+												: m.pairing_protocol_moonlight()}
+										</Badge>
+									</TableCell>
+									<TableCell className="font-mono text-xs text-muted-foreground">
+										{r.fingerprint.slice(0, 16)}…
+									</TableCell>
+									<TableCell>
+										<Button
+											variant="ghost"
+											size="icon"
+											aria-label={m.action_unpair()}
+											disabled={isUnpairing}
+											onClick={() => onUnpair(r.protocol, r.fingerprint)}
+										>
+											<Trash2 className="size-4 text-destructive" />
+										</Button>
+									</TableCell>
+								</TableRow>
+							))}
+						</TableBody>
+					</Table>
+				)}
+			</QueryState>
+		</CardContent>
+	</Card>
+);

web/src/sections/Pairing/PendingDevices.tsx

@@ -0,0 +1,131 @@
+import { useQueryClient } from "@tanstack/react-query";
+import { Button } from "@unom/ui/button";
+import { UserPlus, X } from "lucide-react";
+import type { FC } from "react";
+import type { PendingDevice } from "@/api/gen/model";
+import {
+	getListNativeClientsQueryKey,
+	getListPendingDevicesQueryKey,
+	useApprovePendingDevice,
+	useDenyPendingDevice,
+	useListPendingDevices,
+} from "@/api/gen/native/native";
+import { QueryState } from "@/components/query-state";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Table, TableBody, TableCell, TableRow } from "@/components/ui/table";
+import type { Loadable } from "@/lib/query";
+import { fmtAge } from "@/lib/utils";
+import { m } from "@/paraglide/messages";
+
+/**
+ * Container: devices awaiting delegated approval. Polls so a knock appears while
+ * looking; approving pairs the device, so it also refreshes the paired-clients
+ * list (owned by the PairedDevices subsection — invalidated here by query key).
+ */
+export const PendingDevicesSection: FC = () => {
+	const qc = useQueryClient();
+	const pending = useListPendingDevices({ query: { refetchInterval: 3_000 } });
+	const approve = useApprovePendingDevice();
+	const deny = useDenyPendingDevice();
+
+	const refresh = () => {
+		qc.invalidateQueries({ queryKey: getListPendingDevicesQueryKey() });
+		qc.invalidateQueries({ queryKey: getListNativeClientsQueryKey() });
+	};
+	const onApprove = (id: number, currentName: string) => {
+		const name = prompt(m.pairing_pending_name_prompt(), currentName);
+		if (name == null) return; // operator cancelled
+		approve.mutate(
+			{ id, data: { name: name.trim() ? name.trim() : null } },
+			{ onSuccess: refresh },
+		);
+	};
+	const onDeny = (id: number) => deny.mutate({ id }, { onSuccess: refresh });
+
+	return (
+		<PendingDevices
+			pending={pending}
+			onApprove={onApprove}
+			onDeny={onDeny}
+			busy={approve.isPending || deny.isPending}
+		/>
+	);
+};
+
+/**
+ * Devices awaiting delegated approval: an unpaired device that tried to connect
+ * shows up here, and Approve pairs it on the spot. Renders nothing while empty
+ * (the common case) unless there's an error to surface.
+ */
+export const PendingDevices: FC<{
+	pending: Loadable<PendingDevice[]>;
+	onApprove: (id: number, currentName: string) => void;
+	onDeny: (id: number) => void;
+	busy: boolean;
+}> = ({ pending, onApprove, onDeny, busy }) => {
+	const rows = pending.data ?? [];
+	// Stay out of the way when there's nothing pending and the fetch is healthy — but DON'T swallow
+	// a real error (a 500 etc.); fall through to QueryState below so it surfaces like every other
+	// section. (A 401 is handled globally by the fetcher's redirect-to-login.)
+	if (rows.length === 0 && !pending.error) return null;
+
+	return (
+		<Card>
+			<CardContent className="p-0">
+				<CardHeader>
+					<CardTitle>
+						<h2 className="flex items-center gap-2 text-lg font-medium">
+							<UserPlus className="size-4" />
+							{m.pairing_pending_title()}
+						</h2>
+						<p className="text-sm text-muted-foreground">
+							{m.pairing_pending_desc()}
+						</p>
+					</CardTitle>
+				</CardHeader>
+
+				<QueryState
+					isLoading={pending.isLoading}
+					error={pending.error}
+					refetch={pending.refetch}
+				>
+					<Table>
+						<TableBody>
+							{rows.map((p) => (
+								<TableRow className="h-18" key={p.id}>
+									<TableCell className="font-medium">{p.name}</TableCell>
+									<TableCell className="font-mono text-xs text-muted-foreground">
+										{p.fingerprint.slice(0, 16)}…
+									</TableCell>
+									<TableCell className="text-xs text-muted-foreground">
+										{fmtAge(p.age_secs)}
+									</TableCell>
+									<TableCell className="text-right">
+										<div className="flex justify-end gap-2">
+											<Button
+												size="sm"
+												disabled={busy}
+												onClick={() => onApprove(p.id, p.name)}
+											>
+												{m.pairing_pending_approve()}
+											</Button>
+											<Button
+												size="sm"
+												variant="ghost"
+												aria-label={m.pairing_pending_deny()}
+												disabled={busy}
+												onClick={() => onDeny(p.id)}
+											>
+												<X className="size-4" />
+											</Button>
+										</div>
+									</TableCell>
+								</TableRow>
+							))}
+						</TableBody>
+					</Table>
+				</QueryState>
+			</CardContent>
+		</Card>
+	);
+};

web/src/sections/Pairing/index.tsx

@@ -1,118 +1,23 @@
-import { useQueryClient } from "@tanstack/react-query";
-import { type FC, useState } from "react";
-import {
-	getGetNativePairingQueryKey,
-	getListNativeClientsQueryKey,
-	getListPendingDevicesQueryKey,
-	useApprovePendingDevice,
-	useArmNativePairing,
-	useDenyPendingDevice,
-	useDisarmNativePairing,
-	useGetNativePairing,
-	useListNativeClients,
-	useListPendingDevices,
-	useUnpairNativeClient,
-} from "@/api/gen/native/native";
-import {
-	getGetPairingStatusQueryKey,
-	useGetPairingStatus,
-	useSubmitPairingPin,
-} from "@/api/gen/pairing/pairing";
+import type { FC } from "react";
 import { useLocale } from "@/lib/i18n";
-import { m } from "@/paraglide/messages";
+import { MoonlightPairingSection } from "./MoonlightPairingCard";
+import { NativePairingSection } from "./NativePairingCard";
+import { PairedDevicesSection } from "./PairedDevices";
+import { PendingDevicesSection } from "./PendingDevices";
 import { PairingView } from "./view";
 
-// Container: owns the four sub-cards' queries + mutations and hands a plain props
-// surface to PairingView. (The presentational split mirrors Dashboard/Clients/Stats
-// and lets Storybook render the page with mock state — no live host.)
+// Pairing composes four independent, self-contained sub-cards. Each subsection owns its own
+// queries + mutations (in its own file, next to its presentational card). The arrangement lives in
+// PairingView so the live page (these containers) and the Storybook story (pure cards + mock state)
+// fill the same slots — the layout is defined once and can't drift.
 export const SectionPairing: FC = () => {
 	useLocale();
-	const qc = useQueryClient();
-	const [pin, setPin] = useState("");
-
-	// Devices awaiting delegated approval — polls so a knock appears while looking.
-	const pending = useListPendingDevices({ query: { refetchInterval: 3_000 } });
-	const approve = useApprovePendingDevice();
-	const deny = useDenyPendingDevice();
-
-	// Native (punktfunk/1) pairing: poll fast while armed (live countdown), slow otherwise.
-	const native = useGetNativePairing({
-		query: { refetchInterval: (q) => (q.state.data?.armed ? 1_000 : 4_000) },
-	});
-	const arm = useArmNativePairing();
-	const disarm = useDisarmNativePairing();
-
-	const clients = useListNativeClients();
-	const unpair = useUnpairNativeClient();
-
-	const pairing = useGetPairingStatus({ query: { refetchInterval: 2_000 } });
-	const submit = useSubmitPairingPin();
-
-	const refreshPending = () => {
-		qc.invalidateQueries({ queryKey: getListPendingDevicesQueryKey() });
-		qc.invalidateQueries({ queryKey: getListNativeClientsQueryKey() });
-	};
-	const refreshNative = () =>
-		qc.invalidateQueries({ queryKey: getGetNativePairingQueryKey() });
-
-	const onApprove = (id: number, currentName: string) => {
-		const name = prompt(m.pairing_pending_name_prompt(), currentName);
-		if (name == null) return; // operator cancelled
-		approve.mutate(
-			{ id, data: { name: name.trim() ? name.trim() : null } },
-			{ onSuccess: refreshPending },
-		);
-	};
-	const onDeny = (id: number) =>
-		deny.mutate({ id }, { onSuccess: refreshPending });
-
-	const onArm = () =>
-		arm.mutate({ data: { ttl_secs: 120 } }, { onSuccess: refreshNative });
-	const onDisarm = () => disarm.mutate(undefined, { onSuccess: refreshNative });
-
-	const onUnpair = (fingerprint: string) => {
-		if (!confirm(m.pairing_native_unpair_confirm())) return;
-		unpair.mutate(
-			{ fingerprint },
-			{
-				onSuccess: () =>
-					qc.invalidateQueries({ queryKey: getListNativeClientsQueryKey() }),
-			},
-		);
-	};
-
-	const onSubmitPin = () =>
-		submit.mutate(
-			{ data: { pin } },
-			{
-				onSuccess: () => {
-					setPin("");
-					qc.invalidateQueries({ queryKey: getGetPairingStatusQueryKey() });
-				},
-			},
-		);
-
 	return (
 		<PairingView
-			pending={pending}
-			onApprove={onApprove}
-			onDeny={onDeny}
-			pendingBusy={approve.isPending || deny.isPending}
-			native={native}
-			onArm={onArm}
-			onDisarm={onDisarm}
-			isArming={arm.isPending}
-			isDisarming={disarm.isPending}
-			clients={clients}
-			onUnpair={onUnpair}
-			isUnpairing={unpair.isPending}
-			moonlight={pairing}
-			pin={pin}
-			onPinChange={setPin}
-			onSubmitPin={onSubmitPin}
-			isSubmittingPin={submit.isPending}
-			pinSuccess={submit.isSuccess}
-			pinError={submit.isError}
+			pending={<PendingDevicesSection />}
+			native={<NativePairingSection />}
+			moonlight={<MoonlightPairingSection />}
+			paired={<PairedDevicesSection />}
 		/>
 	);
 };

web/src/sections/Pairing/view.tsx

@@ -1,387 +1,28 @@
-import {
-	CheckCircle2,
-	KeyRound,
-	Smartphone,
-	Timer,
-	Trash2,
-	UserPlus,
-	X,
-} from "lucide-react";
-import type { FC } from "react";
-import type { NativeClient } from "@/api/gen/model/nativeClient";
-import type { NativePairStatus } from "@/api/gen/model/nativePairStatus";
-import type { PairingStatus } from "@/api/gen/model/pairingStatus";
-import type { PendingDevice } from "@/api/gen/model/pendingDevice";
-import { QueryState } from "@/components/query-state";
-import { Section } from "@/components/section";
-import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import {
-	Table,
-	TableBody,
-	TableCell,
-	TableHead,
-	TableHeader,
-	TableRow,
-} from "@/components/ui/table";
-import type { Loadable } from "@/lib/query";
+import Section from "@unom/ui/section";
+import type { FC, ReactNode } from "react";
 import { m } from "@/paraglide/messages";
 
-/** Seconds → `m:ss`. */
-function fmtTime(secs: number): string {
-	const s = Math.max(0, Math.floor(secs));
-	return `${Math.floor(s / 60)}:${(s % 60).toString().padStart(2, "0")}`;
-}
-
-/** Seconds since a knock → a short relative label. */
-function fmtAge(secs: number): string {
-	if (secs < 10) return m.pairing_pending_age_just_now();
-	if (secs < 60) return m.pairing_pending_age_secs({ s: Math.floor(secs) });
-	return m.pairing_pending_age_mins({ min: Math.floor(secs / 60) });
-}
-
-export interface PairingViewProps {
-	pending: Loadable<PendingDevice[]>;
-	onApprove: (id: number, currentName: string) => void;
-	onDeny: (id: number) => void;
-	pendingBusy: boolean;
-
-	native: Loadable<NativePairStatus>;
-	onArm: () => void;
-	onDisarm: () => void;
-	isArming: boolean;
-	isDisarming: boolean;
-
-	clients: Loadable<NativeClient[]>;
-	onUnpair: (fingerprint: string) => void;
-	isUnpairing: boolean;
-
-	moonlight: Loadable<PairingStatus>;
-	pin: string;
-	onPinChange: (v: string) => void;
-	onSubmitPin: () => void;
-	isSubmittingPin: boolean;
-	pinSuccess: boolean;
-	pinError: boolean;
-}
-
-// Pairing composes four independent sub-cards. This is the pure presentational
-// surface (mirrors every other page's view.tsx); the container in index.tsx wires
-// the queries + mutations. Stories feed mock state so no live host is needed.
-export const PairingView: FC<PairingViewProps> = (props) => (
-	<Section>
+/**
+ * The Pairing page LAYOUT — the single source of how the four sub-cards are arranged. Both the live
+ * page (`index.tsx`, slots = the self-contained `*Section` containers) and Storybook (slots = the
+ * pure cards with mock state) fill these slots, so the arrangement can never drift between them.
+ */
+export const PairingView: FC<{
+	pending: ReactNode;
+	native: ReactNode;
+	moonlight: ReactNode;
+	paired: ReactNode;
+}> = ({ pending, native, moonlight, paired }) => (
+	<Section maxWidth={false}>
+		<div className="flex flex-col gap-card">
 			<h1 className="text-2xl font-semibold">{m.pairing_title()}</h1>
-		<PendingDevicesCard
-			pending={props.pending}
-			onApprove={props.onApprove}
-			onDeny={props.onDeny}
-			busy={props.pendingBusy}
-		/>
-		<NativePairingCard
-			status={props.native}
-			onArm={props.onArm}
-			onDisarm={props.onDisarm}
-			isArming={props.isArming}
-			isDisarming={props.isDisarming}
-		/>
-		<NativeDevicesCard
-			clients={props.clients}
-			onUnpair={props.onUnpair}
-			isUnpairing={props.isUnpairing}
-		/>
-		<MoonlightPairingCard
-			pairing={props.moonlight}
-			pin={props.pin}
-			onPinChange={props.onPinChange}
-			onSubmit={props.onSubmitPin}
-			isSubmitting={props.isSubmittingPin}
-			isSuccess={props.pinSuccess}
-			isError={props.pinError}
-		/>
+
+			{pending}
+			<div className="lg:grid lg:grid-cols-2 flex flex-col gap-card">
+				{native}
+				{moonlight}
+			</div>
+			{paired}
+		</div>
 	</Section>
 );
-
-/**
- * Devices awaiting delegated approval: an unpaired device that tried to connect
- * shows up here, and Approve pairs it on the spot. Renders nothing while empty
- * (the common case) unless there's an error to surface.
- */
-const PendingDevicesCard: FC<{
-	pending: Loadable<PendingDevice[]>;
-	onApprove: (id: number, currentName: string) => void;
-	onDeny: (id: number) => void;
-	busy: boolean;
-}> = ({ pending, onApprove, onDeny, busy }) => {
-	const rows = pending.data ?? [];
-	// Stay out of the way when there's nothing pending and the fetch is healthy — but DON'T swallow
-	// a real error (a 500 etc.); fall through to QueryState below so it surfaces like every other
-	// section. (A 401 is handled globally by the fetcher's redirect-to-login.)
-	if (rows.length === 0 && !pending.error) return null;
-
-	return (
-		<div className="space-y-2">
-			<h2 className="flex items-center gap-2 text-lg font-medium">
-				<UserPlus className="size-4" />
-				{m.pairing_pending_title()}
-			</h2>
-			<p className="text-sm text-muted-foreground">
-				{m.pairing_pending_desc()}
-			</p>
-			<QueryState
-				isLoading={pending.isLoading}
-				error={pending.error}
-				refetch={pending.refetch}
-			>
-				<Card>
-					<CardContent className="p-0">
-						<Table>
-							<TableBody>
-								{rows.map((p) => (
-									<TableRow key={p.id}>
-										<TableCell className="font-medium">{p.name}</TableCell>
-										<TableCell className="font-mono text-xs text-muted-foreground">
-											{p.fingerprint.slice(0, 16)}…
-										</TableCell>
-										<TableCell className="text-xs text-muted-foreground">
-											{fmtAge(p.age_secs)}
-										</TableCell>
-										<TableCell className="text-right">
-											<div className="flex justify-end gap-2">
-												<Button
-													size="sm"
-													disabled={busy}
-													onClick={() => onApprove(p.id, p.name)}
-												>
-													{m.pairing_pending_approve()}
-												</Button>
-												<Button
-													size="sm"
-													variant="ghost"
-													aria-label={m.pairing_pending_deny()}
-													disabled={busy}
-													onClick={() => onDeny(p.id)}
-												>
-													<X className="size-4" />
-												</Button>
-											</div>
-										</TableCell>
-									</TableRow>
-								))}
-							</TableBody>
-						</Table>
-					</CardContent>
-				</Card>
-			</QueryState>
-		</div>
-	);
-};
-
-/** Native (punktfunk/1) pairing: arm a window → DISPLAY the PIN the user enters on their device. */
-const NativePairingCard: FC<{
-	status: Loadable<NativePairStatus>;
-	onArm: () => void;
-	onDisarm: () => void;
-	isArming: boolean;
-	isDisarming: boolean;
-}> = ({ status, onArm, onDisarm, isArming, isDisarming }) => {
-	const d = status.data;
-	return (
-		<QueryState
-			isLoading={status.isLoading}
-			error={status.error}
-			refetch={status.refetch}
-		>
-			<Card className="max-w-md">
-				<CardHeader>
-					<CardTitle className="flex items-center gap-2">
-						<Smartphone className="size-4" />
-						{m.pairing_native_title()}
-					</CardTitle>
-				</CardHeader>
-				<CardContent className="space-y-4">
-					{!d?.enabled ? (
-						<p className="text-sm text-muted-foreground">
-							{m.pairing_native_disabled()}
-						</p>
-					) : d.armed && d.pin ? (
-						<div className="space-y-3">
-							<p className="text-sm">{m.pairing_native_enter()}</p>
-							<div className="rounded-lg border bg-muted/40 py-5 text-center font-mono text-4xl font-semibold tracking-[0.3em]">
-								{d.pin}
-							</div>
-							{d.expires_in_secs != null && (
-								<p className="flex items-center justify-center gap-1.5 text-sm text-muted-foreground">
-									<Timer className="size-4" />
-									{m.pairing_native_expires()} {fmtTime(d.expires_in_secs)}
-								</p>
-							)}
-							<Button
-								variant="outline"
-								className="w-full"
-								disabled={isDisarming}
-								onClick={onDisarm}
-							>
-								{m.pairing_native_cancel()}
-							</Button>
-						</div>
-					) : (
-						<>
-							<p className="text-sm text-muted-foreground">
-								{m.pairing_native_desc()}
-							</p>
-							<Button disabled={isArming} onClick={onArm}>
-								<KeyRound className="size-4" />
-								{m.pairing_native_arm()}
-							</Button>
-						</>
-					)}
-				</CardContent>
-			</Card>
-		</QueryState>
-	);
-};
-
-/** The paired native (punktfunk/1) devices, with unpair. */
-const NativeDevicesCard: FC<{
-	clients: Loadable<NativeClient[]>;
-	onUnpair: (fingerprint: string) => void;
-	isUnpairing: boolean;
-}> = ({ clients, onUnpair, isUnpairing }) => {
-	const rows = clients.data ?? [];
-	return (
-		<div className="space-y-2">
-			<h2 className="text-lg font-medium">{m.pairing_native_devices()}</h2>
-			<QueryState
-				isLoading={clients.isLoading}
-				error={clients.error}
-				refetch={clients.refetch}
-			>
-				{rows.length === 0 ? (
-					<Card>
-						<CardContent className="p-6 text-center text-sm text-muted-foreground">
-							{m.pairing_native_empty()}
-						</CardContent>
-					</Card>
-				) : (
-					<Card>
-						<CardContent className="p-0">
-							<Table>
-								<TableHeader>
-									<TableRow>
-										<TableHead>{m.clients_name()}</TableHead>
-										<TableHead>{m.clients_fingerprint()}</TableHead>
-										<TableHead className="w-12" />
-									</TableRow>
-								</TableHeader>
-								<TableBody>
-									{rows.map((c) => (
-										<TableRow key={c.fingerprint}>
-											<TableCell className="font-medium">
-												{c.name || "—"}
-											</TableCell>
-											<TableCell className="font-mono text-xs text-muted-foreground">
-												{c.fingerprint.slice(0, 16)}…
-											</TableCell>
-											<TableCell>
-												<Button
-													variant="ghost"
-													size="icon"
-													aria-label={m.action_unpair()}
-													disabled={isUnpairing}
-													onClick={() => onUnpair(c.fingerprint)}
-												>
-													<Trash2 className="size-4 text-destructive" />
-												</Button>
-											</TableCell>
-										</TableRow>
-									))}
-								</TableBody>
-							</Table>
-						</CardContent>
-					</Card>
-				)}
-			</QueryState>
-		</div>
-	);
-};
-
-/** GameStream/Moonlight pairing: the client shows a PIN, the operator submits it here. */
-const MoonlightPairingCard: FC<{
-	pairing: Loadable<PairingStatus>;
-	pin: string;
-	onPinChange: (v: string) => void;
-	onSubmit: () => void;
-	isSubmitting: boolean;
-	isSuccess: boolean;
-	isError: boolean;
-}> = ({
-	pairing,
-	pin,
-	onPinChange,
-	onSubmit,
-	isSubmitting,
-	isSuccess,
-	isError,
-}) => {
-	const pending = pairing.data?.pin_pending ?? false;
-	return (
-		<QueryState
-			isLoading={pairing.isLoading}
-			error={pairing.error}
-			refetch={pairing.refetch}
-		>
-			<Card className="max-w-md">
-				<CardHeader>
-					<CardTitle className="flex items-center gap-2">
-						<KeyRound className="size-4" />
-						{m.pairing_moonlight_title()}
-					</CardTitle>
-				</CardHeader>
-				<CardContent>
-					{!pending ? (
-						<p className="text-sm text-muted-foreground">{m.pairing_idle()}</p>
-					) : (
-						<form
-							onSubmit={(e) => {
-								e.preventDefault();
-								onSubmit();
-							}}
-							className="space-y-4"
-						>
-							<p className="text-sm">{m.pairing_waiting()}</p>
-							<div className="space-y-2">
-								<Label htmlFor="pin">{m.pairing_pin_label()}</Label>
-								<Input
-									id="pin"
-									inputMode="numeric"
-									autoComplete="off"
-									maxLength={8}
-									value={pin}
-									onChange={(e) =>
-										onPinChange(e.target.value.replace(/\D/g, ""))
-									}
-									placeholder="0000"
-									className="font-mono text-lg tracking-widest"
-								/>
-							</div>
-							<Button type="submit" disabled={pin.length < 4 || isSubmitting}>
-								{m.pairing_submit()}
-							</Button>
-							{isSuccess && (
-								<p className="flex items-center gap-1.5 text-sm text-[var(--success)]">
-									<CheckCircle2 className="size-4" />
-									{m.pairing_success()}
-								</p>
-							)}
-							{isError && (
-								<p className="text-sm text-destructive">{m.pairing_failed()}</p>
-							)}
-						</form>
-					)}
-				</CardContent>
-			</Card>
-		</QueryState>
-	);
-};

web/src/sections/Settings/index.tsx

@@ -1,6 +1,6 @@
+import Section from "@unom/ui/section";
 import { LogOut } from "lucide-react";
 import type { FC } from "react";
-import { Section } from "@/components/section";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { changeLocale, type Locale, locales, useLocale } from "@/lib/i18n";
@@ -17,7 +17,8 @@ export const SectionSettings: FC = () => {
 	};
 
 	return (
-		<Section>
+		<Section maxWidth={false}>
+			<div className="flex flex-col gap-card">
 				<h1 className="text-2xl font-semibold">{m.settings_title()}</h1>
 
 				<Card className="max-w-lg">
@@ -50,6 +51,7 @@ export const SectionSettings: FC = () => {
 						</Button>
 					</CardContent>
 				</Card>
+			</div>
 		</Section>
 	);
 };

web/src/sections/Stats/CaptureControl.tsx

@@ -0,0 +1,117 @@
+import { useQueryClient } from "@tanstack/react-query";
+import { Circle, Square } from "lucide-react";
+import type { FC } from "react";
+import type { StatsStatus } from "@/api/gen/model/statsStatus";
+import {
+	getStatsCaptureStatusQueryKey,
+	getStatsRecordingsListQueryKey,
+	useStatsCaptureStart,
+	useStatsCaptureStatus,
+	useStatsCaptureStop,
+} from "@/api/gen/stats/stats";
+import { QueryState } from "@/components/query-state";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import type { Loadable } from "@/lib/query";
+import { m } from "@/paraglide/messages";
+import { fmtDuration, kindLabel, Stat } from "./helpers";
+
+/**
+ * Container: arm/disarm the capture. Owns the polled status query plus start/stop; stopping also
+ * refreshes the recordings list (owned by the Recordings subsection — invalidated here by key).
+ */
+export const CaptureControlSection: FC = () => {
+	const qc = useQueryClient();
+	const status = useStatsCaptureStatus({ query: { refetchInterval: 2_000 } });
+	const start = useStatsCaptureStart();
+	const stop = useStatsCaptureStop();
+
+	const refreshStatus = () =>
+		qc.invalidateQueries({ queryKey: getStatsCaptureStatusQueryKey() });
+	const onStart = () => start.mutate(undefined, { onSuccess: refreshStatus });
+	const onStop = () =>
+		stop.mutate(undefined, {
+			onSuccess: () => {
+				refreshStatus();
+				qc.invalidateQueries({ queryKey: getStatsRecordingsListQueryKey() });
+			},
+		});
+
+	return (
+		<CaptureControlCard
+			status={status}
+			onStart={onStart}
+			onStop={onStop}
+			isStarting={start.isPending}
+			isStopping={stop.isPending}
+		/>
+	);
+};
+
+/** Start/Stop + a Recording/Idle pill with elapsed + sample count. */
+export const CaptureControlCard: FC<{
+	status: Loadable<StatsStatus>;
+	onStart: () => void;
+	onStop: () => void;
+	isStarting: boolean;
+	isStopping: boolean;
+}> = ({ status, onStart, onStop, isStarting, isStopping }) => {
+	const s = status.data;
+	const armed = s?.armed ?? false;
+	const elapsed = armed && s ? Date.now() - s.started_unix_ms : 0;
+	return (
+		<QueryState
+			isLoading={status.isLoading}
+			error={status.error}
+			refetch={status.refetch}
+		>
+			<Card>
+				<CardHeader>
+					<CardTitle className="flex items-center justify-between gap-3">
+						<span>{m.stats_capture_title()}</span>
+						{armed ? (
+							<Badge variant="destructive" className="gap-1.5">
+								<Circle className="size-2.5 animate-pulse fill-current" />
+								{m.stats_recording()}
+							</Badge>
+						) : (
+							<Badge variant="outline">{m.stats_idle()}</Badge>
+						)}
+					</CardTitle>
+				</CardHeader>
+				<CardContent className="space-y-4">
+					<p className="text-sm text-muted-foreground">
+						{m.stats_capture_desc()}
+					</p>
+					{armed && s && (
+						<dl className="flex flex-wrap gap-x-8 gap-y-2 text-sm tabular-nums">
+							<Stat label={m.stats_elapsed()} value={fmtDuration(elapsed)} />
+							<Stat label={m.stats_samples()} value={String(s.sample_count)} />
+							{s.kind && (
+								<Stat label={m.stats_kind()} value={kindLabel(s.kind)} />
+							)}
+						</dl>
+					)}
+					<div className="flex gap-2">
+						{armed ? (
+							<Button
+								variant="destructive"
+								disabled={isStopping}
+								onClick={onStop}
+							>
+								<Square className="size-4" />
+								{m.stats_stop()}
+							</Button>
+						) : (
+							<Button disabled={isStarting} onClick={onStart}>
+								<Circle className="size-4 fill-current" />
+								{m.stats_start()}
+							</Button>
+						)}
+					</div>
+				</CardContent>
+			</Card>
+		</QueryState>
+	);
+};

web/src/sections/Stats/Detail.tsx

@@ -0,0 +1,82 @@
+import { X } from "lucide-react";
+import type { FC } from "react";
+import type { Capture } from "@/api/gen/model/capture";
+import { useStatsRecordingGet } from "@/api/gen/stats/stats";
+import { QueryState } from "@/components/query-state";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import type { Loadable } from "@/lib/query";
+import { m } from "@/paraglide/messages";
+import { HealthChart, LatencyChart, ThroughputChart } from "./charts";
+import { ChartBlock } from "./helpers";
+
+/** Container: the full graph set for the selected recording — fetched by id. */
+export const DetailSection: FC<{ id: string; onClose: () => void }> = ({
+	id,
+	onClose,
+}) => {
+	const detail = useStatsRecordingGet(id, { query: { enabled: !!id } });
+	return <DetailCard detail={detail} onClose={onClose} />;
+};
+
+/** Full graph set for one selected recording: latency (p99 toggle) + throughput + health. */
+export const DetailCard: FC<{
+	detail: Loadable<Capture>;
+	onClose: () => void;
+}> = ({ detail, onClose }) => {
+	const cap = detail.data;
+	const samples = cap?.samples ?? [];
+	return (
+		<Card>
+			<CardHeader>
+				<CardTitle className="flex items-center justify-between gap-3">
+					<span>
+						{m.stats_detail_title()}
+						{cap && (
+							<span className="ml-2 text-sm font-normal text-muted-foreground">
+								{cap.meta.width}×{cap.meta.height}@{cap.meta.fps} ·{" "}
+								{cap.meta.codec.toUpperCase()}
+							</span>
+						)}
+					</span>
+					<Button
+						variant="ghost"
+						size="icon"
+						aria-label={m.stats_close()}
+						onClick={onClose}
+					>
+						<X className="size-4" />
+					</Button>
+				</CardTitle>
+			</CardHeader>
+			<CardContent>
+				<QueryState
+					isLoading={detail.isLoading}
+					error={detail.error}
+					refetch={detail.refetch}
+				>
+					{samples.length === 0 ? (
+						<p className="py-8 text-center text-sm text-muted-foreground">
+							{m.stats_no_samples()}
+						</p>
+					) : (
+						<div className="space-y-8">
+							<ChartBlock
+								title={m.stats_latency_title()}
+								desc={m.stats_latency_desc()}
+							>
+								<LatencyChart samples={samples} toggle />
+							</ChartBlock>
+							<ChartBlock title={m.stats_throughput_title()}>
+								<ThroughputChart samples={samples} />
+							</ChartBlock>
+							<ChartBlock title={m.stats_health_title()}>
+								<HealthChart samples={samples} />
+							</ChartBlock>
+						</div>
+					)}
+				</QueryState>
+			</CardContent>
+		</Card>
+	);
+};

web/src/sections/Stats/LiveCard.tsx

@@ -0,0 +1,57 @@
+import type { FC } from "react";
+import type { Capture } from "@/api/gen/model/capture";
+import {
+	useStatsCaptureLive,
+	useStatsCaptureStatus,
+} from "@/api/gen/stats/stats";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import type { Loadable } from "@/lib/query";
+import { m } from "@/paraglide/messages";
+import { LatencyChart, ThroughputChart } from "./charts";
+import { ChartBlock } from "./helpers";
+
+/**
+ * Container: the live graphs. Self-gates on the capture being armed — it shares the status query
+ * (same key) with the control card, and only fetches the in-progress capture while armed (it 404s
+ * when idle). Renders nothing when no capture is running.
+ */
+export const LiveSection: FC = () => {
+	const status = useStatsCaptureStatus({ query: { refetchInterval: 2_000 } });
+	const armed = status.data?.armed ?? false;
+	const live = useStatsCaptureLive({
+		query: { refetchInterval: 2_000, enabled: armed },
+	});
+	if (!armed) return null;
+	return <LiveCard live={live} />;
+};
+
+/** Live graphs while a capture is armed: latency stack + throughput. */
+export const LiveCard: FC<{ live: Loadable<Capture> }> = ({ live }) => {
+	const samples = live.data?.samples ?? [];
+	return (
+		<Card>
+			<CardHeader>
+				<CardTitle>{m.stats_live_title()}</CardTitle>
+			</CardHeader>
+			<CardContent className="space-y-8">
+				{samples.length === 0 ? (
+					<p className="py-8 text-center text-sm text-muted-foreground">
+						{m.stats_live_waiting()}
+					</p>
+				) : (
+					<>
+						<ChartBlock
+							title={m.stats_latency_title()}
+							desc={m.stats_latency_desc()}
+						>
+							<LatencyChart samples={samples} />
+						</ChartBlock>
+						<ChartBlock title={m.stats_throughput_title()}>
+							<ThroughputChart samples={samples} />
+						</ChartBlock>
+					</>
+				)}
+			</CardContent>
+		</Card>
+	);
+};

web/src/sections/Stats/Recordings.tsx

@@ -0,0 +1,207 @@
+import { useQueryClient } from "@tanstack/react-query";
+import { Download, Eye, Trash2 } from "lucide-react";
+import type { FC } from "react";
+import type { CaptureMeta } from "@/api/gen/model/captureMeta";
+import {
+	getStatsRecordingsListQueryKey,
+	statsRecordingGet,
+	useStatsRecordingDelete,
+	useStatsRecordingsList,
+} from "@/api/gen/stats/stats";
+import { QueryState } from "@/components/query-state";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "@/components/ui/table";
+import type { Loadable } from "@/lib/query";
+import { m } from "@/paraglide/messages";
+import { fmtDuration, fmtTimestamp, kindLabel } from "./helpers";
+
+/**
+ * Container: the saved recordings. Owns the list query, delete, and the JSON export. Selection is
+ * the parent's UI state (it also drives the detail card), passed through here for row highlight +
+ * to clear it when the selected recording is deleted.
+ */
+export const RecordingsSection: FC<{
+	selectedId: string | null;
+	onSelect: (id: string | null) => void;
+}> = ({ selectedId, onSelect }) => {
+	const qc = useQueryClient();
+	const recordings = useStatsRecordingsList();
+	const del = useStatsRecordingDelete();
+
+	const onDelete = (id: string) => {
+		if (!confirm(m.stats_delete_confirm())) return;
+		del.mutate(
+			{ id },
+			{
+				onSuccess: () => {
+					if (selectedId === id) onSelect(null);
+					qc.invalidateQueries({ queryKey: getStatsRecordingsListQueryKey() });
+				},
+			},
+		);
+	};
+
+	// Export the full Capture JSON via a one-off GET → blob download.
+	const onDownload = async (id: string) => {
+		try {
+			const cap = await statsRecordingGet(id);
+			const blob = new Blob([JSON.stringify(cap, null, 2)], {
+				type: "application/json",
+			});
+			const url = URL.createObjectURL(blob);
+			const a = document.createElement("a");
+			a.href = url;
+			a.download = `${id}.json`;
+			document.body.appendChild(a);
+			a.click();
+			a.remove();
+			URL.revokeObjectURL(url);
+		} catch {
+			// Best-effort export; the recording GET surfaces its own errors via the detail view.
+		}
+	};
+
+	return (
+		<RecordingsCard
+			recordings={recordings}
+			selectedId={selectedId}
+			onSelect={onSelect}
+			onDownload={onDownload}
+			onDelete={onDelete}
+			isDeleting={del.isPending}
+		/>
+	);
+};
+
+/** Saved recordings, with View / Download / Delete row actions. */
+export const RecordingsCard: FC<{
+	recordings: Loadable<CaptureMeta[]>;
+	selectedId: string | null;
+	onSelect: (id: string | null) => void;
+	onDownload: (id: string) => void;
+	onDelete: (id: string) => void;
+	isDeleting: boolean;
+}> = ({
+	recordings,
+	selectedId,
+	onSelect,
+	onDownload,
+	onDelete,
+	isDeleting,
+}) => {
+	const rows = recordings.data ?? [];
+	return (
+		<Card>
+			<CardHeader>
+				<h2 className="text-lg font-medium">{m.stats_recordings_title()}</h2>
+			</CardHeader>
+			<QueryState
+				isLoading={recordings.isLoading}
+				error={recordings.error}
+				refetch={recordings.refetch}
+			>
+				{rows.length === 0 ? (
+					<CardContent className="p-8 text-center text-sm text-muted-foreground">
+						{m.stats_recordings_empty()}
+					</CardContent>
+				) : (
+					<CardContent className="p-0">
+						<Table>
+							<TableHeader>
+								<TableRow>
+									<TableHead>{m.stats_col_time()}</TableHead>
+									<TableHead>{m.stats_col_kind()}</TableHead>
+									<TableHead>{m.stats_col_resolution()}</TableHead>
+									<TableHead>{m.stats_col_codec()}</TableHead>
+									<TableHead className="text-right">
+										{m.stats_col_duration()}
+									</TableHead>
+									<TableHead className="text-right">
+										{m.stats_col_samples()}
+									</TableHead>
+									<TableHead className="w-32" />
+								</TableRow>
+							</TableHeader>
+							<TableBody>
+								{rows.map((r) => (
+									<TableRow
+										key={r.id}
+										data-state={selectedId === r.id ? "selected" : undefined}
+									>
+										<TableCell className="whitespace-nowrap font-medium">
+											{fmtTimestamp(r.started_unix_ms)}
+										</TableCell>
+										<TableCell>
+											<Badge
+												variant={
+													r.kind === "gamestream" ? "secondary" : "default"
+												}
+											>
+												{kindLabel(r.kind)}
+											</Badge>
+										</TableCell>
+										<TableCell className="tabular-nums text-muted-foreground">
+											{r.width}×{r.height}@{r.fps}
+										</TableCell>
+										<TableCell className="uppercase text-muted-foreground">
+											{r.codec}
+										</TableCell>
+										<TableCell className="text-right tabular-nums">
+											{fmtDuration(r.duration_ms)}
+										</TableCell>
+										<TableCell className="text-right tabular-nums">
+											{r.sample_count}
+										</TableCell>
+										<TableCell>
+											<div className="flex justify-end gap-1">
+												<Button
+													variant="ghost"
+													size="icon"
+													aria-label={m.stats_view()}
+													title={m.stats_view()}
+													onClick={() =>
+														onSelect(selectedId === r.id ? null : r.id)
+													}
+												>
+													<Eye className="size-4" />
+												</Button>
+												<Button
+													variant="ghost"
+													size="icon"
+													aria-label={m.stats_download()}
+													title={m.stats_download()}
+													onClick={() => onDownload(r.id)}
+												>
+													<Download className="size-4" />
+												</Button>
+												<Button
+													variant="ghost"
+													size="icon"
+													aria-label={m.stats_delete()}
+													title={m.stats_delete()}
+													disabled={isDeleting}
+													onClick={() => onDelete(r.id)}
+												>
+													<Trash2 className="size-4 text-destructive" />
+												</Button>
+											</div>
+										</TableCell>
+									</TableRow>
+								))}
+							</TableBody>
+						</Table>
+					</CardContent>
+				)}
+			</QueryState>
+		</Card>
+	);
+};

web/src/sections/Stats/helpers.tsx

@@ -0,0 +1,43 @@
+import type { FC, ReactNode } from "react";
+import { m } from "@/paraglide/messages";
+
+/** ms → `m:ss`. */
+export function fmtDuration(ms: number): string {
+	const s = Math.max(0, Math.floor(ms / 1000));
+	return `${Math.floor(s / 60)}:${(s % 60).toString().padStart(2, "0")}`;
+}
+
+export function fmtTimestamp(unixMs: number): string {
+	if (!unixMs) return "—";
+	return new Date(unixMs).toLocaleString();
+}
+
+export function kindLabel(kind: string): string {
+	if (kind === "gamestream") return m.stats_kind_gamestream();
+	if (kind === "native") return m.stats_kind_native();
+	return kind;
+}
+
+export const Stat: FC<{ label: string; value: string }> = ({
+	label,
+	value,
+}) => (
+	<div className="flex flex-col">
+		<dt className="text-xs text-muted-foreground">{label}</dt>
+		<dd className="font-medium">{value}</dd>
+	</div>
+);
+
+export const ChartBlock: FC<{
+	title: string;
+	desc?: string;
+	children: ReactNode;
+}> = ({ title, desc, children }) => (
+	<div className="space-y-2">
+		<div>
+			<h3 className="text-sm font-medium">{title}</h3>
+			{desc && <p className="text-xs text-muted-foreground">{desc}</p>}
+		</div>
+		{children}
+	</div>
+);

web/src/sections/Stats/index.tsx

@@ -1,108 +1,31 @@
-import { useQueryClient } from "@tanstack/react-query";
 import { type FC, useState } from "react";
-import {
-	getStatsCaptureStatusQueryKey,
-	getStatsRecordingsListQueryKey,
-	statsRecordingGet,
-	useStatsCaptureLive,
-	useStatsCaptureStart,
-	useStatsCaptureStatus,
-	useStatsCaptureStop,
-	useStatsRecordingDelete,
-	useStatsRecordingGet,
-	useStatsRecordingsList,
-} from "@/api/gen/stats/stats";
 import { useLocale } from "@/lib/i18n";
-import { m } from "@/paraglide/messages";
+import { CaptureControlSection } from "./CaptureControl";
+import { DetailSection } from "./Detail";
+import { LiveSection } from "./LiveCard";
+import { RecordingsSection } from "./Recordings";
 import { StatsView } from "./view";
 
+// Performance = four independent, self-contained cards (control · live · recordings · detail), each
+// owning its own queries + mutations in its own file. This container holds only the shared UI state
+// — which recording is selected — that links the recordings table to the detail card. The layout
+// lives in StatsView so the live page and the Storybook story arrange the cards identically.
 export const SectionStats: FC = () => {
 	useLocale();
-	const qc = useQueryClient();
 	const [selectedId, setSelectedId] = useState<string | null>(null);
 
-	// Poll the capture status (drives the control card + whether the live chart shows).
-	const status = useStatsCaptureStatus({ query: { refetchInterval: 2_000 } });
-	const armed = status.data?.armed ?? false;
-
-	// Live in-progress capture — only fetched while armed (404s when idle).
-	const live = useStatsCaptureLive({
-		query: { refetchInterval: 2_000, enabled: armed },
-	});
-
-	const recordings = useStatsRecordingsList();
-
-	// Selected recording detail — only fetched once a row is chosen.
-	const detail = useStatsRecordingGet(selectedId ?? "", {
-		query: { enabled: !!selectedId },
-	});
-
-	const start = useStatsCaptureStart();
-	const stop = useStatsCaptureStop();
-	const del = useStatsRecordingDelete();
-
-	const refreshStatus = () =>
-		qc.invalidateQueries({ queryKey: getStatsCaptureStatusQueryKey() });
-	const refreshRecordings = () =>
-		qc.invalidateQueries({ queryKey: getStatsRecordingsListQueryKey() });
-
-	const onStart = () => start.mutate(undefined, { onSuccess: refreshStatus });
-	const onStop = () =>
-		stop.mutate(undefined, {
-			onSuccess: () => {
-				refreshStatus();
-				refreshRecordings();
-			},
-		});
-
-	const onDelete = (id: string) => {
-		if (!confirm(m.stats_delete_confirm())) return;
-		del.mutate(
-			{ id },
-			{
-				onSuccess: () => {
-					if (selectedId === id) setSelectedId(null);
-					refreshRecordings();
-				},
-			},
-		);
-	};
-
-	// Export the full Capture JSON via a one-off GET → blob download.
-	const onDownload = async (id: string) => {
-		try {
-			const cap = await statsRecordingGet(id);
-			const blob = new Blob([JSON.stringify(cap, null, 2)], {
-				type: "application/json",
-			});
-			const url = URL.createObjectURL(blob);
-			const a = document.createElement("a");
-			a.href = url;
-			a.download = `${id}.json`;
-			document.body.appendChild(a);
-			a.click();
-			a.remove();
-			URL.revokeObjectURL(url);
-		} catch {
-			// Best-effort export; the recording GET surfaces its own errors via the detail view.
-		}
-	};
-
 	return (
 		<StatsView
-			status={status}
-			live={live}
-			recordings={recordings}
-			detail={detail}
-			selectedId={selectedId}
-			onStart={onStart}
-			onStop={onStop}
-			onSelect={setSelectedId}
-			onDownload={onDownload}
-			onDelete={onDelete}
-			isStarting={start.isPending}
-			isStopping={stop.isPending}
-			isDeleting={del.isPending}
+			control={<CaptureControlSection />}
+			live={<LiveSection />}
+			recordings={
+				<RecordingsSection selectedId={selectedId} onSelect={setSelectedId} />
+			}
+			detail={
+				selectedId ? (
+					<DetailSection id={selectedId} onClose={() => setSelectedId(null)} />
+				) : null
+			}
 		/>
 	);
 };

web/src/sections/Stats/view.tsx

@@ -1,399 +1,30 @@
-import { Circle, Download, Eye, Square, Trash2, X } from "lucide-react";
-import type { FC } from "react";
-import type { Capture } from "@/api/gen/model/capture";
-import type { CaptureMeta } from "@/api/gen/model/captureMeta";
-import type { StatsStatus } from "@/api/gen/model/statsStatus";
-import { QueryState } from "@/components/query-state";
-import { Section } from "@/components/section";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import {
-	Table,
-	TableBody,
-	TableCell,
-	TableHead,
-	TableHeader,
-	TableRow,
-} from "@/components/ui/table";
-import type { Loadable } from "@/lib/query";
+import Section from "@unom/ui/section";
+import type { FC, ReactNode } from "react";
 import { m } from "@/paraglide/messages";
-import { HealthChart, LatencyChart, ThroughputChart } from "./charts";
 
-/** ms → `m:ss`. */
-function fmtDuration(ms: number): string {
-	const s = Math.max(0, Math.floor(ms / 1000));
-	return `${Math.floor(s / 60)}:${(s % 60).toString().padStart(2, "0")}`;
-}
-
-function fmtTimestamp(unixMs: number): string {
-	if (!unixMs) return "—";
-	return new Date(unixMs).toLocaleString();
-}
-
-function kindLabel(kind: string): string {
-	if (kind === "gamestream") return m.stats_kind_gamestream();
-	if (kind === "native") return m.stats_kind_native();
-	return kind;
-}
-
-export interface StatsViewProps {
-	status: Loadable<StatsStatus>;
-	live: Loadable<Capture>;
-	recordings: Loadable<CaptureMeta[]>;
-	detail: Loadable<Capture>;
-	selectedId: string | null;
-	onStart: () => void;
-	onStop: () => void;
-	onSelect: (id: string | null) => void;
-	onDownload: (id: string) => void;
-	onDelete: (id: string) => void;
-	isStarting: boolean;
-	isStopping: boolean;
-	isDeleting: boolean;
-}
-
-export const StatsView: FC<StatsViewProps> = (props) => {
-	const armed = props.status.data?.armed ?? false;
-	return (
-		<Section>
+/**
+ * The Performance page LAYOUT — the single source of how the cards stack. Both the live page
+ * (`index.tsx`, slots = the self-contained `*Section` containers) and Storybook (slots = the pure
+ * cards with mock state) fill these slots, so the arrangement can never drift between them. `live`
+ * and `detail` are nullable slots — the page passes them only when armed / a recording is selected.
+ */
+export const StatsView: FC<{
+	control: ReactNode;
+	live: ReactNode;
+	recordings: ReactNode;
+	detail: ReactNode;
+}> = ({ control, live, recordings, detail }) => (
+	<Section maxWidth={false}>
+		<div className="flex flex-col gap-card">
 			<div className="space-y-1">
 				<h1 className="text-2xl font-semibold">{m.stats_title()}</h1>
 				<p className="text-sm text-muted-foreground">{m.stats_subtitle()}</p>
 			</div>
 
-			<CaptureControlCard
-				status={props.status}
-				onStart={props.onStart}
-				onStop={props.onStop}
-				isStarting={props.isStarting}
-				isStopping={props.isStopping}
-			/>
-
-			{armed && <LiveCard live={props.live} />}
-
-			<RecordingsCard
-				recordings={props.recordings}
-				selectedId={props.selectedId}
-				onSelect={props.onSelect}
-				onDownload={props.onDownload}
-				onDelete={props.onDelete}
-				isDeleting={props.isDeleting}
-			/>
-
-			{props.selectedId && (
-				<DetailCard
-					detail={props.detail}
-					onClose={() => props.onSelect(null)}
-				/>
-			)}
+			{control}
+			{live}
+			{recordings}
+			{detail}
+		</div>
 	</Section>
 );
-};
-
-/** Start/Stop + a Recording/Idle pill with elapsed + sample count. */
-const CaptureControlCard: FC<{
-	status: Loadable<StatsStatus>;
-	onStart: () => void;
-	onStop: () => void;
-	isStarting: boolean;
-	isStopping: boolean;
-}> = ({ status, onStart, onStop, isStarting, isStopping }) => {
-	const s = status.data;
-	const armed = s?.armed ?? false;
-	const elapsed = armed && s ? Date.now() - s.started_unix_ms : 0;
-	return (
-		<QueryState
-			isLoading={status.isLoading}
-			error={status.error}
-			refetch={status.refetch}
-		>
-			<Card>
-				<CardHeader>
-					<CardTitle className="flex items-center justify-between gap-3">
-						<span>{m.stats_capture_title()}</span>
-						{armed ? (
-							<Badge variant="destructive" className="gap-1.5">
-								<Circle className="size-2.5 animate-pulse fill-current" />
-								{m.stats_recording()}
-							</Badge>
-						) : (
-							<Badge variant="outline">{m.stats_idle()}</Badge>
-						)}
-					</CardTitle>
-				</CardHeader>
-				<CardContent className="space-y-4">
-					<p className="text-sm text-muted-foreground">
-						{m.stats_capture_desc()}
-					</p>
-					{armed && s && (
-						<dl className="flex flex-wrap gap-x-8 gap-y-2 text-sm tabular-nums">
-							<Stat label={m.stats_elapsed()} value={fmtDuration(elapsed)} />
-							<Stat label={m.stats_samples()} value={String(s.sample_count)} />
-							{s.kind && (
-								<Stat label={m.stats_kind()} value={kindLabel(s.kind)} />
-							)}
-						</dl>
-					)}
-					<div className="flex gap-2">
-						{armed ? (
-							<Button
-								variant="destructive"
-								disabled={isStopping}
-								onClick={onStop}
-							>
-								<Square className="size-4" />
-								{m.stats_stop()}
-							</Button>
-						) : (
-							<Button disabled={isStarting} onClick={onStart}>
-								<Circle className="size-4 fill-current" />
-								{m.stats_start()}
-							</Button>
-						)}
-					</div>
-				</CardContent>
-			</Card>
-		</QueryState>
-	);
-};
-
-const Stat: FC<{ label: string; value: string }> = ({ label, value }) => (
-	<div className="flex flex-col">
-		<dt className="text-xs text-muted-foreground">{label}</dt>
-		<dd className="font-medium">{value}</dd>
-	</div>
-);
-
-/** Live graphs while a capture is armed: latency stack + throughput. */
-const LiveCard: FC<{ live: Loadable<Capture> }> = ({ live }) => {
-	const samples = live.data?.samples ?? [];
-	return (
-		<Card>
-			<CardHeader>
-				<CardTitle>{m.stats_live_title()}</CardTitle>
-			</CardHeader>
-			<CardContent className="space-y-8">
-				{samples.length === 0 ? (
-					<p className="py-8 text-center text-sm text-muted-foreground">
-						{m.stats_live_waiting()}
-					</p>
-				) : (
-					<>
-						<ChartBlock
-							title={m.stats_latency_title()}
-							desc={m.stats_latency_desc()}
-						>
-							<LatencyChart samples={samples} />
-						</ChartBlock>
-						<ChartBlock title={m.stats_throughput_title()}>
-							<ThroughputChart samples={samples} />
-						</ChartBlock>
-					</>
-				)}
-			</CardContent>
-		</Card>
-	);
-};
-
-/** Saved recordings, with View / Download / Delete row actions. */
-const RecordingsCard: FC<{
-	recordings: Loadable<CaptureMeta[]>;
-	selectedId: string | null;
-	onSelect: (id: string | null) => void;
-	onDownload: (id: string) => void;
-	onDelete: (id: string) => void;
-	isDeleting: boolean;
-}> = ({
-	recordings,
-	selectedId,
-	onSelect,
-	onDownload,
-	onDelete,
-	isDeleting,
-}) => {
-	const rows = recordings.data ?? [];
-	return (
-		<div className="space-y-2">
-			<h2 className="text-lg font-medium">{m.stats_recordings_title()}</h2>
-			<QueryState
-				isLoading={recordings.isLoading}
-				error={recordings.error}
-				refetch={recordings.refetch}
-			>
-				{rows.length === 0 ? (
-					<Card>
-						<CardContent className="p-8 text-center text-sm text-muted-foreground">
-							{m.stats_recordings_empty()}
-						</CardContent>
-					</Card>
-				) : (
-					<Card>
-						<CardContent className="p-0">
-							<Table>
-								<TableHeader>
-									<TableRow>
-										<TableHead>{m.stats_col_time()}</TableHead>
-										<TableHead>{m.stats_col_kind()}</TableHead>
-										<TableHead>{m.stats_col_resolution()}</TableHead>
-										<TableHead>{m.stats_col_codec()}</TableHead>
-										<TableHead className="text-right">
-											{m.stats_col_duration()}
-										</TableHead>
-										<TableHead className="text-right">
-											{m.stats_col_samples()}
-										</TableHead>
-										<TableHead className="w-32" />
-									</TableRow>
-								</TableHeader>
-								<TableBody>
-									{rows.map((r) => (
-										<TableRow
-											key={r.id}
-											data-state={selectedId === r.id ? "selected" : undefined}
-										>
-											<TableCell className="whitespace-nowrap font-medium">
-												{fmtTimestamp(r.started_unix_ms)}
-											</TableCell>
-											<TableCell>
-												<Badge
-													variant={
-														r.kind === "gamestream" ? "secondary" : "default"
-													}
-												>
-													{kindLabel(r.kind)}
-												</Badge>
-											</TableCell>
-											<TableCell className="tabular-nums text-muted-foreground">
-												{r.width}×{r.height}@{r.fps}
-											</TableCell>
-											<TableCell className="uppercase text-muted-foreground">
-												{r.codec}
-											</TableCell>
-											<TableCell className="text-right tabular-nums">
-												{fmtDuration(r.duration_ms)}
-											</TableCell>
-											<TableCell className="text-right tabular-nums">
-												{r.sample_count}
-											</TableCell>
-											<TableCell>
-												<div className="flex justify-end gap-1">
-													<Button
-														variant="ghost"
-														size="icon"
-														aria-label={m.stats_view()}
-														title={m.stats_view()}
-														onClick={() =>
-															onSelect(selectedId === r.id ? null : r.id)
-														}
-													>
-														<Eye className="size-4" />
-													</Button>
-													<Button
-														variant="ghost"
-														size="icon"
-														aria-label={m.stats_download()}
-														title={m.stats_download()}
-														onClick={() => onDownload(r.id)}
-													>
-														<Download className="size-4" />
-													</Button>
-													<Button
-														variant="ghost"
-														size="icon"
-														aria-label={m.stats_delete()}
-														title={m.stats_delete()}
-														disabled={isDeleting}
-														onClick={() => onDelete(r.id)}
-													>
-														<Trash2 className="size-4 text-destructive" />
-													</Button>
-												</div>
-											</TableCell>
-										</TableRow>
-									))}
-								</TableBody>
-							</Table>
-						</CardContent>
-					</Card>
-				)}
-			</QueryState>
-		</div>
-	);
-};
-
-/** Full graph set for one selected recording: latency (p99 toggle) + throughput + health. */
-const DetailCard: FC<{ detail: Loadable<Capture>; onClose: () => void }> = ({
-	detail,
-	onClose,
-}) => {
-	const cap = detail.data;
-	const samples = cap?.samples ?? [];
-	return (
-		<Card>
-			<CardHeader>
-				<CardTitle className="flex items-center justify-between gap-3">
-					<span>
-						{m.stats_detail_title()}
-						{cap && (
-							<span className="ml-2 text-sm font-normal text-muted-foreground">
-								{cap.meta.width}×{cap.meta.height}@{cap.meta.fps} ·{" "}
-								{cap.meta.codec.toUpperCase()}
-							</span>
-						)}
-					</span>
-					<Button
-						variant="ghost"
-						size="icon"
-						aria-label={m.stats_close()}
-						onClick={onClose}
-					>
-						<X className="size-4" />
-					</Button>
-				</CardTitle>
-			</CardHeader>
-			<CardContent>
-				<QueryState
-					isLoading={detail.isLoading}
-					error={detail.error}
-					refetch={detail.refetch}
-				>
-					{samples.length === 0 ? (
-						<p className="py-8 text-center text-sm text-muted-foreground">
-							{m.stats_no_samples()}
-						</p>
-					) : (
-						<div className="space-y-8">
-							<ChartBlock
-								title={m.stats_latency_title()}
-								desc={m.stats_latency_desc()}
-							>
-								<LatencyChart samples={samples} toggle />
-							</ChartBlock>
-							<ChartBlock title={m.stats_throughput_title()}>
-								<ThroughputChart samples={samples} />
-							</ChartBlock>
-							<ChartBlock title={m.stats_health_title()}>
-								<HealthChart samples={samples} />
-							</ChartBlock>
-						</div>
-					)}
-				</QueryState>
-			</CardContent>
-		</Card>
-	);
-};
-
-const ChartBlock: FC<{
-	title: string;
-	desc?: string;
-	children: React.ReactNode;
-}> = ({ title, desc, children }) => (
-	<div className="space-y-2">
-		<div>
-			<h3 className="text-sm font-medium">{title}</h3>
-			{desc && <p className="text-xs text-muted-foreground">{desc}</p>}
-		</div>
-		{children}
-	</div>
-);

web/src/stories/AppShell.stories.tsx

@@ -27,14 +27,7 @@ function ShellHarness({ initialPath }: { initialPath: string }) {
 		),
 	});
 
-	const navPaths = [
-		"/",
-		"/host",
-		"/library",
-		"/clients",
-		"/pairing",
-		"/settings",
-	];
+	const navPaths = ["/", "/host", "/library", "/pairing", "/settings"];
 	const navRoutes = navPaths.map((path) =>
 		createRoute({
 			getParentRoute: () => rootRoute,

web/src/stories/Clients.stories.tsx

@@ -1,20 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { ClientsView } from "@/sections/Clients/view";
-import { pairedClients } from "./lib/fixtures";
-
-const meta = {
-	title: "Pages/Clients",
-	component: ClientsView,
-	args: { onUnpair: () => {}, isUnpairing: false },
-} satisfies Meta<typeof ClientsView>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Paired: Story = {
-	args: { clients: { data: pairedClients, isLoading: false, error: null } },
-};
-
-export const Empty: Story = {
-	args: { clients: { data: [], isLoading: false, error: null } },
-};

web/src/stories/Library.stories.tsx

@@ -1,26 +1,58 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { LibraryView } from "@/sections/Library/view";
+import { GameForm } from "@/sections/Library/GameForm";
+import { LibraryGrid } from "@/sections/Library/LibraryGrid";
 import { library } from "./lib/fixtures";
 
+const noop = () => {};
+const idle = { isLoading: false, error: null, refetch: noop };
+const emptyForm = {
+	title: "",
+	portrait: "",
+	hero: "",
+	header: "",
+	command: "",
+};
+
+// The overview grid and the add/edit form are separate components now, so the stories
+// render each on its own (no combined page view).
 const meta = {
 	title: "Pages/Library",
-	component: LibraryView,
-	args: {
-		onCreate: () => Promise.resolve(),
-		onUpdate: () => Promise.resolve(),
-		onDelete: () => Promise.resolve(),
-		isSaving: false,
-		isDeleting: false,
-	},
-} satisfies Meta<typeof LibraryView>;
+	parameters: { layout: "padded" },
+} satisfies Meta;
 
 export default meta;
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj;
 
 export const Populated: Story = {
-	args: { library: { data: library, isLoading: false, error: null } },
+	render: () => (
+		<LibraryGrid
+			library={{ data: library, ...idle }}
+			onEdit={noop}
+			onDelete={noop}
+			isDeleting={false}
+		/>
+	),
 };
 
 export const Empty: Story = {
-	args: { library: { data: [], isLoading: false, error: null } },
+	render: () => (
+		<LibraryGrid
+			library={{ data: [], ...idle }}
+			onEdit={noop}
+			onDelete={noop}
+			isDeleting={false}
+		/>
+	),
+};
+
+export const AddForm: Story = {
+	render: () => (
+		<GameForm
+			initial={emptyForm}
+			mode="add"
+			onSubmit={noop}
+			onCancel={noop}
+			isSaving={false}
+		/>
+	),
 };

web/src/stories/Login.stories.tsx

@@ -13,4 +13,4 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {};
 
-export const Error: Story = { args: { error: true } };
+export const ErrorState: Story = { args: { error: true } };

web/src/stories/Pairing.stories.tsx

@@ -1,8 +1,13 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
+import { MoonlightPairing } from "@/sections/Pairing/MoonlightPairingCard";
+import { NativePairingCard } from "@/sections/Pairing/NativePairingCard";
+import { PairedDevices } from "@/sections/Pairing/PairedDevices";
+import { PendingDevices } from "@/sections/Pairing/PendingDevices";
 import { PairingView } from "@/sections/Pairing/view";
 import {
 	nativeClients,
 	nativePairArmed,
+	pairedClients,
 	pairingIdle,
 	pendingDevices,
 } from "./lib/fixtures";
@@ -10,39 +15,70 @@ import {
 const noop = () => {};
 const idle = { isLoading: false, error: null, refetch: noop };
 
+// Renders the REAL page layout (PairingView) — the same component index.tsx uses. The live page
+// fills its slots with the self-contained containers; here we fill them with the pure cards + mock
+// state, so there's no duplicated composition to drift.
 const meta = {
 	title: "Pages/Pairing",
 	component: PairingView,
 	parameters: { layout: "padded" },
-	args: {
-		onApprove: noop,
-		onDeny: noop,
-		pendingBusy: false,
-		onArm: noop,
-		onDisarm: noop,
-		isArming: false,
-		isDisarming: false,
-		onUnpair: noop,
-		isUnpairing: false,
-		pin: "",
-		onPinChange: noop,
-		onSubmitPin: noop,
-		isSubmittingPin: false,
-		pinSuccess: false,
-		pinError: false,
-	},
 } satisfies Meta<typeof PairingView>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-// The marketing state: a PIN armed for a phone, one device knocking for delegated
-// approval, two already-paired native clients.
+// The marketing state: one device knocking for delegated approval, a PIN armed for a phone, the
+// consolidated paired-devices list (native + Moonlight), idle Moonlight pairing.
 export const Armed: Story = {
 	args: {
-		pending: { data: pendingDevices, ...idle },
-		native: { data: nativePairArmed, ...idle },
-		clients: { data: nativeClients, ...idle },
-		moonlight: { data: pairingIdle, ...idle },
+		pending: (
+			<PendingDevices
+				pending={{ data: pendingDevices, ...idle }}
+				onApprove={noop}
+				onDeny={noop}
+				busy={false}
+			/>
+		),
+		native: (
+			<NativePairingCard
+				status={{ data: nativePairArmed, ...idle }}
+				onArm={noop}
+				onDisarm={noop}
+				isArming={false}
+				isDisarming={false}
+			/>
+		),
+		moonlight: (
+			<MoonlightPairing
+				pairing={{ data: pairingIdle, ...idle }}
+				pin=""
+				onPinChange={noop}
+				onSubmit={noop}
+				isSubmitting={false}
+				isSuccess={false}
+				isError={false}
+			/>
+		),
+		paired: (
+			<PairedDevices
+				rows={[
+					...nativeClients.map((c) => ({
+						protocol: "native" as const,
+						fingerprint: c.fingerprint,
+						name: c.name,
+					})),
+					...pairedClients.map((c) => ({
+						protocol: "moonlight" as const,
+						fingerprint: c.fingerprint,
+						name: c.subject ?? "",
+					})),
+				]}
+				isLoading={false}
+				error={null}
+				refetch={noop}
+				onUnpair={noop}
+				isUnpairing={false}
+			/>
+		),
 	},
 };

web/src/stories/Stats.stories.tsx

@@ -1,48 +1,77 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
+import { CaptureControlCard } from "@/sections/Stats/CaptureControl";
+import { DetailCard } from "@/sections/Stats/Detail";
+import { RecordingsCard } from "@/sections/Stats/Recordings";
 import { StatsView } from "@/sections/Stats/view";
 import { captureDetail, captureMetas, statsStatusIdle } from "./lib/fixtures";
 
 const noop = () => {};
 const idle = { isLoading: false, error: null, refetch: noop };
 
+// Renders the REAL page layout (StatsView) — the same component index.tsx uses — with the pure
+// cards + mock state in its slots, so there's no duplicated composition to drift.
 const meta = {
 	title: "Pages/Stats",
 	component: StatsView,
 	parameters: { layout: "padded" },
-	args: {
-		onStart: noop,
-		onStop: noop,
-		onSelect: noop,
-		onDownload: noop,
-		onDelete: noop,
-		isStarting: false,
-		isStopping: false,
-		isDeleting: false,
-	},
 } satisfies Meta<typeof StatsView>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-// A finished run open in the detail view: recordings table populated and the full
-// graph set (latency stack · throughput · loss/FEC) rendered from a deterministic
-// fixture series — no live host or capture needed.
+// A finished run open in the detail view: recordings table populated and the full graph set
+// (latency stack · throughput · loss/FEC) rendered from a deterministic fixture series — no live
+// host or capture needed.
 export const Recording: Story = {
 	args: {
-		status: { data: statsStatusIdle, ...idle },
-		live: { data: undefined, ...idle },
-		recordings: { data: captureMetas, ...idle },
-		detail: { data: captureDetail, ...idle },
-		selectedId: captureMetas[0]?.id ?? null,
+		control: (
+			<CaptureControlCard
+				status={{ data: statsStatusIdle, ...idle }}
+				onStart={noop}
+				onStop={noop}
+				isStarting={false}
+				isStopping={false}
+			/>
+		),
+		live: null,
+		recordings: (
+			<RecordingsCard
+				recordings={{ data: captureMetas, ...idle }}
+				selectedId={captureMetas[0]?.id ?? null}
+				onSelect={noop}
+				onDownload={noop}
+				onDelete={noop}
+				isDeleting={false}
+			/>
+		),
+		detail: (
+			<DetailCard detail={{ data: captureDetail, ...idle }} onClose={noop} />
+		),
 	},
 };
 
 export const Empty: Story = {
 	args: {
-		status: { data: statsStatusIdle, ...idle },
-		live: { data: undefined, ...idle },
-		recordings: { data: [], ...idle },
-		detail: { data: undefined, ...idle },
-		selectedId: null,
+		control: (
+			<CaptureControlCard
+				status={{ data: statsStatusIdle, ...idle }}
+				onStart={noop}
+				onStop={noop}
+				isStarting={false}
+				isStopping={false}
+			/>
+		),
+		live: null,
+		recordings: (
+			<RecordingsCard
+				recordings={{ data: [], ...idle }}
+				selectedId={null}
+				onSelect={noop}
+				onDownload={noop}
+				onDelete={noop}
+				isDeleting={false}
+			/>
+		),
+		detail: null,
 	},
 };

web/src/stories/lib/fixtures.ts

@@ -216,6 +216,13 @@ export const pendingDevices: PendingDevice[] = [
 			"9f8e7d6c5b4a39281706f5e4d3c2b1a0998877665544332211ffeeddccbbaa00",
 		age_secs: 8,
 	},
+	{
+		id: 2,
+		name: "Mac Mini",
+		fingerprint:
+			"ff00eeddccbbaa998877665544332211009f8e7d6c5b4a39281706f5e4d3c2b1",
+		age_secs: 30,
+	},
 ];
 
 export const nativeClients: NativeClient[] = [

web/vite.config.ts

@@ -1,11 +1,11 @@
 import { fileURLToPath } from "node:url";
-import { defineConfig } from "vite";
-import { tanstackStart } from "@tanstack/react-start/plugin/vite";
-import { nitroV2Plugin } from "@tanstack/nitro-v2-vite-plugin";
-import viteReact from "@vitejs/plugin-react";
-import viteTsConfigPaths from "vite-tsconfig-paths";
-import tailwindcss from "@tailwindcss/vite";
 import { paraglideVitePlugin } from "@inlang/paraglide-js";
+import tailwindcss from "@tailwindcss/vite";
+import { nitroV2Plugin } from "@tanstack/nitro-v2-vite-plugin";
+import { tanstackStart } from "@tanstack/react-start/plugin/vite";
+import viteReact from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+import viteTsConfigPaths from "vite-tsconfig-paths";
 
 // Absolute path to our Nitro server source (middleware + routes). Passed as a scanDir
 // because the TanStack Nitro plugin doesn't auto-scan a server/ dir.
@@ -41,11 +41,17 @@ export default defineConfig({
 		// proxies to the management host injecting the bearer token server-side) — NOT a static
 		// routeRule, so the proxy runs behind the login gate and reads env at runtime.
 		nitroV2Plugin({
-			// node-server (not bun): a STANDALONE node HTTP server (`node .output/server/index.mjs`
-			// listens — the plain `node` preset only exports a handler). Lets the bundled punktfunk-web
-			// .deb depend on apt-native `nodejs (>= 20)` instead of vendoring bun. CI still BUILDS with
-			// bun; only the runtime target changes. (dev `vite dev` is unaffected.)
-			preset: "node-server",
+			// bun + a CUSTOM entry: Nitro's `bun` preset bundles the handler, and `entry` swaps the
+			// stock self-listening entry for ours (`nitro-entry/bun-https.mjs`), which calls
+			// `Bun.serve({ tls })` so the console is served over HTTPS (HTTP/1.1 over TLS) with the
+			// host's own identity cert. (No HTTP/2 — Bun.serve has no h2 server — and no HTTP/3, which a
+			// browser won't speak against this self-signed, no-SAN host cert.) Bun is the runtime
+			// everywhere now — the Windows installer already bundles it, and the punktfunk-web .deb
+			// vendors it (it can't be `node`: `Bun.serve` is a bun API). (dev `vite dev` is unaffected.)
+			preset: "bun",
+			entry: fileURLToPath(
+				new URL("./nitro-entry/bun-https.mjs", import.meta.url),
+			),
 			// BUNDLE every dependency into the server output (no externalized node_modules). Three wins:
 			// (1) the .output tree drops from ~47k files / 730 MB (the whole untree-shaken @unom/ui dep
 			// tree — payload, lexical, date-fns…) to a handful of tree-shaken chunks; (2) the output is a

web/vite.storybook.config.ts

@@ -1,8 +1,8 @@
-import { defineConfig } from "vite";
-import viteReact from "@vitejs/plugin-react";
-import viteTsConfigPaths from "vite-tsconfig-paths";
-import tailwindcss from "@tailwindcss/vite";
 import { paraglideVitePlugin } from "@inlang/paraglide-js";
+import tailwindcss from "@tailwindcss/vite";
+import viteReact from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+import viteTsConfigPaths from "vite-tsconfig-paths";
 
 // Storybook builds the components in isolation — WITHOUT the TanStack Start /
 // Nitro plugins from vite.config.ts. Keeps the `@/*` alias, Tailwind v4, the

web/web-run.cmd

@@ -2,25 +2,32 @@
 rem punktfunk web console launcher - DEV layout (in-repo tree). The PunktfunkWeb scheduled task
 rem (boot trigger, SYSTEM, restart-on-failure) runs this at startup. It sources the host's mgmt bearer
 rem token + the console login password from %ProgramData%\punktfunk\, points the /api proxy at the
-rem host's loopback HTTPS mgmt API, and runs the self-contained (no-node_modules) Nitro server on :3000.
-rem %~dp0 = <repo>\web\ .
+rem host's loopback HTTPS mgmt API, and serves the self-contained (no-node_modules) Nitro console over
+rem HTTPS (HTTP/1.1 over TLS) on :3000 with the host's identity cert. %~dp0 = <repo>\web\ .
 rem
 rem DEV vs the installed launcher (scripts\windows\web-run.cmd): the dev host service runs from
-rem target\release (not the installed {app} tree), so this runs the in-repo web\.output with the
-rem system node instead of {app}\bun\bun.exe + {app}\web\.output. Rebuild after a web change with
-rem `bun run build` in web\ ; no edit needed here.
+rem target\release (not the installed {app} tree), so this runs the in-repo web\.output. The console
+rem now runs on bun (the Nitro `bun` preset + Bun.serve TLS entry), so set BUN
+rem below to your bun.exe. Rebuild after a web change with `bun run build` in web\ ; no edit needed.
 setlocal EnableExtensions
 
 set "PFDATA=%ProgramData%\punktfunk"
 set "TOKENFILE=%PFDATA%\mgmt-token"
 set "PWFILE=%PFDATA%\web-password"
+set "CERTFILE=%PFDATA%\cert.pem"
+set "KEYFILE=%PFDATA%\key.pem"
 
-rem The host's `serve` writes the mgmt token on first run. Until it exists the proxy has no credential,
-rem so fail and let the task's restart-on-failure retry (mirrors the installed launcher / Linux unit).
+rem The host's `serve` writes the mgmt token + identity cert on first run. Until they exist the proxy
+rem has no credential and no TLS material, so fail and let restart-on-failure retry (mirrors the
+rem installed launcher / Linux unit) rather than silently serving plain HTTP.
 if not exist "%TOKENFILE%" (
   echo [punktfunk-web] mgmt token not present yet at "%TOKENFILE%" - waiting for the host service.
   exit /b 1
 )
+if not exist "%CERTFILE%" (
+  echo [punktfunk-web] host identity cert not present yet at "%CERTFILE%" - waiting for the host service.
+  exit /b 1
+)
 
 rem Both files are single KEY=VALUE lines: PUNKTFUNK_MGMT_TOKEN=... and PUNKTFUNK_UI_PASSWORD=... .
 rem Split on the first '=' and import each into the environment.
@@ -32,15 +39,16 @@ set "PORT=3000"
 set "HOST=0.0.0.0"
 set "PUNKTFUNK_MGMT_URL=https://127.0.0.1:47990"
 set "NODE_TLS_REJECT_UNAUTHORIZED=0"
+rem Serve HTTPS (HTTP/1.1 over TLS) with the host's identity cert; mark the session cookie Secure.
+set "PUNKTFUNK_UI_TLS_CERT=%CERTFILE%"
+set "PUNKTFUNK_UI_TLS_KEY=%KEYFILE%"
+set "PUNKTFUNK_UI_SECURE=1"
 
-set "NODE=C:\Users\Public\node-v22.11.0-win-x64\node.exe"
+rem Bun runtime (override BUN if yours lives elsewhere / is on PATH as just `bun`).
+if not defined BUN set "BUN=bun.exe"
 set "SERVER=%~dp0.output\server\index.mjs"
-if not exist "%NODE%" (
-  echo [punktfunk-web] node runtime missing at "%NODE%".
-  exit /b 1
-)
 if not exist "%SERVER%" (
   echo [punktfunk-web] built server missing at "%SERVER%" - build it: cd web ^&^& bun run build
   exit /b 1
 )
-"%NODE%" "%SERVER%"
+"%BUN%" "%SERVER%"

web/web.env.example

@@ -3,18 +3,28 @@
 # On a `apt install punktfunk-web` install you DO NOT edit anything: the systemd --user units wire
 # everything automatically —
 #   punktfunk-web.service sets PUNKTFUNK_MGMT_URL=https://127.0.0.1:47990, NODE_TLS_REJECT_UNAUTHORIZED=0,
-#   PORT=3000, HOST=0.0.0.0, and sources:
+#   PORT=3000, HOST=0.0.0.0, the PUNKTFUNK_UI_TLS_* cert paths + PUNKTFUNK_UI_SECURE=1, and sources:
 #     ~/.config/punktfunk/mgmt-token    (written by the host's `serve` — the shared bearer token)
 #     ~/.config/punktfunk/web-password  (written by punktfunk-web-init — the console login password)
+#     ~/.config/punktfunk/{cert,key}.pem (the host identity — the console serves HTTPS with it)
 #
-# This file documents the variables for a MANUAL deploy (running `node .output/server/index.mjs`
-# yourself). The mgmt API is HTTPS with the host's self-signed loopback cert, so the proxy needs
-# NODE_TLS_REJECT_UNAUTHORIZED=0 (its only outbound TLS hop is that loopback connection).
+# This file documents the variables for a MANUAL deploy (running `bun .output/server/index.mjs`
+# yourself — the console runs on bun: `Bun.serve` is a Bun API, node can't run it). The mgmt API is
+# HTTPS with the host's self-signed loopback cert, so the proxy needs NODE_TLS_REJECT_UNAUTHORIZED=0
+# (its only outbound TLS hop is that loopback connection).
 PUNKTFUNK_MGMT_URL=https://127.0.0.1:47990
 NODE_TLS_REJECT_UNAUTHORIZED=0
 PORT=3000
 HOST=0.0.0.0
 
+# Serve the console over HTTPS (HTTP/1.1 over TLS) with the host's own identity cert. BOTH paths
+# set ⇒ HTTPS. (No HTTP/2 or HTTP/3: Bun.serve has no HTTP/2 server, and a browser won't speak
+# HTTP/3/QUIC against this self-signed, no-SAN host cert — so HTTP/1.1 over TLS is what's offered.)
+PUNKTFUNK_UI_TLS_CERT=%h/.config/punktfunk/cert.pem
+PUNKTFUNK_UI_TLS_KEY=%h/.config/punktfunk/key.pem
+# Mark the session cookie Secure (required once served over TLS):
+PUNKTFUNK_UI_SECURE=1
+
 # Match the host's ~/.config/punktfunk/mgmt-token (auto-generated by the host if unset):
 PUNKTFUNK_MGMT_TOKEN=