fix(ui-kit): respect prefers-reduced-motion across animated ui-kit and miner-ui components

[RealDiligent]

Summary

• 13 packages/loopover-ui-kit components (accordion, alert-dialog, context-menu [2 call sites], dialog, dropdown-menu [2], hover-card, input-otp, menubar [2], navigation-menu [3], popover, select, sheet, tooltip) and 2 apps/loopover-miner-ui components (streaming-text, chat/typing-indicator [3 dots]) paired their animate-* utilities (Radix data-[state=…]:animate-in/animate-out, animate-accordion-up/down, animate-caret-blink, animate-pulse, animate-bounce) with no motion-reduce: variant — so a user with the OS "reduce motion" preference still got full fade/zoom/slide/bounce/blink/caret animation from every menu, dialog, tooltip, popover, and chat affordance.
• Adds motion-reduce:animate-none at each of those 25 call sites — the exact guard skeleton.tsx (animate-pulse motion-reduce:animate-none, Skeleton's animate-pulse doesn't respect prefers-reduced-motion, unlike every other animated ui-kit primitive #7016), state-views.tsx (Spinner's animate-spin motion-reduce:animate-none), and apps/loopover-ui's own site-header.tsx (animate-in … motion-reduce:animate-none) already use — applied inline at each call site, with no new shared "animated" wrapper/abstraction and no non-motion class touched.
• Regression tests: a class-list assertion on a representative Radix content component (AccordionContent, whose animate-accordion-* utilities the issue calls out) and on TypingIndicator's three dots (new typing-indicator.test.tsx), plus a motion-reduce:animate-none assertion added to StreamingText's existing caret test — following the class-list-assertion convention state-views.test.tsx/theme-toggle.test.tsx use.

Closes #8303

Scope

• The PR title follows type(scope): short summary Conventional Commit format, for example fix(api): restore profile access checks.
• This PR is focused and does not mix unrelated backend, UI, MCP, docs, dependency, and deploy changes.
• This follows CONTRIBUTING.md and does not reintroduce GitHub Pages, VitePress, site/, or CNAME.
• I linked a currently open issue this PR resolves (e.g. Closes #123) — a linked open issue is required for every contributor PR.

Validation

• git diff --check
• npm run actionlint
• npm run typecheck
• npm run test:coverage locally; codecov/patch requires ≥99% coverage of the lines AND branches you changed (aim for 100% on your diff so CI variance does not fail near the threshold). Global coverage is a non-blocking trend with a loose 90% backstop, not the gate.
• npm run test:workers
• npm run build:mcp
• npm run test:mcp-pack
• npm run ui:openapi:check
• npm run ui:lint
• npm run ui:typecheck
• npm run ui:build
• npm audit --audit-level=moderate
• New or changed behavior has unit/integration tests for new branches, fallback paths, and sanitizer boundaries

If any required check was skipped, explain why:

• This diff touches only packages/loopover-ui-kit/** and apps/loopover-miner-ui/** (class-list additions + tests). packages/loopover-ui-kit is not in the root vitest.config.ts coverage.include and is not Codecov-gated, and apps/loopover-miner-ui is Codecov-ignored (codecov.yml ignore: - "apps/**") but has its own local vitest coverage floor (85/85/75/85). So root test:coverage/codecov/patch, actionlint, test:workers, build:mcp/test:mcp-pack, ui:openapi:check, and npm audit are not exercised by this change. Verified locally: packages/loopover-ui-kit npm test (incl. new accordion.test.tsx), apps/loopover-miner-ui npm test under its coverage floor (new typing-indicator.test.tsx adds coverage for a previously-untested component; the pre-existing chat-rail.test.tsx mobile-sheet case that depends on a jsdom matchMedia mobile match is unrelated to and untouched by this diff), plus tsc --noEmit and prettier --check on every touched file.

Safety

• No secrets, wallet details, hotkeys, coldkeys, user PATs, private keys, raw trust scores, private rankings, or private maintainer evidence are exposed.
• Public GitHub text stays sanitized, low-noise, and does not imply compensation guarantees or optimization tactics.
• Auth, cookie, CORS, GitHub App, Cloudflare, or session changes include negative-path tests.
• API/OpenAPI/MCP behavior is updated and tested where needed.
• UI changes use live API data or real empty/error/loading states, not production mock/demo fallbacks.
• Visible UI changes include a UI Evidence section below with JPG/JPEG or PNG screenshots arranged as organized, captioned, clickable thumbnails. SVG screenshots are not used as review evidence. Review-only screenshots or recordings are not committed to the repository.
• Public docs/changelogs are updated where needed; changelogs are only edited for release-prep PRs.

UI Evidence

This is an accessibility fix with no at-rest visual difference — the rendered output under the default (no-preference) motion setting is byte-for-byte unchanged. The only behavioral change appears under the OS "reduce motion" preference (@media (prefers-reduced-motion: reduce)):

• Before: with reduce-motion set, opening any menu/dialog/tooltip/popover/select/sheet still played the full fade/zoom/slide animation, an accordion still slid open/closed, the OTP caret still blinked, and the chat typing dots still bounced / the streaming caret still pulsed.
• After: with reduce-motion set, each of those renders in its final state with no animation (motion-reduce:animate-none), while the default-motion experience is completely unchanged.

Because the difference is gated entirely behind a prefers-reduced-motion media query and produces no default-state pixel change, the machine-checkable evidence is the class-list regression tests in this PR (accordion.test.tsx for a Radix content component, typing-indicator.test.tsx for the chat dots, and the added assertion in streaming-text.test.tsx), each asserting the motion-reduce:animate-none guard now sits alongside the animation utility — the same class-list-assertion evidence convention state-views.test.tsx/theme-toggle.test.tsx use, and the same shape the sibling accessibility fixes #7015/#7016 were verified with.

Notes

• motion-reduce:animate-none is applied verbatim per the issue's required pattern ("do not invent a different mechanism") — the identical utility skeleton.tsx/state-views.tsx and site-header.tsx already ship — inline at every call site, never as a new wrapper. Every one of the 15 files listed in the issue is touched.

[superagent-security]

Superagent didn't find any vulnerabilities or security issues in this PR.

[loopover-orb]

Tip

✅ LoopOver review result - approve/merge recommended

_{Review updated: 2026-07-24 11:08:13 UTC}

18 files · 1 AI reviewer · no blockers · readiness 95/100 · CI green · clean

✅ Suggested Action - Approve/Merge

• safe to merge

Review summary
This adds `motion-reduce:animate-none` at 25 call sites across 13 ui-kit components and 2 miner-ui components, following the exact existing convention from skeleton.tsx/state-views.tsx/site-header.tsx. It's a mechanical, low-risk, well-scoped CSS-only fix with no logic changes, and the new/updated tests (accordion, typing-indicator, streaming-text) correctly assert the class is present via class-list checks matching repo test conventions. The tooltip.tsx change is worth double-checking since that component's animate-in/fade-in/zoom-in classes are unconditional (not gated by data-[state=open]) unlike its siblings, but adding motion-reduce:animate-none there is still correct and consistent.

Nits — 5 non-blocking

• The PR touches 15 files with 25 near-identical one-line class additions — real risk is low since each is a mechanical, independently-verifiable diff, but skim carefully for typos in the utility class across files (e.g. dropdown-menu.tsx:69 vs others) since a single misspelled `motion-reduce:animate-none` would silently no-op.
• tooltip.tsx:23's animate-in/fade-in-0/zoom-in-95 classes apply unconditionally (no data-[state=open] gate) unlike every other Radix content component touched here — confirm that's pre-existing behavior and not something this PR should also flip to data-gated for consistency.
• No visual/manual verification is claimed in the description (nor could I run one) — the class-list assertions in the added tests only confirm the string is present in `className`, not that the browser actually suppresses the animation.
• Consider a lint rule or a small test asserting every `animate-*` utility in `packages/loopover-ui-kit/src/components/**` has an adjacent `motion-reduce:animate-none`, since 25 manual sites are easy to miss on the next new animated component (13 ui-kit + 2 miner-ui animated components don't respect prefers-reduced-motion, unlike Skeleton/Button/StateBoundary/Tabs #8303 shows this was already missed 25 times).
• In accordion.test.tsx and typing-indicator.test.tsx, consider also asserting the containing element does NOT independently gate rendering (i.e. the fix is CSS-only, not JS-conditional) to distinguish this pattern from streaming-text.tsx's JS-level `usePrefersReducedMotion` gate for readers of the test suite.

Decision drivers

• ✅ Code review — No blockers (1 reviewer)
• ✅ Gate result — Passing (No configured blocker found.)

Context & advisory signals — never blocks the verdict

Signal	Result	Evidence
Linked issue	✅ Linked	#8303, #7015
Related work	✅ No active overlap found	No same-issue or scoped active PR overlap found.
Change scope	✅ 20/20	Low review scope from cached public metadata (2 linked issues).
Validation posture	✅ 25/25	PR body includes validation/test evidence.
Contributor workload	✅ 10/10	Author activity: 345 registered-repo PR(s), 134 merged, 39 issue(s).
Contributor context	✅ Confirmed Gittensor contributor	RealDiligent; Gittensor profile; 345 PR(s), 39 issue(s).
Improvement	✅ Minor	risk: clean · value: minor · LLM: moderate

Linked issue satisfaction

Addressed
The diff adds motion-reduce:animate-none to all 15 files listed in the issue (13 ui-kit components including all multi-call-site files like context-menu, dropdown-menu, menubar, navigation-menu, plus streaming-text.tsx and typing-indicator.tsx), applied inline without a new abstraction, and includes new regression tests for AccordionContent and TypingIndicator plus an added assertion in streaming-

Review context

• Author: RealDiligent
• Role context: outside_contributor
• Public audience mode: oss maintainer
• Lane context: Repository is configured for direct PR review.
• Public profile languages: Python, Ruby, JavaScript, Svelte, TypeScript, Cuda, Markdown, MDX
• Official Gittensor activity: 345 PR(s), 39 issue(s).
• PR-specific overlap: none found.

Contributor next steps

• Start here: Triage stale or unlinked PRs.

Signal definitions

• Related work = same linked issue, overlapping active PRs, or title/path similarity.
• Change scope = cached public metadata such as size labels, draft state, and review-burden hints.
• Validation posture = whether the PR provides enough public validation/test evidence for maintainer review.
• Contributor workload = public contributor activity and cleanup pressure, not a repo-wide quality failure.
• Contributor context = public GitHub/Gittensor identity context; non-Gittensor status is not a blocker.

🧪 Chat with LoopOver

Ask LoopOver a question about this PR directly in a comment — grounded only in the same cached, public-safe facts shown above, never a new claim.

• @loopover ask <question> answers contribution-quality Q&A with source citations and freshness.
• @loopover chat <question> answers in natural prose from cached decision-pack facts via local inference (maintainer/collaborator; read-only).
• A plain-language @loopover mention with a real question is routed to the closest matching read-only command automatically — no exact syntax required.

Full command reference: https://loopover.ai/docs/loopover-commands

🧪 Experimental — new and may change.

Visual preview

Route	Viewport	Before (production)	After (this PR's preview)	Diff
/	desktop	before /	after /	—
/	mobile	before / (mobile)	after / (mobile)	—

Click any thumbnail to open the full-size screenshot. Before = production · After = this PR's preview deploy.

Scroll preview

Route	Before (production)	After (this PR's preview)
/	before / (scroll)	after / (scroll)

A short scroll-through clip (desktop) — click either thumbnail to open the full animation. Evidence for scroll-linked behavior a single screenshot can't show.

_{🟩 Safe / merged · 🟦 Advisory · 🟨 Held for review · 🟥 Blocked / closed}

---

💰 Earn for open-source contributions like this. Gittensor lets GitHub contributors earn for the work they already do — register to start earning →.

Checked by LoopOver, a quiet PR intelligence layer for OSS maintainers.

• Re-run LoopOver review

[loopover-orb]

LoopOver approves — the gate is satisfied and CI is green.