Live states

tier 2 — classes

What a view shows while something is still happening: the state of the connection behind it, the lines a job is writing, and work the reader can watch and cancel. A view with nothing to show yet is an empty state; a wait with a known shape is a skeleton.

Connection state

.health-badge with a .health-dot, in six states: the active --live, --streaming and --connecting pulse, and the settled --idle, --degraded and --down do not. The word is not optional — a colour alone fails for anybody who cannot see it. .stale is how old the number beside it is, with --warn when it is old enough to distrust. The circuit's own state is the status bar's job, not a badge's.

Live Streaming Connecting Idle Degraded Disconnected

updated 4s ago updated 6m ago

<div class="sedna-col sedna-gap-2">
    <div class="sedna-row-wrap sedna-gap-3">
        <span class="health-badge health-badge--live"><span class="health-dot"></span> Live</span>
        <span class="health-badge health-badge--streaming"><span class="health-dot"></span> Streaming</span>
        <span class="health-badge health-badge--connecting"><span class="health-dot"></span> Connecting</span>
        <span class="health-badge health-badge--idle"><span class="health-dot"></span> Idle</span>
        <span class="health-badge health-badge--degraded"><span class="health-dot"></span> Degraded</span>
        <span class="health-badge health-badge--down"><span class="health-dot"></span> Disconnected</span>
    </div>
    <div class="sedna-row-wrap sedna-gap-3">
        <span class="stale"><i class="ri-time-line"></i> updated 4s ago</span>
        <span class="stale stale--warn"><i class="ri-time-line"></i> updated 6m ago</span>
    </div>
</div>

Output pane

.output is lines of machine output — a build log, a command's stdout, an event stream, an audit trail — as a real list, monospace with tabular figures, with .output-head outside the pane so it does not scroll away with the lines. Add data-follow and it sticks to the newest line, releasing when the reader scrolls up and re-attaching when they scroll back down; sednaUi.output.follow(pane) re-attaches it from a “jump to latest” button. An application log in columns, with levels, rows that expand and actions per line, is on Logs.

Streaming updated 1s ago

12:04:28 reading manifest for ORD-4182
12:04:28 5 lines, 3 warehouses
12:04:29 line 1 reserved in EU-West
12:04:29 line 2 reserved in EU-West
12:04:30 line 3 awaiting stock, backordered
12:04:30 line 4 reserved in EU-Central
12:04:31 line 5 awaiting stock, backordered
12:04:31 reservation service returned 504
12:04:33 retrying in 2s
12:04:35 reservation confirmed
12:04:35 done, 3 of 5 lines reserved

<div style="max-width:640px">
    <div class="output-head">
        <span class="health-badge health-badge--streaming"><span class="health-dot"></span> Streaming</span>
        <span class="sedna-push stale"><i class="ri-time-line"></i> updated 1s ago</span>
    </div>
    <ul class="output" data-follow tabindex="0" aria-label="Import output">
        <li class="output-line"><span class="output-time">12:04:28</span> reading manifest for ORD-4182</li>
        <li class="output-line"><span class="output-time">12:04:28</span> 5 lines, 3 warehouses</li>
        <li class="output-line output-line--go"><span class="output-time">12:04:29</span> line 1 reserved in EU-West</li>
        <li class="output-line output-line--go"><span class="output-time">12:04:29</span> line 2 reserved in EU-West</li>
        <li class="output-line output-line--warn"><span class="output-time">12:04:30</span> line 3 awaiting stock, backordered</li>
        <li class="output-line output-line--go"><span class="output-time">12:04:30</span> line 4 reserved in EU-Central</li>
        <li class="output-line output-line--warn"><span class="output-time">12:04:31</span> line 5 awaiting stock, backordered</li>
        <li class="output-line output-line--error"><span class="output-time">12:04:31</span> reservation service returned 504</li>
        <li class="output-line output-line--note"><span class="output-time">12:04:33</span> retrying in 2s</li>
        <li class="output-line output-line--go"><span class="output-time">12:04:35</span> reservation confirmed</li>
        <li class="output-line"><span class="output-time">12:04:35</span> done, 3 of 5 lines reserved</li>
    </ul>
</div>

Work in progress

Background work the reader can see and cancel. There is no activity-row class: it is a .list-row with a .progress bar in its subtext — determinate for work with a known size, indeterminate for work accepted but not started — and the controls in .list-meta. Mark the row aria-busy="true" while it runs.

Reconciling EU-West 62%
Rebuilding the search index Queued

<ul class="list" style="max-width:520px">
    <li>
        <span class="list-row">
            <span class="list-main">
                <span class="list-title">Reconciling EU-West</span>
                <span class="list-sub">
                    <span class="progress" style="margin-top:6px">
                        <span class="progress-bar" style="width:62%"></span>
                    </span>
                </span>
            </span>
            <span class="list-meta">
                <span class="text-nums">62%</span>
                <button class="btn btn-sm btn-icon btn-ghost" type="button" aria-label="Cancel reconciling EU-West">
                    <i class="ri-close-line"></i>
                </button>
            </span>
        </span>
    </li>
    <li>
        <span class="list-row">
            <span class="list-main">
                <span class="list-title">Rebuilding the search index</span>
                <span class="list-sub">
                    <span class="progress progress--indeterminate" style="margin-top:6px">
                        <span class="progress-bar"></span>
                    </span>
                </span>
            </span>
            <span class="list-meta">
                <span class="health-badge health-badge--connecting"><span class="health-dot"></span> Queued</span>
            </span>
        </span>
    </li>
</ul>