Function BuildModeButtons

cli/src/components/build-mode-buttons.tsx:10–110

({
  theme,
  onBuildFast,
  onBuildMax,
  onBuildLite,
}: {
  theme: ChatTheme
  onBuildFast: () => void
  onBuildMax: () => void
  onBuildLite: () => void
})

import type { ChatTheme } from '../types/theme-system'

export const BuildModeButtons = ({
  theme,
  onBuildFast,
  onBuildMax,
  onBuildLite,
}: {
  theme: ChatTheme
  onBuildFast: () => void
  onBuildMax: () => void
  onBuildLite: () => void
}) => {
  if (IS_FREEBUFF) return null

  const [hoveredButton, setHoveredButton] = useState<'fast' | 'max' | 'lite' | null>(
    null,
  )
  const { width } = useTerminalLayout()
  const isNarrow = width.is('xs')

  return (
    <box
      style={{
        flexDirection: 'column',
        gap: 0,
        paddingTop: 0,
        paddingBottom: 0,
        paddingLeft: 1,
      }}
    >
      {isNarrow ? null : (
        <text style={{ wrapMode: 'none' }} selectable={false}>
          <span fg={theme.secondary}>Choose an option to build this plan:</span>
        </text>
      )}
      <box
        style={{
          flexDirection: 'row',
          gap: 1,
        }}
      >
        <Button
          style={{
            flexDirection: 'row',
            alignItems: 'center',
            paddingLeft: 2,
            paddingRight: 2,
            borderStyle: 'single',
            borderColor:
              hoveredButton === 'fast' ? theme.foreground : theme.secondary,
            customBorderChars: BORDER_CHARS,
          }}
          onClick={onBuildFast}
          onMouseOver={() => setHoveredButton('fast')}
          onMouseOut={() => setHoveredButton(null)}
        >
          <text wrapMode="none">
            <span fg={theme.foreground}>Build DEFAULT</span>
          </text>