1  import { Box, Text, useInput } from 'ink'
 2  import React from 'react'
 3  import { Select } from './CustomSelect/index.js'
 4  import { getTheme } from '../utils/theme.js'
 5  import Link from './Link.js'
 6  
 7  interface Props {
 8    onDone: () => void
 9  }
10  
11  export function CostThresholdDialog({ onDone }: Props): React.ReactNode {
12    // Handle Ctrl+C, Ctrl+D and Esc
13    useInput((input, key) => {
14      if ((key.ctrl && (input === 'c' || input === 'd')) || key.escape) {
15        onDone()
16      }
17    })
18  
19    return (
20      <Box
21        flexDirection="column"
22        borderStyle="round"
23        padding={1}
24        borderColor={getTheme().secondaryBorder}
25      >
26        <Box marginBottom={1} flexDirection="column">
27          <Text bold>
28            You&apos;ve spent $5 on the Anthropic API this session.
29          </Text>
30          <Text>Learn more about how to monitor your spending:</Text>
31          <Link url="https://docs.anthropic.com/s/claude-code-cost" />
32        </Box>
33        <Box>
34          <Select
35            options={[
36              {
37                value: 'ok',
38                label: 'Got it, thanks!',
39              },
40            ]}
41            onChange={onDone}
42          />
43        </Box>
44      </Box>
45    )
46  }