feat(cli): Introduce toggleable shell mode with enhanced UI

- Implements a toggleable shell mode, removing the need to prefix every command with `!`.
- Users can now enter and exit shell mode by typing `!` as the first character in an empty input prompt.
- The input prompt visually indicates active shell mode with a distinct color and `! ` prefix.
- Shell command history items (`user_shell`) are now visually differentiated from regular user messages.
- This provides a cleaner and more streamlined user experience for frequent shell interactions.

Fixes https://b.corp.google.com/issues/418509745

1 files changed, 11 insertions, 2 deletions

diff --git a/packages/cli/src/ui/App.tsx b/packages/cli/src/ui/App.tsx
index eb34fb87..3a747ae8 100644
--- a/packages/cli/src/ui/App.tsx
+++ b/packages/cli/src/ui/App.tsx
@@ -61,6 +61,7 @@ export const App = ({
   const [themeError, setThemeError] = useState<string | null>(null);
   const [footerHeight, setFooterHeight] = useState<number>(0);
   const [corgiMode, setCorgiMode] = useState(false);
+  const [shellModeActive, setShellModeActive] = useState(false);
 
   const toggleCorgiMode = useCallback(() => {
     setCorgiMode((prev) => !prev);
@@ -152,10 +153,16 @@ export const App = ({
     (submittedValue: string) => {
       const trimmedValue = submittedValue.trim();
       if (trimmedValue.length > 0) {
-        submitQuery(submittedValue);
+        if (shellModeActive && !trimmedValue.startsWith('!')) {
+          // TODO: Don't prefix (hack) and properly submit pass throughs to a dedicated hook:
+          // https://b.corp.google.com/issues/418509745
+          submitQuery(`!${trimmedValue}`);
+        } else {
+          submitQuery(trimmedValue);
+        }
       }
     },
-    [submitQuery],
+    [submitQuery, shellModeActive],
   );
 
   const userMessages = useMemo(
@@ -364,6 +371,8 @@ export const App = ({
                   resetCompletion={completion.resetCompletionState}
                   setEditorState={setEditorState}
                   onClearScreen={handleClearScreen} // Added onClearScreen prop
+                  shellModeActive={shellModeActive}
+                  setShellModeActive={setShellModeActive}
                 />
                 {completion.showSuggestions && (
                   <Box>