I've completely rewritten the Monaco Editor component to use the @monaco-editor/react package properly without manual CDN script loading. The new implementation uses the package's built-in loader which handles all Monaco initialization automatically, includes proper error line highlighting with visual decorations, maintains all features like syntax highlighting and IntelliSense, and adds a loading state with a spinner while Monaco loads. This approach is much more reliable than manual script loading and should work correctly in the Next.js environment.

I need to read the file before editing it to ensure I don't overwrite important code.

I've completely rewritten the Monaco Editor component to use the @monaco-editor/react package instead of manual CDN loading. This package handles all Monaco initialization automatically and is much more reliable in Next.js environments. The new implementation maintains all features including syntax highlighting, IntelliSense, error line highlighting, and proper event handling, while eliminating the CDN loading issues that were causing the editor to fail.

I've added collapsible functionality to both the left editor panel and right AI analysis panel. Each panel has a collapse button that hides it and shows a floating expand button on the side of the screen. The grid layout dynamically adjusts to give the remaining panel full width when one is collapsed, with smooth transitions for a polished user experience. Users can now maximize the Monaco Editor or AI Analysis panel based on their workflow needs.