Fixes for login modal: stop clipboard errors, allow selecting text to copy

Author: jahooma

cli/src/components/login-modal.tsx

@@ -1,10 +1,9 @@
 import { useRenderer } from '@opentui/react'
-import open from 'open'
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 
 import { Button } from './button'
-import { TerminalLink } from './terminal-link'
 import { useLoginMutation } from '../hooks/use-auth-query'
+import { useClipboard } from '../hooks/use-clipboard'
 import { useFetchLoginUrl } from '../hooks/use-fetch-login-url'
 import { useLoginKeyboardHandlers } from '../hooks/use-login-keyboard-handlers'
 import { useLoginPolling } from '../hooks/use-login-polling'
@@ -216,19 +215,6 @@ export const LoginModal = ({
     [maxUrlWidth],
   )
 
-  // Handle login URL activation
-  const handleActivateLoginUrl = useCallback(async () => {
-    if (!loginUrl) {
-      return
-    }
-    try {
-      await open(loginUrl)
-    } catch (err) {
-      logger.error(err, 'Failed to open browser on link click')
-    }
-    return copyToClipboard(loginUrl)
-  }, [loginUrl, copyToClipboard])
-
   // Use custom hook for sheen animation
   const blockColor = getLogoBlockColor(theme.name)
   const accentColor = getLogoAccentColor(theme.name)
@@ -248,6 +234,10 @@ export const LoginModal = ({
     textColor: theme.foreground,
   })
 
+  // Enable auto-copy when user selects text (drag to select)
+  // hasSelection provides visual feedback when text is being selected
+  const { hasSelection } = useClipboard()
+
   // Format URL for display (wrap if needed)
   return (
     <box
@@ -385,29 +375,30 @@ export const LoginModal = ({
             </text>
             <box
               style={{
-                marginTop: isVerySmall ? 1 : 2,
                 width: '100%',
                 flexShrink: 0,
+                flexDirection: 'column',
+                alignItems: 'flex-start',
               }}
             >
-              <TerminalLink
-                text={loginUrl}
-                maxWidth={maxUrlWidth}
-                formatLines={formatLoginUrlLines}
-                color={theme.primary}
-                activeColor={theme.success}
-                underlineOnHover={true}
-                isActive={justCopied}
-                onActivate={handleActivateLoginUrl}
-                containerStyle={{
-                  alignItems: 'flex-start',
-                  flexShrink: 0,
-                }}
-              />
+              {formatLoginUrlLines(loginUrl, maxUrlWidth).map((line, index) => (
+                <text key={index} style={{ wrapMode: 'none' }}>
+                  <span
+                    fg={
+                      justCopied
+                        ? theme.success
+                        : hasSelection
+                          ? theme.info
+                          : theme.primary
+                    }
+                  >
+                    {line}
+                  </span>
+                </text>
+              ))}
             </box>
             <box
               style={{
-                marginTop: isVerySmall ? 1 : 2,
                 flexDirection: 'column',
                 alignItems: 'center',
                 width: '100%',

cli/src/hooks/use-clipboard.ts

@@ -19,6 +19,7 @@ function formatDefaultClipboardMessage(text: string): string | null {
 export const useClipboard = () => {
   const renderer = useRenderer()
   const [statusMessage, setStatusMessage] = useState<string | null>(null)
+  const [hasSelection, setHasSelection] = useState(false)
   const pendingCopyTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(
     null,
   )
@@ -43,6 +44,7 @@ export const useClipboard = () => {
 
       if (!cleanedText || cleanedText.trim().length === 0) {
         pendingSelectionRef.current = null
+        setHasSelection(false)
         if (pendingCopyTimeoutRef.current) {
           clearTimeout(pendingCopyTimeoutRef.current)
           pendingCopyTimeoutRef.current = null
@@ -54,6 +56,9 @@ export const useClipboard = () => {
         return
       }
 
+      // Track that there's an active selection for visual feedback
+      setHasSelection(true)
+
       pendingSelectionRef.current = cleanedText
 
       if (pendingCopyTimeoutRef.current) {
@@ -72,9 +77,14 @@ export const useClipboard = () => {
         void copyTextToClipboard(pending, {
           successMessage,
           durationMs: 3000,
-        }).catch(() => {
-          // Errors are logged within copyTextToClipboard
         })
+          .then(() => {
+            // Clear selection visual state after successful copy
+            setHasSelection(false)
+          })
+          .catch(() => {
+            // Errors are logged within copyTextToClipboard
+          })
       }, 250)
     }
 
@@ -98,5 +108,6 @@ export const useClipboard = () => {
 
   return {
     statusMessage,
+    hasSelection,
   }
 }

cli/src/hooks/use-login-keyboard-handlers.ts

@@ -8,7 +8,7 @@ interface UseLoginKeyboardHandlersParams {
   hasOpenedBrowser: boolean
   loading: boolean
   onFetchLoginUrl: () => void
-  onCopyUrl: (url: string) => void
+  onCopyUrl: (url: string) => Promise<void> | void
 }
 
 /**
@@ -65,7 +65,9 @@ export function useLoginKeyboardHandlers({
             key.preventDefault()
           }
 
-          onCopyUrl(loginUrl)
+          // Fire-and-forget the async copy function with .catch() to prevent
+          // unhandled promise rejections if the implementation changes
+          void Promise.resolve(onCopyUrl(loginUrl)).catch(() => {})
         }
       },
       [loginUrl, hasOpenedBrowser, loading, onCopyUrl, onFetchLoginUrl],

cli/src/utils/clipboard.ts

@@ -86,19 +86,23 @@ export async function copyTextToClipboard(
     } else if (typeof process !== 'undefined' && process.platform) {
       // NOTE: Inline require() is used because this code path only runs in Node.js
       // environments, and we need to check process.platform at runtime first
-      const { execSync } = require('child_process') as {
-        execSync: (command: string, options: { input: string }) => void
+      const { execSync } = require('child_process') as typeof import('child_process')
+      // Use stdio: ['pipe', 'ignore', 'ignore'] to prevent stderr from corrupting the TUI on headless servers
+      // stdin needs 'pipe' for input, stdout/stderr use 'ignore' to discard any output
+      const execOptions: { input: string; stdio: ('pipe' | 'ignore')[] } = {
+        input: text,
+        stdio: ['pipe', 'ignore', 'ignore'],
       }
       if (process.platform === 'darwin') {
-        execSync('pbcopy', { input: text })
+        execSync('pbcopy', execOptions)
       } else if (process.platform === 'linux') {
         try {
-          execSync('xclip -selection clipboard', { input: text })
+          execSync('xclip -selection clipboard', execOptions)
         } catch {
-          execSync('xsel --clipboard --input', { input: text })
+          execSync('xsel --clipboard --input', execOptions)
         }
       } else if (process.platform === 'win32') {
-        execSync('clip', { input: text })
+        execSync('clip', execOptions)
       }
     } else {
       return