Function MonacoTerminal

frontend/src/components/shared/monaco-terminal.tsx:270–547

* Terminal component based on Monaco Editor with ANSI color support. * Provides a read-only code viewer with search functionality, theme support, and ANSI color rendering. * Compatible with the existing Terminal component API.

({
    className,
    logs,
    ref,
    searchValue,
}: MonacoTerminalProps & { ref?: React.RefObject<MonacoTerminalRef | null> })

 * Compatible with the existing Terminal component API.
 */
function MonacoTerminal({
    className,
    logs,
    ref,
    searchValue,
}: MonacoTerminalProps & { ref?: React.RefObject<MonacoTerminalRef | null> }) {
    const editorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>(null);
    const monacoRef = useRef<Monaco | null>(null);
    const { theme } = useTheme();
    const [isEditorReady, setIsEditorReady] = useState(false);
    const prevLogsLengthRef = useRef<number>(0);
    const searchWidgetRef = useRef<null | { findNext: () => void; findPrevious: () => void }>(null);
    const decorationsCollectionRef = useRef<monaco.editor.IEditorDecorationsCollection | null>(null);

    const parsedContent = useMemo(() => parseLogsWithCache(logs), [logs]);

    const content = useMemo(() => parsedContent.map((line) => line.text).join('\n'), [parsedContent]);

    const handleEditorDidMount: OnMount = useCallback((editor, monacoInstance) => {
        editorRef.current = editor;
        monacoRef.current = monacoInstance;
        setIsEditorReady(true);

        editor.updateOptions({
            automaticLayout: true,
            folding: false,
            glyphMargin: false,
            lineDecorationsWidth: 0,
            lineNumbers: 'on',
            lineNumbersMinChars: 5,
            minimap: { enabled: false },
            overviewRulerLanes: 0, // Disable overview ruler for better performance
            padding: { top: 4 },
            readOnly: true,
            renderLineHighlight: 'none',
            renderWhitespace: 'none',
            scrollbar: {
                alwaysConsumeMouseWheel: false,
                horizontal: 'hidden', // Hide horizontal scrollbar completely
                useShadows: false,
                vertical: 'visible',
                verticalScrollbarSize: 10,
            },
            scrollBeyondLastLine: false,
            selectOnLineNumbers: false,
            wordWrap: 'on', // Enable word wrap (simple 'on' works better than 'bounded')
            wrappingIndent: 'same',
            wrappingStrategy: 'simple', // Use simple strategy for better performance
        });

        const ansiStyleId = 'monaco-terminal-ansi-styles';

        if (!document.getElementById(ansiStyleId)) {
            const ansiStyleElement = document.createElement('style');

            ansiStyleElement.id = ansiStyleId;
            ansiStyleElement.textContent = DECORATION_STYLES;
            document.head.appendChild(ansiStyleElement);