feat(ui): hide cursor when terminal is unfocused (#4012)

This commit is contained in:
Keith Lyons 2025-07-17 20:45:42 -04:00 committed by GitHub
parent 584a50a342
commit 8ade3e7ee2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 171 additions and 1 deletions

View File

@ -67,6 +67,7 @@ import {
useSessionStats,
} from './contexts/SessionContext.js';
import { useGitBranchName } from './hooks/useGitBranchName.js';
import { useFocus } from './hooks/useFocus.js';
import { useBracketedPaste } from './hooks/useBracketedPaste.js';
import { useTextBuffer } from './components/shared/text-buffer.js';
import * as fs from 'fs';
@ -98,6 +99,7 @@ export const AppWrapper = (props: AppProps) => (
);
const App = ({ config, settings, startupWarnings = [], version }: AppProps) => {
const isFocused = useFocus();
useBracketedPaste();
const [updateMessage, setUpdateMessage] = useState<string | null>(null);
const { stdout } = useStdout();
@ -927,6 +929,7 @@ const App = ({ config, settings, startupWarnings = [], version }: AppProps) => {
commandContext={commandContext}
shellModeActive={shellModeActive}
setShellModeActive={setShellModeActive}
focus={isFocused}
/>
)}
</>

View File

@ -453,7 +453,7 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
display = display + ' '.repeat(inputWidth - currentVisualWidth);
}
if (visualIdxInRenderedSet === cursorVisualRow) {
if (focus && visualIdxInRenderedSet === cursorVisualRow) {
const relativeVisualColForHighlight = cursorVisualColAbsolute;
if (relativeVisualColForHighlight >= 0) {

View File

@ -0,0 +1,119 @@
/**
* @license
* Copyright 2025 Google LLC
* SPDX-License-Identifier: Apache-2.0
*/
import { renderHook, act } from '@testing-library/react';
import { EventEmitter } from 'events';
import { useFocus } from './useFocus.js';
import { vi } from 'vitest';
import { useStdin, useStdout } from 'ink';
// Mock the ink hooks
vi.mock('ink', async (importOriginal) => {
const original = await importOriginal<typeof import('ink')>();
return {
...original,
useStdin: vi.fn(),
useStdout: vi.fn(),
};
});
const mockedUseStdin = vi.mocked(useStdin);
const mockedUseStdout = vi.mocked(useStdout);
describe('useFocus', () => {
let stdin: EventEmitter;
let stdout: { write: vi.Func };
beforeEach(() => {
stdin = new EventEmitter();
stdout = { write: vi.fn() };
mockedUseStdin.mockReturnValue({ stdin } as ReturnType<typeof useStdin>);
mockedUseStdout.mockReturnValue({ stdout } as unknown as ReturnType<
typeof useStdout
>);
});
afterEach(() => {
vi.clearAllMocks();
});
it('should initialize with focus and enable focus reporting', () => {
const { result } = renderHook(() => useFocus());
expect(result.current).toBe(true);
expect(stdout.write).toHaveBeenCalledWith('\x1b[?1004h');
});
it('should set isFocused to false when a focus-out event is received', () => {
const { result } = renderHook(() => useFocus());
// Initial state is focused
expect(result.current).toBe(true);
// Simulate focus-out event
act(() => {
stdin.emit('data', Buffer.from('\x1b[O'));
});
// State should now be unfocused
expect(result.current).toBe(false);
});
it('should set isFocused to true when a focus-in event is received', () => {
const { result } = renderHook(() => useFocus());
// Simulate focus-out to set initial state to false
act(() => {
stdin.emit('data', Buffer.from('\x1b[O'));
});
expect(result.current).toBe(false);
// Simulate focus-in event
act(() => {
stdin.emit('data', Buffer.from('\x1b[I'));
});
// State should now be focused
expect(result.current).toBe(true);
});
it('should clean up and disable focus reporting on unmount', () => {
const { unmount } = renderHook(() => useFocus());
// Ensure listener was attached
expect(stdin.listenerCount('data')).toBe(1);
unmount();
// Assert that the cleanup function was called
expect(stdout.write).toHaveBeenCalledWith('\x1b[?1004l');
expect(stdin.listenerCount('data')).toBe(0);
});
it('should handle multiple focus events correctly', () => {
const { result } = renderHook(() => useFocus());
act(() => {
stdin.emit('data', Buffer.from('\x1b[O'));
});
expect(result.current).toBe(false);
act(() => {
stdin.emit('data', Buffer.from('\x1b[O'));
});
expect(result.current).toBe(false);
act(() => {
stdin.emit('data', Buffer.from('\x1b[I'));
});
expect(result.current).toBe(true);
act(() => {
stdin.emit('data', Buffer.from('\x1b[I'));
});
expect(result.current).toBe(true);
});
});

View File

@ -0,0 +1,48 @@
/**
* @license
* Copyright 2025 Google LLC
* SPDX-License-Identifier: Apache-2.0
*/
import { useStdin, useStdout } from 'ink';
import { useEffect, useState } from 'react';
// ANSI escape codes to enable/disable terminal focus reporting
const ENABLE_FOCUS_REPORTING = '\x1b[?1004h';
const DISABLE_FOCUS_REPORTING = '\x1b[?1004l';
// ANSI escape codes for focus events
const FOCUS_IN = '\x1b[I';
const FOCUS_OUT = '\x1b[O';
export const useFocus = () => {
const { stdin } = useStdin();
const { stdout } = useStdout();
const [isFocused, setIsFocused] = useState(true);
useEffect(() => {
const handleData = (data: Buffer) => {
const sequence = data.toString();
const lastFocusIn = sequence.lastIndexOf(FOCUS_IN);
const lastFocusOut = sequence.lastIndexOf(FOCUS_OUT);
if (lastFocusIn > lastFocusOut) {
setIsFocused(true);
} else if (lastFocusOut > lastFocusIn) {
setIsFocused(false);
}
};
// Enable focus reporting
stdout?.write(ENABLE_FOCUS_REPORTING);
stdin?.on('data', handleData);
return () => {
// Disable focus reporting on cleanup
stdout?.write(DISABLE_FOCUS_REPORTING);
stdin?.removeListener('data', handleData);
};
}, [stdin, stdout]);
return isFocused;
};