feat(frontend): pulse the stop dot while the harness is working

Give live feedback that something is happening the moment a session starts
processing: the red stop dot in the composer beats with a soft heartbeat + halo
while the harness is actively working (running — not waiting at a gate or
finalized), and settles the instant the model hands control back to the reviewer
or the session ends. Ring/scale only (no layout properties animated); honors
prefers-reduced-motion.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2026-07-18 12:33:25 +02:00
co-authored by Claude Opus 4.8
parent 3453f3ae23
commit ccfa3a18bf
4 changed files with 31 additions and 1 deletions
+14
View File
@@ -249,9 +249,23 @@
.thot-awaiting-input:focus {
box-shadow: 0 0 0 3px oklch(var(--success) / 0.18);
}
/* Live-activity pulse: a soft ring emanates from the red stop dot while the harness
is actively working, signalling "something is happening". Ring only (no layout
properties animated); calm 1.6s ease-out cadence, silenced for reduced motion. */
.thot-pulse {
animation: thot-pulse-ring 1.5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.thot-pulse { animation: none; }
}
.thot-prose p + p { margin-top: 1em; }
.thot-prose ul { list-style: disc; }
.thot-prose ol { list-style: decimal; }
.thot-prose ul ul { list-style: circle; }
.thot-prose ol ol { list-style: lower-alpha; }
}
@keyframes thot-pulse-ring {
0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 oklch(var(--primary) / 0.4); }
50% { transform: scale(1.15); box-shadow: 0 0 0 5px oklch(var(--primary) / 0); }
}