pixie-lab 0.1.0__py3-none-any.whl

pixie/web/_templates/catalog_detail.html

@@ -0,0 +1,386 @@
+{% extends "layout.html" %}
+{% block title %}{{ entry.name }} - Catalog - pixie{% endblock %}
+{% block subnav %}
+<nav class="navbar subnav-strip" aria-label="Section sub-navigation">
+    <div class="container">
+        <span class="subnav-jumps d-flex align-items-center flex-wrap">
+            <a href="/ui/catalog"><i class="bi bi-arrow-left me-1"></i>Catalog</a>
+            <span class="vr"></span>
+            <span class="text-white-50"><code>{{ entry.name }}</code></span>
+        </span>
+    </div>
+</nav>
+{% endblock %}
+{% block content %}
+{% if warn_update %}
+<div class="alert alert-warning d-flex align-items-start" role="alert">
+    <i class="bi bi-exclamation-triangle-fill me-2 mt-1"></i>
+    <div class="flex-grow-1">
+        <strong>Update would overwrite bytes in use.</strong>
+        <div class="mt-1 small">
+            The current blob for <code>{{ entry.name }}</code>
+            (sha <code>{{ entry.content_sha256[:12] }}</code>) is
+            referenced by:
+            {% if blob_using_machines %}
+            <div class="mt-1">
+                <span class="text-muted">Machines bound to this image:</span>
+                <ul class="mb-0">
+                    {% for mac in blob_using_machines %}
+                    <li><a href="/ui/machines/{{ mac }}"><code>{{ mac }}</code></a></li>
+                    {% endfor %}
+                </ul>
+            </div>
+            {% endif %}
+            {% if blob_running_exports %}
+            <div class="mt-1">
+                <span class="text-muted">Running NBD exports:</span>
+                <ul class="mb-0">
+                    {% for name in blob_running_exports %}
+                    <li><code>{{ name }}</code></li>
+                    {% endfor %}
+                </ul>
+            </div>
+            {% endif %}
+            <div class="mt-2">
+                Update re-runs the fetch pipeline; if the upstream sha has moved
+                (an <code>oras://</code> tag pointing at new bytes) the new
+                content will land at a new content-address and the machines /
+                exports above will still be pinned to the OLD sha until you
+                re-bind them. Point those machines at the new binding first, or
+                click "Update anyway" to overwrite.
+            </div>
+        </div>
+        <form method="post" action="/ui/catalog/fetch" class="mt-2 d-inline">
+            <input type="hidden" name="name" value="{{ entry.name }}">
+            <input type="hidden" name="force" value="1">
+            <button type="submit" class="btn btn-sm btn-warning">
+                <i class="bi bi-arrow-repeat me-1"></i>Update anyway
+            </button>
+        </form>
+        <a href="/ui/catalog/{{ entry.name }}"
+           class="btn btn-sm btn-outline-secondary ms-1">Cancel</a>
+    </div>
+</div>
+{% endif %}
+{% if warn_delete_blob %}
+<div class="alert alert-warning d-flex align-items-start" role="alert">
+    <i class="bi bi-exclamation-triangle-fill me-2 mt-1"></i>
+    <div class="flex-grow-1">
+        <strong>Blob is in use.</strong>
+        <div class="mt-1 small">
+            The bytes for <code>{{ entry.name }}</code>
+            (sha <code>{{ entry.content_sha256[:12] }}</code>)
+            are referenced by:
+            {% if blob_using_machines %}
+            <div class="mt-1">
+                <span class="text-muted">Machines bound to this image:</span>
+                <ul class="mb-0">
+                    {% for mac in blob_using_machines %}
+                    <li><a href="/ui/machines/{{ mac }}"><code>{{ mac }}</code></a></li>
+                    {% endfor %}
+                </ul>
+            </div>
+            {% endif %}
+            {% if blob_running_exports %}
+            <div class="mt-1">
+                <span class="text-muted">Running NBD exports:</span>
+                <ul class="mb-0">
+                    {% for name in blob_running_exports %}
+                    <li><code>{{ name }}</code></li>
+                    {% endfor %}
+                </ul>
+            </div>
+            {% endif %}
+            <div class="mt-2">
+                Change those machines' bindings on the
+                <a href="/ui/machines">Machines</a> page (or bind them to a
+                different image) before deleting the blob, or click
+                "Delete blob anyway" -- pixie will stop the running exports
+                and drop the file.
+            </div>
+        </div>
+        <form method="post" action="/ui/catalog/delete-blob" class="mt-2 d-inline">
+            <input type="hidden" name="name" value="{{ entry.name }}">
+            <input type="hidden" name="force" value="1">
+            <button type="submit" class="btn btn-sm btn-warning">
+                <i class="bi bi-eraser me-1"></i>Delete blob anyway
+            </button>
+        </form>
+        <a href="/ui/catalog/{{ entry.name }}"
+           class="btn btn-sm btn-outline-secondary ms-1">Cancel</a>
+    </div>
+</div>
+{% endif %}
+{% if warn_delete %}
+<div class="alert alert-warning d-flex align-items-start" role="alert">
+    <i class="bi bi-exclamation-triangle-fill me-2 mt-1"></i>
+    <div class="flex-grow-1">
+        <strong>Delete would leave a broken chain.</strong>
+        {% if orphans_bundle_name %}
+        <div class="mt-1 small">
+            Deleting <code>{{ entry.name }}</code> orphans the fetched netboot bundle
+            <code>{{ orphans_bundle_name }}</code>. The bundle stays on disk but no
+            disk-image entry will point at it -- nbdboot for this image will not work
+            until you either restore this entry or delete the bundle too.
+        </div>
+        {% endif %}
+        {% if breaks_nbdboot_for %}
+        <div class="mt-1 small">
+            Deleting <code>{{ entry.name }}</code> breaks nbdboot for
+            {{ breaks_nbdboot_for|length }} disk image{{ 's' if breaks_nbdboot_for|length != 1 else '' }}
+            that name{{ '' if breaks_nbdboot_for|length != 1 else 's' }} it as
+            <code>netboot_src</code>:
+            <ul class="mb-0 mt-1">
+                {% for name in breaks_nbdboot_for %}
+                <li><code>{{ name }}</code></li>
+                {% endfor %}
+            </ul>
+        </div>
+        {% endif %}
+        <form method="post" action="/ui/catalog/delete" class="mt-2 d-inline">
+            <input type="hidden" name="name" value="{{ entry.name }}">
+            <input type="hidden" name="force" value="1">
+            <button type="submit" class="btn btn-sm btn-danger">
+                <i class="bi bi-trash me-1"></i>Delete anyway
+            </button>
+        </form>
+        <a href="/ui/catalog" class="btn btn-sm btn-outline-secondary ms-1">Cancel</a>
+    </div>
+</div>
+{% endif %}
+<div class="card shadow-sm mb-4">
+    <div class="card-header bg-light d-flex align-items-center">
+        <h2 class="h5 mb-0">
+            {% if entry.bindable %}
+            <i class="bi bi-hdd me-2"></i>
+            {% else %}
+            <i class="bi bi-box-seam me-2"></i>
+            {% endif %}
+            <code>{{ entry.name }}</code>
+        </h2>
+        <span class="ms-auto">
+            {% if entry.bindable %}
+            <span class="badge text-bg-primary"><i class="bi bi-hdd me-1"></i>Disk image</span>
+            {% else %}
+            <span class="badge text-bg-info"><i class="bi bi-box-seam me-1"></i>Netboot bundle</span>
+            {% endif %}
+        </span>
+    </div>
+    <div class="card-body">
+        {% if entry.description %}
+        <p class="mb-3">{{ entry.description }}</p>
+        {% else %}
+        <p class="text-muted small mb-3">
+            <i class="bi bi-info-circle me-1"></i>No description recorded.
+            {% if not entry.bindable %}
+            Netboot bundles are usually the sibling of a disk-image entry; see below for the pairing.
+            {% endif %}
+        </p>
+        {% endif %}
+        <dl class="row mb-0">
+            <dt class="col-sm-3 text-muted small">Format</dt>
+            <dd class="col-sm-9">
+                <span class="badge text-bg-secondary">{{ entry.format }}</span>
+                {% if entry.arch %}<span class="ms-1 text-muted small">{{ entry.arch }}</span>{% endif %}
+            </dd>
+            <dt class="col-sm-3 text-muted small">Source</dt>
+            <dd class="col-sm-9"><code class="user-select-all">{{ entry.src }}</code></dd>
+            {% if entry.netboot_src %}
+            <dt class="col-sm-3 text-muted small">Netboot sibling URL</dt>
+            <dd class="col-sm-9"><code class="user-select-all">{{ entry.netboot_src }}</code></dd>
+            {% endif %}
+            <dt class="col-sm-3 text-muted small">Fetch state</dt>
+            <dd class="col-sm-9">
+                {% if fetch_state.state == 'fetching' %}
+                <span class="badge text-bg-primary"><i class="bi bi-arrow-down-circle me-1"></i>fetching</span>
+                {% elif fetch_state.state == 'error' %}
+                <span class="badge text-bg-danger"><i class="bi bi-exclamation-circle me-1"></i>error</span>
+                <div class="text-muted small">{{ fetch_state.error }}</div>
+                {% elif entry.content_sha256 %}
+                <span class="badge text-bg-success"><i class="bi bi-check-circle me-1"></i>fetched</span>
+                {% if entry.fetched_at %}<span class="text-muted small ms-2">at {{ entry.fetched_at | fmt_ts }}</span>{% endif %}
+                {% else %}
+                <span class="badge text-bg-secondary"><i class="bi bi-dash-circle me-1"></i>not fetched</span>
+                {% endif %}
+            </dd>
+            {% if entry.content_sha256 %}
+            <dt class="col-sm-3 text-muted small">Content sha</dt>
+            <dd class="col-sm-9"><code class="user-select-all">{{ entry.content_sha256 }}</code></dd>
+            {% endif %}
+            {% if entry.size_bytes %}
+            <dt class="col-sm-3 text-muted small">Size</dt>
+            <dd class="col-sm-9 font-monospace">{{ entry.size_bytes }} bytes</dd>
+            {% endif %}
+            <dt class="col-sm-3 text-muted small">Added at</dt>
+            <dd class="col-sm-9 small text-muted">{{ entry.added_at | fmt_ts }}</dd>
+        </dl>
+    </div>
+    <div class="card-footer bg-light py-2">
+        {% set fetching = fetch_state.state == 'fetching' %}
+        {% set fetch_errored = fetch_state.state == 'error' %}
+        {% set already_fetched = entry.content_sha256 and not fetch_errored %}
+        <form method="post" action="/ui/catalog/fetch" class="d-inline">
+            <input type="hidden" name="name" value="{{ entry.name }}">
+            <button type="submit" class="btn btn-sm btn-outline-primary"
+                    {% if fetching %}disabled{% endif %}
+                    title="{% if fetching %}fetch already in flight{% elif already_fetched %}re-run the fetch pipeline; picks up a moved oras:// tag's new bytes{% elif fetch_errored %}retry the failed fetch{% else %}download the bytes for this entry{% endif %}">
+                {% if fetching %}
+                <i class="bi bi-hourglass-split me-1"></i>Fetching
+                {% elif fetch_errored %}
+                <i class="bi bi-arrow-clockwise me-1"></i>Retry
+                {% elif already_fetched %}
+                <i class="bi bi-arrow-repeat me-1"></i>Update
+                {% else %}
+                <i class="bi bi-arrow-down-circle me-1"></i>Fetch
+                {% endif %}
+            </button>
+        </form>
+        <form method="post" action="/ui/catalog/delete-blob" class="d-inline"
+              title="{% if already_fetched %}delete the on-disk bytes for this entry; the row stays so a Fetch re-runs the pipeline{% else %}no blob on disk yet{% endif %}"
+              onsubmit="return confirm('Delete the on-disk blob for {{ entry.name }}? The catalog row stays; a Fetch re-runs the pipeline.');">
+            <input type="hidden" name="name" value="{{ entry.name }}">
+            <button type="submit" class="btn btn-sm btn-outline-warning"
+                    {% if not already_fetched %}disabled{% endif %}>
+                <i class="bi bi-eraser me-1"></i>Delete blob
+            </button>
+        </form>
+        <form method="post" action="/ui/catalog/delete" class="d-inline"
+              title="delete this catalog entry (the row); on-disk bytes are not touched here -- use Delete blob for that"
+              onsubmit="return confirm('Delete catalog entry {{ entry.name }}? The on-disk blob (if any) stays; use Delete blob for the bytes.');">
+            <input type="hidden" name="name" value="{{ entry.name }}">
+            <button type="submit" class="btn btn-sm btn-outline-danger">
+                <i class="bi bi-trash me-1"></i>Delete entry
+            </button>
+        </form>
+    </div>
+</div>
+
+{# NBD serving state, disk images only #}
+{% if entry.bindable %}
+<div class="card shadow-sm mb-4">
+    <div class="card-header bg-light">
+        <h2 class="h5 mb-0"><i class="bi bi-hdd-network me-2"></i>NBD serving</h2>
+    </div>
+    <div class="card-body">
+        {% if export is none %}
+        <p class="text-muted mb-0 small">
+            <i class="bi bi-dash-circle me-1"></i>
+            Not currently exported. An NBD export is spawned automatically when a machine
+            is bound to <code>boot_mode=nbdboot</code> pointing at this entry.
+        </p>
+        {% else %}
+        <dl class="row mb-0">
+            <dt class="col-sm-3 text-muted small">Status</dt>
+            <dd class="col-sm-9">
+                {% if export.status == 'running' %}
+                <span class="badge text-bg-success"><i class="bi bi-broadcast me-1"></i>running</span>
+                {% elif export.status == 'error' %}
+                <span class="badge text-bg-danger"><i class="bi bi-exclamation-circle me-1"></i>error</span>
+                <div class="text-danger small">{{ export.error }}</div>
+                {% else %}
+                <span class="badge text-bg-secondary">{{ export.status }}</span>
+                {% endif %}
+            </dd>
+            <dt class="col-sm-3 text-muted small">NBD port</dt>
+            <dd class="col-sm-9 font-monospace">{{ export.nbd_port or '-' }}</dd>
+            <dt class="col-sm-3 text-muted small">Export name</dt>
+            <dd class="col-sm-9"><code class="user-select-all">{{ export.name }}</code></dd>
+        </dl>
+        {% endif %}
+    </div>
+</div>
+{% endif %}
+
+{# Relation: this entry -> its netboot sibling (disk images) #}
+{% if entry.bindable and entry.netboot_src %}
+<div class="card shadow-sm mb-4">
+    <div class="card-header bg-light">
+        <h2 class="h5 mb-0">
+            <i class="bi bi-box-seam me-2"></i>Netboot bundle sibling
+        </h2>
+    </div>
+    <div class="card-body">
+        {% if netboot_sibling is none %}
+        <p class="text-muted mb-0 small">
+            <i class="bi bi-question-circle me-1"></i>
+            No catalog entry matches <code>{{ entry.netboot_src }}</code>.
+            Import the sibling bundle to enable nbdboot for this disk image.
+        </p>
+        {% else %}
+        <p class="mb-2 small">
+            Ramboot for <code>{{ entry.name }}</code> chains into this bundle's kernel + initrd:
+        </p>
+        <ul class="list-group list-group-flush">
+            <li class="list-group-item d-flex align-items-center">
+                <div class="flex-grow-1">
+                    <a href="/ui/catalog/{{ netboot_sibling.name }}"
+                       class="fw-semibold text-decoration-none">
+                        <code>{{ netboot_sibling.name }}</code>
+                    </a>
+                    <div class="text-muted small">
+                        <span class="badge text-bg-secondary">{{ netboot_sibling.format }}</span>
+                        {% if netboot_sibling.fetched %}
+                        <span class="badge text-bg-success ms-1">fetched</span>
+                        {% else %}
+                        <span class="badge text-bg-secondary ms-1">not fetched</span>
+                        {% endif %}
+                    </div>
+                </div>
+                <i class="bi bi-arrow-right text-muted"></i>
+            </li>
+        </ul>
+        {% endif %}
+    </div>
+</div>
+{% endif %}
+
+{# Reverse relation: netboot bundles show every disk image pointing at them #}
+{% if not entry.bindable and disk_image_users %}
+<div class="card shadow-sm mb-4">
+    <div class="card-header bg-light">
+        <h2 class="h5 mb-0">
+            <i class="bi bi-hdd me-2"></i>Disk images using this bundle
+        </h2>
+    </div>
+    <div class="card-body">
+        <p class="mb-2 small">
+            Every disk image that names <code>{{ entry.src }}</code> as its
+            <code>netboot_src</code> boots with this bundle's kernel + initrd.
+        </p>
+        <ul class="list-group list-group-flush">
+            {% for e in disk_image_users %}
+            <li class="list-group-item d-flex align-items-center">
+                <div class="flex-grow-1">
+                    <a href="/ui/catalog/{{ e.name }}"
+                       class="fw-semibold text-decoration-none">
+                        <code>{{ e.name }}</code>
+                    </a>
+                    <div class="text-muted small">
+                        <span class="badge text-bg-secondary">{{ e.format }}</span>
+                        {% if e.arch %}<span class="ms-1">{{ e.arch }}</span>{% endif %}
+                        {% if e.fetched %}
+                        <span class="badge text-bg-success ms-1">fetched</span>
+                        {% else %}
+                        <span class="badge text-bg-secondary ms-1">not fetched</span>
+                        {% endif %}
+                    </div>
+                </div>
+                <i class="bi bi-arrow-right text-muted"></i>
+            </li>
+            {% endfor %}
+        </ul>
+    </div>
+</div>
+{% endif %}
+
+{% if not entry.bindable and not disk_image_users %}
+<div class="card shadow-sm">
+    <div class="card-body">
+        <p class="text-muted small mb-0">
+            <i class="bi bi-info-circle me-1"></i>
+            No disk-image entry names this bundle as its <code>netboot_src</code> yet.
+        </p>
+    </div>
+</div>
+{% endif %}
+{% endblock %}

pixie/web/_templates/dashboard.html

@@ -0,0 +1,256 @@
+{% extends "layout.html" %}
+{% from "_partials/page_description.html" import page_description %}
+{% block title %}Dashboard - pixie{% endblock %}
+{% block subnav %}
+<div class="subnav-strip">
+    <div class="container">
+        <span class="text-white-50">Overview</span>
+    </div>
+</div>
+{% endblock %}
+{% block content %}
+{{ page_description('speedometer2', 'Live counts across pixie: machines the operator manages, catalog images pixie can serve, NBD exports pixie is running right now. All tiles refresh every 5 s from the same endpoints the pages below use.') }}
+<div class="row g-3 mb-4">
+    <div class="col-md-4">
+        <div class="card shadow-sm h-100">
+            <div class="card-body">
+                <div class="d-flex align-items-center mb-2">
+                    <i class="bi bi-pc-display fs-4 text-primary me-2"></i>
+                    <h2 class="h6 mb-0">Machines</h2>
+                </div>
+                <div class="display-6 fw-semibold" data-stat="machines_total">{{ stats.machines_total }}</div>
+                <dl class="row small text-muted mb-0 mt-2">
+                    <dt class="col-6">Bound</dt>
+                    <dd class="col-6 text-end" data-stat="machines_bound">{{ stats.machines_bound }}</dd>
+                    <dt class="col-6">Inventoried</dt>
+                    <dd class="col-6 text-end" data-stat="machines_with_inventory">{{ stats.machines_with_inventory }}</dd>
+                </dl>
+            </div>
+            <div class="card-footer bg-light border-top-0 py-2">
+                <a href="/ui/machines" class="text-decoration-none small">
+                    Open <i class="bi bi-arrow-right"></i>
+                </a>
+            </div>
+        </div>
+    </div>
+    <div class="col-md-4">
+        <div class="card shadow-sm h-100">
+            <div class="card-body">
+                <div class="d-flex align-items-center mb-2">
+                    <i class="bi bi-collection fs-4 text-primary me-2"></i>
+                    <h2 class="h6 mb-0">Catalog</h2>
+                </div>
+                <div class="display-6 fw-semibold" data-stat="catalog_total">{{ stats.catalog_total }}</div>
+                <dl class="row small text-muted mb-0 mt-2">
+                    <dt class="col-6">Disk images</dt>
+                    <dd class="col-6 text-end font-monospace" data-stat="catalog_images">
+                        {{ stats.catalog_images_fetched }} / {{ stats.catalog_images_total }}
+                    </dd>
+                    <dt class="col-6">Netboot bundles</dt>
+                    <dd class="col-6 text-end font-monospace" data-stat="catalog_bundles">
+                        {{ stats.catalog_bundles_fetched }} / {{ stats.catalog_bundles_total }}
+                    </dd>
+                </dl>
+            </div>
+            <div class="card-footer bg-light border-top-0 py-2">
+                <a href="/ui/catalog" class="text-decoration-none small">
+                    Open <i class="bi bi-arrow-right"></i>
+                </a>
+            </div>
+        </div>
+    </div>
+    <div class="col-md-4">
+        <div class="card shadow-sm h-100">
+            <div class="card-body">
+                <div class="d-flex align-items-center mb-2">
+                    <i class="bi bi-hdd-network fs-4 text-primary me-2"></i>
+                    <h2 class="h6 mb-0">NBD serving</h2>
+                </div>
+                <div class="display-6 fw-semibold" data-stat="exports_total">{{ stats.exports_total }}</div>
+                <dl class="row small text-muted mb-0 mt-2">
+                    <dt class="col-6"><span class="text-success">Running</span></dt>
+                    <dd class="col-6 text-end" data-stat="exports_running">{{ stats.exports_running }}</dd>
+                    <dt class="col-6"><span class="text-danger">Error</span></dt>
+                    <dd class="col-6 text-end" data-stat="exports_error">{{ stats.exports_error }}</dd>
+                </dl>
+            </div>
+            <div class="card-footer bg-light border-top-0 py-2">
+                <a href="/ui/catalog" class="text-decoration-none small">
+                    Open <i class="bi bi-arrow-right"></i>
+                </a>
+            </div>
+        </div>
+    </div>
+</div>
+
+{# Live-env media state. The pixie live env (netboot-pc bake) has to
+   be staged under PIXIE_LIVE_ENV_DIR before any pixie-* boot mode
+   works; without it the plan renderer emits an "unavailable" iPXE
+   chain and a bound target sits at a legible "media not staged"
+   screen. Surface the readiness signal + per-file bytes so an
+   operator can tell at a glance whether the boot modes are live. #}
+<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-boombox me-2"></i>Live-env media</h2>
+        {% if stats.live_env_ready %}
+        <span class="badge text-bg-success ms-auto">
+            <i class="bi bi-check-circle me-1"></i>ready
+        </span>
+        {% else %}
+        <span class="badge text-bg-warning ms-auto">
+            <i class="bi bi-exclamation-triangle me-1"></i>not staged
+        </span>
+        {% endif %}
+    </div>
+    <div class="card-body">
+        {% if stats.live_env_ready %}
+        <p class="small mb-2">
+            The three files below are staged at
+            <code>{{ stats.live_env_dir }}</code> and
+            <code>pixie-tui</code>, <code>pixie-inventory</code>, and
+            <code>pixie-flash-*</code> can serve the live env from
+            <code>/boot/pixie-live-env/</code>.
+        </p>
+        {% else %}
+        <p class="small text-warning mb-2">
+            Live-env media is missing under
+            <code>{{ stats.live_env_dir or '(unset)' }}</code>.
+            Every <code>pixie-*</code> boot_mode falls back to the
+            "unavailable" iPXE plan until the three files below are
+            present. Copy vmlinuz + initrd + live.squashfs from the
+            latest <code>pixie-netboot-pc-x86_64</code> bake into
+            that directory. Restart the container is NOT required
+            (the renderer checks the files each render).
+        </p>
+        {% endif %}
+        <dl class="row small mb-0">
+            {% for name, size in stats.live_env_files.items() %}
+            <dt class="col-sm-3 font-monospace">{{ name }}</dt>
+            <dd class="col-sm-9">
+                {% if size is not none %}
+                <span class="text-success"><i class="bi bi-check-circle me-1"></i>{{ (size / 1024 / 1024) | round(1) }} MiB</span>
+                {% else %}
+                <span class="text-warning"><i class="bi bi-x-circle me-1"></i>missing</span>
+                {% endif %}
+            </dd>
+            {% endfor %}
+        </dl>
+    </div>
+</div>
+
+<div class="card shadow-sm">
+    <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-hover align-middle mb-0">
+            <thead>
+                <tr>
+                    <th scope="col">When</th>
+                    <th scope="col">Kind</th>
+                    <th scope="col">Related to</th>
+                    <th scope="col">Summary</th>
+                </tr>
+            </thead>
+            <tbody data-events-feed>
+                {# ``Related to`` reads as ``<what>: <which>``: the
+                   subject_kind badge is the category, subject_id the
+                   specific name / MAC / export name. #}
+                {% for e in events %}
+                <tr>
+                    <td class="small text-muted text-nowrap">{{ e.ts | fmt_ts }}</td>
+                    <td><code>{{ e.kind }}</code></td>
+                    <td>
+                        {% 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 small mb-0">
+            <i class="bi bi-inbox me-1"></i>No events yet.
+        </p>
+    </div>
+    {% endif %}
+</div>
+
+<script>
+// Dashboard cards + recent-events feed poll every 5 s so the
+// operator sees counts + fresh events tick without a page reload.
+// Same shape as the machines / fetch-states pollers: request the
+// JSON, walk it, update matching [data-stat] / [data-event-row]
+// cells in place. Silently skips a lost or 500'd poll (retries on
+// the next tick) so a suspended laptop resumes cleanly on wake.
+(function () {
+    const POLL_MS = 5000;
+
+    async function pollStats() {
+        try {
+            const r = await fetch("/ui/dashboard-live.json", {credentials: "same-origin"});
+            if (!r.ok) return;
+            const s = await r.json();
+            const setN = (key, n) => {
+                document.querySelectorAll(`[data-stat="${key}"]`).forEach((el) => {
+                    if (el.textContent.trim() !== String(n)) el.textContent = n;
+                });
+            };
+            setN("machines_total", s.machines_total);
+            setN("machines_bound", s.machines_bound);
+            setN("machines_with_inventory", s.machines_with_inventory);
+            setN("catalog_total", s.catalog_total);
+            setN("exports_total", s.exports_total);
+            setN("exports_running", s.exports_running);
+            setN("exports_error", s.exports_error);
+            document.querySelectorAll('[data-stat="catalog_images"]').forEach((el) => {
+                const t = `${s.catalog_images_fetched} / ${s.catalog_images_total}`;
+                if (el.textContent.trim() !== t) el.textContent = t;
+            });
+            document.querySelectorAll('[data-stat="catalog_bundles"]').forEach((el) => {
+                const t = `${s.catalog_bundles_fetched} / ${s.catalog_bundles_total}`;
+                if (el.textContent.trim() !== t) el.textContent = t;
+            });
+        } catch (e) { /* swallow */ }
+    }
+
+    async function pollEvents() {
+        try {
+            const r = await fetch("/ui/events-live.json?limit=10", {credentials: "same-origin"});
+            if (!r.ok) return;
+            const body = await r.json();
+            const feed = document.querySelector("[data-events-feed]");
+            if (!feed || !body.events) return;
+            const rows = body.events.map((e) => {
+                // ``Related to`` cell -- see dashboard.html thead
+                // note: badge (category) + code (specific id).
+                const subject = e.subject_kind
+                    ? `<span class="badge text-bg-light border me-1">${e.subject_kind}</span><code class="small">${e.subject_id || ""}</code>`
+                    : `<span class="text-muted small">-</span>`;
+                return `<tr>
+                    <td class="small text-muted text-nowrap">${e.ts_display || e.ts}</td>
+                    <td><code>${e.kind}</code></td>
+                    <td>${subject}</td>
+                    <td>${e.summary || ""}</td>
+                </tr>`;
+            }).join("");
+            feed.innerHTML = rows;
+        } catch (e) { /* swallow */ }
+    }
+
+    pollStats();
+    pollEvents();
+    setInterval(pollStats, POLL_MS);
+    setInterval(pollEvents, POLL_MS);
+})();
+</script>
+{% endblock %}