fix(desktop): keep working-badge rows painted so the pulse animates smoothly

Closed thread ingress rows render inside .timeline-row-cv, which applies
content-visibility: auto. The browser may skip or throttle rendering work
for contained rows, so the badge's opacity pulse stuttered on the closed
timeline while the same activity animated smoothly in the open thread panel
(which has no containment) — exactly the reported repro signal.

Opt only rows with an active working badge out of containment via a
data-agent-working attribute on the row wrapper, mirroring the existing
:hover/:focus-within un-pause rule. Scope stays tight: at most the one or
two rows with live agent activity lose containment, and only while the
badge is showing.

Co-authored-by: Taylor Ho <taylorkmho@gmail.com>
Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
This commit is contained in:
npub1223z34hd7vtwc6qj4s7flsxkj644nlre2nthu7lrrmkumhu3xddsrx9r6w
2026-07-06 22:16:40 -07:00
parent 7eb0a67933
commit fc69b77098
2 changed files with 16 additions and 0 deletions

View File

@@ -283,6 +283,13 @@ export const TimelineMessageList = React.memo(function TimelineMessageList({
{group.items.map((item) => (
<div
className="timeline-row-cv"
data-agent-working={
item.kind === "message" &&
item.entry.summary != null &&
workingThreadHeadIds?.has(item.entry.message.id)
? "true"
: undefined
}
key={getTimelineItemKey(item)}
style={timelineRowReserveStyle(item)}
>

View File

@@ -22,6 +22,15 @@
content-visibility: visible;
}
/* Rows with an animated working badge must stay painted: under
content-visibility: auto the browser may skip/throttle rendering work for
off-screen or contained rows, which makes the badge pulse stutter on
closed thread ingress rows (the open-thread panel has no containment and
animates smoothly). Scoped to the 1-2 rows with active agent work. */
.timeline-row-cv[data-agent-working="true"] {
content-visibility: visible;
}
.content-visibility-auto-interactive {
content-visibility: auto;
contain-intrinsic-size: auto 200px;