testerkit 0.4.0__py3-none-any.whl

testerkit/ui/__init__.py

@@ -0,0 +1,71 @@
+"""Custom-UI-builder surface for TesterKit.
+
+If you're building a custom NiceGUI page that sits alongside the
+built-in operator pages — a project-specific dashboard, a custom
+fixture-bringup panel, a measurement-comparison view — reach for
+the helpers re-exported here instead of the deep
+``testerkit.ui.shared.*`` paths.
+
+Two groups of helpers:
+
+**Layout / table primitives** — match the look-and-feel of the
+built-in pages so your custom panel doesn't visually drift::
+
+    from testerkit.ui import page_layout, page_header, data_table, format_datetime
+
+    @ui.page("/my-bringup")
+    def my_panel():
+        with page_layout():
+            page_header("Bringup")
+            data_table(columns=[...], rows=[...], row_key="id")
+
+**Live event bindings** — subscribe to the event store / channel
+store so your page updates push-style as new samples arrive::
+
+    from testerkit.ui import subscribe, channel_data, bind_channel_store
+
+    @ui.page("/live-temp")
+    def temp_panel():
+        data = channel_data("oven.temp_c")
+        ui.label().bind_text_from(data, "latest", lambda v: f"{v:.1f} °C")
+
+The deep ``testerkit.ui.shared.components`` and
+``testerkit.ui.shared.event_binding`` paths still work — they're the
+contributor form. User code should use this module.
+
+Operator pages themselves (``/results``, ``/metrics``, etc.) are
+registered via ``testerkit.ui.pages.*`` on package import and don't
+need to be touched by custom-UI builders.
+"""
+
+from __future__ import annotations
+
+from testerkit.ui.shared.components import (
+    data_table,
+    format_datetime,
+    info_field,
+    page_header,
+    page_layout,
+    push_url_state,
+)
+from testerkit.ui.shared.event_binding import (
+    bind_channel_store,
+)
+from testerkit.ui.shared.event_binding import (
+    ui_channel_data as channel_data,
+)
+from testerkit.ui.shared.event_binding import (
+    ui_subscribe as subscribe,
+)
+
+__all__ = [
+    "bind_channel_store",
+    "channel_data",
+    "data_table",
+    "format_datetime",
+    "info_field",
+    "page_header",
+    "page_layout",
+    "push_url_state",
+    "subscribe",
+]

testerkit/ui/_asgi.py

@@ -0,0 +1,162 @@
+"""ASGI app entry point for uvicorn auto-reload support.
+
+When ``testerkit serve --reload`` is used, uvicorn watches for file changes and
+restarts the worker process.  On each restart the worker re-imports this module
+which:
+
+1. Imports ``nicegui`` (creating a fresh ``core.app``).
+2. Imports all UI pages (``@ui.page`` decorators register routes on ``core.app``).
+3. Adds the FastAPI API router.
+4. Calls ``add_run_config()`` so the NiceGUI lifespan check passes.
+5. Adds standard middleware that ``ui.run()`` normally applies.
+
+The exported ``app`` is the NiceGUI ASGI application ready for uvicorn.
+"""
+
+from __future__ import annotations
+
+import sys
+import time
+from pathlib import Path
+
+
+def _log(msg: str) -> None:
+    sys.stderr.write(msg + "\n")
+    sys.stderr.flush()
+
+
+_start = time.perf_counter()
+_log(f"[ASGI] Starting reload at {time.strftime('%H:%M:%S')}")
+
+from fastapi.middleware.gzip import GZipMiddleware  # noqa: E402
+
+_log(f"[ASGI] +{(time.perf_counter() - _start) * 1000:.0f}ms - fastapi imported")
+
+from nicegui import core  # noqa: E402
+
+_log(f"[ASGI] +{(time.perf_counter() - _start) * 1000:.0f}ms - nicegui.core imported")
+
+from nicegui.middlewares import RedirectWithPrefixMiddleware, SetCacheControlMiddleware  # noqa: E402, I001
+
+_log(f"[ASGI] +{(time.perf_counter() - _start) * 1000:.0f}ms - middlewares imported")
+
+# Register UI pages on core.app (side-effect imports)
+import testerkit.ui.app  # noqa: F401, E402  # pyright: ignore[reportUnusedImport]
+
+_log(f"[ASGI] +{(time.perf_counter() - _start) * 1000:.0f}ms - testerkit.ui.app imported")
+
+from testerkit.api.app import create_api_router  # noqa: E402
+
+_log(f"[ASGI] +{(time.perf_counter() - _start) * 1000:.0f}ms - api router imported")
+
+# Add API routes
+core.app.include_router(create_api_router())
+
+# Configure NiceGUI the same way ui.run() would
+if not core.app.config.has_run_config:
+    core.app.config.add_run_config(
+        reload=True,
+        title="TesterKit",
+        viewport="width=device-width, initial-scale=1",
+        favicon=Path(__file__).resolve().parent / "static" / "branding" / "favicon-32.png",
+        dark=False,
+        language="en-US",
+        binding_refresh_interval=0.1,
+        reconnect_timeout=3.0,
+        message_history_length=1000,
+        tailwind=True,
+        prod_js=True,
+        show_welcome_message=True,
+    )
+
+    # Middleware that ui.run() normally adds
+    core.app.add_middleware(GZipMiddleware)
+    core.app.add_middleware(RedirectWithPrefixMiddleware)
+    core.app.add_middleware(SetCacheControlMiddleware)
+
+app = core.app
+
+
+def _install_global_exception_handler() -> None:
+    """Toast-on-error so a buggy page never takes the server down.
+
+    NicegUI dispatches event handler exceptions through
+    ``app.on_exception``; without a handler they bubble to the
+    ASGI worker as 500s and (occasionally) escape to the
+    terminal as tracebacks. Either way, a single bad lambda in
+    one page should not break navigation to other pages.
+
+    The handler:
+
+    * Logs the full traceback to stderr (operators / devs see it).
+    * Posts a small ``ui.notify`` "negative" toast to the affected
+      browser session — same UX as NiceGUI's built-in
+      "Connection lost" banner, just for application errors.
+
+    The toast itself is best-effort: ``ui.notify`` requires an
+    active client context. If the exception fires outside a page
+    handler (e.g. background thread, timer callback), the notify
+    silently no-ops and we just log.
+    """
+    import logging
+    import traceback
+
+    from nicegui import app as nicegui_app
+    from nicegui import ui
+
+    logger = logging.getLogger("testerkit.ui")
+
+    def _on_exception(exc: Exception | None = None) -> None:
+        # ``exc`` may be None depending on dispatcher; pull from
+        # ``sys.exc_info`` as a fallback so we always have *something*
+        # to log.
+        if exc is None:
+            import sys
+
+            _, exc_val, _ = sys.exc_info()
+            exc = exc_val if isinstance(exc_val, Exception) else None
+        if exc is not None:
+            logger.error(
+                "UI handler raised %s: %s\n%s",
+                type(exc).__name__,
+                exc,
+                "".join(traceback.format_exception(type(exc), exc, exc.__traceback__)),
+            )
+        try:
+            label = type(exc).__name__ if exc is not None else "Error"
+            ui.notify(
+                f"Page error: {label} — see server log for details",
+                type="negative",
+                position="bottom-right",
+                timeout=5000,
+            )
+        except Exception:  # noqa: BLE001 — toast is best-effort outside client ctx
+            pass
+
+    nicegui_app.on_exception(_on_exception)
+
+
+_install_global_exception_handler()
+
+
+def _hold_serve_level_daemon_refs() -> None:
+    """Delegate to :func:`testerkit.api.app.warm_data_daemons` — the same call the
+    default ``create_app()`` entrypoint makes — so ``testerkit serve --reload`` and
+    plain ``testerkit serve`` acquire the daemons and establish the channels
+    Flight→UI bridge identically (#59-3). See that function for the rationale.
+    """
+    from testerkit.api.app import warm_data_daemons
+
+    try:
+        warm_data_daemons()
+    except Exception as exc:  # noqa: BLE001 — best-effort eager acquire
+        _log(f"[ASGI] warm_data_daemons failed: {exc}")
+
+
+if __name__ != "__mp_main__":
+    # Only hold daemon refs in the supervisor process, not in every
+    # reload worker. Workers are spawned fresh on each code change;
+    # acquiring daemons in each worker would re-ingest all parquets
+    # on every reload cycle.
+    _hold_serve_level_daemon_refs()
+_log(f"[ASGI] +{(time.perf_counter() - _start) * 1000:.0f}ms - READY")

testerkit/ui/app.py

@@ -0,0 +1,32 @@
+"""NiceGUI-based operator UI.
+
+This module initializes the NiceGUI app and imports all page modules
+which register their routes via @ui.page decorators.
+"""
+
+import importlib.resources
+from pathlib import Path
+
+from nicegui import app
+
+# Serve static files
+_static_dir = Path(__file__).parent / "static"
+app.add_static_files("/static", _static_dir)
+
+# Docs assets (cropped operator-UI screenshots etc.) are referenced from
+# markdown like ``![alt](../../_assets/...)`` which the browser resolves
+# to ``/docs/_assets/...``. Mounting the directory here means those
+# requests are served as PNGs instead of falling through to the docs
+# catch-all route (which would render an HTML page-not-found body and
+# break image loading). Match the wheel/editable resolution that
+# docs/page.py uses for ``DOCS_DIR``.
+_pkg_root = Path(str(importlib.resources.files("testerkit")))
+_bundled_docs = _pkg_root / "_docs"
+_docs_root = _bundled_docs if _bundled_docs.exists() else _pkg_root.parent.parent / "docs"
+_docs_assets_dir = _docs_root / "_assets"
+if _docs_assets_dir.exists():
+    app.add_static_files("/docs/_assets", _docs_assets_dir)
+
+# Import pages module which imports all page submodules and registers routes
+# This must happen after the app is initialized
+from testerkit.ui import pages  # noqa: F401, E402

testerkit/ui/components/__init__.py

@@ -0,0 +1,13 @@
+"""Reusable UI components for TesterKit live pages."""
+
+from testerkit.ui.components.channel_values import create_channel_values_panel
+from testerkit.ui.components.event_timeline import create_event_timeline
+from testerkit.ui.components.instrument_activity import create_instrument_activity
+from testerkit.ui.components.session_table import create_session_table
+
+__all__ = [
+    "create_channel_values_panel",
+    "create_event_timeline",
+    "create_instrument_activity",
+    "create_session_table",
+]

testerkit/ui/components/artifact_viewer.py

@@ -0,0 +1,250 @@
+"""View buttons + dialogs for measurement-output ref artifacts.
+
+Walks each measurement's ``outputs`` dict; for any value that is a
+``file://_ref/...`` or ``channel://...`` URI, renders a "View ..."
+button. Clicking opens a NiceGUI dialog with an extension-driven
+viewer:
+
+* ``.npz`` (Waveform) — Python-side fetch of the JSON payload,
+  rendered as an ECharts line plot.
+* image / video / PDF / SVG / HTML / text / JSON — embed the API
+  URL directly in ``<img>`` / ``<video>`` / ``<iframe>``. The
+  ``/api/runs/{id}/ref`` endpoint serves the right ``Content-Type``
+  (image/png, video/mp4, application/pdf, text/plain, …) so the
+  browser renders inline without us doing any conversion.
+* anything else — a download link.
+
+The endpoint already deduplicates the heavy lifting; this module is
+intentionally thin glue.
+"""
+
+from __future__ import annotations
+
+import json
+import urllib.parse
+from typing import Any
+
+from nicegui import ui
+
+from testerkit.ui.shared.services import load_artifact_ref
+
+# Map from URI extension to ("button label", "viewer kind").
+#
+# `.bin` is the catch-all the write path uses for any ``bytes`` payload
+# whose original MIME type is unknown (operator screenshots, binary
+# captures, …). The endpoint sniffs magic bytes server-side and serves
+# the right ``Content-Type``; the UI just iframes the URL and lets the
+# browser pick a renderer (``image/*`` → image, ``video/*`` → video,
+# ``application/pdf`` → PDF reader, ``text/*`` → text). Same trick for
+# explicit known extensions where the format is unambiguous.
+_VIEWER_BY_EXT: dict[str, tuple[str, str]] = {
+    ".npz": ("View Waveform", "waveform"),
+    ".png": ("View Image", "image"),
+    ".jpg": ("View Image", "image"),
+    ".jpeg": ("View Image", "image"),
+    ".gif": ("View Image", "image"),
+    ".webp": ("View Image", "image"),
+    ".svg": ("View Image", "image"),
+    ".mp4": ("View Video", "video"),
+    ".webm": ("View Video", "video"),
+    ".pdf": ("View PDF", "pdf"),
+    ".txt": ("View Text", "text"),
+    ".log": ("View Text", "text"),
+    ".html": ("View HTML", "html"),
+    ".htm": ("View HTML", "html"),
+    ".json": ("View Data", "json"),
+    # ``.bin`` covers raw bytes that the server sniffs into the right
+    # Content-Type at request time. We don't know the precise type until
+    # the user clicks, so use a generic label and a universal iframe.
+    ".bin": ("View Artifact", "iframe"),
+}
+
+
+def list_artifacts(measurement: dict[str, Any]) -> list[tuple[str, str]]:
+    """Return ``[(name, uri)]`` for every ref-typed output on a measurement row.
+
+    Reads from the ``outputs`` dict (bare names) produced by
+    ``RunStore.get_measurements``.
+    """
+    refs: list[tuple[str, str]] = []
+    for name, value in (measurement.get("outputs") or {}).items():
+        if isinstance(value, str) and value.startswith(("file://", "channel://")):
+            refs.append((name, value))
+    return refs
+
+
+def _viewer_for_uri(uri: str) -> tuple[str, str]:
+    """Return ``(label, kind)`` for *uri* based on its filename extension."""
+    lowered = uri.lower().split("?", 1)[0]
+    for ext, label_kind in _VIEWER_BY_EXT.items():
+        if lowered.endswith(ext):
+            return label_kind
+    return "Download", "download"
+
+
+def _api_url(run_id: str, uri: str) -> str:
+    return f"/api/runs/{run_id}/ref?uri={urllib.parse.quote(uri, safe='')}"
+
+
+def render_artifact_buttons(run_id: str, measurement: dict[str, Any]) -> None:
+    """Render one View / Download button per artifact on a measurement row.
+
+    Caller decides where in the layout to drop these (typically a row
+    under the measurements table or inline alongside the value).
+    """
+    artifacts = list_artifacts(measurement)
+    if not artifacts:
+        return
+
+    step = measurement.get("step_name", "")
+    name = measurement.get("measurement_name", "")
+    label_prefix = f"{step}.{name}" if step else name
+
+    with ui.row().classes("items-center gap-2 flex-wrap"):
+        ui.label(f"{label_prefix}:").classes("text-sm font-medium text-slate-700")
+        for output_key, uri in artifacts:
+            label, kind = _viewer_for_uri(uri)
+            api_url = _api_url(run_id, uri)
+            button_text = f"{label} ({output_key})"
+            if kind == "download":
+                ui.link(button_text, api_url, new_tab=True).classes(
+                    "text-blue-600 hover:underline text-sm"
+                )
+                continue
+            ui.button(
+                button_text,
+                on_click=_make_open_dialog(run_id, output_key, uri, api_url, kind),
+            ).props("dense flat color=primary")
+
+
+def _make_open_dialog(run_id: str, output_key: str, uri: str, api_url: str, kind: str):
+    """Closure factory binding loop-iteration values to the click handler."""
+    return lambda: _open_dialog(run_id, output_key, uri, api_url, kind)
+
+
+def _open_dialog(run_id: str, output_key: str, uri: str, api_url: str, kind: str) -> None:
+    """Pop a dialog containing the appropriate viewer for *kind*."""
+    with ui.dialog() as dialog, ui.card().classes("p-4 w-[min(900px,90vw)]"):
+        ui.label(output_key).classes("text-lg font-semibold mb-2")
+        _render_viewer_body(run_id, uri, api_url, kind)
+        with ui.row().classes("w-full justify-end mt-2"):
+            ui.button("Close", on_click=dialog.close).props("flat")
+    dialog.open()
+
+
+def _render_viewer_body(run_id: str, uri: str, api_url: str, kind: str) -> None:
+    """Pick the viewer body for *kind*.
+
+    Browser-rendered viewers (image / video / pdf / iframe) embed the
+    HTTP API URL directly — the browser fetches and renders. JSON-shaped
+    payloads (waveform / text / dict) skip the HTTP round-trip and call
+    ``load_ref`` directly: the UI runs in the same Python process as
+    the API, so we don't need to go through the network.
+    """
+    if kind == "waveform":
+        _render_waveform(run_id, uri)
+    elif kind == "image":
+        ui.image(api_url).classes("w-full")
+    elif kind == "video":
+        ui.video(api_url, controls=True).classes("w-full")
+    elif kind == "pdf":
+        _iframe(api_url, sandbox=False, border=False)
+    elif kind == "html":
+        _iframe(api_url, sandbox=True, border=True)
+    elif kind == "text":
+        _render_text_or_json(run_id, uri, pretty=False)
+    elif kind == "json":
+        _render_text_or_json(run_id, uri, pretty=True)
+    elif kind == "iframe":
+        # Universal: server's magic-byte sniff sets Content-Type; the
+        # browser picks a renderer (image / video / pdf / text / download).
+        # No sandbox — Chrome blocks the PDF plugin in sandboxed iframes,
+        # and the content comes from the user's own results dir (same-origin,
+        # no untrusted scripts).
+        _iframe(api_url, sandbox=False, border=True)
+    else:
+        ui.link("Download", api_url, new_tab=True)
+
+
+def _iframe(api_url: str, *, sandbox: bool, border: bool) -> None:
+    sandbox_attr = "sandbox " if sandbox else ""
+    border_style = "1px solid #ccc" if border else "0"
+    ui.html(
+        f'<iframe src="{api_url}" {sandbox_attr}'
+        f'style="width:100%;height:70vh;border:{border_style}"></iframe>',
+        sanitize=False,
+    )
+
+
+def _render_waveform(run_id: str, uri: str) -> None:
+    """Materialize the Waveform in-process and render an ECharts line plot."""
+    try:
+        wfm = load_artifact_ref(run_id, uri)
+    except (FileNotFoundError, OSError, ValueError) as exc:
+        ui.label(f"Failed to load waveform: {exc}").classes("text-red-600")
+        return
+
+    if not hasattr(wfm, "Y"):
+        ui.label(f"Expected a Waveform, got {type(wfm).__name__}").classes("text-red-600")
+        return
+
+    Y = list(wfm.Y)
+    t0 = float(getattr(wfm, "t0", 0.0))
+    dt = float(getattr(wfm, "dt", 1.0)) or 1.0
+    x_axis = [t0 + i * dt for i in range(len(Y))]
+    attrs = getattr(wfm, "attrs", {}) or {}
+    unit = attrs.get("unit")
+    y_label = f"value ({unit})" if unit else "value"
+
+    ui.echart(
+        {
+            "tooltip": {"trigger": "axis"},
+            "xAxis": {
+                "type": "category",
+                "data": [f"{v:.4g}" for v in x_axis],
+                "name": "time (s)",
+                "nameLocation": "middle",
+                "nameGap": 30,
+            },
+            "yAxis": {"type": "value", "name": y_label},
+            "series": [
+                {
+                    "type": "line",
+                    "data": Y,
+                    "showSymbol": False,
+                    "smooth": False,
+                }
+            ],
+            "grid": {"left": 60, "right": 30, "top": 30, "bottom": 50},
+        }
+    ).classes("w-full h-96")
+
+
+def _render_text_or_json(run_id: str, uri: str, *, pretty: bool) -> None:
+    """Materialize text/JSON in-process and embed in a ``<pre>`` block."""
+    try:
+        payload = load_artifact_ref(run_id, uri)
+    except (FileNotFoundError, OSError, ValueError) as exc:
+        ui.label(f"Failed to load: {exc}").classes("text-red-600")
+        return
+
+    if pretty and isinstance(payload, dict):
+        content = json.dumps(payload, indent=2, default=str)
+    elif isinstance(payload, bytes):
+        try:
+            content = payload.decode("utf-8")
+        except UnicodeDecodeError:
+            content = repr(payload)
+    elif isinstance(payload, dict):
+        content = json.dumps(payload, default=str)
+    else:
+        content = str(payload)
+
+    # NiceGUI's ui.html escapes nothing; build a safe pre block manually.
+    import html as _html
+
+    ui.html(
+        f'<pre class="text-xs whitespace-pre-wrap break-all" '
+        f'style="max-height:60vh;overflow:auto">{_html.escape(content)}</pre>',
+        sanitize=False,
+    )

testerkit/ui/components/channel_values.py

@@ -0,0 +1,159 @@
+"""Live channel values table — Position 2 reshape.
+
+Subscribes to :class:`~testerkit.data.events.ChannelStarted` for discovery
+(one row per channel that ever wrote in this run) and to the per-channel
+ChannelStore Flight signal for live sample values.
+
+Follows the live-UI rule (``docs/_internal/explorations/live-ui-pattern.md``):
+the sample callback writes only a plain per-row holder; a single
+``ui.timer`` is the sole renderer. Discovery (adding a row) and close
+(marking a row) are structural and run on the UI loop via
+:func:`ui_subscribe`. So nothing off the UI loop touches an element, and
+the per-sample path never mutates UI directly.
+
+This is the canonical operator view: a stable list of channels with their
+latest reading, no per-sample event flood.
+
+Push-based: no polling for data — the timer only paints what already arrived.
+"""
+
+from __future__ import annotations
+
+from collections.abc import Callable
+from dataclasses import dataclass
+from uuid import UUID
+
+from nicegui import ui
+
+from testerkit.data.channels.models import ChannelSample
+from testerkit.data.event_store import EventStore
+from testerkit.ui.shared.event_binding import ui_channel_data, ui_subscribe
+from testerkit.ui.shared.timestamps import format_time_short
+
+
+@dataclass
+class _ChannelRow:
+    """Per-channel row: label handles + the latest reading the timer paints."""
+
+    val_lbl: ui.label
+    unit_lbl: ui.label
+    ts_lbl: ui.label
+    value: object = None
+    unit: str = ""
+    ts: str = ""
+    closed: bool = False
+    dirty: bool = True
+
+
+def create_channel_values_panel(
+    store: EventStore,
+    *,
+    run_id: UUID | None = None,
+) -> tuple[ui.column, Callable[[], None]]:
+    """Auto-discover channels and show a live-values table.
+
+    ``run_id`` filters the ``ChannelStarted`` discovery subscription to the
+    matching run — operators on ``/live/{run_id}`` only see channels from
+    the run they're looking at. ``None`` shows everything.
+
+    Live sample values come from :func:`ui_channel_data` (wired by the
+    application's :func:`bind_channel_store` at startup). The sample
+    callback only records the reading; a ``ui.timer`` paints it.
+
+    Returns ``(container, unsubscribe)`` so the caller can stop discovery
+    updates on page teardown.
+    """
+    rows: dict[str, _ChannelRow] = {}
+
+    container = ui.column().classes("w-full gap-2")
+
+    with container:
+        placeholder = ui.label("No channels yet").classes("text-sm text-slate-400 italic")
+        # Table header (hidden until first data)
+        header = ui.row().classes("w-full px-3 py-1 border-b border-slate-200 hidden")
+        with header:
+            ui.label("Channel").classes("w-1/3 text-xs font-semibold text-slate-500")
+            ui.label("Value").classes("w-1/4 text-xs font-semibold text-slate-500")
+            ui.label("Units").classes("w-1/6 text-xs font-semibold text-slate-500")
+            ui.label("Last Update").classes("w-1/4 text-xs font-semibold text-slate-500")
+        rows_container = ui.column().classes("w-full gap-0")
+
+    placeholder_removed = False
+
+    def _format_value(value: object) -> str:
+        if isinstance(value, (int, float)):
+            return f"{value:.4g}"
+        if isinstance(value, list) and value and isinstance(value[0], (int, float)):
+            # Array sample — show length, not the whole array
+            return f"[{len(value)} samples]"
+        return "—" if value is None else str(value)
+
+    def _on_channel_started(evt: dict) -> None:
+        """Discovery: add a row + a sample subscription that fills its holder."""
+        nonlocal placeholder_removed
+
+        ch_id = evt.get("channel_id")
+        if not ch_id or ch_id in rows:
+            return
+
+        if not placeholder_removed:
+            placeholder_removed = True
+            placeholder.delete()
+            header.classes(remove="hidden")
+
+        with rows_container:
+            with ui.row().classes("w-full px-3 py-1.5 border-b border-slate-100 items-center"):
+                ui.label(ch_id).classes("w-1/3 text-sm font-mono text-slate-700")
+                val_lbl = ui.label("—").classes("w-1/4 text-sm font-mono font-semibold")
+                unit_lbl = ui.label(evt.get("unit") or "").classes("w-1/6 text-xs text-slate-500")
+                ts_lbl = ui.label("").classes("w-1/4 text-xs text-slate-400")
+
+        row = _ChannelRow(val_lbl, unit_lbl, ts_lbl, unit=evt.get("unit") or "")
+        rows[ch_id] = row
+
+        # Sample callback: record the reading only — no UI mutation here.
+        def _on_sample(sample: ChannelSample, _row: _ChannelRow = row) -> None:
+            _row.value = sample.value
+            if sample.unit:
+                _row.unit = sample.unit
+            _row.ts = format_time_short(sample.received_at.isoformat())
+            _row.dirty = True
+
+        ui_channel_data(ch_id).subscribe(_on_sample)
+
+    def _on_channel_closed(evt: dict) -> None:
+        """Lifecycle close — mark the row so the timer italicizes it."""
+        ch_id = evt.get("channel_id")
+        row = rows.get(ch_id) if ch_id else None
+        if row is not None:
+            row.closed = True
+            row.dirty = True
+
+    def _render() -> None:
+        """Sole renderer: paint the rows whose holders changed."""
+        for row in rows.values():
+            if not row.dirty:
+                continue
+            row.dirty = False
+            row.val_lbl.set_text(_format_value(row.value))
+            row.unit_lbl.set_text(row.unit)
+            if row.closed:
+                row.ts_lbl.classes(add="italic")
+                row.ts_lbl.set_text(f"closed · {row.ts}" if row.ts else "closed")
+            else:
+                row.ts_lbl.set_text(row.ts)
+
+    ui.timer(0.25, _render)
+
+    unsub_started = ui_subscribe(
+        store, _on_channel_started, event_type="channel.started", run_id=run_id
+    )
+    unsub_closed = ui_subscribe(
+        store, _on_channel_closed, event_type="channel.ended", run_id=run_id
+    )
+
+    def unsubscribe() -> None:
+        unsub_started()
+        unsub_closed()
+
+    return container, unsubscribe