From a31b88e003206e22b6d09e921f43c98a4fa8409b Mon Sep 17 00:00:00 2001
From: Mahmoud Mabrouk <mahmoud@agenta.ai>
Date: Tue, 14 Jul 2026 23:09:41 +0200
Subject: [PATCH] fix(frontend): resolve the refractor chunk failure that
 remounts the playground and closes the Advanced drawer

The production webpack build stubbed out react-syntax-highlighter's dynamic
import of refractor/all via an IgnorePlugin. When the agent chat markdown
renderer (AgentChatSlice/assets/markdown.tsx, PrismAsync) highlighted a fenced
code block, that ignored chunk threw "Cannot find module 'refractor/all'",
tripping the Layout error boundary and remounting the playground subtree, which
unmounted the open Advanced drawer.

refractor@5 is installed and resolves every subpath rsh imports (all 297
languages plus /all and /core), so the ignore was stale and purely harmful.
Remove it so the chunk loads.

Claude-Session: https://claude.ai/code/session_01Hyn9365BLPXDmNZShrQkmH
---
 web/oss/next.config.ts | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/web/oss/next.config.ts b/web/oss/next.config.ts
index ebfef7bb00..77b769c93e 100644
--- a/web/oss/next.config.ts
+++ b/web/oss/next.config.ts
@@ -135,17 +135,17 @@ const COMMON_CONFIG: NextConfig = {
                       loader: "swc-loader",
                   })
 
-                  // Ignore problematic ESM imports from @ant-design/x that we don't use
-                  // This prevents build errors for mermaid and refractor packages
+                  // Ignore the mermaid import from @ant-design/x — we don't use that surface.
+                  // NOTE: do not ignore `refractor/*` here. react-syntax-highlighter's PrismAsync
+                  // dynamically imports `refractor/all` at runtime; stubbing it out throws
+                  // "Cannot find module 'refractor/all'" when a chat code block renders, which trips
+                  // the app error boundary and remounts the playground. refractor@5 resolves every
+                  // subpath rsh imports, so the import must be left intact.
                   config.plugins.push(
                       new webpack.IgnorePlugin({
                           resourceRegExp: /^mermaid$/,
                           contextRegExp: /@ant-design[\\/]x/,
                       }),
-                      new webpack.IgnorePlugin({
-                          resourceRegExp: /^refractor\/.+$/,
-                          contextRegExp: /react-syntax-highlighter/,
-                      }),
                   )
 
                   if (!isServer) {