feat: custom loading phrase when interactive shell requires input (#12535)

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

@@ -14,6 +14,7 @@ import { GeminiRespondingSpinner } from './GeminiRespondingSpinner.js';
 import { formatDuration } from '../utils/formatters.js';
 import { useTerminalSize } from '../hooks/useTerminalSize.js';
 import { isNarrowWidth } from '../utils/isNarrowWidth.js';
+import { INTERACTIVE_SHELL_WAITING_PHRASE } from '../hooks/usePhraseCycler.js';
 
 interface LoadingIndicatorProps {
   currentLoadingPhrase?: string;
@@ -36,7 +37,12 @@ export const LoadingIndicator: React.FC<LoadingIndicatorProps> = ({
     return null;
   }
 
-  const primaryText = thought?.subject || currentLoadingPhrase;
+  // Prioritize the interactive shell waiting phrase over the thought subject
+  // because it conveys an actionable state for the user (waiting for input).
+  const primaryText =
+    currentLoadingPhrase === INTERACTIVE_SHELL_WAITING_PHRASE
+      ? currentLoadingPhrase
+      : thought?.subject || currentLoadingPhrase;
 
   const cancelAndTimerContent =
     streamingState !== StreamingState.WaitingForConfirmation

packages/cli/src/ui/components/messages/ShellToolMessage.tsx

@@ -9,7 +9,11 @@ import { Box, Text, type DOMElement } from 'ink';
 import { ToolCallStatus } from '../../types.js';
 import { ShellInputPrompt } from '../ShellInputPrompt.js';
 import { StickyHeader } from '../StickyHeader.js';
-import { SHELL_COMMAND_NAME, SHELL_NAME } from '../../constants.js';
+import {
+  SHELL_COMMAND_NAME,
+  SHELL_NAME,
+  SHELL_FOCUS_HINT_DELAY_MS,
+} from '../../constants.js';
 import { theme } from '../../semantic-colors.js';
 import { SHELL_TOOL_NAME } from '@google/gemini-cli-core';
 import { useUIActions } from '../../contexts/UIActionsContext.js';
@@ -104,7 +108,7 @@ export const ShellToolMessage: React.FC<ShellToolMessageProps> = ({
 
     const timer = setTimeout(() => {
       setShowFocusHint(true);
-    }, 5000);
+    }, SHELL_FOCUS_HINT_DELAY_MS);
 
     return () => clearTimeout(timer);
   }, [lastUpdateTime]);

packages/cli/src/ui/components/messages/ToolMessage.tsx

@@ -5,7 +5,8 @@
  */
 
 import type React from 'react';
-import { Box } from 'ink';
+import { useState, useEffect } from 'react';
+import { Box, Text } from 'ink';
 import type { IndividualToolCallDisplay } from '../../types.js';
 import { StickyHeader } from '../StickyHeader.js';
 import { ToolResultDisplay } from './ToolResultDisplay.js';
@@ -14,7 +15,17 @@ import {
   ToolInfo,
   TrailingIndicator,
   type TextEmphasis,
+  STATUS_INDICATOR_WIDTH,
 } from './ToolShared.js';
+import {
+  SHELL_COMMAND_NAME,
+  SHELL_FOCUS_HINT_DELAY_MS,
+} from '../../constants.js';
+import { theme } from '../../semantic-colors.js';
+import type { Config } from '@google/gemini-cli-core';
+import { useInactivityTimer } from '../../hooks/useInactivityTimer.js';
+import { ToolCallStatus } from '../../types.js';
+import { ShellInputPrompt } from '../ShellInputPrompt.js';
 
 export type { TextEmphasis };
 
@@ -26,6 +37,10 @@ export interface ToolMessageProps extends IndividualToolCallDisplay {
   isFirst: boolean;
   borderColor: string;
   borderDimColor: boolean;
+  activeShellPtyId?: number | null;
+  embeddedShellFocused?: boolean;
+  ptyId?: number;
+  config?: Config;
 }
 
 export const ToolMessage: React.FC<ToolMessageProps> = ({
@@ -40,41 +55,96 @@ export const ToolMessage: React.FC<ToolMessageProps> = ({
   isFirst,
   borderColor,
   borderDimColor,
-}) => (
-  <Box flexDirection="column" width={terminalWidth}>
-    <StickyHeader
-      width={terminalWidth}
-      isFirst={isFirst}
-      borderColor={borderColor}
-      borderDimColor={borderDimColor}
-    >
-      <ToolStatusIndicator status={status} name={name} />
-      <ToolInfo
-        name={name}
-        status={status}
-        description={description}
-        emphasis={emphasis}
-      />
-      {emphasis === 'high' && <TrailingIndicator />}
-    </StickyHeader>
-    <Box
-      width={terminalWidth}
-      borderStyle="round"
-      borderColor={borderColor}
-      borderDimColor={borderDimColor}
-      borderTop={false}
-      borderBottom={false}
-      borderLeft={true}
-      borderRight={true}
-      paddingX={1}
-      flexDirection="column"
-    >
-      <ToolResultDisplay
-        resultDisplay={resultDisplay}
-        availableTerminalHeight={availableTerminalHeight}
-        terminalWidth={terminalWidth}
-        renderOutputAsMarkdown={renderOutputAsMarkdown}
-      />
+  activeShellPtyId,
+  embeddedShellFocused,
+  ptyId,
+  config,
+}) => {
+  const isThisShellFocused =
+    (name === SHELL_COMMAND_NAME || name === 'Shell') &&
+    status === ToolCallStatus.Executing &&
+    ptyId === activeShellPtyId &&
+    embeddedShellFocused;
+
+  const [lastUpdateTime, setLastUpdateTime] = useState<Date | null>(null);
+  const [userHasFocused, setUserHasFocused] = useState(false);
+  const showFocusHint = useInactivityTimer(
+    !!lastUpdateTime,
+    lastUpdateTime ? lastUpdateTime.getTime() : 0,
+    SHELL_FOCUS_HINT_DELAY_MS,
+  );
+
+  useEffect(() => {
+    if (resultDisplay) {
+      setLastUpdateTime(new Date());
+    }
+  }, [resultDisplay]);
+
+  useEffect(() => {
+    if (isThisShellFocused) {
+      setUserHasFocused(true);
+    }
+  }, [isThisShellFocused]);
+
+  const isThisShellFocusable =
+    (name === SHELL_COMMAND_NAME || name === 'Shell') &&
+    status === ToolCallStatus.Executing &&
+    config?.getEnableInteractiveShell();
+
+  const shouldShowFocusHint =
+    isThisShellFocusable && (showFocusHint || userHasFocused);
+
+  return (
+    <Box flexDirection="column" width={terminalWidth}>
+      <StickyHeader
+        width={terminalWidth}
+        isFirst={isFirst}
+        borderColor={borderColor}
+        borderDimColor={borderDimColor}
+      >
+        <ToolStatusIndicator status={status} name={name} />
+        <ToolInfo
+          name={name}
+          status={status}
+          description={description}
+          emphasis={emphasis}
+        />
+        {shouldShowFocusHint && (
+          <Box marginLeft={1} flexShrink={0}>
+            <Text color={theme.text.accent}>
+              {isThisShellFocused ? '(Focused)' : '(ctrl+f to focus)'}
+            </Text>
+          </Box>
+        )}
+        {emphasis === 'high' && <TrailingIndicator />}
+      </StickyHeader>
+      <Box
+        width={terminalWidth}
+        borderStyle="round"
+        borderColor={borderColor}
+        borderDimColor={borderDimColor}
+        borderTop={false}
+        borderBottom={false}
+        borderLeft={true}
+        borderRight={true}
+        paddingX={1}
+        flexDirection="column"
+      >
+        <ToolResultDisplay
+          resultDisplay={resultDisplay}
+          availableTerminalHeight={availableTerminalHeight}
+          terminalWidth={terminalWidth}
+          renderOutputAsMarkdown={renderOutputAsMarkdown}
+        />
+        {isThisShellFocused && config && (
+          <Box paddingLeft={STATUS_INDICATOR_WIDTH} marginTop={1}>
+            <ShellInputPrompt
+              activeShellPtyId={activeShellPtyId ?? null}
+              focus={embeddedShellFocused}
+            />
+          </Box>
+        )}
+      </Box>
     </Box>
-  </Box>
-);
+  );
+};