pixie-lab 0.1.0__py3-none-any.whl

pixie/web/_templates/machine_detail.html

@@ -0,0 +1,786 @@
+{% extends "layout.html" %}
+{% from "_partials/page_description.html" import page_description %}
+{% block title %}{{ machine.mac }} - pixie{% endblock %}
+{% block subnav %}
+<div class="subnav-strip">
+    <div class="container">
+        <a href="/ui/machines" class="text-decoration-none">
+            <i class="bi bi-arrow-left me-1"></i>Machines
+        </a>
+        <span class="text-muted">/</span>
+        <code class="text-white-50">{{ machine.mac }}</code>
+        <ul class="nav nav-pills ms-auto">
+            <li class="nav-item"><a class="nav-link" href="#binding">Binding</a></li>
+            <li class="nav-item"><a class="nav-link" href="#inventory">Inventory</a></li>
+            <li class="nav-item"><a class="nav-link" href="#events">Events</a></li>
+        </ul>
+    </div>
+</div>
+{% endblock %}
+{% block content %}
+{{ page_description('pc-display-horizontal', 'Everything pixie knows about one target: telemetry, current binding, inventory the live env posts back, and events scoped to this MAC. Editing the binding changes what pixie serves on this target\'s next PXE; labels and inventory are stored independently of the binding.') }}
+<div class="card shadow-sm mb-4">
+    <div class="card-header bg-light d-flex align-items-center">
+        <h2 class="h5 mb-0"><i class="bi bi-pc-display me-2"></i><code>{{ machine.mac }}</code></h2>
+        <span class="ms-auto">
+            {% if machine.boot_mode == 'nbdboot' %}
+            <span class="badge text-bg-primary">
+                <i class="bi bi-hdd-network me-1"></i>nbdboot
+            </span>
+            {% else %}
+            <span class="badge text-bg-secondary">
+                <i class="bi bi-box-arrow-right me-1"></i>{{ machine.boot_mode }}
+            </span>
+            {% endif %}
+        </span>
+    </div>
+    <div class="card-body">
+        <dl class="row mb-0">
+            <dt class="col-sm-3 text-muted small">Image content sha</dt>
+            <dd class="col-sm-9">
+                {% if machine.image_content_sha256 %}
+                <code>{{ machine.image_content_sha256 }}</code>
+                {% else %}
+                <span class="text-muted">(unbound)</span>
+                {% endif %}
+            </dd>
+            <dt class="col-sm-3 text-muted small">Labels</dt>
+            <dd class="col-sm-9">
+                {# Labels are metadata (search / filter / grouping) and
+                   have no effect on the plan render. Edit them here on
+                   their own form; the bind form below does NOT touch
+                   labels, so a boot-mode flip cannot clobber tags an
+                   operator set up ahead of time. #}
+                <form method="post"
+                      action="/ui/machines/{{ machine.mac }}/labels/edit"
+                      class="d-flex flex-wrap gap-2 align-items-start">
+                    <input type="text" name="labels"
+                           class="form-control form-control-sm font-monospace flex-grow-1"
+                           style="max-width: 32rem;"
+                           value="{{ machine.labels | join(', ') }}"
+                           placeholder="rack-3, noisy, gmktec-g5"
+                           aria-label="Comma-separated labels">
+                    <button type="submit" class="btn btn-sm btn-outline-primary">
+                        <i class="bi bi-check2 me-1"></i>Save labels
+                    </button>
+                </form>
+                <div class="form-text small text-muted mt-1">
+                    Comma-separated. Alnum-leading; a-z / 0-9 / space /
+                    <code>.</code> <code>_</code> <code>-</code>; max 64
+                    chars per tag, 16 tags per machine. Blank clears.
+                </div>
+            </dd>
+            <dt class="col-sm-3 text-muted small">Discovered at</dt>
+            <dd class="col-sm-9 small text-muted">{{ machine.discovered_at | fmt_ts }}</dd>
+            <dt class="col-sm-3 text-muted small">Last seen</dt>
+            <dd class="col-sm-9 small text-muted" data-live="last-seen">{{ machine.last_seen_at | fmt_ts }}</dd>
+            <dt class="col-sm-3 text-muted small">Last seen IP</dt>
+            <dd class="col-sm-9 small" data-live="last-seen-ip">
+                {% if machine.last_seen_ip %}<code>{{ machine.last_seen_ip }}</code>
+                {% else %}<span class="text-muted">-</span>{% endif %}
+            </dd>
+        </dl>
+    </div>
+</div>
+
+<div class="card shadow-sm mb-4" id="binding">
+    <div class="card-header bg-light d-flex align-items-center">
+        <h2 class="h5 mb-0"><i class="bi bi-pencil me-2"></i>Edit binding</h2>
+        <span class="ms-auto small text-primary d-none" id="bind-dirty-hint">
+            <i class="bi bi-dot"></i>Unsaved changes
+        </span>
+    </div>
+    <div class="card-body">
+        <form method="post" action="/ui/machines/bind" id="bind-form" class="d-flex flex-column gap-3">
+            <input type="hidden" name="mac" value="{{ machine.mac }}">
+
+            {# ---- Boot-mode radio-card picker ------------------------
+
+               Six cards in a 3-across grid. The underlying
+               ``<input type="radio">`` is visually hidden but keeps
+               the form serialisation + keyboard accessibility that a
+               plain click-a-card widget would drop. The label wraps
+               both the radio and the visual card so anywhere on the
+               card selects the mode. #}
+            <div>
+                <label class="form-label fw-semibold">Boot mode</label>
+                <div class="row g-2 mode-picker" role="radiogroup" aria-label="Boot mode">
+                    {% for mode_value, meta in boot_mode_meta %}
+                    <div class="col-lg-4 col-sm-6">
+                        <label class="mode-card d-block h-100 mb-0" data-mode="{{ mode_value }}">
+                            <input type="radio" name="boot_mode" value="{{ mode_value }}"
+                                   class="visually-hidden mode-radio"
+                                   {% if machine.boot_mode == mode_value %}checked{% endif %}>
+                            <div class="mode-card-body card h-100 border">
+                                <div class="card-body p-3 d-flex flex-column">
+                                    <div class="d-flex align-items-center mb-1">
+                                        <i class="bi bi-{{ meta.icon }} me-2 text-primary" style="font-size: 1.15rem;"></i>
+                                        <span class="fw-semibold">{{ meta.short }}</span>
+                                        <span class="ms-auto mode-check text-primary" aria-hidden="true">
+                                            <i class="bi bi-check-circle-fill"></i>
+                                        </span>
+                                    </div>
+                                    <div class="small text-muted flex-grow-1">{{ meta.desc }}</div>
+                                    <div class="small text-body-tertiary mt-2 font-monospace">
+                                        {{ mode_value }}
+                                    </div>
+                                </div>
+                            </div>
+                        </label>
+                    </div>
+                    {% endfor %}
+                </div>
+            </div>
+
+            <div class="row g-3">
+                {# ---- Image picker --------------------------------- #}
+                <div class="col-md-6"
+                     data-policy-relevant="pixie-flash-once pixie-flash-always nbdboot">
+                    <label for="image_content_sha256" class="form-label fw-semibold">
+                        Image
+                        <span class="policy-usage small text-muted fw-normal ms-1"></span>
+                    </label>
+                    {% set entry_shas = bindable_entries | map(attribute='content_sha256') | list %}
+                    <select id="image_content_sha256" name="image_content_sha256"
+                            class="form-select" data-nbdboot-gate="1">
+                        <option value="" {% if not machine.image_content_sha256 %}selected{% endif %}>
+                            (unbound)
+                        </option>
+                        {% for e in bindable_entries %}
+                        {# ``data-nbdboot-ready`` mirrors ``e.fetched``: bytes
+                           on disk means pixie can serve the image over NBD
+                           for nbdboot. The inline script disables options
+                           whose value is "false" when ``boot_mode=nbdboot``
+                           so an operator can't accidentally bind an
+                           unfetched image for a nbdboot target. Flash modes
+                           leave every option enabled (the flash pipeline
+                           will refuse a missing blob at plan time). #}
+                        <option value="{{ e.content_sha256 }}"
+                                data-nbdboot-ready="{{ 'true' if e.fetched else 'false' }}"
+                                data-image-name="{{ e.name }}"
+                                {% if machine.image_content_sha256 == e.content_sha256 %}selected{% endif %}>
+                            {{ e.name }}{% if e.arch %} ({{ e.arch }}){% endif %}{% if not e.fetched %} -- not fetched{% endif %}
+                        </option>
+                        {% endfor %}
+                        {# Fallback: keep a bound sha visible even if its
+                           catalog entry was deleted, so an operator can see
+                           and clear the stale binding rather than losing it
+                           silently. #}
+                        {% if machine.image_content_sha256 and machine.image_content_sha256 not in entry_shas %}
+                        <option value="{{ machine.image_content_sha256 }}" selected>
+                            {{ machine.image_content_sha256 }} (no matching catalog entry)
+                        </option>
+                        {% endif %}
+                    </select>
+                    {% if not bindable_entries %}
+                    <div class="form-text text-muted">
+                        No fetched images yet. <a href="/ui/catalog">Add and fetch one on the Catalog page.</a>
+                    </div>
+                    {% endif %}
+                </div>
+
+                {# ---- Target disk picker --------------------------- #}
+                <div class="col-md-6" data-policy-relevant="pixie-flash-once pixie-flash-always">
+                    <label for="target_disk_serial" class="form-label fw-semibold">
+                        Target disk
+                        <span class="policy-usage small text-muted fw-normal ms-1"></span>
+                    </label>
+                    {% set disks = (machine.inventory or {}).get("disks") or [] %}
+                    {% if disks %}
+                    <select id="target_disk_serial" name="target_disk_serial" class="form-select">
+                        <option value="">- none picked (flash will refuse) -</option>
+                        {% for d in disks %}
+                        {% set serial = d.get("serial") or "" %}
+                        {% if serial %}
+                        <option value="{{ serial }}"
+                                {% if serial == machine.target_disk_serial %}selected{% endif %}>
+                            {{ d.get("path") or "?" }} | {{ d.get("size") or "?" }}{% if d.get("model") %} | {{ d.get("model") }}{% endif %} | serial: {{ serial }}
+                        </option>
+                        {% else %}
+                        <option disabled>
+                            {{ d.get("path") or "?" }} | (no serial; cannot flash-target)
+                        </option>
+                        {% endif %}
+                        {% endfor %}
+                    </select>
+                    <div class="form-text">
+                        The live env matches this SERIAL against the current disks
+                        at flash time; a swapped or renumbered drive refuses the
+                        flash rather than risking the wrong disk.
+                    </div>
+                    {% else %}
+                    <input type="hidden" name="target_disk_serial"
+                           value="{{ machine.target_disk_serial or '' }}">
+                    <div class="alert alert-warning small mb-0 py-2">
+                        <i class="bi bi-info-circle me-1"></i>
+                        No inventory on file yet. Pick
+                        <span class="fw-semibold">Discover inventory</span> above,
+                        power-cycle this target, and its disks will populate here.
+                    </div>
+                    {% endif %}
+                </div>
+            </div>
+
+            {# ---- Per-machine extra kernel cmdline -------------------
+
+               Overrides the deploy-wide PIXIE_LIVE_ENV_EXTRA_CMDLINE
+               for THIS machine. Blank falls back to the global; a
+               non-blank value fully replaces (does not concatenate)
+               so an operator can pin a hardware quirk to one target
+               without every other machine seeing the same tokens.
+               Consumed by the nbdboot + pixie-live-env templates. #}
+            <div data-policy-relevant="nbdboot pixie-flash-once pixie-flash-always pixie-inventory pixie-tui">
+                <label for="extra_cmdline" class="form-label fw-semibold">
+                    Extra kernel cmdline
+                    <span class="policy-usage small text-muted fw-normal ms-1"></span>
+                </label>
+                <input type="text" id="extra_cmdline" name="extra_cmdline"
+                       class="form-control font-monospace"
+                       value="{{ machine.extra_cmdline or '' }}"
+                       placeholder="fall back to global default"
+                       list="extra-cmdline-suggestions"
+                       maxlength="256">
+                <datalist id="extra-cmdline-suggestions">
+                    <option value="pci=realloc=on,nocrs">
+                    <option value="intel_iommu=off">
+                    <option value="pci=nommconf">
+                </datalist>
+                <div class="form-text">
+                    Tokens appended verbatim to the kernel cmdline for
+                    <em>this machine only</em>. A non-blank value fully
+                    overrides the deploy-wide
+                    <code>PIXIE_LIVE_ENV_EXTRA_CMDLINE</code>. Blank
+                    falls back to the global (currently effective:
+                    {% if global_live_env_extra_cmdline %}
+                    <code>{{ global_live_env_extra_cmdline }}</code>
+                    {% else %}<em>none</em>{% endif %}).
+                    Whitespace-separated; single line. Known-good values
+                    per hardware in <a href="https://github.com/safl/pixie/blob/main/docs/src/hardware-quirks.md" target="_blank" rel="noreferrer">docs/hardware-quirks.md</a>.
+                </div>
+            </div>
+
+            {# ---- Preview panel --------------------------------------
+
+               Plain-English description of what will happen on the
+               next PXE from this target. Updated by JS on any input
+               change. Sits ABOVE the flash-guard hint so an operator
+               scanning the form always knows what "Save" will do
+               before they're asked whether they can Save. #}
+            <div class="border rounded p-3 bg-body-tertiary" id="bind-preview">
+                <div class="small text-muted mb-1">
+                    <i class="bi bi-eye me-1"></i>On the next PXE from this target
+                </div>
+                <div class="preview-body">-</div>
+            </div>
+
+            {# ---- Flash-mode guard hint ------------------------------
+
+               Client-side echo of the server-side 422 guard: the JS
+               disables Save + surfaces this hint when the picked
+               boot_mode is pixie-flash-{once,always} AND either no
+               inventory is on file OR no target_disk_serial is
+               picked. The server rejects the same combination
+               regardless. #}
+            <div id="flash-guard-hint"
+                 class="alert alert-warning small py-2 mb-0 d-none"
+                 role="alert">
+                <i class="bi bi-exclamation-triangle me-1"></i>
+                <span class="hint-body"></span>
+            </div>
+
+            <div class="d-flex align-items-center gap-3">
+                <button type="submit" id="save-binding" class="btn btn-primary" disabled>
+                    <i class="bi bi-check2 me-1"></i>Save changes
+                </button>
+                <span class="small text-muted" id="bind-clean-hint">
+                    No changes to save.
+                </span>
+            </div>
+        </form>
+    </div>
+</div>
+
+<style>
+/* ---- Bind form: radio-card boot-mode picker ------------------
+ *
+ * A card grid backed by a hidden ``<input type=radio>`` per card:
+ * click anywhere selects, keyboard nav works via the underlying
+ * radio group, and the form serialises the pick the same way a
+ * plain <select> would.
+ *
+ * :has() drives the checked-state styling on browsers that support
+ * it (Chrome 105+, Safari 15.4+, Firefox 121+). Older browsers
+ * fall through to the .mode-card-selected class the JS below
+ * toggles. Both selectors are OR'd in every rule below. */
+.mode-card { cursor: pointer; }
+.mode-card .mode-card-body {
+    transition: border-color 120ms, box-shadow 120ms, background-color 120ms;
+}
+.mode-card:hover .mode-card-body {
+    border-color: var(--bs-primary);
+    box-shadow: 0 0.125rem 0.35rem rgba(13, 110, 253, 0.10);
+}
+.mode-card .mode-check { opacity: 0; transition: opacity 120ms; }
+.mode-card:has(.mode-radio:checked) .mode-card-body,
+.mode-card.mode-card-selected .mode-card-body {
+    border-color: var(--bs-primary);
+    border-width: 2px;
+    background-color: rgba(13, 110, 253, 0.04);
+}
+.mode-card:has(.mode-radio:checked) .mode-check,
+.mode-card.mode-card-selected .mode-check { opacity: 1; }
+/* The underlying radio is visually-hidden but still receives keyboard
+ * focus; ring the visible card body when :focus-visible fires. */
+.mode-card .mode-radio:focus-visible + .mode-card-body {
+    outline: 2px solid var(--bs-primary);
+    outline-offset: 2px;
+}
+</style>
+
+<div class="card shadow-sm mb-4" id="inventory">
+    <div class="card-header bg-light d-flex align-items-center">
+        <h2 class="h5 mb-0"><i class="bi bi-hdd-stack me-2"></i>Inventory</h2>
+        {% if machine.inventory %}
+        <span class="text-muted small ms-auto">Recorded at {{ machine.inventory_at | fmt_ts }}</span>
+        {% endif %}
+    </div>
+    <div class="card-body">
+        <p class="text-muted small">
+            Posted by the live env's <code>pixie</code> CLI on boot via
+            <code>POST /pxe/{{ machine.mac }}/inventory</code>. The blob is stored verbatim;
+            fields below are a best-effort render of the shape emitted by
+            <code>lsblk</code> + <code>lshw</code>.
+        </p>
+        {% if machine.inventory %}
+        {# Best-effort render of the machine hardware summary. The
+           live env's ``pixie`` CLI writes whichever sections it can
+           enumerate; each block below is guarded so a partial payload
+           still renders the sections that DID come through. Raw lshw
+           JSON sits collapsed at the bottom as the always-available
+           fallback for a section the summary render doesn't cover. #}
+        {% set system = machine.inventory.get("system") or {} %}
+        {% if system %}
+        <h3 class="h6 mt-3">System</h3>
+        <dl class="row small mb-3">
+            {% if system.get("vendor") %}
+            <dt class="col-sm-3 text-muted">Vendor</dt>
+            <dd class="col-sm-9">{{ system.get("vendor") }}</dd>
+            {% endif %}
+            {% if system.get("model") %}
+            <dt class="col-sm-3 text-muted">Model</dt>
+            <dd class="col-sm-9">{{ system.get("model") }}</dd>
+            {% endif %}
+            {% if system.get("serial") %}
+            <dt class="col-sm-3 text-muted">Serial</dt>
+            <dd class="col-sm-9 font-monospace">{{ system.get("serial") }}</dd>
+            {% endif %}
+            {% if system.get("firmware") %}
+            <dt class="col-sm-3 text-muted">Firmware</dt>
+            <dd class="col-sm-9 small">{{ system.get("firmware") }}</dd>
+            {% endif %}
+        </dl>
+        {% endif %}
+
+        {% set cpu = machine.inventory.get("cpu") or {} %}
+        {% if cpu %}
+        <h3 class="h6 mt-3">CPU</h3>
+        <dl class="row small mb-3">
+            {% if cpu.get("model") %}
+            <dt class="col-sm-3 text-muted">Model</dt>
+            <dd class="col-sm-9">{{ cpu.get("model") }}</dd>
+            {% endif %}
+            {% if cpu.get("cores") %}
+            <dt class="col-sm-3 text-muted">Cores</dt>
+            <dd class="col-sm-9">{{ cpu.get("cores") }}{% if cpu.get("threads") %} ({{ cpu.get("threads") }} threads){% endif %}</dd>
+            {% endif %}
+            {% if cpu.get("arch") %}
+            <dt class="col-sm-3 text-muted">Arch</dt>
+            <dd class="col-sm-9"><code>{{ cpu.get("arch") }}</code></dd>
+            {% endif %}
+        </dl>
+        {% endif %}
+
+        {% set memory = machine.inventory.get("memory") or {} %}
+        {% if memory %}
+        <h3 class="h6 mt-3">Memory</h3>
+        <dl class="row small mb-3">
+            {% if memory.get("total") %}
+            <dt class="col-sm-3 text-muted">Total</dt>
+            <dd class="col-sm-9 font-monospace">{{ memory.get("total") }}</dd>
+            {% endif %}
+            {% if memory.get("modules") %}
+            <dt class="col-sm-3 text-muted">Modules</dt>
+            <dd class="col-sm-9">{{ memory.get("modules") }}</dd>
+            {% endif %}
+        </dl>
+        {% endif %}
+
+        {% set nics = machine.inventory.get("nics") or [] %}
+        {% if nics %}
+        <h3 class="h6 mt-3">Network ({{ nics|length }})</h3>
+        <div class="table-responsive mb-3">
+            <table class="table table-sm table-hover align-middle mb-0">
+                <thead>
+                    <tr>
+                        <th scope="col">Interface</th>
+                        <th scope="col">MAC</th>
+                        <th scope="col">Vendor / Driver</th>
+                        <th scope="col">Link</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {% for n in nics %}
+                    <tr>
+                        <td class="font-monospace small">{{ n.get("name") or "-" }}</td>
+                        <td><code>{{ n.get("mac") or "-" }}</code></td>
+                        <td class="small">
+                            {{ n.get("vendor") or "-" }}
+                            {% if n.get("driver") %}<br><span class="text-muted">{{ n.get("driver") }}</span>{% endif %}
+                        </td>
+                        <td class="small">
+                            {% if n.get("speed") %}<code>{{ n.get("speed") }}</code>{% else %}-{% endif %}
+                        </td>
+                    </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+        </div>
+        {% endif %}
+
+        {% set disks = machine.inventory.get("disks") or [] %}
+        {% if disks %}
+        <h3 class="h6 mt-3">Disks ({{ disks|length }})</h3>
+        <div class="table-responsive">
+            <table class="table table-sm table-hover align-middle">
+                <thead>
+                    <tr>
+                        <th scope="col">Path</th>
+                        <th scope="col">Size</th>
+                        <th scope="col">Vendor / Model</th>
+                        <th scope="col">Serial</th>
+                        <th scope="col">Transport</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {% for d in disks %}
+                    <tr>
+                        <td><code>{{ d.get("path") or "-" }}</code></td>
+                        <td class="font-monospace small">{{ d.get("size") or "-" }}</td>
+                        <td>
+                            {{ d.get("vendor") or "-" }}
+                            {% if d.get("model") %}<br><span class="text-muted small">{{ d.get("model") }}</span>{% endif %}
+                        </td>
+                        <td class="small"><code>{{ d.get("serial") or "-" }}</code></td>
+                        <td class="small">{{ d.get("tran") or "-" }}</td>
+                    </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+        </div>
+        {% else %}
+        <p class="text-muted small mb-0">No disks in the posted inventory.</p>
+        {% endif %}
+
+        {% if machine.inventory.get("lshw") %}
+        <details class="mt-3">
+            <summary class="text-muted small">Raw <code>lshw</code> JSON</summary>
+            <pre class="bg-light border rounded p-3 mt-2 small" style="max-height: 30rem; overflow: auto;">{{ machine.inventory.get("lshw") | tojson(indent=2) }}</pre>
+        </details>
+        {% endif %}
+        {% else %}
+        <p class="text-muted mb-0">
+            <i class="bi bi-inbox me-1"></i>
+            No inventory has been posted for this machine yet. The live env's
+            <code>pixie</code> CLI posts one on boot; check the target's PXE
+            reach to pixie.
+        </p>
+        {% endif %}
+    </div>
+</div>
+
+<div class="card shadow-sm" id="events">
+    <div class="card-header bg-light d-flex align-items-center">
+        <h2 class="h5 mb-0"><i class="bi bi-clock-history me-2"></i>Recent events</h2>
+        <a href="/ui/events" class="ms-auto small">All events</a>
+    </div>
+    {% if events %}
+    <div class="table-responsive">
+        <table class="table table-sm table-hover align-middle mb-0">
+            <thead>
+                <tr>
+                    <th scope="col">When</th>
+                    <th scope="col">Kind</th>
+                    <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>{{ e.summary or "" }}</td>
+                </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+    </div>
+    {% else %}
+    <div class="card-body">
+        <p class="text-muted small mb-0">No events recorded for this machine yet.</p>
+    </div>
+    {% endif %}
+</div>
+
+<script>
+(function () {
+    // ---- Bind-form controller -------------------------------------
+    //
+    // Coordinates four independent behaviours over the same form:
+    //   1. Radio-card checked-state fallback for browsers without
+    //      :has() support (Firefox < 121 mostly).
+    //   2. Mode-relevance dimming: image + target-disk pickers get
+    //      an "opacity-50" + "(not used by <mode>)" label when the
+    //      picked mode ignores them. The pick VALUE survives so a
+    //      sha calibrated under ipxe-exit stays around when the
+    //      operator flips to nbdboot.
+    //   3. Nbdboot-ready gate on the image picker: only fetched
+    //      catalog entries are selectable under boot_mode=nbdboot
+    //      (pixie needs the bytes on disk to serve them over NBD).
+    //   4. Flash-mode guard: pixie-flash-{once,always} refuses to
+    //      Save without both inventory + a picked target disk. The
+    //      server enforces the same constraint with a 422; the
+    //      client-side mirror surfaces the reason BEFORE the click.
+    //   5. Dirty tracking on the Save button: enabled iff any field
+    //      differs from its initial value at page-load, cleared by
+    //      submitting the form.
+    //   6. Live "preview" panel: plain-English narration of what
+    //      the target will do on its next PXE given the current
+    //      picks. Same signal the operator would read from
+    //      /pxe/<mac>/plan, without the JSON round-trip.
+    const form = document.getElementById("bind-form");
+    if (!form) return;
+    const modeInputs = form.querySelectorAll('input[name="boot_mode"]');
+    if (!modeInputs.length) return;
+    const modeCards = form.querySelectorAll(".mode-card");
+    const targets = form.querySelectorAll("[data-policy-relevant]");
+    const imgSelect = form.querySelector("select[data-nbdboot-gate]");
+    const targetSelect = form.querySelector("#target_disk_serial");
+    const hasInventoryDisks = !!(
+        targetSelect && targetSelect.tagName === "SELECT"
+        && targetSelect.querySelectorAll('option:not([value=""]):not([disabled])').length > 0
+    );
+    const extraCmdlineInput = form.querySelector("#extra_cmdline");
+    const saveBtn = form.querySelector("#save-binding");
+    const flashHint = form.querySelector("#flash-guard-hint");
+    const dirtyHint = document.getElementById("bind-dirty-hint");
+    const cleanHint = document.getElementById("bind-clean-hint");
+    const previewBody = form.querySelector("#bind-preview .preview-body");
+
+    // Human-readable descriptions for the preview panel. Mirrors the
+    // BOOT_MODE_META table in pixie.machines._store but pared to a
+    // sentence-per-mode that describes the OUTCOME on the next PXE,
+    // not the mode definition (the cards themselves cover that).
+    const MODE_PREVIEWS = {
+        "ipxe-exit":          "Pixie exits the iPXE chain. The BIOS boot order picks the next bootable device on this target.",
+        "pixie-inventory":    "Pixie boots its live env; the pixie CLI posts disk + NIC inventory back, then the target reboots to firmware.",
+        "pixie-tui":          "Pixie boots its live env into an interactive TUI. An operator drives the wizard on the target's console.",
+        "pixie-flash-once":   "Pixie boots its live env, which writes {IMAGE} to disk (serial: {DISK}), then the target reboots to firmware.",
+        "pixie-flash-always": "Pixie boots its live env, which re-writes {IMAGE} to disk (serial: {DISK}) on every PXE. Any local changes are lost.",
+        "nbdboot":            "Pixie streams {IMAGE} over NBD; root is an overlay-on-tmpfs of the image. Nothing writes back to the source.",
+    };
+    const FLASH_MODES = new Set(["pixie-flash-once", "pixie-flash-always"]);
+    const NBDBOOT = "nbdboot";
+    const IMAGE_MODES = new Set([NBDBOOT, "pixie-flash-once", "pixie-flash-always"]);
+
+    // Snapshot of the initial pick per field, taken at DOMContentLoaded.
+    // A field is DIRTY iff its current value differs from this snapshot.
+    // The form submit clears dirty (the page re-renders anyway).
+    const initial = {
+        boot_mode: pickedMode() || "",
+        image_content_sha256: imgSelect ? imgSelect.value : "",
+        target_disk_serial: (targetSelect && targetSelect.tagName === "SELECT") ? targetSelect.value : "",
+        extra_cmdline: extraCmdlineInput ? extraCmdlineInput.value : "",
+    };
+
+    function pickedMode() {
+        for (const r of modeInputs) if (r.checked) return r.value;
+        return "";
+    }
+
+    function pickedImageName() {
+        if (!imgSelect) return "";
+        const opt = imgSelect.selectedOptions[0];
+        if (!opt) return "";
+        return opt.getAttribute("data-image-name") || opt.value || "";
+    }
+
+    function pickedDiskLabel() {
+        if (!targetSelect || targetSelect.tagName !== "SELECT") return "";
+        const opt = targetSelect.selectedOptions[0];
+        if (!opt || !opt.value) return "";
+        return opt.value;
+    }
+
+    // 1. Radio-card :has() fallback ---------------------------------
+    function syncCardSelectedClass() {
+        modeCards.forEach((card) => {
+            const radio = card.querySelector(".mode-radio");
+            card.classList.toggle("mode-card-selected", !!(radio && radio.checked));
+        });
+    }
+
+    // 2. Mode-relevance dimming -------------------------------------
+    function applyUsage() {
+        const current = pickedMode();
+        targets.forEach((el) => {
+            const allowed = (el.getAttribute("data-policy-relevant") || "").split(/\s+/);
+            const consumed = allowed.includes(current);
+            el.classList.toggle("opacity-50", !consumed);
+            const note = el.querySelector(".policy-usage");
+            if (note) note.textContent = consumed ? "" : "(not used by this mode)";
+            // ``disabled`` on the underlying control keeps a stray
+            // click or tab from landing on a value the current mode
+            // ignores. The submit handler re-enables everything so
+            // the value survives a mode flip when POSTed.
+            el.querySelectorAll("input, select, textarea").forEach((ctrl) => {
+                ctrl.disabled = !consumed;
+            });
+        });
+    }
+
+    // 3. Nbdboot-ready image gate -----------------------------------
+    function applyNbdbootGate() {
+        if (!imgSelect) return;
+        const isNbdboot = pickedMode() === NBDBOOT;
+        imgSelect.querySelectorAll("option[data-nbdboot-ready]").forEach((opt) => {
+            const ready = opt.getAttribute("data-nbdboot-ready") === "true";
+            opt.disabled = isNbdboot && !ready;
+        });
+        if (imgSelect.selectedOptions.length && imgSelect.selectedOptions[0].disabled) {
+            imgSelect.value = "";
+        }
+    }
+
+    // 4. Flash-mode guard -------------------------------------------
+    function applyFlashGuard() {
+        if (!flashHint) return false;
+        const isFlash = FLASH_MODES.has(pickedMode());
+        let msg = "";
+        if (isFlash) {
+            if (!hasInventoryDisks) {
+                msg = "This mode flashes a specific disk, and pixie hasn't seen this target's disks yet. Pick Discover inventory above, power-cycle, then come back.";
+            } else if (!targetSelect || !targetSelect.value) {
+                msg = "Pick which disk to flash. Pixie matches by serial at flash time; a swapped drive refuses the flash rather than risking the wrong disk.";
+            }
+        }
+        const body = flashHint.querySelector(".hint-body");
+        if (msg) {
+            if (body) body.textContent = msg;
+            flashHint.classList.remove("d-none");
+            return true; // guard tripped -> block Save
+        }
+        flashHint.classList.add("d-none");
+        return false;
+    }
+
+    // 5. Dirty tracking + Save button state -------------------------
+    function isDirty() {
+        if (pickedMode() !== initial.boot_mode) return true;
+        if (imgSelect && imgSelect.value !== initial.image_content_sha256) return true;
+        if (targetSelect && targetSelect.tagName === "SELECT"
+            && targetSelect.value !== initial.target_disk_serial) return true;
+        if (extraCmdlineInput && extraCmdlineInput.value !== initial.extra_cmdline) return true;
+        return false;
+    }
+
+    function applySaveState(flashGuardBlocked) {
+        if (!saveBtn) return;
+        const dirty = isDirty();
+        // Guard-blocked ALWAYS wins over dirty (safety > convenience).
+        saveBtn.disabled = flashGuardBlocked || !dirty;
+        if (dirtyHint) dirtyHint.classList.toggle("d-none", !dirty);
+        if (cleanHint) cleanHint.classList.toggle("d-none", dirty);
+    }
+
+    // 6. Preview panel narration ------------------------------------
+    function renderPreview() {
+        if (!previewBody) return;
+        const mode = pickedMode();
+        if (!mode) {
+            previewBody.textContent = "Pick a boot mode above to see what happens.";
+            return;
+        }
+        let text = MODE_PREVIEWS[mode] || mode;
+        const imgName = pickedImageName();
+        const diskLabel = pickedDiskLabel();
+        if (IMAGE_MODES.has(mode)) {
+            if (!imgName) {
+                previewBody.innerHTML = `<span class="text-warning-emphasis"><i class="bi bi-exclamation-circle me-1"></i>Pick an image above; this mode needs one.</span>`;
+                return;
+            }
+            text = text.replace("{IMAGE}", `<code>${imgName}</code>`);
+        }
+        if (FLASH_MODES.has(mode)) {
+            text = text.replace("{DISK}", diskLabel ? `<code>${diskLabel}</code>` : "-not picked-");
+        }
+        previewBody.innerHTML = text;
+    }
+
+    function refreshAll() {
+        syncCardSelectedClass();
+        applyUsage();
+        applyNbdbootGate();
+        const blocked = applyFlashGuard();
+        renderPreview();
+        applySaveState(blocked);
+    }
+
+    // Wire events.
+    modeInputs.forEach((r) => r.addEventListener("change", refreshAll));
+    if (imgSelect) imgSelect.addEventListener("change", refreshAll);
+    if (targetSelect) targetSelect.addEventListener("change", refreshAll);
+    if (extraCmdlineInput) extraCmdlineInput.addEventListener("input", refreshAll);
+
+    // Re-enable every mode-gated control at submit time so the
+    // browser POSTs the current values even for fields the current
+    // mode does not consume, matching the server's "config is
+    // GENERAL, mode picks what to consume" contract.
+    form.addEventListener("submit", () => {
+        targets.forEach((el) => {
+            el.querySelectorAll("input, select, textarea").forEach((ctrl) => {
+                ctrl.disabled = false;
+            });
+        });
+    });
+
+    refreshAll();
+})();
+
+// Live poll: refresh the ``Last seen`` / ``Last seen IP`` cells
+// every 5 s so an operator watching a target boot into the live
+// env sees the ``last_seen_at`` bump when the initrd's iPXE
+// chain hits /pxe/<mac>. Same JSON endpoint the machines list
+// poll uses so the two views stay in lockstep.
+(function () {
+    const MAC = "{{ machine.mac }}";
+    async function poll() {
+        try {
+            const r = await fetch("/ui/machines-live.json", {credentials: "same-origin"});
+            if (!r.ok) return;
+            const rows = await r.json();
+            const d = rows[MAC];
+            if (!d) return;
+            const seen = document.querySelector('[data-live="last-seen"]');
+            if (seen) seen.textContent = d.last_seen_at_display || d.last_seen_at || "-";
+            const ip = document.querySelector('[data-live="last-seen-ip"]');
+            if (ip) {
+                ip.innerHTML = d.last_seen_ip
+                    ? `<code>${d.last_seen_ip}</code>`
+                    : `<span class="text-muted">-</span>`;
+            }
+        } catch (e) { /* swallow */ }
+    }
+    setInterval(poll, 5000);
+})();
+</script>
+{% endblock %}