feat(cli): Add ShellModeIndicator component
This commit introduces a new ShellModeIndicator component to visually signify when shell mode is active. - Displays "shell mode enabled (! to toggle)" in the UI. - The AutoAcceptIndicator is now hidden when shell mode is active to prevent UI clutter.
This commit is contained in:
parent
6cc0087105
commit
db93ea736b
|
@ -16,6 +16,7 @@ import { useAutoAcceptIndicator } from './hooks/useAutoAcceptIndicator.js';
|
||||||
import { Header } from './components/Header.js';
|
import { Header } from './components/Header.js';
|
||||||
import { LoadingIndicator } from './components/LoadingIndicator.js';
|
import { LoadingIndicator } from './components/LoadingIndicator.js';
|
||||||
import { AutoAcceptIndicator } from './components/AutoAcceptIndicator.js';
|
import { AutoAcceptIndicator } from './components/AutoAcceptIndicator.js';
|
||||||
|
import { ShellModeIndicator } from './components/ShellModeIndicator.js';
|
||||||
import { EditorState, InputPrompt } from './components/InputPrompt.js';
|
import { EditorState, InputPrompt } from './components/InputPrompt.js';
|
||||||
import { Footer } from './components/Footer.js';
|
import { Footer } from './components/Footer.js';
|
||||||
import { ThemeDialog } from './components/ThemeDialog.js';
|
import { ThemeDialog } from './components/ThemeDialog.js';
|
||||||
|
@ -352,7 +353,12 @@ export const App = ({
|
||||||
</Text>
|
</Text>
|
||||||
</>
|
</>
|
||||||
</Box>
|
</Box>
|
||||||
{showAutoAcceptIndicator && <AutoAcceptIndicator />}
|
<Box>
|
||||||
|
{showAutoAcceptIndicator && !shellModeActive && (
|
||||||
|
<AutoAcceptIndicator />
|
||||||
|
)}
|
||||||
|
{shellModeActive && <ShellModeIndicator />}
|
||||||
|
</Box>
|
||||||
</Box>
|
</Box>
|
||||||
{isInputActive && (
|
{isInputActive && (
|
||||||
<>
|
<>
|
||||||
|
|
|
@ -0,0 +1,18 @@
|
||||||
|
/**
|
||||||
|
* @license
|
||||||
|
* Copyright 2025 Google LLC
|
||||||
|
* SPDX-License-Identifier: Apache-2.0
|
||||||
|
*/
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import { Box, Text } from 'ink';
|
||||||
|
import { Colors } from '../colors.js';
|
||||||
|
|
||||||
|
export const ShellModeIndicator: React.FC = () => (
|
||||||
|
<Box>
|
||||||
|
<Text color={Colors.AccentYellow}>
|
||||||
|
shell mode enabled
|
||||||
|
<Text color={Colors.SubtleComment}> (! to toggle)</Text>
|
||||||
|
</Text>
|
||||||
|
</Box>
|
||||||
|
);
|
Loading…
Reference in New Issue