54 lines
1.7 KiB
TypeScript
54 lines
1.7 KiB
TypeScript
import figures from 'figures'
|
|
import React from 'react'
|
|
import { GITHUB_ACTION_SETUP_DOCS_URL } from '../../constants/github-app.js'
|
|
import { Box, Text } from '@anthropic/ink'
|
|
import { useKeybinding } from '../../keybindings/useKeybinding.js'
|
|
|
|
interface InstallAppStepProps {
|
|
repoUrl: string
|
|
onSubmit: () => void
|
|
}
|
|
|
|
export function InstallAppStep({ repoUrl, onSubmit }: InstallAppStepProps) {
|
|
// Enter to submit
|
|
useKeybinding('confirm:yes', onSubmit, { context: 'Confirmation' })
|
|
|
|
return (
|
|
<Box flexDirection="column" borderStyle="round" borderDimColor paddingX={1}>
|
|
<Box flexDirection="column" marginBottom={1}>
|
|
<Text bold>Install the Claude GitHub App</Text>
|
|
</Box>
|
|
<Box marginBottom={1}>
|
|
<Text>Opening browser to install the Claude GitHub App…</Text>
|
|
</Box>
|
|
<Box marginBottom={1}>
|
|
<Text>If your browser doesn't open automatically, visit:</Text>
|
|
</Box>
|
|
<Box marginBottom={1}>
|
|
<Text underline>https://github.com/apps/claude</Text>
|
|
</Box>
|
|
<Box marginBottom={1}>
|
|
<Text>
|
|
Please install the app for repository: <Text bold>{repoUrl}</Text>
|
|
</Text>
|
|
</Box>
|
|
<Box marginBottom={1}>
|
|
<Text dimColor>
|
|
Important: Make sure to grant access to this specific repository
|
|
</Text>
|
|
</Box>
|
|
<Box>
|
|
<Text bold color="permission">
|
|
Press Enter once you've installed the app{figures.ellipsis}
|
|
</Text>
|
|
</Box>
|
|
<Box marginTop={1}>
|
|
<Text dimColor>
|
|
Having trouble? See manual setup instructions at:{' '}
|
|
<Text color="claude">{GITHUB_ACTION_SETUP_DOCS_URL}</Text>
|
|
</Text>
|
|
</Box>
|
|
</Box>
|
|
)
|
|
}
|