fix: guard React transition runtime APIs

[cursor]

Bug and impact

Recent navigation/search changes imported addTransitionType and ViewTransition directly from react, but the app is pinned to react@19.2.8, where both exports are absent at runtime. Loading affected client bundles (home search, nav, command palette, voice navigation, notes/past-paper search/filter pages, and course-paper grid) can fail before render, causing significant user-facing breakage.

Root cause

The Next view-transition docs expose these experimental APIs, but this installed React runtime does not currently provide them. Static named imports and direct <ViewTransition> usage therefore are unsafe for the deployed runtime.

Fix

Added app/components/common/react-transition.tsx as the single runtime-safe access point. addTransitionType now no-ops when unavailable, and OptionalViewTransition renders children directly when React does not export ViewTransition. Migrated all affected call sites to the helper.

Validation

• CI=true corepack pnpm exec tsx scripts/test-react-transition-runtime-imports.ts -> addTransitionType=undefined ViewTransition=undefined Activity=symbol; no unsafe imports found.
• CI=true corepack pnpm build -> compiled successfully and finished TypeScript; failed later during page-data collection because local DATABASE_URL is unset.

  

spent a lot of water and tokens to review your slop

Greptile Summary

This change adds a compatibility layer for React transition APIs so navigation and related UI can continue working when experimental exports are unavailable. The new regression check can be bypassed by a newly added client module with an unsafe named React transition import, and no configured package or CI command runs that check.

The concern that a symbol-valued ViewTransition export would be incorrectly rejected was disproved. With the installed React 19.2.8 runtime, direct rendering of the internal react.view_transition symbol fails, while the current fallback safely renders the children.

Confidence Score: 4/5

The compatibility fallback behaves safely for the exercised React runtime, but the regression protection should be fixed before merge because it does not cover future client modules or run automatically.

A real unlisted client module containing the unsafe named import was created, the committed checker reported success, and configured package and CI files had no invocation of the checker. The other reported concern was directly exercised and contradicted by React's observed rendering behavior.

Files Needing Attention: scripts/test-react-transition-runtime-imports.ts needs to discover relevant client source files rather than relying on a fixed list, and the repository's package or CI configuration needs to invoke it.

T-Rex Logs

What T-Rex did

• T-Rex produced a proof for a posted P1 finding and captured three artifacts to document the reproduction and checks.
• T-Rex ran a controlled React 19.2.8 reproduction to test the ViewTransition symbol rendering, and captured the source and output artifacts.
• T-Rex summarized the test results showing the guard rendered the child fallback for the symbol, while server rendering failed and client rendering emitted an invalid element-type error.
• T-Rex produced a second P1 finding proof with no new artifacts.
• T-Rex documented the fixture harness and related logs showing the checker behavior before and after running the reproduction.

_{Ran code and verified through T-Rex}

Comments Outside Diff (1)

1. General comment

   React transition import checker can be bypassed by new client modules and is not enforced

   • Bug
     • scripts/test-react-transition-runtime-imports.ts only scans the 12 hard-coded files at lines 7–20. A temporary unlisted client module, app/components/trex-unsafe-react-transition-fixture.tsx, containing import { addTransitionType } from "react" was created and the checker exited 0 with No unsafe React transition runtime imports found. The fixture was then removed. Searches across root and CLI package manifests plus Azure Pipelines and GitHub Actions found no invocation of the checker.
   • Cause
     • The checker uses a fixed file allowlist rather than discovering relevant client source files, and it is omitted from package scripts and CI build workflows.
   • Fix
     • Discover applicable app/**/*.{ts,tsx} client source files (excluding generated/dependency directories) instead of maintaining a fixed list, and invoke the checker from an enforced package test/lint script that both CI workflows run.

   _{Ran code and verified through T-Rex}

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

Greptile also left 1 inline comment on this PR.

[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	26c42d7	Aug 25 2026, 11:07 AM

[vercel]

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

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

[greptile-apps]

React transition import checker misses new client modules

This fixed list does not cover future client modules. A temporary unlisted client module containing import { addTransitionType } from "react" was added, but this checker still exited successfully with No unsafe React transition runtime imports found. The check is also absent from the configured package and CI commands, so that unsafe import can be introduced without an automatic failure. Discover applicable client source files instead of maintaining an allowlist, and run the check from an enforced command.

Artifacts

Temporary unsafe React import fixture reproduction script

• The executed shell harness creates an unlisted client fixture, runs the checker, and removes the fixture afterward; takeaway: the claimed bypass is reproducible without persisting source changes.

Configured package and CI invocation search output

• The captured search of both package manifests and both CI workflows returned exit code 1 with no checker references; takeaway: configured project commands do not invoke the checker.

Unsafe unlisted client fixture checker output

• The captured fixture run exited 0 despite an unsafe named React import in a new client module and verified fixture removal; takeaway: the fixed-file checker misses newly added modules.

_{Ran code and verified through T-Rex}