vrr/qwen-code
2
0
Fork 0
mirror of https://github.com/QwenLM/qwen-code.git synced 2026-04-30 04:30:48 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 24

Merge pull request #2315 from xuewenjie123/fix/remove-qrcode-from-oauth-progress-v2

Browse source 
fix: remove QR code from OAuth authentication UI to prevent screen flickering
This commit is contained in:
tanzhenxin 2026-03-12 18:53:25 +08:00 • committed by GitHub
commit e181cfc097
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
10 changed files with 89 additions and 359 deletions
Download patch file Download diff file Expand all files Collapse all files

4
packages/cli/src/ui/components/Header.test.tsx
View file

@ -78,7 +78,7 @@ describe('<Header />', () => {
it('renders with border around info panel', () => {
const { lastFrame } = render(<Header {...defaultProps} />);
expect(lastFrame()).toContain('╭');
expect(lastFrame()).toContain('╯');
expect(lastFrame()).toContain('┌');
expect(lastFrame()).toContain('┐');
});
});

2
packages/cli/src/ui/components/Header.tsx
View file

@ -128,7 +128,7 @@ export const Header: React.FC<HeaderProps> = ({
{/* Right side: Info panel (flexible width, max 60 in two-column layout) */}
<Box
flexDirection="column"
borderStyle="round"
borderStyle="single"
borderColor={theme.border.default}
paddingX={infoPanelPaddingX}
flexGrow={showLogo ? 0 : 1}

177
packages/cli/src/ui/components/QwenOAuthProgress.test.tsx
View file

@ -17,18 +17,6 @@ vi.mock('../hooks/useKeypress.js', () => ({
useKeypress: vi.fn(),
}));
// Mock qrcode-terminal module
vi.mock('qrcode-terminal', () => ({
default: {
generate: vi.fn(),
},
}));
// Mock ink-spinner
vi.mock('ink-spinner', () => ({
default: ({ type }: { type: string }) => `MockSpinner(${type})`,
}));
// Mock ink-link
vi.mock('ink-link', () => ({
default: ({ children }: { children: React.ReactNode; url: string }) =>
@ -95,19 +83,17 @@ describe('QwenOAuthProgress', () => {
const { lastFrame } = renderComponent();
const output = lastFrame();
expect(output).toContain('MockSpinner(dots)');
expect(output).toContain('Waiting for Qwen OAuth authentication...');
expect(output).toContain('(Press ESC or CTRL+C to cancel)');
expect(output).toContain('Esc to cancel');
});
it('should render loading state with gray border', () => {
it('should render loading state with single border', () => {
const { lastFrame } = renderComponent();
const output = lastFrame();
// Should not contain auth flow elements
expect(output).not.toContain('Qwen OAuth Authentication');
expect(output).not.toContain('Please visit this URL to authorize:');
// Loading state still shows time remaining with default timeout
// Should contain the auth title even in loading state
expect(output).toContain('Qwen OAuth Authentication');
// Loading state shows time remaining with default timeout
expect(output).toContain('Time remaining:');
});
});
@ -117,44 +103,20 @@ describe('QwenOAuthProgress', () => {
const { lastFrame } = renderComponent({ deviceAuth: mockDeviceAuth });
const output = lastFrame();
// Initially no QR code shown until it's generated, but the status area should be visible
expect(output).toContain('MockSpinner(dots)');
expect(output).toContain('Waiting for authorization');
expect(output).toContain('Time remaining: 5:00');
expect(output).toContain('(Press ESC or CTRL+C to cancel)');
expect(output).toContain('Esc to cancel');
});
it('should display correct URL in Static component when QR code is generated', async () => {
const qrcode = await import('qrcode-terminal');
const mockGenerate = vi.mocked(qrcode.default.generate);
// eslint-disable-next-line @typescript-eslint/no-explicit-any
let qrCallback: any = null;
mockGenerate.mockImplementation((url, options, callback) => {
qrCallback = callback;
});
it('should display correct URL in auth URL display', () => {
const customAuth = createMockDeviceAuth({
verification_uri_complete: 'https://custom.com/auth?code=XYZ789',
});
const { lastFrame, rerender } = renderComponent({
const { lastFrame } = renderComponent({
deviceAuth: customAuth,
});
// Manually trigger the QR code callback
if (qrCallback && typeof qrCallback === 'function') {
qrCallback('Mock QR Code Data');
}
rerender(
<QwenOAuthProgress
onTimeout={mockOnTimeout}
onCancel={mockOnCancel}
deviceAuth={customAuth}
/>,
);
expect(lastFrame()).toContain('https://custom.com/auth?code=XYZ789');
});
@ -282,10 +244,11 @@ describe('QwenOAuthProgress', () => {
/>,
);
// Initial state should have no dots
expect(lastFrame()).toContain('Waiting for authorization');
// Initial state should show '...' (default value)
const initialOutput = lastFrame();
expect(initialOutput).toContain('Waiting for authorization');
// Advance by 500ms to add first dot
// Advance by 500ms to cycle animation
vi.advanceTimersByTime(500);
rerender(
<QwenOAuthProgress
@ -294,9 +257,10 @@ describe('QwenOAuthProgress', () => {
deviceAuth={mockDeviceAuth}
/>,
);
expect(lastFrame()).toContain('Waiting for authorization.');
const after500ms = lastFrame();
expect(after500ms).toContain('Waiting for authorization');
// Advance by another 500ms to add second dot
// Advance by another 500ms to continue animation
vi.advanceTimersByTime(500);
rerender(
<QwenOAuthProgress
@ -305,9 +269,10 @@ describe('QwenOAuthProgress', () => {
deviceAuth={mockDeviceAuth}
/>,
);
expect(lastFrame()).toContain('Waiting for authorization..');
const after1000ms = lastFrame();
expect(after1000ms).toContain('Waiting for authorization');
// Advance by another 500ms to add third dot
// Advance by another 500ms to complete cycle
vi.advanceTimersByTime(500);
rerender(
<QwenOAuthProgress
@ -316,110 +281,8 @@ describe('QwenOAuthProgress', () => {
deviceAuth={mockDeviceAuth}
/>,
);
expect(lastFrame()).toContain('Waiting for authorization...');
// Advance by another 500ms to reset dots
vi.advanceTimersByTime(500);
rerender(
<QwenOAuthProgress
onTimeout={mockOnTimeout}
onCancel={mockOnCancel}
deviceAuth={mockDeviceAuth}
/>,
);
expect(lastFrame()).toContain('Waiting for authorization');
});
});
describe('QR Code functionality', () => {
it('should generate QR code when deviceAuth is provided', async () => {
const qrcode = await import('qrcode-terminal');
const mockGenerate = vi.mocked(qrcode.default.generate);
mockGenerate.mockImplementation((url, options, callback) => {
callback!('Mock QR Code Data');
});
render(
<QwenOAuthProgress
onTimeout={mockOnTimeout}
onCancel={mockOnCancel}
deviceAuth={mockDeviceAuth}
/>,
);
expect(mockGenerate).toHaveBeenCalledWith(
mockDeviceAuth.verification_uri_complete,
{ small: true },
expect.any(Function),
);
});
it('should display QR code in Static component when available', async () => {
const qrcode = await import('qrcode-terminal');
const mockGenerate = vi.mocked(qrcode.default.generate);
// eslint-disable-next-line @typescript-eslint/no-explicit-any
let qrCallback: any = null;
mockGenerate.mockImplementation((url, options, callback) => {
qrCallback = callback;
});
const { lastFrame, rerender } = render(
<QwenOAuthProgress
onTimeout={mockOnTimeout}
onCancel={mockOnCancel}
deviceAuth={mockDeviceAuth}
/>,
);
// Manually trigger the QR code callback
if (qrCallback && typeof qrCallback === 'function') {
qrCallback('Mock QR Code Data');
}
rerender(
<QwenOAuthProgress
onTimeout={mockOnTimeout}
onCancel={mockOnCancel}
deviceAuth={mockDeviceAuth}
/>,
);
const output = lastFrame();
expect(output).toContain('Or scan the QR code below:');
expect(output).toContain('Mock QR Code Data');
});
it('should handle QR code generation errors gracefully', async () => {
const qrcode = await import('qrcode-terminal');
const mockGenerate = vi.mocked(qrcode.default.generate);
mockGenerate.mockImplementation(() => {
throw new Error('QR Code generation failed');
});
const { lastFrame } = render(
<QwenOAuthProgress
onTimeout={mockOnTimeout}
onCancel={mockOnCancel}
deviceAuth={mockDeviceAuth}
/>,
);
// Should not crash and should not show QR code section since QR generation failed
const output = lastFrame();
expect(output).not.toContain('Or scan the QR code below:');
});
it('should not generate QR code when deviceAuth is null', async () => {
const qrcode = await import('qrcode-terminal');
const mockGenerate = vi.mocked(qrcode.default.generate);
render(
<QwenOAuthProgress onTimeout={mockOnTimeout} onCancel={mockOnCancel} />,
);
expect(mockGenerate).not.toHaveBeenCalled();
const after1500ms = lastFrame();
expect(after1500ms).toContain('Waiting for authorization');
});
});

234
packages/cli/src/ui/components/QwenOAuthProgress.tsx
View file

@ -5,14 +5,11 @@
*/
import type React from 'react';
import { useState, useEffect, useMemo } from 'react';
import { useState, useEffect } from 'react';
import { Box, Text } from 'ink';
import Spinner from 'ink-spinner';
import Link from 'ink-link';
import qrcode from 'qrcode-terminal';
import { Colors } from '../colors.js';
import { theme } from '../semantic-colors.js';
import type { DeviceAuthorizationData } from '@qwen-code/qwen-code-core';
import { createDebugLogger } from '@qwen-code/qwen-code-core';
import { useKeypress } from '../hooks/useKeypress.js';
import { t } from '../../i18n/index.js';
@ -30,98 +27,10 @@ interface QwenOAuthProgressProps {
authMessage?: string | null;
}
const debugLogger = createDebugLogger('QWEN_OAUTH_PROGRESS');
/**
* Static QR Code Display Component
* Renders the QR code and URL once and doesn't re-render unless the URL changes
*/
function QrCodeDisplay({
verificationUrl,
qrCodeData,
}: {
verificationUrl: string;
qrCodeData: string | null;
}): React.JSX.Element | null {
if (!qrCodeData) {
return null;
}
return (
<Box
borderStyle="round"
borderColor={Colors.AccentBlue}
flexDirection="column"
padding={1}
width="100%"
>
<Text bold color={Colors.AccentBlue}>
{t('Qwen OAuth Authentication')}
</Text>
<Box marginTop={1}>
<Text>{t('Please visit this URL to authorize:')}</Text>
</Box>
<Link url={verificationUrl} fallback={false}>
<Text color={Colors.AccentGreen} bold>
{verificationUrl}
</Text>
</Link>
<Box marginTop={1}>
<Text>{t('Or scan the QR code below:')}</Text>
</Box>
<Box marginTop={1}>
<Text>{qrCodeData}</Text>
</Box>
</Box>
);
}
/**
* Dynamic Status Display Component
* Shows the loading spinner, timer, and status messages
*/
function StatusDisplay({
timeRemaining,
dots,
}: {
timeRemaining: number;
dots: string;
}): React.JSX.Element {
const formatTime = (seconds: number): string => {
const minutes = Math.floor(seconds / 60);
const remainingSeconds = seconds % 60;
return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;
};
return (
<Box
borderStyle="round"
borderColor={Colors.AccentBlue}
flexDirection="column"
padding={1}
width="100%"
>
<Box marginTop={1}>
<Text>
<Spinner type="dots" /> {t('Waiting for authorization')}
{dots}
</Text>
</Box>
<Box marginTop={1} justifyContent="space-between">
<Text color={Colors.Gray}>
{t('Time remaining:')} {formatTime(timeRemaining)}
</Text>
<Text color={Colors.AccentPurple}>
{t('(Press ESC or CTRL+C to cancel)')}
</Text>
</Box>
</Box>
);
function formatTime(seconds: number): string {
const minutes = Math.floor(seconds / 60);
const remainingSeconds = seconds % 60;
return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;
}
export function QwenOAuthProgress({
@ -133,13 +42,11 @@ export function QwenOAuthProgress({
}: QwenOAuthProgressProps): React.JSX.Element {
const defaultTimeout = deviceAuth?.expires_in || 300; // Default 5 minutes
const [timeRemaining, setTimeRemaining] = useState<number>(defaultTimeout);
const [dots, setDots] = useState<string>('');
const [qrCodeData, setQrCodeData] = useState<string | null>(null);
const [dots, setDots] = useState<string>('...');
useKeypress(
(key) => {
if (authStatus === 'timeout' || authStatus === 'error') {
// Any key press in timeout or error state should trigger cancel to return to auth dialog
onCancel();
} else if (key.name === 'escape' || (key.ctrl && key.name === 'c')) {
onCancel();
@ -148,30 +55,6 @@ export function QwenOAuthProgress({
{ isActive: true },
);
// Generate QR code once when device auth is available
useEffect(() => {
if (!deviceAuth?.verification_uri_complete) {
return;
}
const generateQR = () => {
try {
qrcode.generate(
deviceAuth.verification_uri_complete,
{ small: true },
(qrcode: string) => {
setQrCodeData(qrcode);
},
);
} catch (error) {
debugLogger.error('Failed to generate QR code:', error);
setQrCodeData(null);
}
};
generateQR();
}, [deviceAuth?.verification_uri_complete]);
// Countdown timer
useEffect(() => {
const timer = setInterval(() => {
@ -187,41 +70,29 @@ export function QwenOAuthProgress({
return () => clearInterval(timer);
}, [onTimeout]);
// Animated dots
// Animated dots — cycle through fixed-width patterns to avoid layout shift
useEffect(() => {
const dotFrames = ['. ', '.. ', '...'];
let frameIndex = 0;
const dotsTimer = setInterval(() => {
setDots((prev) => {
if (prev.length >= 3) return '';
return prev + '.';
});
frameIndex = (frameIndex + 1) % dotFrames.length;
setDots(dotFrames[frameIndex]!);
}, 500);
return () => clearInterval(dotsTimer);
}, []);
// Memoize the QR code display to prevent unnecessary re-renders
const qrCodeDisplay = useMemo(() => {
if (!deviceAuth?.verification_uri_complete) return null;
return (
<QrCodeDisplay
verificationUrl={deviceAuth.verification_uri_complete}
qrCodeData={qrCodeData}
/>
);
}, [deviceAuth?.verification_uri_complete, qrCodeData]);
// Handle timeout state
if (authStatus === 'timeout') {
return (
<Box
borderStyle="round"
borderColor={Colors.AccentRed}
borderStyle="single"
borderColor={theme.border.default}
flexDirection="column"
padding={1}
width="100%"
>
<Text bold color={Colors.AccentRed}>
<Text bold color={theme.status.error}>
{t('Qwen OAuth Authentication Timeout')}
</Text>
@ -238,7 +109,7 @@ export function QwenOAuthProgress({
</Box>
<Box marginTop={1}>
<Text color={Colors.Gray}>
<Text color={theme.text.secondary}>
{t('Press any key to return to authentication type selection.')}
</Text>
</Box>
@ -249,26 +120,26 @@ export function QwenOAuthProgress({
if (authStatus === 'error') {
return (
<Box
borderStyle="round"
borderColor={Colors.AccentRed}
borderStyle="single"
borderColor={theme.border.default}
flexDirection="column"
padding={1}
width="100%"
>
<Text bold color={Colors.AccentRed}>
Qwen OAuth Authentication Error
<Text bold color={theme.status.error}>
{t('Qwen OAuth Authentication Error')}
</Text>
<Box marginTop={1}>
<Text>
{authMessage ||
'An error occurred during authentication. Please try again.'}
t('An error occurred during authentication. Please try again.')}
</Text>
</Box>
<Box marginTop={1}>
<Text color={Colors.Gray}>
Press any key to return to authentication type selection.
<Text color={theme.text.secondary}>
{t('Press any key to return to authentication type selection.')}
</Text>
</Box>
</Box>
@ -279,38 +150,61 @@ export function QwenOAuthProgress({
if (!deviceAuth) {
return (
<Box
borderStyle="round"
borderColor={Colors.Gray}
borderStyle="single"
borderColor={theme.border.default}
flexDirection="column"
padding={1}
width="100%"
>
<Box>
<Text bold>{t('Qwen OAuth Authentication')}</Text>
<Box marginTop={1} flexDirection="column">
<Text>{t('Waiting for Qwen OAuth authentication...')}</Text>
<Text>
<Spinner type="dots" />
{t('Waiting for Qwen OAuth authentication...')}
{t('Time remaining:')} {formatTime(timeRemaining)}
</Text>
</Box>
<Box marginTop={1} justifyContent="space-between">
<Text color={Colors.Gray}>
{t('Time remaining:')} {Math.floor(timeRemaining / 60)}:
{(timeRemaining % 60).toString().padStart(2, '0')}
</Text>
<Text color={Colors.AccentPurple}>
{t('(Press ESC or CTRL+C to cancel)')}
</Text>
<Box marginTop={1}>
<Text color={theme.text.secondary}>{t('Esc to cancel')}</Text>
</Box>
</Box>
);
}
return (
<Box flexDirection="column" width="100%">
{/* Static QR Code Display */}
{qrCodeDisplay}
<Box
borderStyle="single"
borderColor={theme.border.default}
flexDirection="column"
padding={1}
width="100%"
>
<Text bold>{t('Qwen OAuth Authentication')}</Text>
{/* Dynamic Status Display */}
<StatusDisplay timeRemaining={timeRemaining} dots={dots} />
<Box marginTop={1}>
<Text>{t('Please visit this URL to authorize:')}</Text>
</Box>
<Link url={deviceAuth.verification_uri_complete || ''} fallback={false}>
<Text color={theme.text.link} bold>
{deviceAuth.verification_uri_complete}
</Text>
</Link>
<Box marginTop={1} flexDirection="column">
<Text>
{t('Waiting for authorization')}
{dots}
</Text>
<Text>
{t('Time remaining:')} {formatTime(timeRemaining)}
</Text>
</Box>
<Box marginTop={1}>
<Text color={theme.text.secondary}>{t('Esc to cancel')}</Text>
</Box>
</Box>
);
}