Fix issue #17080 (#17100)

Co-authored-by: Gal Zahavi <38544478+galz10@users.noreply.github.com>

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

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { Box, Text } from 'ink';
 import { ToolCallStatus } from '../../types.js';
 import { GeminiRespondingSpinner } from '../GeminiRespondingSpinner.js';
@@ -12,12 +12,116 @@ import {
   SHELL_COMMAND_NAME,
   SHELL_NAME,
   TOOL_STATUS,
+  SHELL_FOCUS_HINT_DELAY_MS,
 } from '../../constants.js';
 import { theme } from '../../semantic-colors.js';
-import { SHELL_TOOL_NAME } from '@google/gemini-cli-core';
+import {
+  type Config,
+  SHELL_TOOL_NAME,
+  type ToolResultDisplay,
+} from '@google/gemini-cli-core';
+import { useInactivityTimer } from '../../hooks/useInactivityTimer.js';
 
 export const STATUS_INDICATOR_WIDTH = 3;
 
+/**
+ * Returns true if the tool name corresponds to a shell tool.
+ */
+export function isShellTool(name: string): boolean {
+  return (
+    name === SHELL_COMMAND_NAME ||
+    name === SHELL_NAME ||
+    name === SHELL_TOOL_NAME
+  );
+}
+
+/**
+ * Returns true if the shell tool call is currently focusable.
+ */
+export function isThisShellFocusable(
+  name: string,
+  status: ToolCallStatus,
+  config?: Config,
+): boolean {
+  return !!(
+    isShellTool(name) &&
+    status === ToolCallStatus.Executing &&
+    config?.getEnableInteractiveShell()
+  );
+}
+
+/**
+ * Returns true if this specific shell tool call is currently focused.
+ */
+export function isThisShellFocused(
+  name: string,
+  status: ToolCallStatus,
+  ptyId?: number,
+  activeShellPtyId?: number | null,
+  embeddedShellFocused?: boolean,
+): boolean {
+  return !!(
+    isShellTool(name) &&
+    status === ToolCallStatus.Executing &&
+    ptyId === activeShellPtyId &&
+    embeddedShellFocused
+  );
+}
+
+/**
+ * Hook to manage focus hint state.
+ */
+export function useFocusHint(
+  isThisShellFocusable: boolean,
+  isThisShellFocused: boolean,
+  resultDisplay: ToolResultDisplay | undefined,
+) {
+  const [lastUpdateTime, setLastUpdateTime] = useState<Date | null>(null);
+  const [userHasFocused, setUserHasFocused] = useState(false);
+  const showFocusHint = useInactivityTimer(
+    isThisShellFocusable,
+    lastUpdateTime ? lastUpdateTime.getTime() : 0,
+    SHELL_FOCUS_HINT_DELAY_MS,
+  );
+
+  useEffect(() => {
+    if (resultDisplay) {
+      setLastUpdateTime(new Date());
+    }
+  }, [resultDisplay]);
+
+  useEffect(() => {
+    if (isThisShellFocused) {
+      setUserHasFocused(true);
+    }
+  }, [isThisShellFocused]);
+
+  const shouldShowFocusHint =
+    isThisShellFocusable && (showFocusHint || userHasFocused);
+
+  return { shouldShowFocusHint };
+}
+
+/**
+ * Component to render the focus hint.
+ */
+export const FocusHint: React.FC<{
+  shouldShowFocusHint: boolean;
+  isThisShellFocused: boolean;
+}> = ({ shouldShowFocusHint, isThisShellFocused }) => {
+  if (!shouldShowFocusHint) {
+    return null;
+  }
+
+  return (
+    <Box marginLeft={1} flexShrink={0}>
+      <Text color={theme.text.accent}>
+        {isThisShellFocused ? '(Focused)' : '(tab to focus)'}
+      </Text>
+    </Box>
+  );
+};
+
 export type TextEmphasis = 'high' | 'medium' | 'low';
 
 type ToolStatusIndicatorProps = {
@@ -29,10 +133,7 @@ export const ToolStatusIndicator: React.FC<ToolStatusIndicatorProps> = ({
   status,
   name,
 }) => {
-  const isShell =
-    name === SHELL_COMMAND_NAME ||
-    name === SHELL_NAME ||
-    name === SHELL_TOOL_NAME;
+  const isShell = isShellTool(name);
   const statusColor = isShell ? theme.ui.symbol : theme.status.warning;
 
   return (