diff --git a/packages/cli/src/ui/components/QwenOAuthProgress.tsx b/packages/cli/src/ui/components/QwenOAuthProgress.tsx index 5c983c31..8505ea32 100644 --- a/packages/cli/src/ui/components/QwenOAuthProgress.tsx +++ b/packages/cli/src/ui/components/QwenOAuthProgress.tsx @@ -5,7 +5,7 @@ */ import React, { useState, useEffect } from 'react'; -import { Box, Text, useInput } from 'ink'; +import { Box, Text, useInput, Static } from 'ink'; import Spinner from 'ink-spinner'; import Link from 'ink-link'; import qrcode from 'qrcode-terminal'; @@ -17,15 +17,22 @@ interface QwenOAuthProgressProps { onCancel: () => void; deviceAuth?: DeviceAuthorizationInfo; authStatus?: - | 'idle' - | 'polling' - | 'success' - | 'error' - | 'timeout' - | 'rate_limit'; + | 'idle' + | 'polling' + | 'success' + | 'error' + | 'timeout' + | 'rate_limit'; authMessage?: string | null; } +interface StaticItem { + key: string; + type: 'title' | 'instructions' | 'url' | 'qr-instructions' | 'qr-code' | 'auth-content'; + url?: string; + qrCode?: string; +} + export function QwenOAuthProgress({ onTimeout, onCancel, @@ -54,24 +61,26 @@ export function QwenOAuthProgress({ return; } - // Generate QR code string - const generateQR = () => { - try { - qrcode.generate( - deviceAuth.verification_uri_complete, - { small: true }, - (qrcode: string) => { - setQrCodeData(qrcode); - }, - ); - } catch (error) { - console.error('Failed to generate QR code:', error); - setQrCodeData(null); - } - }; + // Only generate QR code if we don't have one yet for this URL + if (qrCodeData === null) { + const generateQR = () => { + try { + qrcode.generate( + deviceAuth.verification_uri_complete, + { small: true }, + (qrcode: string) => { + setQrCodeData(qrcode); + }, + ); + } catch (error) { + console.error('Failed to generate QR code:', error); + setQrCodeData(null); + } + }; - generateQR(); - }, [deviceAuth]); + generateQR(); + } + }, [deviceAuth, qrCodeData]); // Countdown timer useEffect(() => { @@ -161,48 +170,70 @@ export function QwenOAuthProgress({ } return ( - - - Qwen OAuth Authentication - - - - Please visit this URL to authorize: - - - - {deviceAuth.verification_uri_complete} - - + <> {qrCodeData && ( - <> - - Or scan the QR code below: - - - {qrCodeData} - - + + {(item: StaticItem) => ( + + + Qwen OAuth Authentication + + + + Please visit this URL to authorize: + + + + + {item.url || ''} + + + + + Or scan the QR code below: + + + + {item.qrCode || ''} + + + )} + )} + - - - Waiting for authorization{dots} - - + + + Waiting for authorization{dots} + + - - - Time remaining: {formatTime(timeRemaining)} - - (Press ESC to cancel) + + + Time remaining: {formatTime(timeRemaining)} + + (Press ESC to cancel) + - + ); }