feat: Redesign CLI welcome screen and improve visual consistency

packages/cli/src/ui/components/Composer.tsx

@@ -4,42 +4,46 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { Box, Text, useIsScreenReaderEnabled } from 'ink';
-import { useMemo } from 'react';
+import { Box, useIsScreenReaderEnabled } from 'ink';
+import { useCallback, useMemo, useState } from 'react';
 import { LoadingIndicator } from './LoadingIndicator.js';
-import { ContextSummaryDisplay } from './ContextSummaryDisplay.js';
-import { AutoAcceptIndicator } from './AutoAcceptIndicator.js';
-import { ShellModeIndicator } from './ShellModeIndicator.js';
 import { DetailedMessagesDisplay } from './DetailedMessagesDisplay.js';
 import { InputPrompt, calculatePromptWidths } from './InputPrompt.js';
 import { Footer } from './Footer.js';
 import { ShowMoreLines } from './ShowMoreLines.js';
 import { QueuedMessageDisplay } from './QueuedMessageDisplay.js';
+import { KeyboardShortcuts } from './KeyboardShortcuts.js';
 import { OverflowProvider } from '../contexts/OverflowContext.js';
-import { theme } from '../semantic-colors.js';
-import { isNarrowWidth } from '../utils/isNarrowWidth.js';
 import { useUIState } from '../contexts/UIStateContext.js';
 import { useUIActions } from '../contexts/UIActionsContext.js';
 import { useVimMode } from '../contexts/VimModeContext.js';
 import { useConfig } from '../contexts/ConfigContext.js';
-import { useSettings } from '../contexts/SettingsContext.js';
-import { ApprovalMode } from '@qwen-code/qwen-code-core';
 import { StreamingState } from '../types.js';
 import { ConfigInitDisplay } from '../components/ConfigInitDisplay.js';
 import { t } from '../../i18n/index.js';
 
 export const Composer = () => {
   const config = useConfig();
-  const settings = useSettings();
   const isScreenReaderEnabled = useIsScreenReaderEnabled();
   const uiState = useUIState();
   const uiActions = useUIActions();
   const { vimEnabled } = useVimMode();
   const terminalWidth = process.stdout.columns;
-  const isNarrow = isNarrowWidth(terminalWidth);
   const debugConsoleMaxHeight = Math.floor(Math.max(terminalWidth * 0.2, 5));
 
-  const { contextFileNames, showAutoAcceptIndicator } = uiState;
+  const { showAutoAcceptIndicator } = uiState;
+
+  // State for keyboard shortcuts display toggle
+  const [showShortcuts, setShowShortcuts] = useState(false);
+  const handleToggleShortcuts = useCallback(() => {
+    setShowShortcuts((prev) => !prev);
+  }, []);
+
+  // State for suggestions visibility
+  const [showSuggestions, setShowSuggestions] = useState(false);
+  const handleSuggestionsVisibilityChange = useCallback((visible: boolean) => {
+    setShowSuggestions(visible);
+  }, []);
 
   // Use the container width of InputPrompt for width of DetailedMessagesDisplay
   const { containerWidth } = useMemo(
@@ -48,7 +52,7 @@ export const Composer = () => {
   );
 
   return (
-    <Box flexDirection="column">
+    <Box flexDirection="column" marginTop={1}>
       {!uiState.embeddedShellFocused && (
         <LoadingIndicator
           thought={
@@ -70,55 +74,6 @@ export const Composer = () => {
 
       <QueuedMessageDisplay messageQueue={uiState.messageQueue} />
 
-      <Box
-        marginTop={1}
-        justifyContent={
-          settings.merged.ui?.hideContextSummary
-            ? 'flex-start'
-            : 'space-between'
-        }
-        width="100%"
-        flexDirection={isNarrow ? 'column' : 'row'}
-        alignItems={isNarrow ? 'flex-start' : 'center'}
-      >
-        <Box marginRight={1}>
-          {process.env['GEMINI_SYSTEM_MD'] && (
-            <Text color={theme.status.error}>|⌐■_■| </Text>
-          )}
-          {uiState.ctrlCPressedOnce ? (
-            <Text color={theme.status.warning}>
-              {t('Press Ctrl+C again to exit.')}
-            </Text>
-          ) : uiState.ctrlDPressedOnce ? (
-            <Text color={theme.status.warning}>
-              {t('Press Ctrl+D again to exit.')}
-            </Text>
-          ) : uiState.showEscapePrompt ? (
-            <Text color={theme.text.secondary}>
-              {t('Press Esc again to clear.')}
-            </Text>
-          ) : (
-            !settings.merged.ui?.hideContextSummary && (
-              <ContextSummaryDisplay
-                ideContext={uiState.ideContextState}
-                geminiMdFileCount={uiState.geminiMdFileCount}
-                contextFileNames={contextFileNames}
-                mcpServers={config.getMcpServers()}
-                blockedMcpServers={config.getBlockedMcpServers()}
-                showToolDescriptions={uiState.showToolDescriptions}
-              />
-            )
-          )}
-        </Box>
-        <Box paddingTop={isNarrow ? 1 : 0}>
-          {showAutoAcceptIndicator !== ApprovalMode.DEFAULT &&
-            !uiState.shellModeActive && (
-              <AutoAcceptIndicator approvalMode={showAutoAcceptIndicator} />
-            )}
-          {uiState.shellModeActive && <ShellModeIndicator />}
-        </Box>
-      </Box>
-
       {uiState.showErrorDetails && (
         <OverflowProvider>
           <Box flexDirection="column">
@@ -149,6 +104,9 @@ export const Composer = () => {
           setShellModeActive={uiActions.setShellModeActive}
           approvalMode={showAutoAcceptIndicator}
           onEscapePromptChange={uiActions.onEscapePromptChange}
+          onToggleShortcuts={handleToggleShortcuts}
+          showShortcuts={showShortcuts}
+          onSuggestionsVisibilityChange={handleSuggestionsVisibilityChange}
           focus={true}
           vimHandleInput={uiActions.vimHandleInput}
           isEmbeddedShellFocused={uiState.embeddedShellFocused}
@@ -160,7 +118,13 @@ export const Composer = () => {
         />
       )}
 
-      {!settings.merged.ui?.hideFooter && !isScreenReaderEnabled && <Footer />}
+      {/* Exclusive area: only one component visible at a time */}
+      {!showSuggestions &&
+        (showShortcuts ? (
+          <KeyboardShortcuts />
+        ) : (
+          !isScreenReaderEnabled && <Footer />
+        ))}
     </Box>
   );
 };