tokens and more

This commit is contained in:
Mateusz Gruszczyński
2026-08-01 00:15:37 +02:00
parent 6c5232ccc5
commit 1401054c71
18 changed files with 1966 additions and 285 deletions
+112 -7
View File
@@ -163,10 +163,64 @@
</div>
<footer class="editor-footer">
<div class="footer-left"><span id="characters">0 characters</span> · <span id="words">0
words</span><span class="footer-connection-block"> · <span class="footer-status status"><span
id="status-dot" class="status__dot"></span><span
id="status-text">Connecting…</span></span> · <span id="socket-latency"
class="footer-socket-latency" title="WebSocket round-trip time">— ms</span></span> ·
words</span>
<div class="footer-connection-block"> · <details id="connection-details" class="connection-details">
<summary title="WebSocket connection diagnostics"><span class="footer-status status"><span
id="status-dot" class="status__dot"></span><span
id="status-text">Connecting…</span></span><span id="socket-latency"
class="footer-socket-latency">— ms</span><span class="connection-details__chevron"
aria-hidden="true"></span></summary>
<div class="connection-diagnostics-popover">
<strong>Connection diagnostics</strong>
<dl class="connection-diagnostics-grid">
<div>
<dt>Quality</dt>
<dd data-connection-diagnostic="quality">Waiting</dd>
</div>
<div>
<dt>Latency</dt>
<dd data-connection-diagnostic="latency"></dd>
</div>
<div>
<dt>Jitter</dt>
<dd data-connection-diagnostic="jitter"></dd>
</div>
<div>
<dt>Uptime</dt>
<dd data-connection-diagnostic="uptime"></dd>
</div>
<div>
<dt>Reconnects</dt>
<dd data-connection-diagnostic="reconnects">0</dd>
</div>
<div>
<dt>Transport</dt>
<dd data-connection-diagnostic="transport">WebSocket</dd>
</div>
<div>
<dt>Heartbeat</dt>
<dd data-connection-diagnostic="heartbeat"></dd>
</div>
<div>
<dt>Network</dt>
<dd data-connection-diagnostic="network"></dd>
</div>
<div>
<dt>Client</dt>
<dd data-connection-diagnostic="client"></dd>
</div>
<div>
<dt>Server</dt>
<dd data-connection-diagnostic="server"></dd>
</div>
<div class="connection-diagnostics-grid__wide">
<dt>Last event</dt>
<dd data-connection-diagnostic="last-event"></dd>
</div>
</dl>
</div>
</details>
</div> ·
<details id="room-details" class="room-details">
<summary><span id="room-count">0 users</span><span id="chat-unread" class="chat-unread"
hidden></span></summary>
@@ -296,9 +350,60 @@
id="mobile-color-picker" type="color" aria-label="Change editor color"></label>
<button id="mobile-chat-button" class="mobile-chat-button" type="button" title="Chat"
aria-label="Open chat">💬<span id="mobile-chat-unread" class="mobile-chat-unread" hidden></span></button>
<span id="mobile-connection-status" class="mobile-connection-status" title="WebSocket status"><span
id="mobile-status-dot" class="status__dot"></span><span
id="mobile-status-text">Connecting…</span></span>
<details id="mobile-connection-details" class="mobile-connection-details">
<summary id="mobile-connection-status" class="mobile-connection-status"
title="WebSocket connection diagnostics"><span id="mobile-status-dot" class="status__dot"></span><span
id="mobile-status-text">Connecting…</span><span id="mobile-socket-latency"></span></summary>
<div class="connection-diagnostics-popover mobile-connection-diagnostics-popover">
<strong>Connection diagnostics</strong>
<dl class="connection-diagnostics-grid">
<div>
<dt>Quality</dt>
<dd data-connection-diagnostic="quality">Waiting</dd>
</div>
<div>
<dt>Latency</dt>
<dd data-connection-diagnostic="latency"></dd>
</div>
<div>
<dt>Jitter</dt>
<dd data-connection-diagnostic="jitter"></dd>
</div>
<div>
<dt>Uptime</dt>
<dd data-connection-diagnostic="uptime"></dd>
</div>
<div>
<dt>Reconnects</dt>
<dd data-connection-diagnostic="reconnects">0</dd>
</div>
<div>
<dt>Transport</dt>
<dd data-connection-diagnostic="transport">WebSocket</dd>
</div>
<div>
<dt>Heartbeat</dt>
<dd data-connection-diagnostic="heartbeat"></dd>
</div>
<div>
<dt>Network</dt>
<dd data-connection-diagnostic="network"></dd>
</div>
<div>
<dt>Client</dt>
<dd data-connection-diagnostic="client"></dd>
</div>
<div>
<dt>Server</dt>
<dd data-connection-diagnostic="server"></dd>
</div>
<div class="connection-diagnostics-grid__wide">
<dt>Last event</dt>
<dd data-connection-diagnostic="last-event"></dd>
</div>
</dl>
</div>
</details>
</div>
<div id="toast" class="toast"></div>
</body>