agent state badge: idle / thinking / offline + age timer
new badge between the status line and the terminal. shows current
state with a glyph + label + age suffix (e.g. '🧠 thinking · 12s').
state transitions are driven from existing SSE turn_start/turn_end —
no harness changes needed. on page load, history backfill detects an
in-flight turn (turn_start without matching turn_end) and starts in
thinking. state-just-changed flash kicks in on each transition. age
timer ticks client-side every 1s.
compacting/napping states will be added when /compact and nap land —
their slots are reserved in the state enum, just unused for now.
This commit is contained in:
parent
0cc25d33d8
commit
211599c589
3 changed files with 96 additions and 2 deletions
|
|
@ -124,6 +124,42 @@ pre.diff {
|
|||
word-break: break-all;
|
||||
max-height: 30em;
|
||||
}
|
||||
#state-row {
|
||||
margin: 0.4em 0 0.2em;
|
||||
}
|
||||
.state-badge {
|
||||
display: inline-block;
|
||||
padding: 0.25em 0.8em;
|
||||
border: 1px solid;
|
||||
border-radius: 999px;
|
||||
font-size: 0.85em;
|
||||
letter-spacing: 0.05em;
|
||||
transition: color 280ms ease, border-color 280ms ease,
|
||||
box-shadow 280ms ease, background 280ms ease;
|
||||
}
|
||||
.state-badge.state-loading {
|
||||
color: var(--muted); border-color: var(--purple-dim);
|
||||
}
|
||||
.state-badge.state-offline {
|
||||
color: var(--muted); border-color: var(--muted);
|
||||
}
|
||||
.state-badge.state-idle {
|
||||
color: var(--cyan); border-color: var(--cyan);
|
||||
text-shadow: 0 0 6px rgba(137, 220, 235, 0.55);
|
||||
}
|
||||
.state-badge.state-thinking {
|
||||
color: var(--amber); border-color: var(--amber);
|
||||
text-shadow: 0 0 6px rgba(250, 179, 135, 0.65);
|
||||
animation: badge-pulse 1.8s ease-in-out infinite;
|
||||
}
|
||||
.state-badge.state-just-changed {
|
||||
animation: state-flash 600ms ease-out;
|
||||
}
|
||||
@keyframes state-flash {
|
||||
0% { box-shadow: 0 0 0 0 currentColor, 0 0 0 0 currentColor; }
|
||||
60% { box-shadow: 0 0 18px -4px currentColor, 0 0 4px 0 currentColor; }
|
||||
100% { box-shadow: 0 0 0 0 currentColor, 0 0 0 0 currentColor; }
|
||||
}
|
||||
/* Terminal-ish wrapper holding the live output + prompt input as one
|
||||
unit. Crust as bg (almost-black), slightly inset, mauve phosphor glow.
|
||||
Frosted-glass backdrop blur: the page bg behind the wrap gets softened,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue