Reviewer fixes 2

Author: jahooma

cli/src/components/codex-connect-banner.tsx

@@ -24,6 +24,7 @@ export const CodexConnectBanner = () => {
   const theme = useTheme()
   const [flowState, setFlowState] = useState<FlowState>('checking')
   const [error, setError] = useState<string | null>(null)
+  const [manualUrl, setManualUrl] = useState<string | null>(null)
   const [isDisconnectHovered, setIsDisconnectHovered] = useState(false)
   const [isConnectHovered, setIsConnectHovered] = useState(false)
 
@@ -41,6 +42,8 @@ export const CodexConnectBanner = () => {
         } else if (callbackStatus === 'error') {
           setError(message ?? 'Authorization failed')
           setFlowState('error')
+        } else if (callbackStatus === 'waiting' && message) {
+          setManualUrl(message)
         }
       }).catch((err) => {
         setError(err instanceof Error ? err.message : 'Failed to start OAuth flow')
@@ -57,12 +60,15 @@ export const CodexConnectBanner = () => {
   const handleConnect = async () => {
     try {
       setFlowState('waiting-for-code')
+      setManualUrl(null)
       await startOAuthFlowWithCallback((callbackStatus, message) => {
         if (callbackStatus === 'success') {
           setFlowState('connected')
         } else if (callbackStatus === 'error') {
           setError(message ?? 'Authorization failed')
           setFlowState('error')
+        } else if (callbackStatus === 'waiting' && message) {
+          setManualUrl(message)
         }
       })
     } catch (err) {
@@ -128,10 +134,17 @@ export const CodexConnectBanner = () => {
       <BottomBanner borderColorKey="info" onClose={handleClose}>
         <box style={{ flexDirection: 'column', gap: 0, flexGrow: 1 }}>
           <text style={{ fg: theme.info }}>Waiting for authorization</text>
-          <text style={{ fg: theme.muted, marginTop: 1 }}>
-            Sign in with your OpenAI account in the browser. The authorization
-            will complete automatically.
-          </text>
+          {manualUrl ? (
+            <text style={{ fg: theme.muted, marginTop: 1 }}>
+              Could not open browser. Open this URL manually:{' '}
+              {manualUrl}
+            </text>
+          ) : (
+            <text style={{ fg: theme.muted, marginTop: 1 }}>
+              Sign in with your OpenAI account in the browser. The authorization
+              will complete automatically.
+            </text>
+          )}
         </box>
       </BottomBanner>
     )

cli/src/utils/codex-oauth.ts

@@ -188,7 +188,7 @@ function getErrorPage(errorMessage: string): string {
       <svg viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
     </div>
     <h1>Authorization Failed</h1>
-    <p class="error-message">${errorMessage}</p>
+    <p class="error-message">${escapeHtml(errorMessage)}</p>
     <div class="hint">
       <p>You can close this window and try again from the terminal.</p>
     </div>
@@ -197,6 +197,15 @@ function getErrorPage(errorMessage: string): string {
 </html>`
 }
 
+function escapeHtml(str: string): string {
+  return str
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;')
+}
+
 // PKCE code verifier and challenge generation
 function generateCodeVerifier(): string {
   // Generate 32 random bytes and encode as base64url
@@ -361,7 +370,8 @@ export function startOAuthFlowWithCallback(
       try {
         await open(authUrl)
       } catch {
-        // Browser open failed, but server is running - user can manually open the URL
+        // Browser open failed - surface the URL so the user can open it manually
+        onStatusChange?.('waiting', authUrl)
       }
     })
   })
@@ -391,8 +401,17 @@ export async function exchangeCodeForTokens(
     )
   }
 
-  // The authorization code might come with a state parameter
-  const code = authorizationCode.trim().split('#')[0]
+  // The authorization code might be a full callback URL or just the code
+  let code: string
+  const trimmed = authorizationCode.trim()
+  try {
+    const parsed = new URL(trimmed)
+    const extractedCode = parsed.searchParams.get('code')
+    code = extractedCode ?? trimmed.split('#')[0]
+  } catch {
+    // Not a URL - treat as a raw authorization code
+    code = trimmed.split('#')[0]
+  }
 
   // Exchange the code for tokens
   // IMPORTANT: Use application/x-www-form-urlencoded, NOT application/json

cli/src/utils/input-modes.ts

@@ -110,7 +110,7 @@ export const INPUT_MODE_CONFIGS: Record<InputMode, InputModeConfig> = {
   'connect:codex': {
     icon: '🔗',
     color: 'info',
-    placeholder: 'paste authorization code here...',
+    placeholder: 'waiting for browser authorization...',
     widthAdjustment: 3, // emoji width + padding
     showAgentModeToggle: false,
     disableSlashSuggestions: true,

sdk/src/__tests__/codex-message-transform.test.ts

@@ -7,7 +7,7 @@ import {
   type ChatMessage,
   type ToolCallState,
   type ImageUrlContentPart,
-} from '../impl/model-provider'
+} from '../impl/codex-transform'
 
 /**
  * Unit tests for Codex OAuth message transformation functions.