Read-only LiveView components for a host application's ops views: the current-state diagram and the run-history event log, side by side over one trace stream in wire format v1 (docs/wire-format.md), live or persisted.

Compiled only when the optional :phoenix_live_view dependency is present (ADR-0004); a host without it gets a stub whose every component raises with instructions. Nothing else in this package touches Phoenix.Component.

Every component is a function component over StatifierUI.Live.State - there is no LiveComponent, no process, and no mount/3 here. The host owns the socket, the subscription, and the events; this module owns markup. That is what makes these embeddable in a page the host already has rather than a page it has to give up.

Full fidelity

These are dev/ops surfaces and they render what the stream carries. If the stream was produced under an ADR-0012 projection profile, status/1 says so in a banner and redacted slots render as the stream's own sentinel - the redacted tenant-facing story is a different component (sui-hmn), not a flag on this one.

Embedding

Full worked example: docs/ops-embedding.md. The short version, for a live stream:

# mount/3
{:ok, subscriber} = Subscriber.start_link(machine: machine, source: source)
:ok = Subscriber.attach(subscriber, session, catch_up: true)
:ok = Subscriber.add_listener(subscriber, self())

socket =
  assign(socket, :trace, State.new(machine) |> State.sync(subscriber))

# handle_info/2 - the subscriber's fan-out shape
def handle_info({:statifier_ui, _session, message}, socket) do
  {:noreply, update(socket, :trace, &State.push(&1, message))}
end

# handle_event/3 - the two events the components emit
def handle_event("statifier_ui_scrub", %{"move" => move}, socket) do
  {:noreply, update(socket, :trace, &State.scrub(&1, String.to_existing_atom(move)))}
end

def handle_event("statifier_ui_select", %{"macrostep" => n}, socket) do
  {:noreply, update(socket, :trace, &State.select(&1, String.to_integer(n)))}
end

# render/1
<StatifierUI.Live.ops_view id="ops" state={@trace} />

A persisted stream drops the subscriber and the handle_info/2 clause: State.new(machine, messages: messages) is the whole difference.

The diagram is Mermaid source, and this package ships no JavaScript

diagram/1 emits StatifierUI.Diagram's stateDiagram-v2 source into a <pre class="mermaid">, the shape a Mermaid client renders in place. Attaching that client is the host's - pass hook={"MyMermaid"} and the element carries phx-hook. ADR-0008's client-side elkjs SVG renderer is the eventual full-fidelity diagram and is not built yet; when it is, it replaces this pane's body and not its contract.

Class names, not styles

Every element carries a statifier-ui-* class and the engine's own document-order identities as data-* attributes (data-macrostep, data-round, data-configuration), per ADR-0007's sync contract. No CSS ships: a host page styles these with its own design system, and the data-* stamps are what tests assert on.