pixie-lab 0.1.0__py3-none-any.whl

pixie/web/_templates/events.html

@@ -0,0 +1,125 @@
+{% extends "layout.html" %}
+{% from "_partials/table_helpers.html" import search_input, sort_header, pagination_inline %}
+{% from "_partials/page_description.html" import page_description %}
+{% block title %}Events - pixie{% endblock %}
+{% block subnav %}
+<nav class="navbar subnav-strip" aria-label="Section sub-navigation">
+    <div class="container">
+        {# LEFT: anchor links. Don't repeat the top-nav ("Events");
+           use section-specific verbs. #}
+        <span class="subnav-jumps d-flex align-items-center flex-wrap">
+            <a href="#log">Log</a>
+        </span>
+        {# The kind + related-to filter dropdowns used to live here.
+           They moved into the table's card-header row alongside the
+           freeform filter + pagination so an operator's eye lands on
+           "what am I filtering", "what am I searching for", "how
+           many are there" in one horizontal sweep -- matching the
+           layout intent documented in table_helpers.html. #}
+    </div>
+</nav>
+{% endblock %}
+{% block content %}
+{{ page_description('clock-history', 'Chronological log of every state change pixie has emitted: machines binding + status POSTs, catalog images fetching, exports going up + down, admin logins. Filter by kind or by the subject it\'s about; freeform search narrows the summary column. The tail is truncated to the newest 2000 events by default.') }}
+<div class="card" id="log">
+    <div class="card-header bg-light fw-semibold d-flex flex-wrap align-items-center gap-2 py-2">
+        <span class="text-nowrap"><i class="bi bi-clock-history me-1"></i>Events</span>
+        {{ search_input('/ui/events', q, preserved, 'kind / related to / summary') }}
+        {# Strict-equality narrowings applied BEFORE the freeform ``q``
+           filter. The two selects are dropped-label + icon-tooltip
+           only so they don't push pagination onto a second row on
+           medium viewports. Each is its own tiny form that submits on
+           ``change``; hidden inputs preserve the OTHER filter + q so
+           ``page`` + ``sort`` survive a filter flip. #}
+        <form method="get" action="/ui/events" class="d-flex align-items-center m-0">
+            {% if preserved.q %}<input type="hidden" name="q" value="{{ preserved.q }}">{% endif %}
+            {% if subject_kind_selected %}
+            <input type="hidden" name="subject_kind" value="{{ subject_kind_selected }}">
+            {% endif %}
+            <label for="filter-kind" class="text-muted small mb-0 me-1"
+                   title="Filter by kind">
+                <i class="bi bi-tag"></i>
+            </label>
+            <select id="filter-kind" name="kind" onchange="this.form.submit()"
+                    class="form-select form-select-sm" style="max-width: 14rem;"
+                    aria-label="Filter by kind">
+                <option value="">kind: any</option>
+                {% for k in kind_choices %}
+                <option value="{{ k }}" {% if k == kind_selected %}selected{% endif %}>{{ k }}</option>
+                {% endfor %}
+            </select>
+        </form>
+        <form method="get" action="/ui/events" class="d-flex align-items-center m-0">
+            {% if preserved.q %}<input type="hidden" name="q" value="{{ preserved.q }}">{% endif %}
+            {% if kind_selected %}
+            <input type="hidden" name="kind" value="{{ kind_selected }}">
+            {% endif %}
+            <label for="filter-subject" class="text-muted small mb-0 me-1"
+                   title="Filter by related-to">
+                <i class="bi bi-link-45deg"></i>
+            </label>
+            <select id="filter-subject" name="subject_kind" onchange="this.form.submit()"
+                    class="form-select form-select-sm" style="max-width: 10rem;"
+                    aria-label="Filter by related-to">
+                <option value="">related: any</option>
+                {% for s in subject_kind_choices %}
+                <option value="{{ s }}" {% if s == subject_kind_selected %}selected{% endif %}>{{ s }}</option>
+                {% endfor %}
+            </select>
+        </form>
+        {% if kind_selected or subject_kind_selected %}
+        <a href="/ui/events{% if preserved.q %}?q={{ preserved.q }}{% endif %}"
+           class="btn btn-sm btn-link text-nowrap p-0 text-decoration-none"
+           title="Clear kind + related-to filters">
+            <i class="bi bi-x-circle"></i>
+        </a>
+        {% endif %}
+        {{ pagination_inline(page_state, preserved, label='events') }}
+    </div>
+    {% if events %}
+    <div class="table-responsive">
+        <table class="table table-hover align-middle mb-0">
+            <thead class="table-light">
+                <tr>
+                    {{ sort_header('When', 'ts', sort, preserved) }}
+                    {{ sort_header('Kind', 'kind', sort, preserved) }}
+                    {{ sort_header('Related to', 'subject_id', sort, preserved) }}
+                    <th scope="col">Summary</th>
+                </tr>
+            </thead>
+            <tbody>
+                {% for e in events %}
+                <tr>
+                    <td class="small text-muted text-nowrap">{{ e.ts | fmt_ts }}</td>
+                    <td><code>{{ e.kind }}</code></td>
+                    <td>
+                        {# ``Related to`` reads as ``<what>: <which>``:
+                           e.subject_kind is the category (entry / machine /
+                           export / auth), e.subject_id is the specific
+                           name / MAC / export name. Presenting both with a
+                           category label makes the row self-describing
+                           without an operator having to memorise which
+                           bare token means which. #}
+                        {% if e.subject_kind %}
+                        <span class="badge text-bg-light border me-1">{{ e.subject_kind }}</span>
+                        <code class="small">{{ e.subject_id or '' }}</code>
+                        {% else %}
+                        <span class="text-muted small">-</span>
+                        {% endif %}
+                    </td>
+                    <td>{{ e.summary or "" }}</td>
+                </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+    </div>
+    {% else %}
+    <div class="card-body">
+        <p class="text-muted mb-0">
+            <i class="bi bi-inbox me-1"></i>
+            {% if q %}No events match <code>{{ q }}</code>.{% else %}No events yet.{% endif %}
+        </p>
+    </div>
+    {% endif %}
+</div>
+{% endblock %}

pixie/web/_templates/ipxe/bootstrap.j2

@@ -0,0 +1,12 @@
+#!ipxe
+# pixie iPXE bootstrap. TFTP + HTTP consumers land here from DHCP;
+# the chain-load below re-routes each MAC to its target-specific
+# plan at /pxe/<mac>.
+#
+# ``${net0/mac}`` is iPXE's own view of the primary NIC, which
+# matches what the target announces on DHCP + what pixie's
+# machines table keys on. We deliberately don't pass ``?ip=...``:
+# operator inventory lives in bty-inventory (a later PR).
+
+set pixie-base http://{{ host }}:{{ port }}
+chain ${pixie-base}/pxe/${net0/mac}

pixie/web/_templates/ipxe/exit.j2

@@ -0,0 +1,10 @@
+#!ipxe
+# pixie plan for {{ mac }} - boot_mode=ipxe-exit
+#
+# The default for a discovered-but-not-yet-bound machine, and for
+# machines the operator has explicitly told pixie to leave alone.
+# iPXE's ``exit`` unloads itself; the firmware's next boot entry
+# fires -- typically the local disk when the operator has DHCP
+# pointing at pixie only for imaging bring-up.
+
+exit

pixie/web/_templates/ipxe/nbdboot.j2

@@ -0,0 +1,57 @@
+#!ipxe
+# pixie plan for {{ mac }} - boot_mode=nbdboot
+#
+# Image-native nbdboot: the target fetches the image's own kernel +
+# initrd from pixie's artifacts directory (content-addressed to the
+# tar.gz bundle sha) and attaches its root over NBD from the
+# per-machine export that pixie spawns for the disk image blob
+# (content-addressed to the disk-image sha).
+#
+# Kernel cmdline carries ``boot=nbdboot``. Debian live-boot in the
+# initrd dispatches to ``/scripts/<x>`` based on ``boot=<x>``; the
+# script itself comes from a supplementary initramfs overlay pixie
+# serves at ``/pivot/nbdboot.cpio.gz``, loaded via the second
+# ``initrd`` line below. Linux concatenates cpio streams during
+# initramfs unpack + later-overlay-wins on same-path entries, so
+# ``/scripts/nbdboot`` from pixie's overlay shadows any legacy
+# ``/scripts/ramboot`` in nosi's baked initrd -- and nosi is free
+# to publish a generic kernel + initrd (no pixie-flavour pivot
+# script) once it rebuilds without the pixie-media hook.
+#
+# Design departures from the trio's older ipxe_ramboot template:
+#
+# - URLs are content-addressed. A rename of the catalog entry does
+#   not silently point the target at different bytes; a redeploy of
+#   pixie serves the same URL for the same content.
+# - No fallback to a bty-media-baked kernel. If the netboot bundle
+#   is missing or corrupt the target lands on the pixie-media
+#   diagnostic screen (a later PR); the plan renderer refuses to
+#   render an image-mismatched fallback that would kernel-panic
+#   on a bad module.
+#
+# Console + modprobe blacklist encode hardware lessons pulled from
+# bty/nbdmux 2026-06/07 field runs; keep them as-is unless the
+# behaviour is being explicitly re-litigated.
+
+set pixie-base http://{{ host }}:{{ port }}
+set nbd-host {{ nbd_host }}
+set nbd-port {{ nbd_port }}
+set nbd-name {{ nbd_name }}
+
+# The kernel + initrd come out of the extracted netboot bundle at
+# pixie's content-addressed artifacts path. iPXE fetches them over
+# plain HTTP; no auth on that route.
+#
+# Cmdline carries BOTH ``pixie.*`` and ``bty.*`` prefixes: nosi
+# netboot bundles published before the pixie rename read ``bty.*``
+# in their initrd's nbdboot script, pixie's own netboot-pc bundle
+# reads ``pixie.*``. Emitting both lets a single pixie deploy chain
+# either bundle without a re-bake. Verified live 2026-07-14 on
+# 10.20.30.10 booting nosi debian-13-headless (2026.W28) whose
+# initrd greps for ``bty.server`` / ``bty.mac`` / ``bty.nbd`` /
+# ``bty.image``; a ``pixie.*``-only cmdline made the nbdboot
+# script fall through and never issue nbd-client.
+kernel ${pixie-base}/artifacts/{{ bundle_sha }}/vmlinuz?mac={{ mac }} boot=nbdboot ip=dhcp rd.neednet=1 nbd.nbds_max=1 nbd.max_part=16 systemd.default_device_timeout_sec=10 systemd.default_timeout_start_sec=15 console=tty0 console=ttyS1,115200 console=ttyS0,115200 earlyprintk=ttyS0,115200 plymouth.enable=0 modprobe.blacklist=nouveau,rndis_host nouveau.modeset=0 systemd.gpt_auto=0 pixie.nbd=tcp://${nbd-host}:${nbd-port} pixie.image=${nbd-name} pixie.overlay_size={{ overlay_size }} pixie.server=${pixie-base} pixie.mac={{ mac }} bty.nbd=tcp://${nbd-host}:${nbd-port} bty.image=${nbd-name} bty.overlay_size={{ overlay_size }} bty.server=${pixie-base} bty.mac={{ mac }}{% if extra_cmdline %} {{ extra_cmdline }}{% endif %}
+initrd ${pixie-base}/artifacts/{{ bundle_sha }}/initrd?mac={{ mac }}
+initrd ${pixie-base}/pivot/nbdboot.cpio.gz
+boot

pixie/web/_templates/ipxe/pixie-live-env.j2

@@ -0,0 +1,55 @@
+#!ipxe
+# pixie plan for {{ mac }} - boot_mode={{ boot_mode }}
+#
+# Boot pixie's own live env. The netboot-pc bake produced vmlinuz +
+# initrd + squashfs artifacts; the pixie deploy staged them under
+# ``$PIXIE_LIVE_ENV_DIR`` and this HTTP process exposes them at
+# ``/boot/pixie-live-env/``. Debian live-boot cmdline shape:
+#
+#   boot=live components fetch=<squashfs URL>
+#
+# handles the initrd -> squashfs pivot. ``pixie.server`` +
+# ``pixie.mac`` are the two knobs pixie-on-tty1.service reads on
+# every live-env boot; the pixie CLI then GETs
+# ``<server>/pxe/<mac>/plan`` and dispatches (auto-flash,
+# inventory + reboot, interactive wizard, or exit).
+#
+# ``ip=dhcp`` mirrors the nbdboot template's cmdline: the initrd's
+# network module (Debian live-boot, in this case) needs an explicit
+# DHCP directive to bring the primary NIC up before pixie CLI tries
+# to reach ``$pixie-server``. ``console=`` chain matches nbdboot too
+# so a target with a serial console reads output on both tty0 and
+# ttyS0/1 -- most bench-side debugging happens on serial.
+
+set pixie-base http://{{ host }}:{{ port }}
+
+# Cmdline matches bty's proven-working live-env kernel line
+# (bty/src/bty/web/_templates/ipxe_flash.j2 + ipxe_tui.j2). Deltas
+# from an earlier pixie shape that had drifted:
+#
+# - ``ip=dhcp`` REMOVED. Debian live-boot's ``fetch=`` handler
+#   configures the network itself via its own DHCP client; keeping
+#   both racing produced silent hangs on GIGABYTE MC12-LE0 hardware
+#   where live-boot's ipconfig would return with no NIC configured
+#   despite iPXE having successfully DHCP'd from the same interface.
+#   bty never had it; verified live on 10.20.30.61 (matx-bmc) with
+#   nothing else changing.
+# - ``plymouth.enable=0 modprobe.blacklist=nouveau,rndis_host
+#   nouveau.modeset=0 systemd.gpt_auto=0`` ADDED. Same set bty
+#   ships. plymouth stays off so the operator sees the full boot
+#   stream (a wedge between two ``[ OK ] Started X`` lines is
+#   immediately diagnostic); nouveau blacklist keeps NVIDIA
+#   GPU quirks from stalling non-graphics targets; rndis_host
+#   blacklist stops the kernel from claiming a USB-console-emulated
+#   NIC before the real one appears; systemd.gpt_auto=0 keeps
+#   systemd from auto-mounting random GPT partitions the flasher
+#   is about to overwrite.
+#
+# ``console=`` chain matches bty too; LAST-wins for /dev/console.
+# The ttyS0 tail lands on most bench-side USB-serial adapters;
+# operators driving from a BMC's SoL on ttyS1 append their own
+# ``console=ttyS1,115200`` via PIXIE_LIVE_ENV_EXTRA_CMDLINE.
+
+kernel ${pixie-base}/boot/pixie-live-env/vmlinuz boot=live fetch=${pixie-base}/boot/pixie-live-env/live.squashfs components console=tty0 console=ttyS1,115200 console=ttyS0,115200 earlyprintk=ttyS0,115200 plymouth.enable=0 modprobe.blacklist=nouveau,rndis_host nouveau.modeset=0 systemd.gpt_auto=0 pixie.server=${pixie-base} pixie.mac={{ mac }} bty.server=${pixie-base} bty.mac={{ mac }}{% if extra_cmdline %} {{ extra_cmdline }}{% endif %}
+initrd ${pixie-base}/boot/pixie-live-env/initrd
+boot

pixie/web/_templates/ipxe/unavailable.j2

@@ -0,0 +1,14 @@
+#!ipxe
+# pixie plan for {{ mac }} - {{ reason_slug }}
+#
+# The operator asked for boot_mode=nbdboot but the plan can't be
+# rendered right now. Reason:
+#
+#   {{ reason }}
+#
+# We deliberately do NOT chain-load anything else here (no bty-media
+# fallback, no generic "keep trying" loop). ``exit`` unloads iPXE so
+# the firmware's next boot device fires; the operator sees the reason
+# in ``/ui/machines/<mac>`` and on pixie's event log.
+
+exit

pixie/web/_templates/layout.html

@@ -0,0 +1,345 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>{% block title %}pixie{% endblock %}</title>
+    <link rel="icon" type="image/png" href="/static/pixie-favicon.png">
+    <link rel="stylesheet" href="/static/bootstrap.min.css">
+    <link rel="stylesheet" href="/static/bootstrap-icons.min.css">
+    <style>
+        /* Palette anchor shared with bty / withcache / nbdmux (the three
+           services that pixie folds into one process). Bootstrap 5
+           exposes ``--bs-primary`` + a matching -rgb triplet used by
+           translucent variants (alerts, focus rings, .bg-*-subtle).
+           Overriding both here re-tints every stock component without
+           patching bootstrap.min.css. Navy stays as the primary tint
+           because pixie inherits bty's operator surface -- operators
+           coming from bty read the same colour as "the appliance
+           surface", not "a new product". */
+        :root {
+            --bs-primary: #0d6efd;
+            --bs-primary-rgb: 13, 110, 253;
+            --bs-link-color: #0d6efd;
+            --bs-link-hover-color: #0a58ca;
+        }
+        .btn-primary {
+            --bs-btn-bg: #0d6efd;
+            --bs-btn-border-color: #0d6efd;
+            --bs-btn-hover-bg: #0a58ca;
+            --bs-btn-hover-border-color: #0a58ca;
+            --bs-btn-active-bg: #0a58ca;
+            --bs-btn-active-border-color: #0a58ca;
+        }
+        .bg-primary { --bs-bg-opacity: 1; background-color: #0d6efd !important; }
+        .text-primary { --bs-text-opacity: 1; color: #0d6efd !important; }
+        .border-primary { --bs-border-opacity: 1; border-color: #0d6efd !important; }
+        /* Brand strip: a thin gradient accent above the navbar.
+           Same navy -> dark-magenta -> magenta gradient as bty /
+           withcache / nbdmux so pixie reads as the fourth
+           surface in the same product family; when the trio is
+           folded into pixie the family strip stays as their
+           shared visual signature. */
+        .brand-accent {
+            height: 3px;
+            background: linear-gradient(90deg, #0d6efd 0%, #6610f2 50%, #d63384 100%);
+        }
+        .sticky-header {
+            position: sticky;
+            top: 0;
+            z-index: 1030;
+        }
+        html {
+            scroll-padding-top: 6.5rem;
+            scroll-behavior: smooth;
+        }
+        .navbar-brand {
+            border-radius: 0.5rem;
+            padding-left: 0.6rem;
+            padding-right: 0.6rem;
+            margin-right: 0.25rem;
+            transition: background-color 0.15s;
+        }
+        .navbar-brand.brand-active {
+            background-color: rgba(13, 110, 253, 0.85);
+        }
+        .navbar-brand:hover {
+            background-color: rgba(255, 255, 255, 0.06);
+        }
+        .navbar-brand.brand-active:hover {
+            background-color: rgba(13, 110, 253, 0.95);
+        }
+        .navbar-version {
+            color: rgba(255, 255, 255, 0.55);
+            font-weight: 400;
+            font-size: 0.85rem;
+            align-self: center;
+            white-space: nowrap;
+        }
+        .navbar-brand .brand-icon {
+            height: 1.05rem;
+            width: auto;
+            vertical-align: -0.15rem;
+        }
+        .navbar .nav-btn {
+            display: inline-flex;
+            align-items: center;
+            gap: 0.4rem;
+            padding: 0.4rem 0.8rem;
+            margin-right: 0.25rem;
+            border-radius: 0.5rem;
+            color: rgba(255, 255, 255, 0.85);
+            text-decoration: none;
+            transition: background-color 0.15s;
+        }
+        .navbar .nav-btn:hover {
+            background-color: rgba(255, 255, 255, 0.10);
+            color: #fff;
+        }
+        .navbar .nav-btn.active {
+            background-color: #0d6efd;
+            color: #fff;
+            box-shadow: 0 0 0 1px rgba(13, 110, 253, 0.6);
+        }
+        .navbar .nav-btn i {
+            font-size: 1.05rem;
+        }
+        /* User-bar: a single pill; pixie has no per-operator account
+           surface yet so this is just a logout button styled to match
+           bty's user-bar. Extend later when accounts land. */
+        .user-bar {
+            display: inline-flex;
+            align-items: stretch;
+            border-radius: 999px;
+            background-color: rgba(255, 255, 255, 0.08);
+            border: 1px solid rgba(255, 255, 255, 0.12);
+            overflow: hidden;
+            font-size: 0.85rem;
+        }
+        .user-bar-action {
+            display: inline-flex;
+            align-items: center;
+            padding: 0.35rem 0.7rem;
+            background: transparent;
+            border: none;
+            color: rgba(255, 255, 255, 0.85);
+            text-decoration: none;
+            transition: background-color 0.15s, color 0.15s;
+        }
+        .user-bar-action:hover,
+        .user-bar-action:focus {
+            background-color: rgba(255, 255, 255, 0.10);
+            color: #fff;
+            outline: none;
+        }
+        .user-bar-logout:hover,
+        .user-bar-logout:focus {
+            background-color: rgba(220, 53, 69, 0.65);
+            color: #fff;
+        }
+        /* Sub-nav strip. Same layout contract as bty: pages with
+           per-section actions render their pill nav here so it
+           visually attaches to the main navbar above. */
+        .subnav-strip {
+            background-color: #495057;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.10);
+            padding-top: 0.25rem;
+            padding-bottom: 0.25rem;
+            font-size: 0.85rem;
+            line-height: 1.4;
+        }
+        .subnav-strip > .container {
+            min-height: 2rem;
+            display: flex;
+            align-items: center;
+            gap: 0.6rem;
+        }
+        .subnav-strip .form-control-sm,
+        .subnav-strip .btn-sm,
+        .subnav-strip a,
+        .subnav-strip label,
+        .subnav-strip .small,
+        .subnav-strip small {
+            font-size: inherit;
+            line-height: inherit;
+        }
+        .subnav-strip .form-control-sm,
+        .subnav-strip .btn-sm {
+            padding-top: 0.15rem;
+            padding-bottom: 0.15rem;
+        }
+        .subnav-strip .nav-pills {
+            gap: 0.25rem;
+        }
+        .subnav-strip .nav-pills .nav-link {
+            color: rgba(255, 255, 255, 0.78);
+            padding: 0.15rem 0.55rem;
+        }
+        .subnav-strip .nav-pills .nav-link:hover {
+            color: #fff;
+            background-color: rgba(255, 255, 255, 0.10);
+        }
+        .subnav-strip .nav-pills .nav-link.active {
+            color: #fff;
+            background-color: #0d6efd;
+        }
+        .subnav-strip .text-muted {
+            color: rgba(255, 255, 255, 0.55) !important;
+        }
+        .subnav-strip code {
+            color: rgba(255, 255, 255, 0.85);
+            background-color: transparent;
+        }
+        .subnav-strip a {
+            color: rgba(255, 255, 255, 0.78);
+        }
+        .subnav-strip a:hover {
+            color: #fff;
+        }
+        /* Jump links (subnav-jumps) sit next to each other with a
+           visible gap so an operator scanning the strip sees them as
+           distinct anchors instead of one run-together phrase. The
+           parent flex sets gap=0.6rem for TOP-LEVEL children of the
+           strip, but the anchors nest inside a single .subnav-jumps
+           span; give that span its own gap. */
+        .subnav-strip .subnav-jumps {
+            gap: 1.1rem;
+        }
+        .subnav-strip .subnav-jumps > a {
+            padding: 0.1rem 0.15rem;
+            border-radius: 0.2rem;
+        }
+        .subnav-strip .subnav-jumps > a:hover {
+            background-color: rgba(255, 255, 255, 0.08);
+        }
+        /* Surface shading ladder: card-header > thead > table body, each
+           step lighter going down. Same three-tone recipe bty uses so a
+           pixie machines / catalog table reads with the same depth cues
+           an operator learned on bty. */
+        .table {
+            --bs-table-bg: #eff2f6;
+        }
+        .table > thead {
+            --bs-table-bg: #e1e7ef;
+        }
+        .card > .card-header.bg-light {
+            background-color: #d2dbe6 !important;
+        }
+        /* Bootstrap's default .alert-warning is very-pale-yellow with a
+           faint amber text -- readable on print but low-contrast on
+           screen, especially for the small-text hints pixie uses on the
+           bind form + inventory "no data yet" callouts. Darken the text
+           and firm up the border so warnings actually catch the eye. */
+        .alert-warning {
+            color: #664200;
+            background-color: #fff3cd;
+            border-color: #ffd35a;
+        }
+        .alert-warning code {
+            color: #664200;
+        }
+        .alert-warning a {
+            color: #664200;
+            text-decoration: underline;
+        }
+        /* Page description strip: a one-paragraph orientation shown
+           at the top of every operator page (dashboard, catalog,
+           machines, events, settings, machine detail). Left accent
+           border marks it as "meta" content, distinct from the cards
+           below. Font size is smaller than the card body prose so a
+           returning operator can skim past it. */
+        .page-description {
+            padding: 0.5rem 0.85rem;
+            border-left: 3px solid var(--bs-primary);
+            background-color: rgba(13, 110, 253, 0.04);
+            border-radius: 0 0.2rem 0.2rem 0;
+            font-size: 0.9rem;
+            line-height: 1.4;
+        }
+    </style>
+    <script src="/static/htmx.min.js"></script>
+    <script src="/static/sse.js"></script>
+</head>
+<body class="bg-light">
+{# Sticky header: the accent strip, the main navbar, and the sub-nav
+   travel together and pin to the top so per-section nav stays
+   reachable while scrolling a long page. #}
+<div class="sticky-header">
+<div class="brand-accent"></div>
+<nav class="navbar navbar-expand-md bg-dark navbar-dark py-2">
+    <div class="container">
+        {# Brand pill doubles as the dashboard link. The active state
+           on ``page == 'dashboard'`` is the "you are on the dashboard"
+           cue; a separate ``Dashboard`` nav-btn would just duplicate
+           the brand's click target. #}
+        <a class="navbar-brand fw-semibold {% if page == 'dashboard' %}brand-active{% endif %}"
+           href="/ui/">
+            <img src="/static/pixie-favicon.png" alt="pixie mascot" class="brand-icon me-1">PIXIE
+        </a>
+        {% if authed %}
+        <div class="d-flex flex-grow-1 align-items-center flex-wrap">
+            <div class="me-auto d-flex flex-wrap">
+                <a class="nav-btn {% if page == 'machines' %}active{% endif %}" href="/ui/machines">
+                    <i class="bi bi-pc-display"></i>Machines
+                </a>
+                <a class="nav-btn {% if page == 'catalog' %}active{% endif %}" href="/ui/catalog">
+                    <i class="bi bi-collection"></i>Catalog
+                </a>
+                <a class="nav-btn {% if page == 'events' %}active{% endif %}" href="/ui/events">
+                    <i class="bi bi-clock-history"></i>Events
+                </a>
+                <a class="nav-btn {% if page == 'settings' %}active{% endif %}" href="/ui/settings">
+                    <i class="bi bi-gear"></i>Settings
+                </a>
+            </div>
+            <span class="navbar-version me-2">v{{ version }}</span>
+            <div class="user-bar mt-2 mt-md-0"
+                 title="Session (session cookie, one operator).">
+                <span class="user-bar-action">
+                    <i class="bi bi-person-circle me-1"></i>admin
+                </span>
+                <form action="/ui/logout" method="post" class="m-0 d-inline-flex">
+                    <button type="submit" class="user-bar-action user-bar-logout"
+                            title="Sign out">
+                        <i class="bi bi-box-arrow-right"></i>
+                    </button>
+                </form>
+            </div>
+        </div>
+        {% endif %}
+    </div>
+</nav>
+
+{# Sub-nav strip. Pages with per-section actions render their pill
+   nav in the ``subnav`` block; pages without leave it empty and
+   the main content flows straight up to the main navbar. #}
+{% block subnav %}{% endblock %}
+</div>{# /.sticky-header #}
+
+<main class="container py-4">
+    {% if flash %}
+    <div class="alert alert-{{ flash_kind or 'info' }}">{{ flash }}</div>
+    {% endif %}
+    {% block intro %}{% endblock %}
+    {% block content %}{% endblock %}
+</main>
+
+<script>
+// Keep ``scroll-padding-top`` in lockstep with the sticky header's
+// actual height so in-page ``#anchor`` jumps land BELOW the header
+// rather than under it. Same pattern bty uses; measure on load and
+// on resize so window shrinks that wrap the subnav onto two lines
+// also stay correct.
+(function () {
+    function syncScrollPadding() {
+        var header = document.querySelector(".sticky-header");
+        if (!header) return;
+        document.documentElement.style.scrollPaddingTop = (header.offsetHeight + 6) + "px";
+    }
+    syncScrollPadding();
+    window.addEventListener("resize", syncScrollPadding);
+    document.body.addEventListener("htmx:afterSwap", syncScrollPadding);
+})();
+</script>
+</body>
+</html>

pixie/web/_templates/login.html

@@ -0,0 +1,40 @@
+{% extends "layout.html" %}
+{% block title %}Log in - pixie{% endblock %}
+{% block content %}
+<div class="row justify-content-center">
+    <div class="col-md-6">
+        <div class="card">
+            <div class="card-body">
+                <h1 class="h4 mb-3"><i class="bi bi-shield-lock me-2"></i>Log in</h1>
+                <p class="text-muted small">
+                    Enter the admin password. The default is
+                    <code>pixie</code>; override via
+                    <code>PIXIE_ADMIN_PASSWORD</code> on the server.
+                </p>
+                {% if using_default_password %}
+                <div class="alert alert-warning small mb-3">
+                    <i class="bi bi-exclamation-triangle me-1"></i>
+                    This server still uses the well-known default
+                    password <code>pixie</code>. Set
+                    <code>PIXIE_ADMIN_PASSWORD</code> on the host before
+                    exposing it beyond localhost.
+                </div>
+                {% endif %}
+                {% if error %}
+                <div class="alert alert-danger">{{ error }}</div>
+                {% endif %}
+                <form action="/ui/login" method="post">
+                    <div class="mb-3">
+                        <label for="password" class="form-label">Password</label>
+                        <input type="password" class="form-control" id="password"
+                               name="password" autocomplete="current-password" autofocus required>
+                    </div>
+                    <button type="submit" class="btn btn-primary w-100">
+                        <i class="bi bi-box-arrow-in-right me-1"></i>Log in
+                    </button>
+                </form>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}