Add working wave animation to thread statuses

[derek-0000]

What Changed

• Animate the Working status in web and mobile thread lists
• Reuse shared status text rendering in the sidebar
• Update tests and keyframes for the new wave motion

Why

To nicely better the indication of working threads

UI Changes

Screencast.From.2026-07-22.13-07-31.mp4

Screencast.From.2026-07-22.13-12-49.mp4

Checklist

• This PR is small and focused
• I explained what changed and why
• I included before/after screenshots for any UI changes
• I included a video for animation/interaction changes

---

Note

Low Risk
Presentation-only status UI and CSS animations with reduce-motion hooks; no auth, data, or business-logic changes.

Overview
Working thread status in web and mobile thread lists now uses a staggered letter wave instead of static text or the old sidebar opacity pulse.

On web, shared ThreadStatusText drives the effect via animate-working-wave (per-letter delays, motion-reduce:animate-none). It is wired into status pills and Sidebar v2; the working row keeps a spinning dashed icon and uses aria-label on the status while animated letters stay aria-hidden. CSS replaces --animate-sidebar-working-text with --animate-working-wave and new working-wave keyframes.

On mobile thread list v2, ThreadListV2StatusText runs an equivalent wave with Reanimated (ReduceMotion.System, accessibilityLabel="Working").

Tests cover accessible Working markup and unchanged static labels for other statuses.

^{Reviewed by Cursor Bugbot for commit a26d17d. Bugbot is set up for automated code reviews on this repo. Configure here.}

Note

Add wave animation to 'Working' thread status labels on web and mobile

• Adds per-letter vertical wave animation to the 'Working' status label using staggered animationDelay on web (via new animate-working-wave CSS keyframes) and a SharedValue-driven translateY transform on mobile.
• Introduces ThreadStatusText (web) and WorkingStatusText (mobile) components that conditionally render animated letters for 'Working' and plain text for all other statuses.
• The spinning CircleDashedIcon in the sidebar replaces the previous static icon for working threads.
• All animations respect system reduced-motion preferences (motion-reduce on web, ReduceMotion.System on mobile); mobile cancels the animation on unmount.
• Removes the old --animate-sidebar-working-text CSS token and its keyframes in favor of the new shared working-wave animation.

^{Macroscope summarized a26d17d.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: ae936cb1-7075-4388-b58b-c6a85c500dce

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[cursor]

Cursor Bugbot has reviewed your changes using high effort and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

Want fixes drafted automatically? Bugbot Autofix can create code changes for findings. A team admin can enable Autofix in the Cursor dashboard.

^{Reviewed by Cursor Bugbot for commit a26d17d. Configure here.}

[cursor]

Nested accessible status inside button

Medium Severity

WorkingStatusText marks its container accessible with accessibilityLabel="Working" inside a card Pressable that already exposes accessibilityLabel={thread.title} and accessibilityRole="button". That adds a separate assistive-tech focus stop nested in the row button, unlike other statuses rendered as plain Text, and can split navigation away from the thread action.

 

^{Reviewed by Cursor Bugbot for commit a26d17d. Configure here.}

[macroscopeapp]

Approvability

Verdict: Approved

This PR adds a visual wave animation effect to the 'Working' status text across mobile and web apps. The changes are purely presentational with no runtime behavior impact. One unresolved accessibility comment notes a potential navigation issue with nested accessible elements, which is a minor UX concern rather than a blocking defect.

^{You can customize Macroscope's approvability policy. Learn more.}

[juliusmarminge]

this kills perf