fix(ui): restore codex config highlighting (#1216)

ui/src/components/compatible-cli/raw-json-settings-editor-panel.tsx

@@ -23,7 +23,7 @@ interface RawConfigEditorPanelProps {
   onRefresh: () => Promise<void> | void;
   onDiscard?: () => void;
   language?: 'json' | 'yaml' | 'toml';
-  plainText?: boolean;
+  exactText?: boolean;
   loadingLabel?: string;
   parseWarningLabel?: string;
   ownershipNotice?: ReactNode;
@@ -45,7 +45,7 @@ export function RawConfigEditorPanel({
   onRefresh,
   onDiscard,
   language = 'json',
-  plainText = false,
+  exactText = false,
   loadingLabel = 'Loading settings.json...',
   parseWarningLabel = 'Parse warning',
   ownershipNotice,
@@ -130,7 +130,7 @@ export function RawConfigEditorPanel({
                   onChange={onChange}
                   language={language}
                   readonly={readOnly}
-                  plainText={plainText}
+                  exactText={exactText}
                   minHeight="100%"
                   heightMode="fill-parent"
                 />

ui/src/components/shared/code-editor.tsx

@@ -4,7 +4,7 @@
  * Uses react-simple-code-editor + prism-react-renderer for minimal bundle size (~18KB)
  */
 
-import { useState, useCallback, useMemo } from 'react';
+import { useState, useCallback, useMemo, useRef, type UIEvent } from 'react';
 import Editor from 'react-simple-code-editor';
 import { Highlight, themes } from 'prism-react-renderer';
 import Prism from 'prismjs';
@@ -24,7 +24,7 @@ interface CodeEditorProps {
   onChange: (value: string) => void;
   language?: 'json' | 'yaml' | 'toml';
   readonly?: boolean;
-  plainText?: boolean;
+  exactText?: boolean;
   className?: string;
   minHeight?: string;
   heightMode?: 'content' | 'fill-parent';
@@ -96,7 +96,7 @@ export function CodeEditor({
   onChange,
   language = 'json',
   readonly = false,
-  plainText = false,
+  exactText = false,
   className,
   minHeight = '300px',
   heightMode = 'content',
@@ -191,6 +191,14 @@ export function CodeEditor({
     ),
     [isDark, language, validation.line, isMasked]
   );
+  const highlightLayerRef = useRef<HTMLDivElement>(null);
+  const syncHighlightScroll = useCallback((event: UIEvent<HTMLTextAreaElement>) => {
+    const layer = highlightLayerRef.current;
+    if (!layer) return;
+
+    const { scrollLeft, scrollTop } = event.currentTarget;
+    layer.style.transform = `translate(${-scrollLeft}px, ${-scrollTop}px)`;
+  }, []);
 
   return (
     <div
@@ -213,30 +221,65 @@ export function CodeEditor({
           className={cn(isFillParent && 'scrollbar-editor min-h-0 flex-1 overflow-auto')}
           data-slot={isFillParent ? 'code-editor-viewport' : undefined}
         >
-          {plainText ? (
-            <textarea
-              value={value}
-              onChange={(event) => {
-                if (!readonly) onChange(event.target.value);
-              }}
-              readOnly={readonly}
-              wrap="off"
-              spellCheck={false}
-              onFocus={() => setIsFocused(true)}
-              onBlur={() => setIsFocused(false)}
+          {exactText ? (
+            // Exact mode keeps the native textarea as the editable/copyable source of truth while
+            // rendering Prism colors behind it with the same non-wrapping layout contract.
+            <div
               className={cn(
-                'block w-full resize-none border-0 bg-transparent p-3 font-mono text-sm leading-relaxed',
-                'whitespace-pre overflow-auto focus:outline-none',
-                isFillParent ? 'h-full min-h-full' : 'min-h-[300px]',
-                readonly && 'cursor-not-allowed'
+                'relative w-full overflow-hidden',
+                isFillParent ? 'h-full min-h-full' : 'min-h-[300px]'
               )}
               style={{
                 minHeight,
-                fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
-                fontSize: '0.875rem',
               }}
-              data-slot="code-editor-plain-textarea"
-            />
+              data-slot="code-editor-exact-highlight-wrapper"
+            >
+              <div
+                ref={highlightLayerRef}
+                aria-hidden="true"
+                className={cn(
+                  'pointer-events-none absolute left-0 top-0 min-w-full p-3 font-mono text-sm leading-relaxed',
+                  'whitespace-pre overflow-visible'
+                )}
+                style={{
+                  fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
+                  fontSize: '0.875rem',
+                  minHeight,
+                  tabSize: 2,
+                  overflowWrap: 'normal',
+                  wordBreak: 'normal',
+                }}
+                data-slot="code-editor-highlight-layer"
+              >
+                {highlightCode(value)}
+              </div>
+              <textarea
+                value={value}
+                onChange={(event) => {
+                  if (!readonly) onChange(event.target.value);
+                }}
+                readOnly={readonly}
+                wrap="off"
+                spellCheck={false}
+                onFocus={() => setIsFocused(true)}
+                onBlur={() => setIsFocused(false)}
+                onScroll={syncHighlightScroll}
+                className={cn(
+                  'absolute inset-0 z-10 block h-full w-full resize-none border-0 bg-transparent p-3 font-mono text-sm leading-relaxed',
+                  'whitespace-pre overflow-auto text-transparent caret-foreground selection:bg-primary/25 focus:outline-none',
+                  readonly && 'cursor-not-allowed'
+                )}
+                style={{
+                  minHeight,
+                  fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
+                  fontSize: '0.875rem',
+                  tabSize: 2,
+                  overflowWrap: 'normal',
+                  wordBreak: 'normal',
+                }}
+                data-slot="code-editor-plain-textarea"
+              />
+            </div>
           ) : (
             <Editor
               value={value}
@@ -261,19 +304,17 @@ export function CodeEditor({
           )}
         </div>
 
-        {!plainText && (
-          <div className="absolute top-2 right-2 z-10 opacity-50 hover:opacity-100 transition-opacity">
-            <Button
-              variant="ghost"
-              size="icon"
-              className="h-6 w-6 bg-background/50 hover:bg-background border shadow-sm rounded-full"
-              onClick={() => setIsMasked(!isMasked)}
-              title={isMasked ? t('codeEditor.revealSensitive') : t('codeEditor.maskSensitive')}
-            >
-              {isMasked ? <Eye className="h-3 w-3" /> : <EyeOff className="h-3 w-3" />}
-            </Button>
-          </div>
-        )}
+        <div className="absolute top-2 right-2 z-20 opacity-50 hover:opacity-100 transition-opacity">
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-6 w-6 bg-background/50 hover:bg-background border shadow-sm rounded-full"
+            onClick={() => setIsMasked(!isMasked)}
+            title={isMasked ? t('codeEditor.revealSensitive') : t('codeEditor.maskSensitive')}
+          >
+            {isMasked ? <Eye className="h-3 w-3" /> : <EyeOff className="h-3 w-3" />}
+          </Button>
+        </div>
       </div>
 
       {/* Validation status */}

ui/src/pages/codex.tsx

@@ -253,7 +253,7 @@ export function CodexPage() {
             onRefresh={refreshAll}
             onDiscard={() => setRawDraftText(null)}
             language="toml"
-            plainText
+            exactText
             /* TODO i18n: missing key for "Loading config.toml..." */
             loadingLabel="Loading config.toml..."
             /* TODO i18n: missing key for "TOML warning" */

ui/tests/unit/components/ui/code-editor.test.tsx

@@ -1,5 +1,5 @@
 import { describe, expect, it, vi } from 'vitest';
-import { render, screen } from '@tests/setup/test-utils';
+import { fireEvent, render, screen } from '@tests/setup/test-utils';
 
 import { CodeEditor } from '@/components/shared/code-editor';
 
@@ -68,7 +68,7 @@ describe('CodeEditor', () => {
     expect(screen.getByText('Valid TOML')).toBeInTheDocument();
   });
 
-  it('can render raw TOML as plain text so visible lines match copied text', () => {
+  it('renders raw TOML with syntax color while visible lines match copied text', () => {
     const rawToml =
       'model = "gpt-5.4"\n' +
       '[mcp_servers.playwright]\n' +
@@ -82,17 +82,28 @@ describe('CodeEditor', () => {
         language="toml"
         minHeight="100%"
         heightMode="fill-parent"
-        plainText
+        exactText
       />
     );
 
     const textarea = container.querySelector('[data-slot="code-editor-plain-textarea"]');
+    const highlightLayer = container.querySelector('[data-slot="code-editor-highlight-layer"]');
+    const highlightedToken = highlightLayer?.querySelector('span');
 
     expect(textarea).toBeInstanceOf(HTMLTextAreaElement);
     expect(textarea).toHaveValue(rawToml);
     expect(textarea).toHaveAttribute('wrap', 'off');
+    expect(textarea).toHaveClass('text-transparent');
+    expect(highlightLayer).toBeInTheDocument();
+    expect(highlightLayer).toHaveClass('whitespace-pre');
+    expect(highlightedToken).toBeInTheDocument();
     expect(container.querySelector('pre')).not.toBeInTheDocument();
-    expect(container.querySelector('button')).not.toBeInTheDocument();
+    if (textarea instanceof HTMLTextAreaElement && highlightLayer instanceof HTMLElement) {
+      textarea.scrollLeft = 96;
+      textarea.scrollTop = 24;
+      fireEvent.scroll(textarea);
+      expect(highlightLayer.style.transform).toBe('translate(-96px, -24px)');
+    }
     expect(screen.getByText('Valid TOML')).toBeInTheDocument();
   });
 });