Mochi

<div class="sedna-row-wrap sedna-gap-3" style="row-gap: var(--space-10)">
    <div class="sedna-col sedna-center sedna-gap-2" style="width: 120px">
        <span class="mochi mochi--md" data-action="idle" role="img" aria-label="Ops agent, resting"><svg viewBox="0 0 160 160" aria-hidden="true"><use href="#sedna-mochi" /></svg></span>
        <code>idle</code>
    </div>
    <div class="sedna-col sedna-center sedna-gap-2" style="width: 120px">
        <span class="mochi mochi--md" data-action="wave" role="img" aria-label="Ops agent, waving"><svg viewBox="0 0 160 160" aria-hidden="true"><use href="#sedna-mochi" /></svg></span>
        <code>wave</code>
    </div>
    <div class="sedna-col sedna-center sedna-gap-2" style="width: 120px">
        <span class="mochi mochi--md" data-action="point" role="img" aria-label="Ops agent, pointing"><svg viewBox="0 0 160 160" aria-hidden="true"><use href="#sedna-mochi" /></svg></span>
        <code>point</code>
    </div>
    <div class="sedna-col sedna-center sedna-gap-2" style="width: 120px">
        <span class="mochi mochi--md" data-action="think" role="img" aria-label="Ops agent, thinking"><svg viewBox="0 0 160 160" aria-hidden="true"><use href="#sedna-mochi" /></svg></span>
        <code>think</code>
    </div>
    <div class="sedna-col sedna-center sedna-gap-2" style="width: 120px">
        <span class="mochi mochi--md" data-action="work" role="img" aria-label="Ops agent, working"><svg viewBox="0 0 160 160" aria-hidden="true"><use href="#sedna-mochi" /></svg></span>
        <code>work</code>
    </div>
    <div class="sedna-col sedna-center sedna-gap-2" style="width: 120px">
        <span class="mochi mochi--md" data-action="talk" role="img" aria-label="Ops agent, talking"><svg viewBox="0 0 160 160" aria-hidden="true"><use href="#sedna-mochi" /></svg></span>
        <code>talk</code>
    </div>
    <div class="sedna-col sedna-center sedna-gap-2" style="width: 120px">
        <span class="mochi mochi--md" data-action="listen" role="img" aria-label="Ops agent, listening"><svg viewBox="0 0 160 160" aria-hidden="true"><use href="#sedna-mochi" /></svg></span>
        <code>listen</code>
    </div>
    <div class="sedna-col sedna-center sedna-gap-2" style="width: 120px">
        <span class="mochi mochi--md" data-action="celebrate" role="img" aria-label="Ops agent, celebrating"><svg viewBox="0 0 160 160" aria-hidden="true"><use href="#sedna-mochi" /></svg></span>
        <code>celebrate</code>
    </div>
    <div class="sedna-col sedna-center sedna-gap-2" style="width: 120px">
        <span class="mochi mochi--md" data-action="oops" role="img" aria-label="Ops agent, stuck"><svg viewBox="0 0 160 160" aria-hidden="true"><use href="#sedna-mochi" /></svg></span>
        <code>oops</code>
    </div>
    <div class="sedna-col sedna-center sedna-gap-2" style="width: 120px">
        <span class="mochi mochi--md" data-action="sleep" role="img" aria-label="Ops agent, asleep"><svg viewBox="0 0 160 160" aria-hidden="true"><use href="#sedna-mochi" /></svg></span>
        <code>sleep</code>
    </div>
    <div class="sedna-col sedna-center sedna-gap-2" style="width: 120px">
        <span class="mochi mochi--md" data-action="surprised" role="img" aria-label="Ops agent, surprised"><svg viewBox="0 0 160 160" aria-hidden="true"><use href="#sedna-mochi" /></svg></span>
        <code>surprised</code>
    </div>
    <div class="sedna-col sedna-center sedna-gap-2" style="width: 120px">
        <span class="mochi mochi--md" data-action="done" role="img" aria-label="Ops agent, done"><svg viewBox="0 0 160 160" aria-hidden="true"><use href="#sedna-mochi" /></svg></span>
        <code>done</code>
    </div>
    <div class="sedna-col sedna-center sedna-gap-2" style="width: 120px">
        <span class="mochi mochi--md" data-action="love" role="img" aria-label="Ops agent, pleased"><svg viewBox="0 0 160 160" aria-hidden="true"><use href="#sedna-mochi" /></svg></span>
        <code>love</code>
    </div>
</div>

<div class="sedna-row-wrap sedna-gap-3" style="row-gap: var(--space-8)">
    <div class="sedna-col sedna-center sedna-gap-2" style="width: 96px">
        <span class="mochi mochi--sm" data-mood="neutral" role="img" aria-label="Ops agent, neutral"><svg viewBox="0 0 160 160" aria-hidden="true"><use href="#sedna-mochi" /></svg></span>
        <code>neutral</code>
    </div>
    <div class="sedna-col sedna-center sedna-gap-2" style="width: 96px">
        <span class="mochi mochi--sm" data-mood="happy" role="img" aria-label="Ops agent, happy"><svg viewBox="0 0 160 160" aria-hidden="true"><use href="#sedna-mochi" /></svg></span>
        <code>happy</code>
    </div>
    <div class="sedna-col sedna-center sedna-gap-2" style="width: 96px">
        <span class="mochi mochi--sm" data-mood="excited" role="img" aria-label="Ops agent, excited"><svg viewBox="0 0 160 160" aria-hidden="true"><use href="#sedna-mochi" /></svg></span>
        <code>excited</code>
    </div>
    <div class="sedna-col sedna-center sedna-gap-2" style="width: 96px">
        <span class="mochi mochi--sm" data-mood="surprised" role="img" aria-label="Ops agent, surprised"><svg viewBox="0 0 160 160" aria-hidden="true"><use href="#sedna-mochi" /></svg></span>
        <code>surprised</code>
    </div>
    <div class="sedna-col sedna-center sedna-gap-2" style="width: 96px">
        <span class="mochi mochi--sm" data-mood="curious" role="img" aria-label="Ops agent, curious"><svg viewBox="0 0 160 160" aria-hidden="true"><use href="#sedna-mochi" /></svg></span>
        <code>curious</code>
    </div>
    <div class="sedna-col sedna-center sedna-gap-2" style="width: 96px">
        <span class="mochi mochi--sm" data-mood="focused" role="img" aria-label="Ops agent, focused"><svg viewBox="0 0 160 160" aria-hidden="true"><use href="#sedna-mochi" /></svg></span>
        <code>focused</code>
    </div>
    <div class="sedna-col sedna-center sedna-gap-2" style="width: 96px">
        <span class="mochi mochi--sm" data-mood="worried" role="img" aria-label="Ops agent, worried"><svg viewBox="0 0 160 160" aria-hidden="true"><use href="#sedna-mochi" /></svg></span>
        <code>worried</code>
    </div>
    <div class="sedna-col sedna-center sedna-gap-2" style="width: 96px">
        <span class="mochi mochi--sm" data-mood="sleepy" role="img" aria-label="Ops agent, sleepy"><svg viewBox="0 0 160 160" aria-hidden="true"><use href="#sedna-mochi" /></svg></span>
        <code>sleepy</code>
    </div>
    <div class="sedna-col sedna-center sedna-gap-2" style="width: 96px">
        <span class="mochi mochi--sm" data-mood="love" role="img" aria-label="Ops agent, love"><svg viewBox="0 0 160 160" aria-hidden="true"><use href="#sedna-mochi" /></svg></span>
        <code>love</code>
    </div>
    <div class="sedna-col sedna-center sedna-gap-2" style="width: 96px">
        <span class="mochi mochi--sm" data-mood="wink" role="img" aria-label="Ops agent, wink"><svg viewBox="0 0 160 160" aria-hidden="true"><use href="#sedna-mochi" /></svg></span>
        <code>wink</code>
    </div>
</div>

<div class="sedna-row-wrap sedna-gap-3" style="row-gap: var(--space-8)">
    <div class="sedna-col sedna-center sedna-gap-2" style="width: 96px">
        <span class="mochi mochi--sm" data-action="listen" role="img" aria-label="Pink agent"><svg viewBox="0 0 160 160" aria-hidden="true"><use href="#sedna-mochi" /></svg></span>
        <code>pink</code>
    </div>
    <div class="sedna-col sedna-center sedna-gap-2" style="width: 96px">
        <span class="mochi mochi--sm" data-tone="mint" data-action="listen" role="img" aria-label="Mint agent"><svg viewBox="0 0 160 160" aria-hidden="true"><use href="#sedna-mochi" /></svg></span>
        <code>mint</code>
    </div>
    <div class="sedna-col sedna-center sedna-gap-2" style="width: 96px">
        <span class="mochi mochi--sm" data-tone="sky" data-action="listen" role="img" aria-label="Sky agent"><svg viewBox="0 0 160 160" aria-hidden="true"><use href="#sedna-mochi" /></svg></span>
        <code>sky</code>
    </div>
    <div class="sedna-col sedna-center sedna-gap-2" style="width: 96px">
        <span class="mochi mochi--sm" data-tone="lemon" data-action="listen" role="img" aria-label="Lemon agent"><svg viewBox="0 0 160 160" aria-hidden="true"><use href="#sedna-mochi" /></svg></span>
        <code>lemon</code>
    </div>
    <div class="sedna-col sedna-center sedna-gap-2" style="width: 96px">
        <span class="mochi mochi--sm" data-tone="lilac" data-action="listen" role="img" aria-label="Lilac agent"><svg viewBox="0 0 160 160" aria-hidden="true"><use href="#sedna-mochi" /></svg></span>
        <code>lilac</code>
    </div>
    <div class="sedna-col sedna-center sedna-gap-2" style="width: 96px">
        <span class="mochi mochi--sm" data-tone="coral" data-action="listen" role="img" aria-label="Coral agent"><svg viewBox="0 0 160 160" aria-hidden="true"><use href="#sedna-mochi" /></svg></span>
        <code>coral</code>
    </div>
</div>

<div class="sedna-row-wrap sedna-gap-3" style="align-items: start; row-gap: var(--space-9)">
    <figure class="sedna-col sedna-gap-3" style="margin: 0; width: 260px; padding-block-start: 96px">
        <div class="mochi-host">
            <div class="card">
                <div class="card-head"><strong>Order sync</strong><span class="badge badge--go">Healthy</span></div>
                <div class="card-body">Three runs since 03:30, all on time.</div>
            </div>
            <span class="mochi" data-perch="sit" data-action="idle" role="img" aria-label="Ops agent, sitting on the card"><svg viewBox="0 0 160 160" aria-hidden="true"><use href="#sedna-mochi" /></svg></span>
        </div>
        <figcaption class="text-muted text-sm"><code>sit</code> on the top edge, feet dangling in front</figcaption>
    </figure>
    <figure class="sedna-col sedna-gap-3" style="margin: 0; width: 260px; padding-block-start: 96px">
        <div class="mochi-host">
            <div class="card">
                <div class="card-head"><strong>Ticket summary</strong><span class="badge badge-ai"><i class="ri-sparkling-2-line"></i><span>AI</span></span></div>
                <div class="card-body">214 tickets, mostly one sync failure.</div>
            </div>
            <span class="mochi" data-perch="peek" data-mood="curious" role="img" aria-label="Research agent, peeking over the card"><svg viewBox="0 0 160 160" aria-hidden="true"><use href="#sedna-mochi" /></svg></span>
        </div>
        <figcaption class="text-muted text-sm"><code>peek</code> over the top, both hands on the edge</figcaption>
    </figure>
    <figure class="sedna-col sedna-gap-3" style="margin: 0; width: 260px; padding-block-start: 96px">
        <div class="mochi-host">
            <div class="card">
                <div class="card-head"><strong>Welcome back, Alex</strong></div>
                <div class="card-body">Two approvals are waiting for you.</div>
            </div>
            <span class="mochi" data-perch="peek" data-action="wave" data-mood="happy" data-tone="mint" role="img" aria-label="Support agent, waving over the card"><svg viewBox="0 0 160 160" aria-hidden="true"><use href="#sedna-mochi" /></svg></span>
        </div>
        <figcaption class="text-muted text-sm"><code>peek</code> and <code>wave</code>: one hand lets go</figcaption>
    </figure>
    <figure class="sedna-col sedna-gap-3" style="margin: 0; width: 260px; padding-block-start: 96px">
        <div class="mochi-host">
            <div class="card">
                <div class="card-head"><strong>Runbook</strong></div>
                <div class="card-body"><span class="skeleton skeleton-text" style="width: 92%"></span><span class="skeleton skeleton-text" style="width: 76%"></span></div>
            </div>
            <span class="mochi" data-perch="look" data-tone="sky" role="img" aria-label="Research agent, reading the card"><svg viewBox="0 0 160 160" aria-hidden="true"><use href="#sedna-mochi" /></svg></span>
        </div>
        <figcaption class="text-muted text-sm"><code>look</code> leaning in, reading what is below</figcaption>
    </figure>
    <figure class="sedna-col sedna-gap-3" style="margin: 0; width: 260px; padding-block-start: 96px; padding-inline-end: 72px">
        <div class="mochi-host">
            <div class="card">
                <div class="card-head"><strong>Release 4.2</strong><span class="badge badge--warn">Staged</span></div>
                <div class="card-body">Waiting for your go-ahead.</div>
            </div>
            <span class="mochi" data-perch="side" data-mood="curious" data-tone="lilac" role="img" aria-label="Release agent, peeking out from behind the card"><svg viewBox="0 0 160 160" aria-hidden="true"><use href="#sedna-mochi" /></svg></span>
        </div>
        <figcaption class="text-muted text-sm"><code>side</code> leaning out from behind the edge</figcaption>
    </figure>
    <figure class="sedna-col sedna-gap-3" style="margin: 0; width: 260px; padding-block-start: 96px">
        <div class="mochi-host">
            <div class="card">
                <div class="card-head"><strong>Report ready</strong></div>
                <div class="card-body" style="padding-block-end: 88px">214 tickets summarised in 1:12.</div>
            </div>
            <span class="mochi" data-perch="stand" data-action="done" data-tone="lemon" role="img" aria-label="Research agent, done"><svg viewBox="0 0 160 160" aria-hidden="true"><use href="#sedna-mochi" /></svg></span>
        </div>
        <figcaption class="text-muted text-sm"><code>stand</code> on the bottom edge</figcaption>
    </figure>
    <figure class="sedna-col sedna-gap-3" style="margin: 0; width: 260px; padding-block-start: 24px">
        <div class="mochi-host" style="margin-block-end: 104px">
            <div class="card">
                <div class="card-head"><strong>Disk usage</strong><span class="badge badge--danger">97%</span></div>
                <div class="card-body">src-db-14 is nearly full.</div>
            </div>
            <span class="mochi" data-perch="hang" data-tone="coral" role="img" aria-label="Ops agent, hanging from the card"><svg viewBox="0 0 160 160" aria-hidden="true"><use href="#sedna-mochi" /></svg></span>
        </div>
        <figcaption class="text-muted text-sm"><code>hang</code> from the bottom edge by both hands</figcaption>
    </figure>
    <figure class="sedna-col sedna-gap-3" style="margin: 0; width: 260px; padding-block-start: 24px">
        <div class="mochi-host" style="margin-block-end: 104px">
            <div class="card">
                <div class="card-head"><strong>New in this release</strong></div>
                <div class="card-body">Approvals now show who asked.</div>
            </div>
            <span class="mochi" data-perch="hang" data-action="wave" data-mood="excited" data-tone="sky" role="img" aria-label="Support agent, hanging from the card and waving"><svg viewBox="0 0 160 160" aria-hidden="true"><use href="#sedna-mochi" /></svg></span>
        </div>
        <figcaption class="text-muted text-sm"><code>hang</code> and <code>wave</code>: one hand lets go</figcaption>
    </figure>
</div>

<div class="sedna-row-wrap sedna-gap-3" style="align-items: start; column-gap: var(--space-11); row-gap: var(--space-9); padding-block: 72px 80px">
    <div class="form-field" style="width: 260px">
        <label class="form-label" for="mochi-runbook">Runbook name</label>
        <div class="mochi-host">
            <input class="form-input" id="mochi-runbook" value="Restart the order sync" />
            <span class="mochi mochi--md" data-perch="peek" data-mood="curious" data-tone="lilac" role="img" aria-label="Research agent, peeking over the field"><svg viewBox="0 0 160 160" aria-hidden="true"><use href="#sedna-mochi" /></svg></span>
        </div>
    </div>
    <div style="width: 300px">
        <div class="mochi-host">
            <div class="search">
                <i class="ri-search-line search-icon" aria-hidden="true"></i>
                <input class="search-input" type="search" placeholder="Search runbooks" aria-label="Search runbooks" />
            </div>
            <span class="mochi mochi--md" data-perch="hang" data-action="point" data-tone="sky" role="img" aria-label="Research agent, hanging from the search box"><svg viewBox="0 0 160 160" aria-hidden="true"><use href="#sedna-mochi" /></svg></span>
        </div>
    </div>
    <div class="mochi-host mochi-host--inline">
        <button class="btn btn--go btn--solid" type="button">Approve the change</button>
        <span class="mochi mochi--md" data-perch="sit" data-action="celebrate" data-tone="lemon" role="img" aria-label="Release agent, cheering on the button"><svg viewBox="0 0 160 160" aria-hidden="true"><use href="#sedna-mochi" /></svg></span>
    </div>
</div>

<div class="card" style="max-width: 460px">
    <div class="card-head">
        <span class="sedna-row sedna-gap-2"><span class="mochi mochi--bust" data-action="idle" style="--size: 28px" role="img" aria-label="Ops agent"><svg viewBox="0 0 160 160" aria-hidden="true"><use href="#sedna-mochi" /></svg></span><strong>Ops agent</strong></span>
        <span class="agent-status"><span class="orb" data-orb="thinking" role="img" aria-label="Thinking"></span><span class="agent-status-label text-shimmer">Thinking</span></span>
    </div>
    <div class="card-body">
        <div class="chat" role="log" aria-live="polite" aria-label="Conversation with Ops agent">
            <div class="chat-message chat-message--mine">
                <div class="chat-body"><div class="chat-bubble">Is the sync healthy again?</div></div>
            </div>
            <div class="chat-message">
                <span class="mochi mochi--bust" data-action="talk" style="--size: 32px" role="img" aria-label="Ops agent"><svg viewBox="0 0 160 160" aria-hidden="true"><use href="#sedna-mochi" /></svg></span>
                <div class="chat-body">
                    <div class="chat-meta"><span class="chat-author">Ops agent</span><time class="chat-time" datetime="2026-09-14T09:20">09:20</time></div>
                    <div class="chat-bubble">Yes. Three runs since 03:30, all on time.</div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="card" style="max-width: 460px">
    <ul class="list">
        <li><div class="list-row">
            <span class="mochi mochi--bust" data-action="celebrate" style="--size: 44px" role="img" aria-label="Research agent, celebrating"><svg viewBox="0 0 160 160" aria-hidden="true"><use href="#sedna-mochi" /></svg></span>
            <span class="list-main"><span class="list-title">Report ready</span><span class="list-sub">214 tickets summarised in 1:12</span></span>
            <span class="list-meta"><button class="btn btn--sm btn--brand btn--solid" type="button">Open</button></span>
        </div></li>
        <li><div class="list-row">
            <span class="mochi mochi--bust" data-action="oops" data-tone="sky" style="--size: 44px" role="img" aria-label="Billing agent, stuck"><svg viewBox="0 0 160 160" aria-hidden="true"><use href="#sedna-mochi" /></svg></span>
            <span class="list-main"><span class="list-title">Refund failed</span><span class="list-sub">The payment service did not answer.</span></span>
            <span class="list-meta"><button class="btn btn--sm" type="button">Retry</button></span>
        </div></li>
        <li><div class="list-row">
            <span class="mochi mochi--bust" data-action="listen" data-tone="mint" style="--size: 44px" role="img" aria-label="Voice agent, listening"><svg viewBox="0 0 160 160" aria-hidden="true"><use href="#sedna-mochi" /></svg></span>
            <span class="list-main"><span class="list-title">Listening</span><span class="list-sub">Say what you need.</span></span>
            <span class="list-meta"><button class="btn btn--sm btn--icon btn-mic" type="button" data-state="listening" aria-label="Stop listening"><i class="ri-mic-fill"></i></button></span>
        </div></li>
    </ul>
</div>