🤖 This PR was written by Coder Agents on behalf of Jake Howell.

Fixes DEVEX-736.

Problem

Opening template versions in the template editor leaks Monaco text models. Each version renders one DiffEditor per changed file, and SyntaxHighlighter sets keepCurrentOriginalModel / keepCurrentModifiedModel, which tells @monaco-editor/react not to dispose the underlying text models when the editor unmounts. Because no stable model paths are supplied, every visit creates fresh anonymous models that are never freed. Navigating between versions accumulates models without bound until the tab lags, spins, and eventually OOMs — matching the customer reports on 2.34.5.

The flags themselves are still required: removing them makes the library dispose the models mid-teardown (before the DiffEditorWidget is torn down), which throws.

Fix

Keep the keepCurrent*Model flags, but move the diff editor into its own DiffFile component that owns the model cleanup:

• DiffFile captures the original/modified models in onMount and disposes them in its own unmount effect. Because the effect lives with the diff editor, it runs whenever the diff editor unmounts — including when a file switches diff → plain across versions while SyntaxHighlighter stays mounted (the key={filename} case raised in review), not only on full unmount.
• Disposal is deferred with queueMicrotask so it runs after React's commit and after @monaco-editor/react disposes the widget. Freeing the models in the same synchronous teardown throws TextModel got disposed before DiffEditorWidget model got reset.

Non-diff files use the plain Editor, which already disposes its own model, so they are unaffected. No editor options or UI behavior change.

Evidence

Reproduced locally on a template with 32 versions (9 .tf files each), driving 192 in-app version navigations (single SPA session, no page reloads) and reading monaco.editor.getModels().length via temporary instrumentation.

Before: models climb ~520 per full pass and never release (a sample taken with zero editors on screen still showed 522 live models). After: model count and render latency stay flat across the same workload.

Testing

Added SyntaxHighlighter.stories.tsx with a play regression test (DisposesModelsOnDiffToggle) that reproduces the exact leak: it toggles a single surviving SyntaxHighlighter between diff and plain three times and asserts monaco.editor.getModels().length drops when the diff is removed and returns to the baseline each cycle (no accumulation).

• The test fails on the unfixed behavior (disposal removed): expected 5 to be less than 4 — models grow instead of being freed.

• With the fix it passes with zero Monaco teardown errors:

  $ pnpm test:storybook src/components/SyntaxHighlighter/SyntaxHighlighter.stories.tsx
   Test Files  1 passed (1)
        Tests  3 passed (3)
       Errors  0
  

• pnpm check (biome) — pass

• pnpm lint:types (tsc --noEmit) — pass

• Manual stress test: model count and render latency stay flat across 192 navigations (see Evidence).