From db93ea736b0af04d9205de81f5d0b44de8fe1af6 Mon Sep 17 00:00:00 2001
From: Taylor Mullen <ntaylormullen@google.com>
Date: Sun, 18 May 2025 22:16:57 -0700
Subject: [PATCH] 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.
---
 packages/cli/src/ui/App.tsx                    |  8 +++++++-
 .../src/ui/components/ShellModeIndicator.tsx   | 18 ++++++++++++++++++
 2 files changed, 25 insertions(+), 1 deletion(-)
 create mode 100644 packages/cli/src/ui/components/ShellModeIndicator.tsx

diff --git a/packages/cli/src/ui/App.tsx b/packages/cli/src/ui/App.tsx
index 3a747ae8..68933f10 100644
--- a/packages/cli/src/ui/App.tsx
+++ b/packages/cli/src/ui/App.tsx
@@ -16,6 +16,7 @@ import { useAutoAcceptIndicator } from './hooks/useAutoAcceptIndicator.js';
 import { Header } from './components/Header.js';
 import { LoadingIndicator } from './components/LoadingIndicator.js';
 import { AutoAcceptIndicator } from './components/AutoAcceptIndicator.js';
+import { ShellModeIndicator } from './components/ShellModeIndicator.js';
 import { EditorState, InputPrompt } from './components/InputPrompt.js';
 import { Footer } from './components/Footer.js';
 import { ThemeDialog } from './components/ThemeDialog.js';
@@ -352,7 +353,12 @@ export const App = ({
                   </Text>
                 </>
               </Box>
-              {showAutoAcceptIndicator && <AutoAcceptIndicator />}
+              <Box>
+                {showAutoAcceptIndicator && !shellModeActive && (
+                  <AutoAcceptIndicator />
+                )}
+                {shellModeActive && <ShellModeIndicator />}
+              </Box>
             </Box>
             {isInputActive && (
               <>
diff --git a/packages/cli/src/ui/components/ShellModeIndicator.tsx b/packages/cli/src/ui/components/ShellModeIndicator.tsx
new file mode 100644
index 00000000..e4147035
--- /dev/null
+++ b/packages/cli/src/ui/components/ShellModeIndicator.tsx
@@ -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>
+);