Collapse high-frequency audio frames in the demo websocket log.

Expandable groups keep protocol and text events readable while still allowing per-frame inspection when debugging audio traffic.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Xin Wang
2026-05-23 10:21:50 +08:00
parent 5b087f8610
commit 003a4abe8c
2 changed files with 316 additions and 98 deletions

View File

@@ -405,6 +405,79 @@ body {
padding: 8px 4px;
}
.ws-log__group {
border-radius: 6px;
}
.ws-log__group-header {
display: grid;
grid-template-columns: 58px 42px 14px minmax(0, 1fr);
gap: 6px;
align-items: start;
width: 100%;
margin: 0;
padding: 5px 4px;
border: 0;
border-radius: 6px;
background: transparent;
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
white-space: pre-wrap;
word-break: break-word;
}
.ws-log__group-header:hover {
background: rgba(255, 255, 255, 0.03);
}
.ws-log__group-header:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 1px;
}
.ws-log__group-chevron {
color: var(--text-dim);
font-size: 9px;
line-height: 1.6;
user-select: none;
}
.ws-log__group-summary {
min-width: 0;
overflow-wrap: anywhere;
color: var(--text);
}
.ws-log__group-children {
margin: 0 0 4px 18px;
padding-left: 8px;
border-left: 1px solid var(--border);
}
.ws-log__entry--child {
grid-template-columns: 58px 42px minmax(0, 1fr);
opacity: 0.85;
padding-left: 0;
}
.ws-log__group-omit {
padding: 4px 4px 4px 0;
font-size: 10px;
font-style: italic;
color: var(--text-dim);
opacity: 0.75;
}
.ws-log__group--send .ws-log__direction {
color: var(--success);
}
.ws-log__group--recv .ws-log__direction {
color: var(--accent-strong);
}
/* Controls -------------------------------------------------------------- */
.controls {
@@ -720,10 +793,15 @@ body {
align-items: stretch;
}
.ws-log__entry {
.ws-log__entry,
.ws-log__group-header {
grid-template-columns: 54px 38px minmax(0, 1fr);
}
.ws-log__group-header {
grid-template-columns: 54px 38px 12px minmax(0, 1fr);
}
.status {
justify-content: flex-end;
}