UN-3185 [FIX] Restore global Prism for prismjs add-ons (Prompt Studio detail + HITL blank page)

frontend/src/components/custom-tools/combined-output/CombinedOutput.jsx

@@ -1,4 +1,4 @@
-import "prismjs";
+// global Prism is installed eagerly at app entry (helpers/prismSetup.js)
 import "prismjs/components/prism-json";
 import "prismjs/plugins/line-numbers/prism-line-numbers.css";
 import "prismjs/plugins/line-numbers/prism-line-numbers.js";

frontend/src/helpers/prismSetup.js

@@ -0,0 +1,20 @@
+import Prism from "prismjs";
+
+// The prismjs language/plugin add-ons used across the app (`prismjs/components/*`,
+// `prismjs/plugins/*`) register their grammars onto a *bare global* `Prism` and
+// carry no import edge back to prismjs core. Under Vite's code-split production
+// build those add-ons get hoisted into a shared chunk (Combined Output *and* the
+// manual-review ResultEditor both import `prism-json`), which can evaluate before
+// any per-component setup runs — so they threw `ReferenceError: Prism is not
+// defined`, blanking the Prompt Studio detail page and the HITL review page.
+//
+// This module is imported EAGERLY from the app entry (`index.jsx`) so the global
+// is installed at bootstrap, before any lazy chunk — including the shared one
+// holding the add-ons — can load. Assign unconditionally: the global must be THIS
+// instance, the one the add-ons extend and that `Prism.highlightAll()` reads; a
+// `!globalThis.Prism` guard could leave a different, pre-existing Prism in place
+// and silently drop highlighting. The used `Prism` binding also keeps the bundler
+// from tree-shaking core away.
+globalThis.Prism = Prism;
+
+export default Prism;

frontend/src/index.jsx

@@ -1,3 +1,6 @@
+// Install the global `Prism` at bootstrap, before any lazy chunk (incl. the
+// shared one holding prismjs add-ons) can load. See helpers/prismSetup.js.
+import "./helpers/prismSetup";
 import posthog from "posthog-js";
 import { PostHogProvider } from "posthog-js/react";
 import React from "react";