Skip to content

fix(sidebar): pulse the RUN arc under reduced motion so it reads apart from BG - #841

Merged
devswha merged 5 commits into
mainfrom
fix/reduced-motion-run-pulse
Oct 11, 2026
Merged

devswha merged 5 commits into
mainfrom
fix/reduced-motion-run-pulse

Conversation

@devswha

@devswha devswha commented Oct 11, 2026

Copy link
Copy Markdown
Owner

Problem

Under prefers-reduced-motion: reduce, the sidebar's compact RUN arc had animation: none. BG (an agent whose turn waits on background work) is drawn as the same arc held still, so the two looked the same apart from a slight color difference. On a PC with the OS's reduce-motion setting on, a running agent looked frozen while a phone showed it spinning.

Fix

Under reduced motion, the RUN arc takes the shared stepped opacity pulse (var(--dur-pulse) var(--ease-pulse), already used by the other working dots) instead of no animation. Nothing moves or rotates; the arc only changes between full and 0.35 opacity. DESIGN.md's reduced-motion rule names this one exception.

Verification

  • Browser check in an isolated herdr session (check run plus test-herdr.ts), desktop 1280x800, one pane reported working:
    • without reduced motion: animationName sidebar-working, the arc turns (unchanged)
    • reducedMotion: "reduce": animationName pulse, transform none, opacity samples 1 and 0.35
  • src/motion.test.ts passes (the endless animation uses --ease-pulse).

@coderabbitai

coderabbitai Bot commented Oct 11, 2026 •

Copy link
Copy Markdown

Warning

Review limit reached

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

Next included review available in 29 seconds.

Check out review usage here.

View limit details

Limit details: You’ve used all 4 included reviews currently available.

Learn how review limits work.

Review configuration:

⚙️ Run configuration
  • Configuration used: Repository: devswha/herdr-web-ui/.coderabbit.yaml
  • Review profile: CHILL
  • Plan: Advanced
  • Run ID: c98faf45-cbb2-4f4b-9d25-e378b7354d15

📥 Commits

Reviewing files that changed from the base of the PR and between 268be9f and 7eebae5.


📒 Files selected for processing (3)
  • CHANGELOG.md
  • DESIGN.md
  • src/components/Sidebar.css

  • Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

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

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

devswha and others added 3 commits October 12, 2026 06:47
The branch added a second heading above the one main already had; the
entry moves to the end of the existing list.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
@devswha
devswha merged commit 75e03e5 into main Oct 11, 2026
9 checks passed
@devswha
devswha deleted the fix/reduced-motion-run-pulse branch October 11, 2026 22:00
devswha added a commit that referenced this pull request Oct 11, 2026
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
devswha added a commit that referenced this pull request Oct 12, 2026
## Change

Release 0.4.8, from main at ca6db6e (20 PRs since v0.4.7: the 0.4.7
mobile walk-through fixes, two contributor PRs and the revived #793).

- `package.json` and `herdr-plugin.toml`: 0.4.8.
- CHANGELOG: `[Unreleased]` becomes `[0.4.8] - 2026-10-12`, with the
compare links. Twelve entries that had no PR link get theirs (#835 #837
#838 #840 #842 #843 #844+#848 #845 #847 #849 #851 #852). A Maintenance
line says the remote-PC runtime is now version 27.
- `release-summaries.json`: 0.4.8 in en/ko/ja/zh/tr (3 new, 6 improved,
8 fixed). The Turkish lines are not checked by a native speaker.
- `REMOTE_BUNDLE_VERSION` 26 -> 27: #836 adds the `pending-hold` server
feature and #787 serves precompressed assets, so `remote-v27` is
published before the app release.

Every PR merged since v0.4.7 is linked in the section: #787 #788 #793
#835 #836 #837 #838 #839 #840 #841 #842 #843 #844 #845 #846 #847 #848
#849 #851 #852.

## Validation

- `bun scripts/release-notes.ts 0.4.8` renders the summaries and the
full changelog (116 lines).
- `bun run check fast`: generated types, typecheck, build and 2800+ unit
tests pass.

## Release

After this merges and its CI on `main` passes: push `remote-v27`, wait
for its release, then run the Release workflow with `0.4.8`.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-authored-by: Claude Fable 5.1 <noreply@anthropic.com>
devswha added a commit that referenced this pull request Oct 12, 2026
## Change

The sidebar's compact RUN mark was a `LoaderCircle` arc turning in 48 steps; beside the rows it read as flicker. It is now drawn the way T3 Code draws a working thread (`ThreadStatusIndicators.tsx` / `status-pulse` in pingdotgg/t3code):

- **RUN**: an 8px dot in `--status-working` that breathes: full for 40% of a 2 s cycle (`--dur-breathe`, new token), six steps down to opacity 0.5, held, six steps back. The animation is `steps(6)`, so `src/motion.test.ts` still holds.
- Every breathing dot sets its animation's `startTime` to 0 on `animationstart` (`alignBreath`), so several running rows breathe in step instead of each on its own phase.
- **BG** (`waiting`): a still ring in the same color, so RUN and BG differ by shape as well as motion.
- **DONE** (green dot) and **blocked** (red `?`) are unchanged; ready and unknown still draw nothing.
- Reduced motion: #841 made RUN pulse there so a running agent does not look frozen. The breath is opacity only, so it now stays under reduced motion and the arc's `pulse` rule is gone; `DESIGN.md`'s exception is reworded to match.
- `LoaderCircle` is no longer used by the sidebar. `--dur-spin` stays for the command palette's spinner; its comment and DESIGN row now say so.

## Validation

- `bun run check fast`: ok (generated types, typecheck, build, unit 2788 pass / 0 fail).
- Built the site demo (`bun run build:site`) and checked it in a headless browser at 1280x720: working rows have `.sidebar-status-dot` with `animationName` `sidebar-breathe` and no SVG; sampled opacity went 1 → 0.92 → 0.58 → 0.5 in about 250 ms, held, then 0.67 → 0.83 → 1. Screenshots of RUN at full and half, DONE, `?` and the BG ring (the last two injected into the DOM, since the demo does not reach them on its own).

Maintainer commit 0018820: the ui regression checks BG's still ring and RUN's breathing dot instead of the old arc.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant