fix(ui): render codex config as exact text (#1215)

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

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

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

@@ -24,6 +24,7 @@ interface CodeEditorProps {
   onChange: (value: string) => void;
   language?: 'json' | 'yaml' | 'toml';
   readonly?: boolean;
+  plainText?: boolean;
   className?: string;
   minHeight?: string;
   heightMode?: 'content' | 'fill-parent';
@@ -95,6 +96,7 @@ export function CodeEditor({
   onChange,
   language = 'json',
   readonly = false,
+  plainText = false,
   className,
   minHeight = '300px',
   heightMode = 'content',
@@ -211,40 +213,67 @@ export function CodeEditor({
           className={cn(isFillParent && 'scrollbar-editor min-h-0 flex-1 overflow-auto')}
           data-slot={isFillParent ? 'code-editor-viewport' : undefined}
         >
-          <Editor
+          {plainText ? (
-            value={value}
+            <textarea
-            onValueChange={readonly ? () => {} : onChange}
+              value={value}
-            highlight={highlightCode}
+              onChange={(event) => {
-            key={isDark ? 'dark-editor' : 'light-editor'}
+                if (!readonly) onChange(event.target.value);
-            padding={12}
+              }}
-            disabled={readonly}
+              readOnly={readonly}
-            onFocus={() => setIsFocused(true)}
+              wrap="off"
-            onBlur={() => setIsFocused(false)}
+              spellCheck={false}
-            textareaClassName={cn(
+              onFocus={() => setIsFocused(true)}
-              'focus:outline-none font-mono text-sm',
+              onBlur={() => setIsFocused(false)}
-              readonly && 'cursor-not-allowed'
+              className={cn(
-            )}
+                'block w-full resize-none border-0 bg-transparent p-3 font-mono text-sm leading-relaxed',
-            preClassName="font-mono text-sm"
+                'whitespace-pre overflow-auto focus:outline-none',
-            style={{
+                isFillParent ? 'h-full min-h-full' : 'min-h-[300px]',
-              fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
+                readonly && 'cursor-not-allowed'
-              fontSize: '0.875rem',
+              )}
-              minHeight,
+              style={{
-            }}
+                minHeight,
-          />
+                fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
+                fontSize: '0.875rem',
+              }}
+              data-slot="code-editor-plain-textarea"
+            />
+          ) : (
+            <Editor
+              value={value}
+              onValueChange={readonly ? () => {} : onChange}
+              highlight={highlightCode}
+              key={isDark ? 'dark-editor' : 'light-editor'}
+              padding={12}
+              disabled={readonly}
+              onFocus={() => setIsFocused(true)}
+              onBlur={() => setIsFocused(false)}
+              textareaClassName={cn(
+                'focus:outline-none font-mono text-sm',
+                readonly && 'cursor-not-allowed'
+              )}
+              preClassName="font-mono text-sm"
+              style={{
+                fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
+                fontSize: '0.875rem',
+                minHeight,
+              }}
+            />
+          )}
         </div>
 
-        {/* Secrets Toggle Overlay */}
+        {!plainText && (
-        <div className="absolute top-2 right-2 z-10 opacity-50 hover:opacity-100 transition-opacity">
+          <div className="absolute top-2 right-2 z-10 opacity-50 hover:opacity-100 transition-opacity">
-          <Button
+            <Button
-            variant="ghost"
+              variant="ghost"
-            size="icon"
+              size="icon"
-            className="h-6 w-6 bg-background/50 hover:bg-background border shadow-sm rounded-full"
+              className="h-6 w-6 bg-background/50 hover:bg-background border shadow-sm rounded-full"
-            onClick={() => setIsMasked(!isMasked)}
+              onClick={() => setIsMasked(!isMasked)}
-            title={isMasked ? t('codeEditor.revealSensitive') : t('codeEditor.maskSensitive')}
+              title={isMasked ? t('codeEditor.revealSensitive') : t('codeEditor.maskSensitive')}
-          >
+            >
-            {isMasked ? <Eye className="h-3 w-3" /> : <EyeOff className="h-3 w-3" />}
+              {isMasked ? <Eye className="h-3 w-3" /> : <EyeOff className="h-3 w-3" />}
-          </Button>
+            </Button>
-        </div>
+          </div>
+        )}
       </div>
 
       {/* Validation status */}

ui/src/pages/codex.tsx

@@ -253,6 +253,7 @@ export function CodexPage() {
             onRefresh={refreshAll}
             onDiscard={() => setRawDraftText(null)}
             language="toml"
+            plainText
             /* 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

@@ -67,4 +67,32 @@ describe('CodeEditor', () => {
 
     expect(screen.getByText('Valid TOML')).toBeInTheDocument();
   });
+
+  it('can render raw TOML as plain text so visible lines match copied text', () => {
+    const rawToml =
+      'model = "gpt-5.4"\n' +
+      '[mcp_servers.playwright]\n' +
+      'command = "node"\n' +
+      'args = ["--experimental-loader", "./very/long/path/that/should/not/soft/wrap/into/fake/toml/lines.js"]\n';
+
+    const { container } = render(
+      <CodeEditor
+        value={rawToml}
+        onChange={vi.fn()}
+        language="toml"
+        minHeight="100%"
+        heightMode="fill-parent"
+        plainText
+      />
+    );
+
+    const textarea = container.querySelector('[data-slot="code-editor-plain-textarea"]');
+
+    expect(textarea).toBeInstanceOf(HTMLTextAreaElement);
+    expect(textarea).toHaveValue(rawToml);
+    expect(textarea).toHaveAttribute('wrap', 'off');
+    expect(container.querySelector('pre')).not.toBeInTheDocument();
+    expect(container.querySelector('button')).not.toBeInTheDocument();
+    expect(screen.getByText('Valid TOML')).toBeInTheDocument();
+  });
 });