Introduce a small easter egg. Woof. (#412)

Also changes auto-completion and /help to skip over slash commands that don't contain a description to avoid spoiling the surprise.

packages/cli/src/ui/App.tsx

@@ -58,6 +58,12 @@ export const App = ({
   const [showHelp, setShowHelp] = useState<boolean>(false);
   const [themeError, setThemeError] = useState<string | null>(null);
   const [footerHeight, setFooterHeight] = useState<number>(0);
+  const [corgiMode, setCorgiMode] = useState(false);
+
+  const toggleCorgiMode = useCallback(() => {
+    setCorgiMode((prev) => !prev);
+  }, []);
+
   const {
     isThemeDialogOpen,
     openThemeDialog,
@@ -124,6 +130,7 @@ export const App = ({
     setDebugMessage,
     openThemeDialog,
     performMemoryRefresh,
+    toggleCorgiMode,
   );
 
   const { streamingState, submitQuery, initError, pendingHistoryItem } =
@@ -408,6 +415,7 @@ export const App = ({
           debugMessage={debugMessage}
           cliVersion={cliVersion}
           geminiMdFileCount={geminiMdFileCount}
+          corgiMode={corgiMode}
         />
         <ConsoleOutput debugMode={config.getDebugMode()} />
       </Box>

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

@@ -15,6 +15,7 @@ interface FooterProps {
   debugMessage: string;
   cliVersion: string;
   geminiMdFileCount: number;
+  corgiMode: boolean;
 }
 
 export const Footer: React.FC<FooterProps> = ({
@@ -23,6 +24,7 @@ export const Footer: React.FC<FooterProps> = ({
   debugMessage,
   cliVersion,
   geminiMdFileCount,
+  corgiMode,
 }) => (
   <Box marginTop={1}>
     <Box>
@@ -62,6 +64,16 @@ export const Footer: React.FC<FooterProps> = ({
     <Box>
       <Text color={Colors.AccentBlue}> {config.getModel()} </Text>
       <Text color={Colors.SubtleComment}>| CLI {cliVersion} </Text>
+      {corgiMode && (
+        <Text>
+          <Text color={Colors.SubtleComment}>| </Text>
+          <Text color={Colors.AccentRed}>▼</Text>
+          <Text color={Colors.Foreground}>(´</Text>
+          <Text color={Colors.AccentRed}>ᴥ</Text>
+          <Text color={Colors.Foreground}>`)</Text>
+          <Text color={Colors.AccentRed}>▼ </Text>
+        </Text>
+      )}
     </Box>
   </Box>
 );

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

@@ -28,7 +28,9 @@ export const Help: React.FC<Help> = ({ commands }) => (
     <Text bold color={Colors.Foreground}>
       Commands:
     </Text>
-    {commands.map((command: SlashCommand) => (
+    {commands
+      .filter((command) => command.description)
+      .map((command: SlashCommand) => (
         <Text key={command.name} color={Colors.SubtleComment}>
           <Text bold color={Colors.AccentPurple}>
             {' '}

packages/cli/src/ui/hooks/slashCommandProcessor.test.ts

@@ -48,6 +48,7 @@ describe('useSlashCommandProcessor', () => {
   let mockOpenThemeDialog: ReturnType<typeof vi.fn>;
   let mockPerformMemoryRefresh: ReturnType<typeof vi.fn>;
   let mockConfig: Config;
+  let mockCorgiMode: ReturnType<typeof vi.fn>;
 
   beforeEach(() => {
     mockAddItem = vi.fn();
@@ -58,6 +59,7 @@ describe('useSlashCommandProcessor', () => {
     mockOpenThemeDialog = vi.fn();
     mockPerformMemoryRefresh = vi.fn().mockResolvedValue(undefined);
     mockConfig = { getDebugMode: vi.fn(() => false) } as unknown as Config;
+    mockCorgiMode = vi.fn();
 
     // Clear mocks for fsPromises if they were used directly or indirectly
     vi.mocked(fsPromises.readFile).mockClear();
@@ -89,6 +91,7 @@ describe('useSlashCommandProcessor', () => {
         mockOnDebugMessage,
         mockOpenThemeDialog,
         mockPerformMemoryRefresh,
+        mockCorgiMode,
       ),
     );
     return result.current;

packages/cli/src/ui/hooks/slashCommandProcessor.ts

@@ -15,7 +15,7 @@ import { addMemoryEntry } from '../../config/memoryUtils.js';
 export interface SlashCommand {
   name: string;
   altName?: string;
-  description: string;
+  description?: string;
   action: (mainCommand: string, subCommand?: string, args?: string) => void;
 }
 
@@ -31,6 +31,7 @@ export const useSlashCommandProcessor = (
   onDebugMessage: (message: string) => void,
   openThemeDialog: () => void,
   performMemoryRefresh: () => Promise<void>, // Add performMemoryRefresh prop
+  toggleCorgiMode: () => void,
 ) => {
   const addMessage = useCallback(
     (message: Message) => {
@@ -131,6 +132,12 @@ export const useSlashCommandProcessor = (
           }
         },
       },
+      {
+        name: 'corgi',
+        action: (_mainCommand, _subCommand, _args) => {
+          toggleCorgiMode();
+        },
+      },
       {
         name: 'quit',
         altName: 'exit',
@@ -151,6 +158,7 @@ export const useSlashCommandProcessor = (
       showMemoryAction,
       addMemoryAction,
       addMessage,
+      toggleCorgiMode,
     ],
   );
 

packages/cli/src/ui/hooks/useCompletion.ts

@@ -142,6 +142,7 @@ export function useCompletion(
             (altNameMatch && cmd.altName && cmd.altName.length > 1)
           );
         })
+        .filter((cmd) => cmd.description)
         .map((cmd) => ({
           label: cmd.name, // Always show the main name as label
           value: cmd.name, // Value should be the main command name for execution