From 225401ceca433705d11c119b3373913c95129c56 Mon Sep 17 00:00:00 2001
From: "Kai (Tam Nhu) Tran" <61256810+kaitranntt@users.noreply.github.com>
Date: Mon, 11 May 2026 20:43:26 -0400
Subject: [PATCH] fix(ui): render codex config as exact text (#1215)

---
 .../raw-json-settings-editor-panel.tsx        |  3 +
 ui/src/components/shared/code-editor.tsx      | 93 ++++++++++++-------
 ui/src/pages/codex.tsx                        |  1 +
 .../unit/components/ui/code-editor.test.tsx   | 28 ++++++
 4 files changed, 93 insertions(+), 32 deletions(-)

diff --git a/ui/src/components/compatible-cli/raw-json-settings-editor-panel.tsx b/ui/src/components/compatible-cli/raw-json-settings-editor-panel.tsx
index 62dd91f6..fce059e5 100644
--- a/ui/src/components/compatible-cli/raw-json-settings-editor-panel.tsx
+++ b/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"
                 />
diff --git a/ui/src/components/shared/code-editor.tsx b/ui/src/components/shared/code-editor.tsx
index 311e0371..11860fbc 100644
--- a/ui/src/components/shared/code-editor.tsx
+++ b/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
-            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,
-            }}
-          />
+          {plainText ? (
+            <textarea
+              value={value}
+              onChange={(event) => {
+                if (!readonly) onChange(event.target.value);
+              }}
+              readOnly={readonly}
+              wrap="off"
+              spellCheck={false}
+              onFocus={() => setIsFocused(true)}
+              onBlur={() => setIsFocused(false)}
+              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'
+              )}
+              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 */}
-        <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>
+        {!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>
 
       {/* Validation status */}
diff --git a/ui/src/pages/codex.tsx b/ui/src/pages/codex.tsx
index fd9de796..786351cc 100644
--- a/ui/src/pages/codex.tsx
+++ b/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" */
diff --git a/ui/tests/unit/components/ui/code-editor.test.tsx b/ui/tests/unit/components/ui/code-editor.test.tsx
index f3776638..e901ef5e 100644
--- a/ui/tests/unit/components/ui/code-editor.test.tsx
+++ b/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();
+  });
 });