fix(cli) : fix shell colors to match new coloring (#8747)

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>

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

@@ -12,7 +12,7 @@ import { ToolCallStatus } from '../../types.js';
 import { ToolMessage } from './ToolMessage.js';
 import { ToolConfirmationMessage } from './ToolConfirmationMessage.js';
 import { theme } from '../../semantic-colors.js';
-import { SHELL_COMMAND_NAME } from '../../constants.js';
+import { SHELL_COMMAND_NAME, SHELL_NAME } from '../../constants.js';
 import { useConfig } from '../../contexts/ConfigContext.js';
 
 interface ToolGroupMessageProps {
@@ -47,11 +47,15 @@ export const ToolGroupMessage: React.FC<ToolGroupMessageProps> = ({
   );
 
   const config = useConfig();
-  const isShellCommand = toolCalls.some((t) => t.name === SHELL_COMMAND_NAME);
+  const isShellCommand = toolCalls.some(
+    (t) => t.name === SHELL_COMMAND_NAME || t.name === SHELL_NAME,
+  );
   const borderColor =
-    hasPending || isShellCommand || isShellFocused
+    isShellCommand || isShellFocused
-      ? theme.status.warning
+      ? theme.ui.symbol
-      : theme.border.default;
+      : hasPending
+        ? theme.status.warning
+        : theme.border.default;
 
   const staticHeight = /* border */ 2 + /* marginBottom */ 1;
   // This is a bit of a magic number, but it accounts for the border and

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

@@ -14,7 +14,11 @@ import { AnsiOutputText } from '../AnsiOutput.js';
 import { GeminiRespondingSpinner } from '../GeminiRespondingSpinner.js';
 import { MaxSizedBox } from '../shared/MaxSizedBox.js';
 import { ShellInputPrompt } from '../ShellInputPrompt.js';
-import { SHELL_COMMAND_NAME, TOOL_STATUS } from '../../constants.js';
+import {
+  SHELL_COMMAND_NAME,
+  SHELL_NAME,
+  TOOL_STATUS,
+} from '../../constants.js';
 import { theme } from '../../semantic-colors.js';
 import type { AnsiOutput, Config } from '@google/gemini-cli-core';
 
@@ -88,7 +92,7 @@ export const ToolMessage: React.FC<ToolMessageProps> = ({
   return (
     <Box paddingX={1} paddingY={0} flexDirection="column">
       <Box minHeight={1}>
-        <ToolStatusIndicator status={status} />
+        <ToolStatusIndicator status={status} name={name} />
         <ToolInfo
           name={name}
           status={status}
@@ -155,43 +159,50 @@ export const ToolMessage: React.FC<ToolMessageProps> = ({
 
 type ToolStatusIndicatorProps = {
   status: ToolCallStatus;
+  name: string;
 };
 
 const ToolStatusIndicator: React.FC<ToolStatusIndicatorProps> = ({
   status,
-}) => (
+  name,
-  <Box minWidth={STATUS_INDICATOR_WIDTH}>
+}) => {
-    {status === ToolCallStatus.Pending && (
+  const isShell = name === SHELL_COMMAND_NAME || name === SHELL_NAME;
-      <Text color={theme.status.success}>{TOOL_STATUS.PENDING}</Text>
+  const statusColor = isShell ? theme.ui.symbol : theme.status.warning;
-    )}
+
-    {status === ToolCallStatus.Executing && (
+  return (
-      <GeminiRespondingSpinner
+    <Box minWidth={STATUS_INDICATOR_WIDTH}>
-        spinnerType="toggle"
+      {status === ToolCallStatus.Pending && (
-        nonRespondingDisplay={TOOL_STATUS.EXECUTING}
+        <Text color={theme.status.success}>{TOOL_STATUS.PENDING}</Text>
-      />
+      )}
-    )}
+      {status === ToolCallStatus.Executing && (
-    {status === ToolCallStatus.Success && (
+        <GeminiRespondingSpinner
-      <Text color={theme.status.success} aria-label={'Success:'}>
+          spinnerType="toggle"
-        {TOOL_STATUS.SUCCESS}
+          nonRespondingDisplay={TOOL_STATUS.EXECUTING}
-      </Text>
+        />
-    )}
+      )}
-    {status === ToolCallStatus.Confirming && (
+      {status === ToolCallStatus.Success && (
-      <Text color={theme.status.warning} aria-label={'Confirming:'}>
+        <Text color={theme.status.success} aria-label={'Success:'}>
-        {TOOL_STATUS.CONFIRMING}
+          {TOOL_STATUS.SUCCESS}
-      </Text>
+        </Text>
-    )}
+      )}
-    {status === ToolCallStatus.Canceled && (
+      {status === ToolCallStatus.Confirming && (
-      <Text color={theme.status.warning} aria-label={'Canceled:'} bold>
+        <Text color={statusColor} aria-label={'Confirming:'}>
-        {TOOL_STATUS.CANCELED}
+          {TOOL_STATUS.CONFIRMING}
-      </Text>
+        </Text>
-    )}
+      )}
-    {status === ToolCallStatus.Error && (
+      {status === ToolCallStatus.Canceled && (
-      <Text color={theme.status.error} aria-label={'Error:'} bold>
+        <Text color={statusColor} aria-label={'Canceled:'} bold>
-        {TOOL_STATUS.ERROR}
+          {TOOL_STATUS.CANCELED}
-      </Text>
+        </Text>
-    )}
+      )}
-  </Box>
+      {status === ToolCallStatus.Error && (
-);
+        <Text color={theme.status.error} aria-label={'Error:'} bold>
+          {TOOL_STATUS.ERROR}
+        </Text>
+      )}
+    </Box>
+  );
+};
 
 type ToolInfo = {
   name: string;

packages/cli/src/ui/constants.ts

@@ -16,6 +16,8 @@ export const STREAM_DEBOUNCE_MS = 100;
 
 export const SHELL_COMMAND_NAME = 'Shell Command';
 
+export const SHELL_NAME = 'Shell';
+
 // Tool status symbols used in ToolMessage component
 export const TOOL_STATUS = {
   SUCCESS: '✓',