Problem

The entire InstantTranslate portal frontend is a single hand-written jQuery file of ~3,470 lines (PrivatePlugins/InstantTranslate/public/resources/js/instanttranslate.js plus humanRevision.js), with the markup built by string concatenation inside a fat index.phtml. There are no components, no build step, no state management and no dev tooling: every change means editing one huge file where UI, state and API calls are interwoven, so even small changes are slow and risky and the app is effectively frozen at its current feature set. The visual design is also dated compared to the rest of translate5.

In addition, translate5 meanwhile established a modern house architecture for portal SPAs with the TermPortal "very simple UI" (TRANSLATE-5213, TermPortal/LightUI/): plain React/JSX, MUI components, shareable state in URL query parameters, an axios service layer with per-endpoint hooks. Keeping InstantTranslate on a completely different (jQuery) stack doubles maintenance and onboarding cost — both portals should converge on one frontend architecture.

Finally, the TermPortal shell page (which hosts both TermPortal and InstantTranslate) still renders its header as an ExtJS maintoolbar. A modern React app inside an ExtJS-headed shell produces an inconsistent look, and shell features the new app needs (theme toggle, locale switching, app switching) cannot be integrated cleanly there.

Solution

Port the InstantTranslate portal to a self-contained React SPA, keeping the PHP backend and the JSON API completely unchanged.

1. Rebuild the UI as a React SPA in PrivatePlugins/InstantTranslate/frontend/ following the LightUI house pattern: plain JSX (no TypeScript), MUI v7 components, all shareable state as URL query parameters via nuqs (active tab, language pairs, theme, ?text= - deeplinking works out of the box), and an axios service layer with per-endpoint hooks including input debounce and abort-on-supersede for translation requests. The app ships a light/dark theme and a mock dev mode (npm run dev works without a PHP backend).
2. Serving stays backward compatible: the existing Php2JsVars bootstrap (window.Editor.data) is kept and application/modules/editor/views/scripts/instanttranslate/index.phtml is slimmed to a mount div plus a fixed-name committed bundle InstantTranslate/public/resources/app/instanttranslate-app.js/.css - no changes to controllers, routes or the API.
3. Full feature parity with the legacy app: backend XLIFF localization plus UI locale switcher, text translation across all language resource slots (batch and sequential), file translation with upload/polling, multi-language file translation (targetResourceCombinations), customer selector on upload, the human-revision send dialog with its custom-fields form, TM matchrate and source-diff display on result cards, sentence segmentation for longer texts, the TermPortal integration on terminology results (term-status icons, open in TermPortal, propose term) and the config-driven help window.
4. Modernize the shell header as a shared React package: the ExtJS maintoolbar on the TermPortal shell page is replaced by a React header (PrivatePlugins/TermPortal/frontend-header/, committed bundle TermPortal/public/resources/header/shell-header.js/.css) serving both portal apps — client logo and customheader iframe, app switcher, attributes toggle, locale switcher, help, theme toggle and logout — talking to the remaining ExtJS shell through a small bridge.