1  import { Command } from '../commands.js'
  2  import { PRODUCT_NAME } from '../constants/product.js'
  3  import * as React from 'react'
  4  import { Box, Text, useInput } from 'ink'
  5  import { getTheme } from '../utils/theme.js'
  6  import { PressEnterToContinue } from './PressEnterToContinue.js'
  7  
  8  export function Help({
  9    commands,
 10    onClose,
 11  }: {
 12    commands: Command[]
 13    onClose: () => void
 14  }): React.ReactNode {
 15    const theme = getTheme()
 16    const isInternal = process.env.USER_TYPE === 'ant'
 17    const moreHelp = isInternal
 18      ? '[ANT-ONLY] For more help: go/claude-cli or #claude-cli-feedback'
 19      : `Learn more at: ${MACRO.README_URL}`
 20  
 21    const filteredCommands = commands.filter(cmd => !cmd.isHidden)
 22    const [count, setCount] = React.useState(0)
 23  
 24    React.useEffect(() => {
 25      const timer = setTimeout(() => {
 26        if (count < 3) {
 27          setCount(count + 1)
 28        }
 29      }, 250)
 30  
 31      return () => clearTimeout(timer)
 32    }, [count])
 33  
 34    useInput((_, key) => {
 35      if (key.return) onClose()
 36    })
 37  
 38    return (
 39      <Box flexDirection="column" padding={1}>
 40        <Text bold color={theme.claude}>
 41          {`${PRODUCT_NAME} v${MACRO.VERSION}`}
 42        </Text>
 43  
 44        <Box marginTop={1} flexDirection="column">
 45          <Text>
 46            {PRODUCT_NAME} is a beta research preview. Always review Claude&apos;s
 47            responses, especially when running code. Claude has read access to
 48            files in the current directory and can run commands and edit files
 49            with your permission.
 50          </Text>
 51        </Box>
 52  
 53        {count >= 1 && (
 54          <Box flexDirection="column" marginTop={1}>
 55            <Text bold>Usage Modes:</Text>
 56            <Text>
 57              • REPL: <Text bold>claude</Text> (interactive session)
 58            </Text>
 59            <Text>
 60              • Non-interactive: <Text bold>claude -p &quot;question&quot;</Text>
 61            </Text>
 62            <Box marginTop={1}>
 63              <Text>
 64                Run <Text bold>claude -h</Text> for all command line options
 65              </Text>
 66            </Box>
 67          </Box>
 68        )}
 69  
 70        {count >= 2 && (
 71          <Box marginTop={1} flexDirection="column">
 72            <Text bold>Common Tasks:</Text>
 73            <Text>
 74              • Ask questions about your codebase{' '}
 75              <Text color={getTheme().secondaryText}>
 76                &gt; How does foo.py work?
 77              </Text>
 78            </Text>
 79            <Text>
 80              • Edit files{' '}
 81              <Text color={getTheme().secondaryText}>
 82                &gt; Update bar.ts to...
 83              </Text>
 84            </Text>
 85            <Text>
 86              • Fix errors{' '}
 87              <Text color={getTheme().secondaryText}>&gt; cargo build</Text>
 88            </Text>
 89            <Text>
 90              • Run commands{' '}
 91              <Text color={getTheme().secondaryText}>&gt; /help</Text>
 92            </Text>
 93            <Text>
 94              • Run bash commands{' '}
 95              <Text color={getTheme().secondaryText}>&gt; !ls</Text>
 96            </Text>
 97          </Box>
 98        )}
 99  
100        {count >= 3 && (
101          <Box marginTop={1} flexDirection="column">
102            <Text bold>Interactive Mode Commands:</Text>
103  
104            <Box flexDirection="column">
105              {filteredCommands.map((cmd, i) => (
106                <Box key={i} marginLeft={1}>
107                  <Text bold>{`/${cmd.name}`}</Text>
108                  <Text> - {cmd.description}</Text>
109                </Box>
110              ))}
111            </Box>
112          </Box>
113        )}
114  
115        <Box marginTop={1}>
116          <Text color={theme.secondaryText}>{moreHelp}</Text>
117        </Box>
118  
119        <Box marginTop={2}>
120          <PressEnterToContinue />
121        </Box>
122      </Box>
123    )
124  }