fix: guard React transition runtime usage

[cursor]

Bug and impact

Several client modules imported addTransitionType and ViewTransition directly from react. The installed runtime (react@19.2.8) does not expose either export, so loading affected pages/components can fail during module evaluation or render. This breaks high-traffic navigation/search/past-paper surfaces.

Root cause

The project has canary type definitions for React view transitions, but the actual React runtime package does not provide the experimental transition exports. Recent changes reintroduced direct runtime imports and <ViewTransition> usage instead of using a safe compatibility layer.

Fix

Added app/components/common/react-transition.tsx with runtime-checked helpers and updated navigation, command palette, voice, search, filter, and past-paper grid callers to use it. Added scripts/test-react-transition-runtime-imports.ts to prevent direct runtime imports from coming back.

Validation

• node -e "const r=require('react'); console.log('addTransitionType=', typeof r.addTransitionType, 'ViewTransition=', typeof r.ViewTransition)" -> both undefined, confirming the trigger.
• CI=true corepack pnpm exec tsx scripts/test-react-transition-runtime-imports.ts -> passed and reported both runtime exports as undefined.
• CI=true corepack pnpm build -> compiled successfully and completed TypeScript; failed later during page-data collection because DATABASE_URL is unset in this environment.

  

spent a lot of water and tokens to review your slop

Greptile Summary

This change adds fallbacks for React transition APIs that are unavailable in the installed React runtime and adds a script to detect unsupported transition imports. The script correctly rejects an unsafe import when run directly, but it is not connected to a package command or deployment workflow, leaving the regression check manual.

Confidence Score: 4/5

The React compatibility fallback is supported by a targeted guard, but the guard does not run automatically before deployment.

The missing automation was confirmed by inspecting the package scripts and deployment workflow, then exercising the guard against a temporary unsupported React transition import.

Files Needing Attention: Connect scripts/test-react-transition-runtime-imports.ts through package.json and .github/workflows/deploy-appservice.yml so the check runs automatically.

T-Rex Logs

What T-Rex did

• T-Rex produced a proof for a posted P2 finding; see the corresponding review comment for details.
• T-Rex produced a proof for a posted P1 finding; see the corresponding review comment for details.
• T-Rex completed a general contract validation of the React transition guard, including automation logs and before/after guard run evidence.

_{Ran code and verified through T-Rex}

Comments Outside Diff (1)

1. General comment

   React transition runtime guard is not run by package scripts or CI

   • Bug
     • scripts/test-react-transition-runtime-imports.ts exists and correctly rejects an unsafe React transition runtime import, but no package.json script invokes it and the repository's sole workflow only runs npm run build. Therefore a regression can be merged or deployed without this guard executing.
   • Cause
     • The PR adds the standalone guard at scripts/test-react-transition-runtime-imports.ts:1-73 but does not add it to package.json:5-39 or .github/workflows/deploy-appservice.yml:76-82.
   • Fix
     • Add a dedicated package script (for example, test:react-transition-runtime-imports: tsx scripts/test-react-transition-runtime-imports.ts) and invoke it from the CI validation/build workflow before npm run build (or include it in the build script).

   _{Ran code and verified through T-Rex}

_{Reviews (1): Last reviewed commit: "fix: guard React transition runtime usag..." | Re-trigger Greptile}

Greptile also left 1 inline comment on this PR.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
examcooker-dev	Error		Aug 28, 2026 11:21am

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Updated (UTC)
❌ Deployment failed View logs	examcooker	68ae7e5	Aug 28 2026, 11:19 AM

[greptile-apps]

React transition guard is manual-only

The new guard correctly rejects unsupported React transition imports, but no root package script invokes it and the deployment workflow only runs npm run build. A future direct addTransitionType or ViewTransition import can therefore be merged and deployed without this regression check running. Add the guard to an automated package or CI validation command.

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!

Artifacts

Automation configuration search shows no React transition guard invocation

• Captured package scripts, the only GitHub Actions build step, and the configuration-reference search; the search found no guard invocation, confirming it is not automated.

React transition guard rejects a temporary unsafe runtime import

• Ran the guard with a temporary unsafe `addTransitionType` React import; it reported the fixture and exited 1, proving its failure path is real.

React transition guard passes on the restored repository

• Ran the guard after removing the temporary fixture; it reported the runtime exports and exited 0, showing the committed tree passes manual validation.

_{Ran code and verified through T-Rex}