fix(web): idle conversations redraw on every display refresh

[isaiahknight-va]

Idle conversations kept rendering every display refresh because the mounted, invisible typing dots still ran their CSS animation. Stop that animation while hidden, preserving the reserved status band and persistent live region. Visible typing and agent responses still animate. Limit the unread dot to three pulses, then keep its static cue and count visible.

The candidate includes browser regressions, regenerated embedded assets, documentation, and Unreleased entries. Thanks @isaiahknight-va.

On AWS Crabbox, all four new cases failed against unchanged production CSS. After the fix, all four passed, followed by full pnpm check. Independent Codex review is scoped-clean through P2, including the embedded assets. Exact-head GitHub CI must pass before merge.

Browser state	Before	After
Idle channel / idle DM	Three hidden typing animations keep running	No running CSS animations
Typing stopped	Three dots keep animating	Dots stop; visible typing still has three animations
Unread jump bar	Pulse still running after eight seconds	Stops after three 1.8-second pulses; bar stays visible

The inspected synthetic Chromium captures below show the preserved idle layout. The regression assertions establish the animation difference; static screenshots alone do not measure rendering or CPU usage. Additional contributor rendering traces are available on the proof branch.

[clawsweeper]

🦞👀
ClawSweeper picked this up.

Pull request received. I will update this pull request when review starts.

ClawSweeper review complete

ClawSweeper finished reviewing this revision. The review result is being finalized.

View the workflow run.

[clawsweeper]

Codex review: needs maintainer review before merge. Reviewed October 7, 2026, 1:46 AM ET / 05:46 UTC (Revision 2).

ClawSweeper review

What this changes

Stops hidden conversation typing dots from animating, limits unread indicators to three pulses, and updates browser regressions, documentation, and embedded web assets.

Merge readiness

✅ Ready for maintainer review

This PR remains useful: main and v0.7.0 still run the continuous animations. The focused patch and inspected browser rendering evidence support landing it, with no blocking findings.

Priority: P2
Reviewed head: cb867fe5a883ce90f589418f83eac315f36d780c

Review scores

Measure	Result	What it means
Overall readiness	🦞 diamond lobster (5/6)	A focused repair with browser before/after rendering diagnostics, targeted regressions, and verified embedded-asset consistency.
Proof confidence	🦞 diamond lobster (5/6) ✨ media proof bonus	Sufficient (linked_artifact): Linked Chromium diagnostics exercise the production conversation UI against a real local server and show idle channel, DM, and settled unread-bar rendering dropping to zero after the same CSS repair. Prepared screenshots corroborate preserved layout; regression tests supplement runtime evidence. No stored-data contract changes.
Patch quality	🦞 diamond lobster (5/6)	No actionable review findings were identified.

Verification

Check	Result	Evidence
Real behavior	Verified	Sufficient (linked_artifact): Linked Chromium diagnostics exercise the production conversation UI against a real local server and show idle channel, DM, and settled unread-bar rendering dropping to zero after the same CSS repair. Prepared screenshots corroborate preserved layout; regression tests supplement runtime evidence. No stored-data contract changes.
Evidence reviewed	9 items	Pinned production change: The introduced CSS limits unread pulses to three iterations and disables typing animations only when the indicator lacks the visible class. Existing reduced-motion rules remain intact. Component and accessibility contract: TypingIndicator remains mounted with a persistent polite live region and toggles visible from typing entries. AgentResponding renders only while active and explicitly carries visible, so the new selector preserves its animation. Real browser rendering results: Inspected the linked proof branch README, harness, headless summaries, and before/after JSON. Chromium exercised the production app against a throwaway dev-bootstrap server: idle channel draws fell from 600 to zero, idle DM draws from 601 to zero, and settled unread-bar paints from 1,200 to zero during ten-second traces. Both embedded scenarios remained idle. These diagnostics establish the changed rendering behavior independently of screenshots.
Findings	None	None.
Security	None	None.

How this fits together

ClickClack’s conversation UI receives typing activity and unread-message state and displays status indicators beside the transcript and composer. Shared CSS controls these indicators in the browser and embedded desktop frontend.

flowchart TD
  A[Typing activity] --> C[Conversation status]
  B[Unread messages] --> C
  C --> D{Indicator visible}
  D -->|Typing visible| E[Animated typing dots]
  D -->|Typing hidden| F[Static reserved status area]
  C --> G[Three unread pulses then static cue]

Loading

Before merge

None.

Agent review details

Security

None.

Review metrics

Metric	Value	Why it matters
Source and regression coverage	production +6/-1; tests +155/-0	The small CSS repair is supported by four focused browser cases; generated asset refreshes are separate.

Technical review

Best possible solution:

Keep idle indicators static while preserving live typing, agent responses, unread counts, layout, and accessibility.

Do we have a high-confidence way to reproduce the issue?

Yes. Main keeps hidden typing dots mounted with infinite animations, and contributor Chromium diagnostics record continuous idle draws before the fix; this reviewer did not execute the app.

Is this the best way to solve the issue?

Yes. Two shared CSS rules remove unnecessary animation without changing component lifecycle, status layout, accessibility, or desktop throttling.

AGENTS.md: found, but no applicable review policy affected this item.

Codex review notes: model internal, reasoning medium; reviewed against d59e80401c77.

Labels

Label changes:

No label changes.

Label justifications:

• P2: Continuous idle rendering wastes browser and desktop resources but does not block conversation workflows.
• rating: 🦞 diamond lobster: Overall readiness is 🦞 diamond lobster; proof is 🦞 diamond lobster and patch quality is 🦞 diamond lobster.
• status: 👀 ready for maintainer look: ClawSweeper has no concrete contributor-facing blocker left for this PR. Sufficient (linked_artifact): Linked Chromium diagnostics exercise the production conversation UI against a real local server and show idle channel, DM, and settled unread-bar rendering dropping to zero after the same CSS repair. Prepared screenshots corroborate preserved layout; regression tests supplement runtime evidence. No stored-data contract changes.
• proof: sufficient: Contributor real behavior proof is sufficient. Linked Chromium diagnostics exercise the production conversation UI against a real local server and show idle channel, DM, and settled unread-bar rendering dropping to zero after the same CSS repair. Prepared screenshots corroborate preserved layout; regression tests supplement runtime evidence. No stored-data contract changes.

Evidence

What I checked:

• Pinned production change: The introduced CSS limits unread pulses to three iterations and disables typing animations only when the indicator lacks the visible class. Existing reduced-motion rules remain intact. (apps/web/src/styles/messages.css:427, cb867fe5a883)
• Component and accessibility contract: TypingIndicator remains mounted with a persistent polite live region and toggles visible from typing entries. AgentResponding renders only while active and explicitly carries visible, so the new selector preserves its animation. (apps/web/src/components/messages/TypingIndicator.svelte:44, d59e80401c77)
• Real browser rendering results: Inspected the linked proof branch README, harness, headless summaries, and before/after JSON. Chromium exercised the production app against a throwaway dev-bootstrap server: idle channel draws fell from 600 to zero, idle DM draws from 601 to zero, and settled unread-bar paints from 1,200 to zero during ten-second traces. Both embedded scenarios remained idle. These diagnostics establish the changed rendering behavior independently of screenshots. (headless/after.json, 40bb24f122f2)
• Desktop corroboration and measurement limits: The linked desktop report documents an Apple M4 Mac with a 144 Hz display using identical measurement instrumentation for both candidates. Closed-to-tray idle draws fell from 1,442 to zero with only the two CSS changes. The report explicitly does not claim an after-fix visible desktop measurement. (desktop-144hz.md, 40bb24f122f2)
• Prepared visual proof: Inspected both downloaded before/after screenshots from the media manifest. They show the preserved idle transcript and composer layout; animation and rendering conclusions come from the linked diagnostics rather than these static images.
• Embedded asset consistency and security: Compared complete original and new generated blobs. The CSS differs only in the two intended rules; the entry JavaScript is identical after asset filename substitutions, and the renamed layout node is byte-identical. HTML references consistently use the new names. No dependency, permission, credential, or executable behavior change was introduced. (apps/api/internal/webassets/dist/_app/immutable/assets/0.BbpWhj-s.css:1, cb867fe5a883)

Likely related people:

• unknown: The claimed source-line change could not be verified from bounded local history. (role: source history unknown; confidence: low)
• shakkernerd: Suggested for follow-up; no historical authorship or introduction is verified. (role: unverified routing candidate; confidence: low)

Rating scale

Score	Internal tier	Crab rank	Meaning
6/6	S	🦀 challenger crab	Exceptional readiness
5/6	A	🦞 diamond lobster	Very strong readiness
4/6	B	🐚 platinum hermit	Good normal PR; ordinary maintainer review
3/6	C	🦐 gold shrimp	Useful, but confidence is limited
2/6	D	🦪 silver shellfish	Proof or implementation needs work
1/6	F	🧂 unranked krab	Not merge-ready
N/A	NA	🌊 off-meta tidepool	Rating does not apply

Overall follows the weaker of proof and patch quality.
Shiny media proof means a screenshot, video, or linked artifact directly shows the changed behavior. Runtime, network, CSP, and security claims still need visible diagnostics.

Workflow

• ClawSweeper keeps one durable marker-backed review comment per issue or PR.
• Re-runs edit this comment so the latest verdict, findings, and automation markers stay together instead of adding duplicate bot comments.
• A fresh review can be triggered by eligible @clawsweeper re-review comments, exact-item GitHub events, scheduled/background review runs, or manual workflow dispatch.
• PR/issue authors and users with repository write access can comment @clawsweeper re-review or @clawsweeper re-run on an open PR or issue to request a fresh review only.
• Maintainers can also comment @clawsweeper review to request a fresh review only.
• Fresh-review commands do not start repair, autofix, rebase, CI repair, or automerge.
• Maintainer-only repair and merge flows require explicit commands such as @clawsweeper autofix, @clawsweeper automerge, @clawsweeper fix ci, or @clawsweeper address review.
• Maintainers can comment @clawsweeper explain to ask for more context, or @clawsweeper stop to stop active automation.

History

Review history (1 earlier review cycle)

• reviewed 2026-10-02T00:09:52.973Z sha f188a74 :: needs maintainer review before merge. :: none

[steipete]

Merged as 022da89. Thanks @isaiahknight-va.

pnpm test:e2e tests/e2e/idle-animations.spec.ts --workers=2 failed all four cases on unchanged production CSS, then passed all four after the fix on AWS Crabbox. Idle channels and DMs went from three running hidden typing animations to zero; visible typing still animates, stopping typing stops the dots, and the unread pulse ends after three cycles while the bar remains visible. Full pnpm check passed, and independent P2 autoreview was clean.

All checks passed on cb867fe: server/web/Docker/browser CI and Windows/macOS/Linux desktop CI, including embedded asset repeatability. The PR’s inspected synthetic captures document the preserved layout; animation-state assertions establish the performance-related behavior change.