Bug Report 🐛

While exploring the playground architecture, I noticed a race condition with the Monaco Editor instances and a rendering bottleneck tied to the global state management.

Expected Behavior

Syntax error markers generated by the Concerto compiler should exclusively attach to the Concerto editor model. Furthermore, typing inside the editor should only trigger React re-renders for components directly consuming the modified state.

Current Behavior

The ConcertoEditor component attempts to apply error markers by grabbing the first model from the global Monaco instance (monacoInstance.editor.getModels()?.[0]). Because multiple editors (JSON, Markdown, Concerto) mount concurrently, the global index [0] is not guaranteed to be the Concerto model. This causes error markers to either fail silently or attach to the wrong editor panel (like the JSON editor).

Additionally, the Zustand store selectors in ConcertoEditor.tsx and App.tsx return new object references on every state change. Because Zustand uses strict equality by default, this forces full component re-renders on every single keystroke, causing noticeable UI lag.

Possible Solution

1. Capture the specific IStandaloneCodeEditor instance using a useRef during the Monaco onMount event, and apply markers explicitly to editorRef.current.getModel().
2. Wrap all object-returning Zustand selectors in useShallow from zustand/react/shallow to memoize the state and prevent unnecessary render cycles.

Steps to Reproduce

1. Launch the template-playground local development server.
2. Open the UI with both the Concerto and JSON editor panels visible side-by-side.
3. Introduce a deliberate syntax error (e.g., delete a closing brace) in the Concerto editor.
4. Observe the red error markers failing to appear on the Concerto text, or incorrectly appearing on the JSON text.
5. Open React DevTools Profiler, record a session, type a few characters in the editor, and observe the entire component tree re-rendering.

Context (Environment)

This affects the core developer experience within the playground, making debugging Concerto models confusing when errors map to the wrong panels, and degrading typing performance.

Desktop

• OS: Windows / macOS / Linux
• Browser: Chrome / Firefox / Safari
• Version: Latest main branch

Detailed Description

The root of the issue lies in relying on the global monacoInstance array to identify specific text models in a multi-editor environment. By scoping the model directly to the React component that spawns it, we eliminate the race condition. For the performance issue, Zustand's default strict equality fails when a selector returns a constructed object, which requires a shallow comparison hook to resolve.

Possible Implementation

I will open a Pull Request utilizing useRef to scope the Monaco instance in ConcertoEditor.tsx, and integrate useShallow across the primary editor components to optimize the React render tree.