Move Intro to Help and only display after help command.

packages/cli/src/ui/App.tsx

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useCallback, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { Box, Static, Text, useStdout } from 'ink';
 import { StreamingState, type HistoryItem } from './types.js';
 import { useGeminiStream } from './hooks/useGeminiStream.js';
@@ -19,7 +19,7 @@ import { ThemeDialog } from './components/ThemeDialog.js';
 import { useStartupWarnings } from './hooks/useAppEffects.js';
 import { shortenPath, type Config } from '@gemini-code/server';
 import { Colors } from './colors.js';
-import { Intro } from './components/Intro.js';
+import { Help } from './components/Help.js';
 import { LoadedSettings } from '../config/settings.js';
 import { Tips } from './components/Tips.js';
 import { ConsoleOutput } from './components/ConsolePatcher.js';
@@ -37,6 +37,7 @@ interface AppProps {
 export const App = ({ config, settings, cliVersion }: AppProps) => {
   const [history, setHistory] = useState<HistoryItem[]>([]);
   const [startupWarnings, setStartupWarnings] = useState<string[]>([]);
+  const [showHelp, setShowHelp] = useState<boolean>(false);
   const {
     isThemeDialogOpen,
     openThemeDialog,
@@ -55,7 +56,13 @@ export const App = ({ config, settings, cliVersion }: AppProps) => {
     initError,
     debugMessage,
     slashCommands,
-  } = useGeminiStream(setHistory, refreshStatic, config, openThemeDialog);
+  } = useGeminiStream(
+    setHistory,
+    refreshStatic,
+    setShowHelp,
+    config,
+    openThemeDialog,
+  );
   const { elapsedTime, currentLoadingPhrase } =
     useLoadingIndicator(streamingState);
 
@@ -139,7 +146,6 @@ export const App = ({ config, settings, cliVersion }: AppProps) => {
               <Box flexDirection="column" key={'header-' + index}>
                 <Header />
                 <Tips />
-                <Intro commands={slashCommands} />
               </Box>
             );
           }
@@ -167,6 +173,8 @@ export const App = ({ config, settings, cliVersion }: AppProps) => {
         </Box>
       )}
 
+      {showHelp && <Help commands={slashCommands} />}
+
       {startupWarnings.length > 0 && (
         <Box
           borderStyle="round"

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

@@ -9,11 +9,11 @@ import { Box, Text } from 'ink';
 import { Colors } from '../colors.js';
 import { SlashCommand } from '../hooks/slashCommandProcessor.js';
 
-interface Intro {
+interface Help {
   commands: SlashCommand[];
 }
 
-export const Intro: React.FC<Intro> = ({ commands }) => (
+export const Help: React.FC<Help> = ({ commands }) => (
   <Box flexDirection="column" marginBottom={1}>
     <Text bold color={Colors.Foreground}>
       Abilities:

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

@@ -29,6 +29,7 @@ const addHistoryItem = (
 export const useSlashCommandProcessor = (
   setHistory: React.Dispatch<React.SetStateAction<HistoryItem[]>>,
   refreshStatic: () => void,
+  setShowHelp: React.Dispatch<React.SetStateAction<boolean>>,
   setDebugMessage: React.Dispatch<React.SetStateAction<string>>,
   getNextMessageId: (baseTimestamp: number) => number,
   openThemeDialog: () => void,
@@ -38,15 +39,8 @@ export const useSlashCommandProcessor = (
       name: 'help',
       description: 'for help on gemini-code',
       action: (_value: PartListUnion) => {
-        const helpText =
+        setDebugMessage('Opening help.');
-          'I am an interactive CLI tool assistant designed to ' +
+        setShowHelp(true);
-          'help with software engineering tasks. I can use tools to read ' +
-          'and write files, search code, execute bash commands, and more ' +
-          'to assist with development workflows. I will explain commands ' +
-          'and ask for permission before running them and will not ' +
-          'commit changes unless explicitly instructed.';
-        const timestamp = getNextMessageId(Date.now());
-        addHistoryItem(setHistory, { type: 'info', text: helpText }, timestamp);
       },
     },
     {

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

@@ -48,6 +48,7 @@ const addHistoryItem = (
 export const useGeminiStream = (
   setHistory: React.Dispatch<React.SetStateAction<HistoryItem[]>>,
   refreshStatic: () => void,
+  setShowHelp: React.Dispatch<React.SetStateAction<boolean>>,
   config: Config,
   openThemeDialog: () => void,
 ) => {
@@ -74,6 +75,7 @@ export const useGeminiStream = (
   const { handleSlashCommand, slashCommands } = useSlashCommandProcessor(
     setHistory,
     refreshStatic,
+    setShowHelp,
     setDebugMessage,
     getNextMessageId,
     openThemeDialog,
@@ -154,6 +156,8 @@ export const useGeminiStream = (
       messageIdCounterRef.current = 0; // Reset counter for this new submission
       let queryToSendToGemini: PartListUnion | null = null;
 
+      setShowHelp(false);
+
       if (typeof query === 'string') {
         const trimmedQuery = query.trim();
         setDebugMessage(`User query: '${trimmedQuery}'`);